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)
Mon, Nov 11, 12:14 AM
Unknown Object (File)
Sun, Nov 10, 11:54 PM
Unknown Object (File)
Sun, Nov 10, 11:49 PM
Unknown Object (File)
Sun, Nov 10, 8:03 PM
Unknown Object (File)
Sun, Nov 10, 1:50 PM
Unknown Object (File)
Wed, Oct 30, 2:51 AM
Unknown Object (File)
Sep 29 2024, 10:32 PM
Unknown Object (File)
Sep 29 2024, 5:50 PM
View All 65 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...