Dynamic

Dynamic is a powerful web3 auth developer platform that lets you integrate multiple wallets such as Phantom, Coinbase Wallet, MetaMask, and more into your app or website.
You can see a CodeSandbox of the example below here, and at the end of this guide your adapter will look like this:

Dynamic is a multi-chain library, and Phantom is support on both EVM networks and Solana within the Dynamic adapter.
- 1.
- 2.Create an organization and a set up your first project
- 3.Copy your
environmentID
from the Dynamic overview page - 4.
You can install Dynamic's SDK with either
yarn
or npm
. Dynamic currently supports React and NextJS.npm install @dynamic-labs/sdk-react
# or yarn add @dynamic-labs/sdk-react
Copy the following snippet into your project and paste in your
environmentId
:import { DynamicContextProvider, DynamicWidget} from '@dynamic-labs/sdk-react';
const App = () => (
<DynamicContextProvider
settings={{
environmentId: 'Enter your Environment ID here'
}}>
<DynamicWidget />
</DynamicContextProvider>
);
export default App;
Now that we have the basic Dynamic setup, we'll sort Phantom to top, define the first 4 wallets to show, and filter the rest of the wallets to only appear behind a search functionality.
By passing
phantomevm
, we are specifying a button that connects to Phantom's EVM provider. To connect to Solana, we can pass phantom
.import { DynamicContextProvider, DynamicWidget, SortWallets,defaultNumberOfWalletsToShow } from '@dynamic-labs/sdk-react';
....
<DynamicContextProvider
settings={{
...
walletsFilter: SortWallets(['phantomevm', 'metamask', 'walletconnect', 'coinbase']);
defaultNumberOfWalletsToShow: 4;
...
}
}}
>
In addition to setting Phantom as the top wallet, you can also configure it to be the recommended wallet for users that click the
Get your first wallet
button. To do so, add the following snippet to your settings: <DynamicContextProvider
settings={{
...
newToWeb3WalletChainMap: {
primary_chain: "evm",
wallets: {
evm: "phantomevm",
solana: "phantom"
}
}
...
}
}}
>
Now that you set up Dynamic, there are many additional things you can explore:
- Log in with your wallet, and see data in Dynamic's developer dashboard - Now that your widget is set up locally, try to log in with a wallet. As soon as you do, head over to the Dynamic developer dashboard and click on user management and analytics. You'll be able to see your user show up!
- Customize your SDK design - There are many ways to customize the Dynamic modal to fit your needs (you can explore them in the SDK configuration section), but to start, we suggest setting a light/dark mode and a primary color for the modal, which you can do in the design section of your developer dashboard.
- Explore how to use the Dynamic SDK - After your users connect their wallets, you'll want to interact with them for various reasons. You can read more about the SDK in Dynamic's docs.
Last modified 27d ago