can we add a className to these spans so that the scss can target them by a classname and not by an element type? Hopefully, that would lead to more easily understanding of the CSS when coming back to it/new dev onboarding.

Done in e3841a2

Is iconUrl on tokens something added by swaps or did that exist prior?

It's part of swaps tokens, but not other tokens in the app. You can see it on the objects returned by https://api.metaswap.codefi.network/tokens

This will expose the user's IP address to the server hosting the token icon URL. This is why we bundle the icon with the extension for the list we have now

So this is a pre-existing, but... it looks like the amount here is being manually ellipsed, and then we're using JavaScript to create a tooltip for the full value.

The browser is already much better at this than we are. We could instead use text-overflow: ellipsis; for the ellipses, and use the HTML title attribute for the tooltip. This would be faster, simpler, and more accessible. Was this option considered and ruled out for some reason?

So this is partly a left over of the previous designs, that had a symbol on the same line as the amount. Doing this with javascript was done for two reasons. First, toproperly control spacing between the amount and the symbol, and the width of each, adding the ellipsis with javascript with necessary. (This is related to trailing space that comes with an ellipsis, but moreover that width has to be constrained with px for ellipsis to work)

Now that the designs have changed, those issues are no longer present. But the second problem is that the designs want the same amount of vertical space between the destination symbol (eth in your screenshots) and the amount. The designs also call for different font sizes depending on the length of the string. When font size changes, the line-height changes, and line height adds extra space above the font. The amount of extra space it adds increase with line height. We address that issue by setting the line height for each font size with javascript. And if line height is set small enough relative to font-size, then the overflow: hidden property required for text-overflow: ellipsis to work will vertically cut off some of the text

(fyi, here is an article that discusses the issues with line-height: https://css-tricks.com/how-to-tame-line-height-in-css/, here is the approach they recommend, which also requires javascript manipulation of the line-height and related properties https://github.com/michaeltaranto/basekick/blob/master/index.js... I am not sure if we can do any better in that regard)

The height adjustment seems independent of the length though. I understand that we'll have to use JavaScript to adjust the height as content changes, but I think we could still use CSS/HTML for the ellipsis and tooltip. Or am I misunderstanding something still?

You might be missing something, or maybe I am...

And if line height is set small enough relative to font-size, then the overflow: hidden property required for text-overflow: ellipsis to work will vertically cut off some of the text

So for ellipsis to work, we have to set overflow: hidden, and if we do that, we hide part of the font that is outside the boundaries of the small line height we set

unless maybe if we manipulate the height of the container as well...

Ah, that explains it. I had mistakenly thought you were saying that the height of the container was already being manipulated, but it is not.

I do thing we'd be better off making this improvement but it can wait for a future PR