Display icon next to balance in the pop up or remove it if it cannot be displayed properly

[MoritzKa]

Describe the bug

The (bee?) icon is not displayed properly on Chrome (Windows)

Screenshots of the changes [optional]

To Reproduce

Steps to reproduce the behavior:

1. Open the extension
2. Select an Alby account

Expected behavior

a properly displayed icon or no icon at all

Alby information

• Alby Version: [e.g. 1.5.0]
• Alby installed through [e.g. installed through the browser stores, installed manually]
• Wallet connected with Alby [e.g. LND, BlueWallet LNDhub]

Device information [optional]

• OS: Windows
• Browser: Chrome and Firefox
• Browser Version: Chrome Version 105.0.5195.127

Are you working on this issue?

No

[MoritzKa]

not super urgent. but fix should be quick anyway.

[bumi]

finally somebody reports that. this has been there forever :) it is because we cut off the emoji (which comes from the alby lnd node alias) in the middle. - substr is not utf8 aware.

[rottingcleaner]

LNbits works great.

[escapedcat]

@rottingcleaner that name is short enough ;) This i.e. looks bad:

If it's longer it will break, because we use substring:
https://github.com/getAlby/lightning-browser-extension/blob/master/src/app/components/AccountMenu/index.tsx/#L40

I think this should be handled via CSS (ellipsis) instead of JS cutting of the string hard.

[rottingcleaner]

@escapedcat I saw the line, then tested with my LNbits account and it was fine ;)

A CSS solution is a better way to cut the title on this place.