issue: Minor visual oddness

[tjayrush]

Is there an existing issue for this?

• I have looked through the existing issues

Which method was used to setup Scaffold-ETH 2 ?

git clone

Current Behavior

I see two different ways to display an address using 2, 3, or 4 characters in a somewhat random way.

Expected Behavior

Why not be consistent using always four, always three, or always two on either side of the elipses? I know it's anal retentive, but that's my speciality.

Steps To Reproduce

Look

Anything else?

No response

[carletex]

Thanks for this @tjayrush

Yes! I'm definitely up for having consistency on shortened addresses. I think we should do 4...4 or 3...3.

Thoughts?

cc @rin-st @technophile-04 @Pabl0cks

[Pabl0cks]

Yes! I'm definitely up for having consistency on shortened addresses. I think we should do 4...4 or 3...3.

Checking most popular dApps 4...4 seems to be the most common pattern, so I would go for it 🙌

[technophile-04]

Checking most popular dApps 4...4 seems to be the most common pattern, so I would go for it 🙌

++, yup 4...4 looks good to me !

@tjayrush would you want to draft PR to handle this?

[tjayrush]

How many places would it have to change, do you think? Can you give me a few pointers to get started?

[carletex]

How many places would it have to change, do you think? Can you give me a few pointers to get started?

I can think of two places:

1. The main one would be in packages/nextjs/components/scaffold-eth/Address.tsx
2. And somewhere in packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton for the top right wallet.

Thank you! :) Feel free to ask for any guidance.

[tjayrush]

Okay. So it's very obvious what to change on this line:

https://github.com/scaffold-eth/scaffold-eth-2/blob/main/packages/nextjs/components/scaffold-eth/Address.tsx#L75

  let displayAddress = address?.slice(0, 5) + "..." + address?.slice(-4);

(change .slice(0, 5) to .slice(0, 6).

But I can't seem to figure out the other change (I'm not very good at Javascript).

I think it's related to this line:

https://github.com/scaffold-eth/scaffold-eth-2/blob/main/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx#L55

But I can't really figure out where that comes from.

[technophile-04]

scaffold-eth-2/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx

Line 50 in 7c34f62

<span className="ml-2 mr-1">{displayName}</span>

displayName actually comes from Rainbowkit which can be 0x{2 digit}...{4digit} or ens Name if the address has one

So we can do here something like :

<span className="ml-2 mr-1">
  {isENS(displayName) ? displayName : address?.slice(0, 6) + "..." + address?.slice(-4)}
</span>

We already have isENS util present

[tjayrush]

PR created. Thanks for your help. That was pretty easy.

[technophile-04]

Closing this fixed at #734