Page MenuHomePhabricator
Differential D6635

[web] Add `shortenAddressToFitWidth` to `ConnectedWalletInfo`
ClosedPublic
Actions

Authored by atul on Feb 6 2023, 12:39 PM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Apr 19, 8:14 AM
Unknown Object (File)
Wed, Apr 17, 5:53 AM
Unknown Object (File)
Wed, Apr 17, 5:53 AM
Unknown Object (File)
Wed, Apr 17, 5:53 AM
Unknown Object (File)
Wed, Apr 17, 5:53 AM
Unknown Object (File)
Wed, Apr 17, 5:52 AM
Unknown Object (File)
Thu, Apr 11, 5:01 AM
Unknown Object (File)
Feb 28 2024, 10:51 PM
View All 31 Files
Subscribers
None

Details

Reviewers
ashoat
tomek
ginsu
rohan
Commits
rCOMMb7c33bebab8b: [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)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Feb 6 2023, 12:39 PM
atul published this revision for review.Feb 6 2023, 12:40 PM
atul added inline comments.
web/account/connected-wallet-info.react.js
12 ↗(On Diff #22153)

(This function is very much about fitting address within ConnectedWalletInfo so I thought it made sense to define in this file rather than some utils file.)

atul edited the test plan for this revision. (Show Details)Feb 6 2023, 12:40 PM
Harbormaster completed remote builds in B16189: Diff 22153.Feb 6 2023, 12:53 PM
atul edited the summary of this revision. (Show Details)Feb 6 2023, 12:59 PM
atul mentioned this in D6636: [web] Replace RainbowKit `ConnectButton` with `ConnectedWalletInfo`.
atul added reviewers: ginsu, rohan.
atul added a child revision: D6636: [web] Replace RainbowKit `ConnectButton` with `ConnectedWalletInfo`.Feb 6 2023, 5:54 PM
atul edited the summary of this revision. (Show Details)
atul added a parent revision: D6633: [web] Open RainbowKit `AccountModal` when `ConnectedWalletInfo` is clicked.
ashoat accepted this revision.Feb 6 2023, 5:55 PM
This revision is now accepted and ready to land.Feb 6 2023, 5:55 PM
atul updated this revision to Diff 22193.Feb 7 2023, 8:52 AM

rebase + land

This revision was landed with ongoing or failed builds.Feb 7 2023, 8:56 AM
Closed by commit rCOMMb7c33bebab8b: [web] Add `shortenAddressToFitWidth` to `ConnectedWalletInfo` (authored by atul). · Explain Why
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMMb7c33bebab8b: [web] Add `shortenAddressToFitWidth` to `ConnectedWalletInfo`.
Harbormaster completed remote builds in B16227: Diff 22193.Feb 7 2023, 9:08 AM

Revision Contents
Changeset List

PathSize
web/
account/
11 lines

Diff 22194

View Options

web/account/connected-wallet-info.react.js

Loading...