address component showBoth prop #924

technophile-04 · 2024-09-04T17:26:54Z

Description:

Fixes #915, but instead of keeping it default we enable it with showBoth prop (We can go with it being default too!, I am completely 50 50 on it so both seems good solution)

Test code :

"use client";

import type { NextPage } from "next";
import { Address } from "~~/components/scaffold-eth";

const Home: NextPage = () => {
  const demoAddress = "0x34aA3F359A9D614239015126635CE7732c18fDF3";

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-5">
        <div className="px-5">
          <div className="mb-12">
            <h2 className="text-center text-3xl font-bold mb-4">Address Component Showcase</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-xl font-semibold mb-2">Without showBoth</h3>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xs</p>
                  <Address size="xs" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: sm</p>
                  <Address size="sm" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: base(default)</p>
                  <Address size="base" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: lg</p>
                  <Address size="lg" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xl</p>
                  <Address size="xl" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 2xl</p>
                  <Address size="2xl" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 3xl</p>
                  <Address size="3xl" address={demoAddress} />
                </div>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">With showBoth</h3>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xs(default)</p>
                  <Address size="xs" address={demoAddress} showBoth />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: sm</p>
                  <Address size="sm" address={demoAddress} showBoth />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: base</p>
                  <Address size="base" address={demoAddress} showBoth />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: lg</p>
                  <Address size="lg" address={demoAddress} showBoth />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xl</p>
                  <Address size="xl" address={demoAddress} showBoth />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 2xl</p>
                  <Address size="2xl" address={demoAddress} showBoth />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 3xl</p>
                  <Address size="3xl" address={demoAddress} showBoth />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home;

// dynamic: --------------------------
/* const Home: NextPage = () => {
  const demoAddress = "0x34aA3F359A9D614239015126635CE7732c18fDF3";
  const sizes: ("xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl")[] = ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"];

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-5">
        <div className="px-5">
          <div className="mb-12">
            <h2 className="text-center text-3xl font-bold mb-4">Address Component Showcase</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-xl font-semibold mb-2">Without showBoth</h3>
                {sizes.map(size => (
                  <div key={size} className="mb-4">
                    <p className="text-sm mb-1">Size: {size}</p>
                    <Address size={size} address={demoAddress} />
                  </div>
                ))}
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">With showBoth</h3>
                {sizes.map(size => (
                  <div key={size} className="mb-4">
                    <p className="text-sm mb-1">Size: {size}</p>
                    <Address size={size} address={demoAddress} showBoth />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home; */

technophile-04 · 2024-09-04T17:33:17Z

Also fixed the size of Copy Icon not being displayed properly in our original address component:

Main branch	this branch

Notice in this branch the size of copyIcon is responsive with respect to text size as compared to main branch

packages/nextjs/components/scaffold-eth/index.tsx

rin-st

Great updates and thank you for test code!

I added some comments

And one more nit: when loading with showBoth option component jumps a bit. It will cause to jump everything beyond the component. See also: https://web.dev/articles/cls

Screen.Recording.2024-09-05.at.11.18.28.mov

packages/nextjs/components/scaffold-eth/Address/Address.tsx

technophile-04 · 2024-09-07T13:49:45Z

Thanks Rinat and Damu for review! pushed some commits.

And one more nit: when loading with showBoth option component jumps a bit. It will cause to jump everything beyond the component. See also: https://web.dev/articles/cls

Yeah I wan't sure how best we could fix the layout shift, but I added currently the skeleton for now :

Screen.Recording.2024-09-07.at.7.16.54.PM.mov

So if the address has ENS we show skeleton until fetching and then ens name instead of it. But if the ENS name is not present we fallback to normal address component(without showBoth)

rin-st · 2024-09-07T15:28:10Z

Good changes, thanks!

Updated a bit:

added 4xl size, so font-size on showBoth 3xl differs from showBoth 2xl
added possibility to use format="long" with showBoth
removed old useEffects which caused small jump

Screen.Recording.2024-09-07.at.18.26.55.mov

rin-st

Lgtm!

rin-st · 2024-09-07T15:41:50Z

Yeah I wan't sure how best we could fix the layout shift, but I added currently the skeleton for now :
So if the address has ENS we show skeleton until fetching and then ens name instead of it. But if the ENS name is not present we fallback to normal address component(without showBoth)

I think it's a good solution! I thought about something like fixing height of component, but it will add empty space around, when showBoth is false. So I thing it's ok for now

technophile-04 · 2024-09-09T05:02:14Z

Updated a bit:

added 4xl size, so font-size on showBoth 3xl differs from showBoth 2xl

added possibility to use format="long" with showBoth

removed old useEffects which caused small jump

Thanks @rin-st makes sense!

carletex · 2024-09-09T16:17:55Z

This looks great @technophile-04 !! <3

The only thing that does not quite convince me is the showBoth prop. It's a bit vague. Not a big deal, but let me open some options:

hideAddress - hideAddressIfEns / showAddress or showAddressIfEns: depending on the default.
full / compact: depending on the default. We already have the long / short so it might be a bit confusing (I've never used the long format btw)

IDK, just throwing it out there..... Happy to merge as it's too.

damianmarti · 2024-09-09T16:38:51Z

This looks great @technophile-04 !! <3

The only thing that does not quite convince me is the showBoth prop. It's a bit vague. Not a big deal, but let me open some options:

hideAddress - hideAddressIfEns / showAddress or showAddressIfEns: depending on the default.

full / compact: depending on the default. We already have the long / short so it might be a bit confusing (I've never used the long format btw)

IDK, just throwing it out there..... Happy to merge as it's too.

Maybe something more explicit like showAddressAndEns?

rin-st · 2024-09-11T11:12:58Z

This looks great @technophile-04 !! <3

The only thing that does not quite convince me is the showBoth prop. It's a bit vague. Not a big deal, but let me open some options:

hideAddress - hideAddressIfEns / showAddress or showAddressIfEns: depending on the default.

full / compact: depending on the default. We already have the long / short so it might be a bit confusing (I've never used the long format btw)

IDK, just throwing it out there..... Happy to merge as it's too.

hmm, in #911 Austin said

if it has an ens, show that as the main info, but always show the address too (shortened by removing most middle characters)

So looks like we don't need all that props and showBoth too. Show both if we can and just address if no ens.

But we have format="long" in AddressQRCodeModal and TransactionComp so it will change

technophile-04 · 2024-09-13T09:24:53Z

Just pushed a changes removing showBoth prop and now using onlyEnsOrAddress. Hence now showing ENS + Address as default.

When you pass onlyEnsOrAddress we get the same behaviour as current main brach.

Here is the behaviour for default thing <Address address={demoAddress} />

This will show all three things (loading skeleton as placeholder for ENS name while loading)
If there is not ENS for that address then it fallbacks only blockie with address (same size as main branch)

Case 1 demo address as has ENS :

Screen.Recording.2024-09-13.at.2.49.34.PM.mov

Case 2 Demo :

Now here there will be a layout shift. The layout won't be that much visible if you don't pass any size eg: <Address address={demoAddress} />. But if you pass higher sizes then layout shift is more visible since when 3 three things are shown we want to scale blockie to 4th step and when no ens is present we want to decrease it size.

Screen.Recording.2024-09-13.at.2.49.56.PM.mov

here is example test code :

"use client";

import type { NextPage } from "next";
import { Address } from "~~/components/scaffold-eth";

const Home: NextPage = () => {
  // address without ENS
  // const demoAddress = "0x4e123738A66427ee9BD0C9dc67C09af397A7D93e";

  // atg.eth address
  const demoAddress = "0x34aA3F359A9D614239015126635CE7732c18fDF3";

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-5">
        <div className="px-5">
          <div className="mb-12">
            <h2 className="text-center text-3xl font-bold mb-4">Address Component Showcase</h2>
            <div className="w-full flex items-center justify-center mb-10">
              <Address address={demoAddress} />
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-xl font-semibold mb-2">Only Address or ENS</h3>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xs</p>
                  <Address size="xs" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: sm</p>
                  <Address size="sm" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: base(default)</p>
                  <Address size="base" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: lg</p>
                  <Address size="lg" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xl</p>
                  <Address size="xl" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 2xl</p>
                  <Address size="2xl" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 3xl</p>
                  <Address size="3xl" address={demoAddress} onlyEnsOrAddress />
                </div>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Default Address Behaviour</h3>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xs(default)</p>
                  <Address size="xs" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: sm</p>
                  <Address size="sm" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: base</p>
                  <Address size="base" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: lg</p>
                  <Address size="lg" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xl</p>
                  <Address size="xl" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 2xl</p>
                  <Address size="2xl" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 3xl</p>
                  <Address size="3xl" address={demoAddress} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home;

// dynamic: --------------------------
/* const Home: NextPage = () => {
  const demoAddress = "0x34aA3F359A9D614239015126635CE7732c18fDF3";
  const sizes: ("xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl")[] = ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"];

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-5">
        <div className="px-5">
          <div className="mb-12">
            <h2 className="text-center text-3xl font-bold mb-4">Address Component Showcase</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-xl font-semibold mb-2">Without showBoth</h3>
                {sizes.map(size => (
                  <div key={size} className="mb-4">
                    <p className="text-sm mb-1">Size: {size}</p>
                    <Address size={size} address={demoAddress} />
                  </div>
                ))}
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">With showBoth</h3>
                {sizes.map(size => (
                  <div key={size} className="mb-4">
                    <p className="text-sm mb-1">Size: {size}</p>
                    <Address size={size} address={demoAddress} showBoth />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home; */

rin-st · 2024-09-13T11:15:48Z

Great, thanks!

One more nit: after 8df4dbc Address component without size prop (default) has different font-sizes for address when loading and when loaded, but if size is passed it has same font-size. As I understand we need to decrease font-size everywhere when loading or not decrease at all

Screen.Recording.2024-09-13.at.14.11.46.mov

…onent-update

rin-st · 2024-09-17T20:26:45Z

One more nit: after 8df4dbc Address component without size prop (default) has different font-sizes for address when loading and when loaded, but if size is passed it has same font-size. As I understand we need to decrease font-size everywhere when loading or not decrease at all

I played with it (a lot) and as I understand we have two options.

Use the same address font size with onlyEnsOrAddress prop and without it.

Pros: Readable text
Cons: Big layout shift, big height difference between components with the same size but with different onlyEnsOrAddress prop

Screen.Recording.2024-09-17.at.21.48.19.mov

Use smaller address size without onlyEnsOrAddress or when loading if no ens.

Pros: Smaller layout shift; smaller height difference between components with the same size but with different onlyEnsOrAddress prop, so it looks better on loading
Cons: small font-size on size="xs", and even size="sm" when showing both address and ens(or skeleton). Notable layout shift on size="xs" and size="sm"

Screen.Recording.2024-09-17.at.23.21.33.mov

Both cases uses default size="base", so default component behaves the same as with size="base"

Pushed the second option since I think it looks better but feel free to update/revert if needed

Page code (3 colons)

"use client";

import type { NextPage } from "next";
import { Address } from "~~/components/scaffold-eth";

const Home: NextPage = () => {
  // address without ENS
  const demoAddress = "0x4e123738A66427ee9BD0C9dc67C09af397A7D93e";

  // atg.eth address
  const demoAddressEns = "0x34aA3F359A9D614239015126635CE7732c18fDF3";

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-5">
        <div className="px-5">
          <div className="mb-12">
            <h2 className="text-center text-3xl font-bold mb-4">Address Component Showcase</h2>
            {/* <div className="text-center text-xl font-bold mb-4">Size is default, onlyEnsOrAddress</div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="w-full flex items-center justify-center mb-10">
                <Address address={"0x4e123738A66427ee9BD0C9dc67C09af397A7D93e"} onlyEnsOrAddress />
              </div>
              <div className="w-full flex items-center justify-center mb-10">
                <Address address={"0x34aA3F359A9D614239015126635CE7732c18fDF3"} onlyEnsOrAddress />
              </div>
            </div>
            <div className="text-center text-xl font-bold mb-4">Size is default, no onlyEnsOrAddress</div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="w-full flex items-center justify-center mb-10">
                <Address address={"0x4e123738A66427ee9BD0C9dc67C09af397A7D93e"} />
              </div>
              <div className="w-full flex items-center justify-center mb-10">
                <Address address={"0x34aA3F359A9D614239015126635CE7732c18fDF3"} />
              </div>
            </div> */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div>
                <h3 className="text-xl font-semibold mb-2">Only Address or ENS</h3>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xs</p>
                  <Address size="xs" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: sm</p>
                  <Address size="sm" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: base(default)</p>
                  <Address size="base" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: lg</p>
                  <Address size="lg" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xl</p>
                  <Address size="xl" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 2xl</p>
                  <Address size="2xl" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 3xl</p>
                  <Address size="3xl" address={demoAddress} onlyEnsOrAddress />
                </div>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Default Address Behaviour</h3>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xs</p>
                  <Address size="xs" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: sm</p>
                  <Address size="sm" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: base (default)</p>
                  <Address size="base" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: lg</p>
                  <Address size="lg" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xl</p>
                  <Address size="xl" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 2xl</p>
                  <Address size="2xl" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 3xl</p>
                  <Address size="3xl" address={demoAddress} />
                </div>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Default Address Behaviour (with ens)</h3>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xs</p>
                  <Address size="xs" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: sm</p>
                  <Address size="sm" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: base (default)</p>
                  <Address size="base" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: lg</p>
                  <Address size="lg" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xl</p>
                  <Address size="xl" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 2xl</p>
                  <Address size="2xl" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 3xl</p>
                  <Address size="3xl" address={demoAddressEns} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home;

// dynamic: --------------------------
/* const Home: NextPage = () => {
  const demoAddress = "0x34aA3F359A9D614239015126635CE7732c18fDF3";
  const sizes: ("xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl")[] = ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"];

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-5">
        <div className="px-5">
          <div className="mb-12">
            <h2 className="text-center text-3xl font-bold mb-4">Address Component Showcase</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-xl font-semibold mb-2">Without showBoth</h3>
                {sizes.map(size => (
                  <div key={size} className="mb-4">
                    <p className="text-sm mb-1">Size: {size}</p>
                    <Address size={size} address={demoAddress} />
                  </div>
                ))}
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">With showBoth</h3>
                {sizes.map(size => (
                  <div key={size} className="mb-4">
                    <p className="text-sm mb-1">Size: {size}</p>
                    <Address size={size} address={demoAddress} showBoth />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home; */

packages/nextjs/components/scaffold-eth/Address/Address.tsx

…onent-update

technophile-04 · 2024-09-18T04:19:07Z

Thanks @rin-st, yup option 2 makes a lot of sense to me and feels intuitive, Also mostly people will be using default Address component without passing any size in most cases so looks good in that and its getting freaking messier and messier as we try to make it very very perfect but it looks great now I feel!! Lol yesterday in flight I was trying to solve it and came up with #942 but your solution looks more robust and works great!!

Just pushed a commit updating the loading state when address is undefined inline with new styles.

Before :

Screen.Recording.2024-09-18.at.12.04.14.PM.mov

After :

Screen.Recording.2024-09-18.at.11.52.51.AM.mov

cc @carletex for his final thoughts once! But looks good to me!

carletex · 2024-09-18T09:28:00Z

Thanks all for the detailed display testing and exploring this!

I really like how it looks 👍

rin-st · 2024-09-18T10:11:20Z

Just pushed a commit updating the loading state when address is undefined inline with new styles.

Good point! Completely forgot about this state.

Noticed that height of the component is different when loading and when address is loaded, but ens is still loading. So we have two jumps when loading in case we don't have ens:

Screen.Recording.2024-09-18.at.12.52.32.mov

Or one when we have ens we have one jump:

Screen.Recording.2024-09-18.at.12.51.24.mov

First thought is to make gap between items 1px, so first jump will not be so noticeable. But it looks not so good on large sizes. I didn't push this change, feel free to update if you think it's better than current.

Screen.Recording.2024-09-18.at.13.05.57.mov

Also, noticed that loading of components with onlyEnsOrAddress has a larger height

Screen.Recording.2024-09-18.at.13.09.20.mov

rin-st · 2024-09-18T10:59:08Z

Also, noticed that loading of components with onlyEnsOrAddress has a larger height

Fixed this

Screen.Recording.2024-09-18.at.13.54.30.mov

Page code

"use client";

import { useEffect, useState } from "react";
import type { NextPage } from "next";
import { Address } from "~~/components/scaffold-eth";

const Home: NextPage = () => {
  const [demoAddress, setDemoAddress] = useState<string | undefined>(undefined);
  const [demoAddressEns, setDemoAddressEns] = useState<string | undefined>(undefined);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDemoAddress("0x4e123738A66427ee9BD0C9dc67C09af397A7D93e");
      setDemoAddressEns("0x34aA3F359A9D614239015126635CE7732c18fDF3");
    }, 2_000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-5">
        <div className="px-5">
          <div className="mb-12">
            <h2 className="text-center text-3xl font-bold mb-4">Address Component Showcase</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div>
                <h3 className="text-xl font-semibold mb-2">Only Address or ENS</h3>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xs</p>
                  <Address size="xs" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: sm</p>
                  <Address size="sm" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: base(default)</p>
                  <Address size="base" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: lg</p>
                  <Address size="lg" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xl</p>
                  <Address size="xl" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 2xl</p>
                  <Address size="2xl" address={demoAddress} onlyEnsOrAddress />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 3xl</p>
                  <Address size="3xl" address={demoAddress} onlyEnsOrAddress />
                </div>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Default Address Behaviour</h3>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xs</p>
                  <Address size="xs" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: sm</p>
                  <Address size="sm" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: base (default)</p>
                  <Address size="base" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: lg</p>
                  <Address size="lg" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xl</p>
                  <Address size="xl" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 2xl</p>
                  <Address size="2xl" address={demoAddress} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 3xl</p>
                  <Address size="3xl" address={demoAddress} />
                </div>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Default Address Behaviour (with ens)</h3>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xs</p>
                  <Address size="xs" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: sm</p>
                  <Address size="sm" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: base (default)</p>
                  <Address size="base" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: lg</p>
                  <Address size="lg" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: xl</p>
                  <Address size="xl" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 2xl</p>
                  <Address size="2xl" address={demoAddressEns} />
                </div>
                <div className="mb-4">
                  <p className="text-sm mb-1">Size: 3xl</p>
                  <Address size="3xl" address={demoAddressEns} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home;

// dynamic: --------------------------
/* const Home: NextPage = () => {
  const demoAddress = "0x34aA3F359A9D614239015126635CE7732c18fDF3";
  const sizes: ("xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl")[] = ["xs", "sm", "base", "lg", "xl", "2xl", "3xl"];

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-5">
        <div className="px-5">
          <div className="mb-12">
            <h2 className="text-center text-3xl font-bold mb-4">Address Component Showcase</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-xl font-semibold mb-2">Without showBoth</h3>
                {sizes.map(size => (
                  <div key={size} className="mb-4">
                    <p className="text-sm mb-1">Size: {size}</p>
                    <Address size={size} address={demoAddress} />
                  </div>
                ))}
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">With showBoth</h3>
                {sizes.map(size => (
                  <div key={size} className="mb-4">
                    <p className="text-sm mb-1">Size: {size}</p>
                    <Address size={size} address={demoAddress} showBoth />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Home; */

technophile-04 · 2024-09-19T04:47:22Z

Tysm @rin-st!! Make sense!

technophile-04 · 2024-09-19T04:47:45Z

Merging this 🙌

technophile-04 added 6 commits September 3, 2024 18:48

WIP: initial hacky version

81ef6db

remove constants varible

fb95311

move address component inside its own dir

1310b78

remove getCopyIconSize func use map directly

5217a38

use copyIconSizeMap for normal address too

fc30607

Merge branch 'main' into address-component-update

91cc460

technophile-04 requested review from carletex and rin-st September 4, 2024 17:33

damianmarti reviewed Sep 4, 2024

View reviewed changes

packages/nextjs/components/scaffold-eth/index.tsx Outdated Show resolved Hide resolved

remove extra slash from export of Address component

9a5dea9

rin-st reviewed Sep 5, 2024

View reviewed changes

technophile-04 added 5 commits September 7, 2024 00:35

Merge branch 'main' into address-component-update

10bec5f

remove unreachable condition

c50ec9f

use full text classNames instead of size values

b0844a1

increase size after lg when showBoth and ens are true

1df3729

show loading skeleton when ens is loading and showBoth is true

9e49276

rin-st added 3 commits September 7, 2024 17:43

chore: add 4xl

5d55ee7

feat: possibility to use long format with showBoth

becf129

fix: remove useEffects and small jump

f2df90f

rin-st approved these changes Sep 7, 2024

View reviewed changes

fix: revert to ens

eb91c3e

remove showBoth prop and instead use onlyEnsOrAddress

7293ec4

update size to fallback to onlyEnsOrAddress if there is no ens

8df4dbc

technophile-04 requested a review from rin-st September 13, 2024 09:26

Merge branch 'main' into address-component-update

67f8c01

rin-st added 2 commits September 17, 2024 15:13

Merge branch 'main' of github.com:scaffold-eth/se-2 into address-comp…

e249acb

…onent-update

fix: font size on loading

16e06d4

rin-st reviewed Sep 17, 2024

View reviewed changes

packages/nextjs/components/scaffold-eth/Address/Address.tsx Outdated Show resolved Hide resolved

Merge branch 'main' of github.com:scaffold-eth/se-2 into address-comp…

ade66ee

…onent-update

technophile-04 mentioned this pull request Sep 18, 2024

fix default loading size #942

Closed

update to loading state to match new default

dd45f54

fix: skeleton

da2bdb8

technophile-04 merged commit fc82384 into main Sep 19, 2024
1 check passed

technophile-04 deleted the address-component-update branch September 19, 2024 04:48

technophile-04 mentioned this pull request Sep 23, 2024

Update Address component docs scaffold-eth/se-2-docs#89

Closed

Pabl0cks mentioned this pull request Sep 25, 2024

Update address component with new visual options and prop scaffold-eth/se-2-docs#90

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

address component showBoth prop #924

address component showBoth prop #924

technophile-04 commented Sep 4, 2024 •

edited

Loading

technophile-04 commented Sep 4, 2024

rin-st left a comment •

edited

Loading

technophile-04 commented Sep 7, 2024 •

edited

Loading

rin-st commented Sep 7, 2024

rin-st left a comment

rin-st commented Sep 7, 2024

technophile-04 commented Sep 9, 2024

carletex commented Sep 9, 2024

damianmarti commented Sep 9, 2024

rin-st commented Sep 11, 2024 •

edited

Loading

technophile-04 commented Sep 13, 2024 •

edited

Loading

rin-st commented Sep 13, 2024

rin-st commented Sep 17, 2024 •

edited

Loading

technophile-04 commented Sep 18, 2024

carletex commented Sep 18, 2024

rin-st commented Sep 18, 2024 •

edited

Loading

rin-st commented Sep 18, 2024

technophile-04 commented Sep 19, 2024

technophile-04 commented Sep 19, 2024

address component showBoth prop #924

address component showBoth prop #924

Conversation

technophile-04 commented Sep 4, 2024 • edited Loading

Description:

technophile-04 commented Sep 4, 2024

rin-st left a comment • edited Loading

Choose a reason for hiding this comment

technophile-04 commented Sep 7, 2024 • edited Loading

rin-st commented Sep 7, 2024

rin-st left a comment

Choose a reason for hiding this comment

rin-st commented Sep 7, 2024

technophile-04 commented Sep 9, 2024

carletex commented Sep 9, 2024

damianmarti commented Sep 9, 2024

rin-st commented Sep 11, 2024 • edited Loading

technophile-04 commented Sep 13, 2024 • edited Loading

rin-st commented Sep 13, 2024

rin-st commented Sep 17, 2024 • edited Loading

technophile-04 commented Sep 18, 2024

carletex commented Sep 18, 2024

rin-st commented Sep 18, 2024 • edited Loading

rin-st commented Sep 18, 2024

technophile-04 commented Sep 19, 2024

technophile-04 commented Sep 19, 2024

technophile-04 commented Sep 4, 2024 •

edited

Loading

rin-st left a comment •

edited

Loading

technophile-04 commented Sep 7, 2024 •

edited

Loading

rin-st commented Sep 11, 2024 •

edited

Loading

technophile-04 commented Sep 13, 2024 •

edited

Loading

rin-st commented Sep 17, 2024 •

edited

Loading

rin-st commented Sep 18, 2024 •

edited

Loading