The <WalletIsland />
component provides an advanced Wallet interface for users.
WalletIsland
is our flagship implementation of the new advanced Wallet
components, providing an advanced Wallet interface for users, including:
WalletIsland
component gives
users a seamless way to interact with their wallet and manage their assets.
Before using these components, ensure you’ve completed all Getting Started steps.
projectId
and an apiKey
to be set in the OnchainKitProvider
. You
can find your both of these values on Coinbase Developer Platform.OnchainKitProvider
by setting the chain
prop.Wallet
has two default implementations:
WalletAdvancedDefault
WalletIsland
WalletAdvancedDefault
provides the user with an advanced wallet
interface, anchored to the screen like our standard Wallet
component.
WalletIsland
provides the same powerful interface, while enabling
the user to drag the component around the window.
If you’d like more customization, follow the implementation guide below.
WalletAdvancedDefault
.
This version will stay anchored to its current position.
WalletIsland
is in the bottom-right corner of the window. Feel free to drag
it around.
While this behavior is more noticeable with the WalletIsland
component, you’ll
notice that for both components, the WalletAdvanced
container will appear in
different positions depending on the component’s location in the window:
projectId
configured correctly in your providers.If transaction history is not loading, make sure you have an apiKey
configured
correctly in your providers.WalletIsland
and advanced Wallet
<Wallet />
and advanced Wallet
components, and watch your component seamlessly come to life.
As with WalletDefault
, WalletAdvancedDefault
leverages
several <Identity>
components like <Avatar>
,
<Name>
, and <Address>
.
We’ve introduces several advanced wallet components, including
<WalletAdvancedAddressDetails>
, <WalletAdvancedTokenHoldings>
, and
<WalletAdvancedTransactionActions>
.
Wallet
implementation, use the draggable
prop on
Wallet
to enable draggability. draggable
defaults to false
, but
when draggable
is set to true
, you can also set a draggableStartingPosition
prop to
specify the initial position of your WalletIsland
.
className
and adjust the style of the React components it represents.
Explore the options for customizing the Connect button text and style here.
<Wallet />
- Serves as the main container for all wallet-related components.<WalletDropdown />
- Contains additional wallet information and options. Place inside the <Wallet />
component.<WalletAdvancedWalletActions />
- Provides wallet actions like View Transaction History, view QR Code, and Disconnect wallet. Place inside the <WalletDropdown />
component.<WalletAdvancedAddressDetails />
- Displays user address, avatar, and portfolio balance in fiat. Place inside the <WalletDropdown />
component.<WalletAdvancedTransactionActions />
- Buttons for buying crypto with fiat, transferring crypto, and swapping. Place inside the <WalletDropdown />
component.<WalletAdvancedTokenHoldings />
- Displays token balances and their value in fiat. Place inside the <WalletDropdown />
component.<ConnectWallet />
- Handles the wallet connection process. Place child components inside to customize the connect button appearance.<AppWithWalletModal />
- Enables a wallet aggregation experience.<Identity />
- Displays user identity information. Place inside <WalletDropdown />
for a complete profile view.<WalletDropdownBasename />
- Displays the user’s Basename within the dropdown.<WalletDropdownLink />
- Creates a custom link within the dropdown. Use the icon
prop to add an icon, and href
to specify the destination.<WalletDropdownDisconnect />
- Provides a disconnect option within the dropdown.<Avatar />
- Displays the user’s avatar image.<Name />
- Shows the user’s name or ENS.<Badge />
- Can be used to display additional user status or information.<Address />
- Shows the user’s wallet address.<EthBalance />
- Displays the user’s ETH balance.