HomePhabricator
Diffusion Comm b7c33bebab8b

[web] Add `shortenAddressToFitWidth` to `ConnectedWalletInfo`

Tags
None
Referenced Files
F367245: 1ad633.png
Feb 7 2023, 8:56 AM
File Not Attached
F367241: 5af608.png
Feb 7 2023, 8:56 AM
File Not Attached
F367240: e7fd6f.png
Feb 7 2023, 8:56 AM
File Not Attached
F367239: 0f0794.png
Feb 7 2023, 8:56 AM
File Not Attached
Subscribers
None

Description

[web] Add shortenAddressToFitWidth to ConnectedWalletInfo

Summary:
We want to shorten addresses and long ENS names to fit within ConnectedWalletInfo. Similar to the RainbowKit ConnectButton, we add an ellipsis in the middle of the string if it's too long and display 10 characters of the prefix and suffix. We show the full address on hover so the user can check the full address (which RainbowKit doesn't do, but figured it doesn't hurt).


Depends on D6633

Test Plan:
Here's what it looks like in various scenarios:

0f0794.png (1×886 px, 164 KB)

e7fd6f.png (1×882 px, 141 KB)

5af608.png (1×890 px, 149 KB)

1ad633.png (1×888 px, 141 KB)

Reviewers: ashoat, tomek, ginsu, rohan

Reviewed By: ashoat

Differential Revision: https://phab.comm.dev/D6635

Details

Provenance
atulAuthored on Feb 7 2023, 8:52 AM
Reviewer
ashoat
Differential Revision
D6635: [web] Add `shortenAddressToFitWidth` to `ConnectedWalletInfo`
Parents
rCOMM8a92a8829f5a: [web] Open RainbowKit `AccountModal` when `ConnectedWalletInfo` is clicked
Branches
Unknown
Tags
Unknown