feat: wallet island

[brendan-defi]

What changed? Why?

Notes to reviewers

How has it been tested?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
onchainkit-coverage	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 14, 2025 4:05am
onchainkit-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 14, 2025 4:05am
onchainkit-routes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 14, 2025 4:05am

[alessey]

nit: once we have a single arrow we should favor rotating it with css rather than including additional arrows

[alessey]

adding a 1px border around defaultAvatar means that avatars display at 40x40 and default avatars render at 38x38 (i.e. 40 - 1px top + 1px left)

[brendan-defi]

Curious if you have a better way to do this. Without the border, I get a 1px outline coming from the background:

I tried (and paired with some others to try) to fix without a border, but this was the best that we came up with

[alessey]

this is because of the way the svg path is drawn, you are seeing the bleed from the edge of the path (which is styled to be white), you may be able to fix this by separating into a path for the white part and a circle behind it in the inverse. you could apply the border hack with a transparent border to the users img but you'd still end up changing the size from 40 to 38 unless you adjust the sizes to a non-standard tailwind size.

[brendan-defi]

gotcha, okay, i will try to fix this up as a fast-follow. thanks!

[alessey]

I'm a little confused by these changes. Seems like we are just creating a bunch of *Default components. I thought the goal with this component was to be able to compose the version you wanted. With default children, this would give us:
<Wallet/> which would render our default implementation with the dropdown
<Wallet><ConnectWallet type="rect | circle"/><WalletIsland | WalletDropdown draggable={true|false} /></Wallet>
with further composability available if you wanted to customize the ConnectWallet or WalletDropdown further and in the future, the WalletIsland.

Additionally, drag seems like a much more useful feature (with a more straightforward implementation) if it only applied to the WalletIsland or WalletDropdown child vs. the entire component.

[cpcramer]

Can we center WalletAdvancedDefault and WalletIsland (vertically and horizontally) in the playground?

[cpcramer]

I feel like we should hide tokens with a balance of $0.00 - I have a ton of them in my wallet and it feels like spam

[alessey]

I feel like we should hide tokens with a balance of $0.00 - I have a ton of them in my wallet and it feels like spam

just the fiat balance is < 0, in this case I think it'd make sense to show < $0.01 or something similar

[cpcramer]

I feel like we should hide tokens with a balance of $0.00 - I have a ton of them in my wallet and it feels like spam

just the fiat balance is < 0, in this case I think it'd make sense to show < $0.01 or something similar

Ok and looks like this is what CB Wallet defaults to

[brendan-defi]

I'm a little confused by these changes. Seems like we are just creating a bunch of *Default components. I thought the goal with this component was to be able to compose the version you wanted.

We ended up creating some defaults, but all of the underlying components are composable, so someone could definitely do

<Wallet draggable={true/false}> // whole thing can be draggable or not, works nicely either way
  <ConnectWallet>
    ...custom ConnectWallet children
  </ConnectWallet>
  <WalletAdvanced>
    ...custom WalletIsland children
  </WalletAdvanced>
</Wallet>

Additionally, drag seems like a much more useful feature (with a more straightforward implementation) if it only applied to the WalletIsland or WalletDropdown child vs. the entire component.

This is an implementation decision. A dev could do this:

<Wallet draggable={false}>
  <ConnectWallet>
    ...custom ConnectWallet children
  </ConnectWallet>
  <Draggable>
    <WalletAdvanced>
      ...custom WalletAdvanced children
    </WalletAdvanced>
  </Draggable>
</Wallet>

This would leave a ConnectWallet "anchor", with a draggable dropdown/advanced box.

[brendan-defi]

Can we center WalletAdvancedDefault and WalletIsland (vertically and horizontally) in the playground?

No. WalletAdvancedDefault is tall enough that on normal laptop screens it overflows the bottom of the screen when vertically centered.

And WalletIsland is meant to be defaulted to bottom-left, so that's the playground implementation.

[brendan-defi]

I feel like we should hide tokens with a balance of $0.00 - I have a ton of them in my wallet and it feels like spam

We are using the Coinbase Wallet spam filter, with the setting that Coinbase Wallet uses itself, so these tokens are below the "likely spam" threshold. And we hide tokens with a zero-crypto balance. But we chose to keep tokens with a crypto balance but no fiat balance because some tokens aren't super liquid on dexes and don't have fiat prices, but would still be valuable to be seen.