Accessing Wallets

​

Introduction

It’s not neccessary for a wallet to be associated with a user when they sign up, but the likelyhood is that if a user is interacting with Web3, one will be connected at some point, whether embedded or external (branded).

​

Primary Wallet

Normally, if one or more wallets are connected, a primaryWallet object will be available on the Dynanmic Context which you can access with the useDynamicContext hook. This is a quick and easy way to access the main wallet associated with that user.

const { primaryWallet } = useDynamicContext();

​

useUserWallets

Going beyond the primary wallet, you might want to get every wallet associated with the given user. The best option for this is to use the useUserWallets hook.

import { FC } from 'react'
import { useUserWallets } from '@dynamic-labs/sdk-react-core'

export const ListConnectedWallets: FC = () => {
  const userWallets = useUserWallets()

  return (
    <div>
      <h1>Wallets</h1>

      {userWallets.map((wallet) => (
        <p key={wallet.id}>
          {wallet.address}
        </p>
      ))}
    </div>
  )
}

​

onEmbeddedWalletCreated

If you’re using embedded wallets, you can listen for the onEmbeddedWalletCreated event to know when a wallet has been created for a user. This is useful for when you want to know when a user has a wallet created for them, but you don’t want to have to poll the API to check.

<DynamicContextProvider
  settings={{
    events: {
      onEmbeddedWalletCreated: (args) => {
        console.log('onEmbeddedWalletCreated was called', args);
      }
    }
  }}
>
 {/* ... rest of your app ... */}
</DynamicContextProvider>

​

Add extra logic during any wallet connection (handleConnectedWallet)

Sometimes you may want to inject some of your own logic during the process of a wallet becoming connected. Dynamic has a concept of “handlers”, which is a particular kind of callback to allow custom code to run as part of a process (i.e. signup).

handleConnectedWallet is a handler that runs before we establish the wallet connection. You can use this callback to run your logic and reject (by returning boolean false). For example, running a fraud check before establishing the connection.

<DynamicContextProvider
  settings={{
    handlers: {
      handleConnectedWallet: (args) => {
        console.log("handleConnectedWallet was called", args);
        // if runYourOwnLogic return true, the connection will be established, otherwise it will not
        return runYourOwnLogic();
      },
    },
  }}
>
  {/* ... rest of your app ... */}
</DynamicContextProvider>

​

What next?