# AI Use Cases If you want to build AI applications using Dynamic, you're in good company! We already support the likes of [aixbt](https://aixbt.tech/), [CoDatta](https://codatta.io/) and [Mahojin](https://www.mahojin.ai/) among many more. You can use our standard wallet connector to connect to your users' wallets and plug them into your AI applications client side, like [this example using GOAT and Eleven Labs](https://github.com/goat-sdk/goat/tree/main/typescript/examples/eleven-labs/dynamic). You can also sign up for early access to agentic wallets when they are released: EthereumWalletConnectors also includes all EVM compatible chains including layer 2's i.e. Base as well as [Dynamic Embedded Wallets](/wallets/embedded-wallets/dynamic-embedded-wallets). Learn more about WalletConnectors [here](/react-sdk/providers/dynamiccontextprovider#walletconnectors). ## Initialize the SDK ## Integration with `useOtpVerificationRequest` The `useUserUpdateRequest` hook is designed to work seamlessly with the [useOtpVerificationRequest](/react-sdk/hooks/useotpverificationrequest) hook. To handle email or SMS verification in another view or component, you can directly use the `useOtpVerificationRequest` hook, which provides the verifyOtp function. Using both hooks together ensures a streamlined user experience while maintaining security and data integrity. # useUserWallets Get access to the current user/session wallets Use this hook whenever you need access to all the current wallets in your app — it returns an array of wallets, with type `Wallet[]`. The array represents all wallets that were connected in the current session + all wallets authenticated by the current user. See [this section](#when-is-a-wallet-added-to-this-array) for more details. ### Example: listing which wallets are currently connected ```javascript import { FC } from 'react' import { useUserWallets } from '@dynamic-labs/sdk-react-core' export const ListConnectedWallets: FC = () => { const userWallets = useUserWallets() return (

Wallets

{userWallets.map((wallet) => (

{wallet.address}

))}
) } ``` ### What does the Wallet type look like? You can inspect the type using your code editor, but here's a summary: ```Typescript id: string; key: string; address: string; additionalAddresses: WalletAdditionalAddress[]; chain: string; isAuthenticated: boolean; connector: walletConnector (see note below) ``` Find the reference for the `walletConnector` type [here](/wallets/using-wallets/interacting-with-wallets#walletconnector). ### When is a wallet added to this array? There are currently 2 ways a wallet can be added to the array: 1. When the a new wallet is connected to the current session. 2. When the user signs in, all wallets authenticated to his account are added. > Notice the intentional distinction between the *user* and the *current session*: if your end-user connects in `connect-only` mode, [he doesn't get a jwt](/wallets/advanced-wallets/connected-vs-authenticated#the-difference-in-practice). This means we have no access to the authenticated wallets. ### When is a wallet removed from this array? Wallets are only removed explicitly by the user, be it through log-out, unlinking, or disconnecting in `connect-only`. # useWalletConnectorEvent ### Summary The `useWalletConnectorEvent` hook is used for handling events from a `WalletConnector` or an array of `WalletConnectors`. This hook allows you to specify an event to listen to and a handler function that will be called whenever the event is emitted. The handler will receive the event arguments followed by the instance of the `WalletConnector` that emitted the event. | Parameter | Type | Description | | ------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | eventEmitters | WalletConnector or WalletConnector\[] | The WalletConnector instance(s) to attach the event listener to. If an array is provided, the event listener is attached to all provided connectors. | | eventName | string | The name of the event to listen for. | | handler | function | The callback function to execute when the event is emitted. The arguments to the callback are the arguments emitted with the event, followed by the WalletConnector instance that emitted the event. | We currently support the following events: * `accountChange` * `chainChange` * `disconnect` ### Example Listen to primary wallet connector account changed ```tsx import { useWalletConnectorEvent, useDynamicContext } from '@dynamic-labs/sdk-react-core' const App = () => { const { primaryWallet } = useDynamicContext() useWalletConnectorEvent( primaryWallet?.connector, 'accountChange', ({ accounts }, connector) => { console.group('accountChange'); console.log('accounts', accounts); console.log('connector that emitted', connector); console.groupEnd(); }, ); return null; } ``` Listen to all wallets connectors for the disconnect event ```tsx import { useWalletConnectorEvent, useUserWallets } from '@dynamic-labs/sdk-react-core' const App = () => { const wallets = useUserWallets(); const walletsConnectors = wallets.map(({ connector }) => connector); useWalletConnectorEvent( walletsConnectors, 'disconnect', (connector) => { console.log(`Connector ${connector} disconnected`); } ); return null; } ``` # useWalletItemActions ### Summary A hook with utility functions to sign with a specific wallet. The hook needs to be initialized within a child of `DynamicContextProvier` #### `openWallet` - available from version `v0.14.32` Initiates the signing process for a specific wallet without opening the dynamic auth flow. For example, you can create a button that will sign the user with MetaMask specifically. ```TypeScript const SignWithMetaMaskButton = () => { const { openWallet } = useWalletItemActions(); return ( ) } ``` # useWalletOptions ### Summary The useWalletOptions hook allows you to start the process of connecting to a specific wallet. It provides a function to select a wallet by wallet key. Once this function is called, the connection process begins with the caveat that: * If you pass in a `walletKey` that supports multiple chains, such as `magiceden`, a user will first be asked to select which chain they want to connect with. Once a chain is selected, then the user will be prompted to connect. * If you pass in a `walletKey` that includes a chain, such as `magicedenbtc`, then the user will skip to the connection step. * If a wallet does not support multiple chains, such as `xverse`, then the user will simply go to the connection step. ### Usage Available props | Prop | Type | Description | | ------------------------ | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | selectWalletOption | `(walletKey: string) => Promise` | Function to select a specific wallet to connect with | | walletOptions | `Array` | List of available wallet options with their keys, names and group (if defined) | | getFilteredWalletOptions | `(filter: (options: WalletOption[]) => WalletOption[]) => Array` | Allows filtering through the wallet options that will generate the wallet items. It can be used the same way as walletsFilter — see [here](/wallets/advanced-wallets/sort-and-filter-wallets#usage) | Where WalletItem here is: ```typescript type WalletItem = { chain: string group?: string groupName?: string isInstalledOnBrowser: boolean isWalletConnect: boolean key: string name: string } ``` ### Examples Example 1: Harcoded options ```tsx import { useWalletOptions } from '@dynamic-labs/sdk-react-core' const WalletList = () => { const { selectWalletOption } = useWalletOptions() const wallets = [ { key: 'metamask', name: 'MetaMask' }, { key: 'magiceden', name: 'Magic Eden' }, ] return (
{wallets.map((wallet) => ( ))}
) } ``` Example 2: Dynamically populated options with filter ```tsx import { useWalletOptions, FilterChain } from '@dynamic-labs/sdk-react-core' const WalletList = () => { const { selectWalletOption, getFilteredWalletOptions } = useWalletOptions() const groupedWallets = getFilteredWalletOptions(FilterChain('EVM')).reduce( (options, wallet) => { const key = wallet.group || wallet.key const name = wallet.groupName || wallet.name if (!options[key]) { options[key] = name } return options }, {} ) return (
{Object.entries(groupedWallets).map(([key, name]) => ( ))}
) } ``` Example 3: Checking if a wallet is instaled in browser ```tsx import { useWalletOptions } from '@dynamic-labs/sdk-react-core' const Main = () => { const { walletOptions } = useWalletOptions() const isMagciEdenInstalled = walletOptions.find( (wallet) => wallet.key === 'magiceden' )?.isInstalledOnBrowser return (
{isMagciEdenInstalled ? 'Magic Eden is installed' : 'Magic Eden is not installed'}
) } ``` ### Hook Details **Function: selectWalletOption** The selectWalletOption function select a wallet to connect with. It takes a single argument, `walletKey`, which is the key of the wallet to connect with. You can dynamically find the available wallet keys in `walletOptions` or all the supported wallet keys either from [wallet-book](https://dynamic-static-assets.com/wallet-book/v1/latest/wallet-book.json) (object keys in groups or wallets) or in the [chains pages in the dashboard](https://app.dynamic.xyz/dashboard/chains-and-networks#evm). # SDK/User Loading States ## Overview Before using the SDK through hooks etc., you need to ensure that it has loaded. In addition, you might also want to wait for a user to have logged in to call certain hooks. This guide will show you how to check if the SDK has loaded and how to handle the different loading states for the login process. ## Wait for SDK to load (variable) The sdkHasLoaded variable is available from the [useDynamicContext](/react-sdk/hooks/usedynamiccontext) hook and can be used to check if the SDK has loaded. ```javascript import { useDynamicContext } from "@dynamic-labs/sdk-react-core"; const { sdkHasLoaded } = useDynamicContext(); sdkHasLoaded ? console.log("SDK has loaded") : console.log("SDK is still loading"); ``` ## Check if user is logged in (hook) The [useisloggedin hook](/react-sdk/hooks/useisloggedin) will tell you if the user has finished the whole onboarding process i.e. they signed in/up and completed any required [information capture](/users/information-capture). Note that Dynamic has two modes for a user to be in: connect-only and connect-and-sign (learn more [here](/wallets/advanced-wallets/connected-vs-authenticated)). In connect-only mode, the user is considered logged in once they have connected their wallet(s) and in connect-and-sign mode, the user is considered logged in once they have connected their wallet(s) and signed a message. useIsLoggedIn will return true for connect-only when a wallet is connected but there is no UserActivation, and for connect-and-sign when a wallet is connected and a valid user is present. ```jsx import { useIsLoggedIn } from '@dynamic-labs/sdk-react-core'; const MyComponent = () => { const isLoggedIn = useIsLoggedIn(); return (
{isLoggedIn ? (

You are logged in!

) : (

Please log in to continue.

)}
); }; export default MyComponent; ``` ## Check if user is authenticated but hasn't finished onboarding useIsLoggedIn tells you if the user has finished the whole onboarding process, but if you want to know if the user has authenticated but hasn't finished the process, you can use \[userWithMissingInfo] from the [useDynamicContext](/react-sdk/hooks/usedynamiccontext) hook. This will be undefined if the user is not authenticated or if they have finished the onboarding process and will contain the user object otherwise. Conversely, the user object from the same hook will be defined if the user is authenticated and has finished the onboarding process. ```jsx import { useDynamicContext, useIsLoggedIn } from '@dynamic-labs/sdk-react-core'; const MyComponent = () => { const isLoggedIn = useIsLoggedIn(); const { userWithMissingInfo } = useDynamicContext(); let message = ""; if (userWithMissingInfo) { message = "You are authenticated but need to complete the onboarding process."; } else if (!isLoggedIn) { message = "Please log in to continue."; } else { message = "You are logged in!"; } return (

{message}

); }; ``` ## Access user during login (handler) The [handleAuthenticatedUser handler](/react-sdk/handlers/handleauthenticateduser) is a handler that can be used to intercept the workflow once a user has been authenticated but before the auth process completes and we close the UI. ```jsx { console.log("handleBeforeAuth was called", args); await customUserObjectProcess(args.user); }, }, }} > {/* ... rest of your app ... */} ``` It gives you a [UserProfile](/react-sdk/objects/userprofile) object for the given user. ## Check when login has started (callback) The [onAuthInit](/react-sdk/events/onauthinit) callback gives you information about a login process that has just begun. ```jsx { console.log('onAuthInit was called', args); } } }} > {/* ... rest of your app ... */} ``` Check out [the full reference](/react-sdk/events/onauthinit) for the return value (args). ## Check when authentication has completed (callback) The [onAuthSuccess](/react-sdk/events/onauthsuccess) callback runs once the user has authenticated and is signed in (i.e. completed any mandatory info capture & MFA). ```jsx { console.log('onAuthSuccess was called', args); // you can get the jwt by calling the getAuthToken helper function const authToken = getAuthToken(); console.log('authToken', authToken); } } }} > {/* ... rest of your app ... */} ``` Check out [the full reference](/react-sdk/events/onauthsuccess) for the return value (args). ## Check if login failed (callback) There are two callbacks which you can use for this: 1. The [onAuthFailure](/react-sdk/events/onauthfailure) callback will be called when an authentication process fails, either by error or user closing the modal. 2. The [onAuthCancel](react-sdk/events/onauthflowcancel) callback will be called specifically if the modal is closed before login is completed, it is not called on error. # EvmRpcProvider An object representing a provider for a specific EVM chain. Exported by `@dynamic-labs/ethereum-core`. ```typescript import { Chain, PublicClient, Transport } from 'viem' type EvmRpcProvider = { chainId: number chainName: string provider: PublicClient } ``` # EvmRpcProviderMethods Methods and properties available to EVM rpc providers. Exported by `@dynamic-labs/ethereum-core`. ```typescript type EvmRpcProviderMethods = { defaultProvider: EvmRpcProvider | undefined providers: EvmRpcProvider[] | undefined getProviderByChainId: (chainId: number) => EvmRpcProvider | undefined } ``` Check out the reference for [EvmRpcProvider](/react-sdk/objects/EvmRpcProvider) # GenericNetwork An object representing a generic network, such as an EVM or Solana L2. Exported by `@dynamic-labs/sdk-api-core`. ```typescript type GenericNetwork = { blockExplorerUrls: Array chainId: number | string chainName?: string iconUrls: Array lcdUrl?: string name: string nameService?: NameService nativeCurrency: NativeCurrency networkId: number | string privateCustomerRpcUrls?: Array rpcUrls: Array vanityName?: string } ``` See also [NameService](/react-sdk/objects/NameService) and [NativeCurrency](/react-sdk/objects/NativeCurrency). The `lcdUrl` field is only required for Cosmos networks. # NameService An object representing a name service. Exported by `@dynamic-labs/sdk-api-core`. ```typescript type NameService = { registry?: string } ``` # NativeCurrency An object representing a name service. Exported by `@dynamic-labs/sdk-api-core`. ```typescript type NativeCurrency = { decimals: number denom?: string name: string symbol: string } ``` # SolanaRpcProvider An object representing a provider for a specific Solana chain. Exported by `@dynamic-labs/solana-core`. ```typescript import { Connection } from '@solana/web3.js' type SolanaRpcProvider = { chainId: string chainName: string provider: Connection } ``` # SolanaRpcProviderMethods Methods and properties available to Solana rpc providers. Exported by `@dynamic-labs/solana-core`. ```typescript type SolanaRpcProviderMethods = { defaultProvider: SolanaRpcProvider | undefined providers: SolanaRpcProvider[] | undefined getProviderByChainId: (chainId: string) => SolanaRpcProvider | undefined } ``` Check out the reference for [SolanaRpcProvider](/react-sdk/objects/SolanaRpcProvider) # AccessDeniedCustomButton An object containing custom text and action for access denied modal. | Field | Description | | :------------------- | :-------------------------------------------------------- | | title: string; | Defines the button's text. | | action?: () => void; | Defines the action of the button when click is triggered. | ## Usage ```Text TypeScript window.open('https://www.mywebsite.com/contact-us', '_blank'), title: 'Contact us', } }} > {/* ... rest of your app ... */} ``` # EvmNetwork Object which represents a network on the Ethereum Virtual Machine (EVM). It can be used in the [DynamicContextProvider](/react-sdk/providers/dynamiccontextprovider) or in the [DynamicWagmiConnector](/react-sdk/providers/dynamicwagmiconnector). ## Definition | Attribute | Value | Required/Optional | | ---------------------- | ---------------- | ----------------- | | blockExplorerUrls | `string[]` | Required | | chainId | `number` | Required | | name | `string` | Required | | iconUrls | `string[]` | Required | | nativeCurrency | `NativeCurrency` | Required | | networkId | `number` | Required | | privateCustomerRpcUrls | `string[]` | Optional | | rpcUrls | `string[]` | Required | | vanityName | `string` | Optional | ### NativeCurrency | Attribute | Value | Required/Optional | | --------- | -------- | ----------------- | | decimals | `number` | Required | | name | `string` | Required | | symbol | `string` | Required | | denom | `string` | Optional | ## Example Usage ```jsx const evmNetworks = [ { blockExplorerUrls: ['https://etherscan.io/'], chainId: 1, name: 'Ethereum Mainnet', iconUrls: ['https://app.dynamic.xyz/assets/networks/eth.svg'], nativeCurrency: { decimals: 18, name: 'Ether', symbol: 'ETH' }, networkId: 1, privateCustomerRpcUrls: ['https://mainnet.infura.io/v3/your-api-key'], rpcUrls: ['https://cloudflare-eth.com'], vanityName: 'Ethereum', }, ] return ( ... ) ``` # LocaleResource An object used with the locale prop on DynamicContextProvider, you can find a tutorial on how to use this type [here](/design-customizations/customizing-copy-translations). ## Properties The key of the object must be one of the following valid "lang"s: \| "ar" \| "da" \| "de" \| "en" \| "es" \| "fi" \| "fr" \| "he" \| "it" \| "ja" \| "nl" \| "pl" \| "pt" \| "ru" \| "uk" \| "zh" The value of the object must be a valid translation object - see below. ### Translations The translation object should follow the shape found in "@dynamic-labs/sdk-react-core/src/lib/locale/en/translation.js" which you can reach by going to the definition of LocaleResource in your IDE once imported (`import { LocaleResource } from '@dynamic-labs/sdk-react-core'`) Here is an example excerpt from that file: ```jsx dyn_account_exists: { connect: 'Connect with {{socialOauth}}', description: 'It looks like an account already exists using', title: 'Account already exists', trail_message_email: '. Please log in with your email.', trail_message_social: 'through {{socialOauth}}', }, ``` # PhoneData An object containing phone information required for sms verification. | Attribute | Type | Description | | :-------- | :------- | :-------------------------------------------------------------- | | dialCode | `string` | Country dial code (e.g: '1') | | iso2 | `string` | Country iso code (e.g: 'US') | | phone | `string` | Phone number, numbers only, without dial code (e.g: 5555555555) | # React Objects Introduction The SDK uses a number of objects to represent different things. Here is a list of all of the objects used by the SDK and links to their reference pages. [**AccessDeniedCustomButton**](/react-sdk/objects/access-denied-custom-button): An object containing custom text and action for access denied modal. [**EvmNetwork**](/react-sdk/objects/evmNetwork): Object which represents a network on the Ethereum Virtual Machine (EVM). [**Locale**](/react-sdk/objects/locale): Used within the locale prop of the [DynamicContextProvider](/react-sdk/providers/dynamiccontextprovider) to edit the copy displayed by the SDK [**JWT Payload**](/react-sdk/objects/user-payload): JWT to verify some claims about the end user. [**JwtVerifiedCredential**](/react-sdk/objects/verified-credential): A representation of a verified credential (Wallet, email, farcaster, phone, etc.). [**PhoneData**](/react-sdk/objects/phone-data): The phone information required for sms verification. [**SdkViews**](/react-sdk/objects/views): Used within the [DynamicContextProvider](/react-sdk/providers/dynamiccontextprovider) `overrides` prop to adapt the view shown to the user programmatically. **[UserProfile](/react-sdk/objects/userprofile)**: An object containing attributes about the user such as the wallet address, email, first name, etc. [**Wallet**](/react-sdk/objects/wallet): An object containing the attributes about the connected wallet. This object would be available immediately after a wallet has been connected. [**WalletsByChain**](/react-sdk/objects/wallets-by-chain): Array of objects, used primarily for bridging. [**WalletConnector**](/react-sdk/objects/walletconnector): This is Dynamic's abstraction over the wallet interface. This can be used to interact with the users wallet. # SocialProvider A union of all social provider names available for connection. Exported by `@dynamic-labs/client`. ```typescript type SocialProvider = | 'apple' | 'coinbaseSocial' | 'discord' | 'facebook' | 'farcaster' | 'github' | 'google' | 'telegram' | 'tiktok' | 'twitch' | 'twitter' ``` # JWT Payload When an end user connects their wallet, you, the developer, get a [JSON Web Token (JWT)](https://jwt.io/introduction) that can be used to verify some claims about the end user, notably a proof of ownership over a wallet public address. After authenticating the JWT token, see [Server-side verification](/authentication-methods/how-to-validate-users-on-the-backend), you may want to leverage user and wallet information provided in the JWT. Below we have the content defined with the aim of following the JWT standards. ##### Standard JWT claims: See: [https://www.rfc-editor.org/rfc/rfc7519#section-4.1](https://www.rfc-editor.org/rfc/rfc7519#section-4.1) | Field | Description | | ----- | --------------------------------------------------------------------------------------------- | | aud | Audience for the JWT token. This claim shows what domain of the indended audience of the JWT. | | iss | Issuer of the JWT token. This claim shows app.dynamic.xyz generated and issued the JWT. | | sub | Subject of the JWT token. userId in the deprecated info claim. | | iat | Timestamp when the JWT token was issued. | | exp | Timestamp when the JWT token will expire. | ##### Dynamic-specific claims: These fields are **optional** and you depends on whether you want to collect this information during onboarding. For more information about collecting this information, see [here](/users/information-capture). | alias | Alias field from customer information capture. | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | email | Email field from customer information capture. | | environment\_id | Unique ID of the project environment for the SDK, from [https://app.dynamic.xyz/dashboard/api](https://app.dynamic.xyz/dashboard/api). environmentId in the deprecated info claim. | | given\_name | First name field from customer information capture. firstName in the deprecated info claim. | | family\_name | Last name field from customer information capture. lastName in the deprecated info claim. | | lists | Names of access lists enabled for this user. | | verified\_credentials | List of all [verified credentials](/react-sdk/objects/verified-credential) connected to this user. | | verified\_account | If present, this was the most recently signed and verified account. | #### Example ```JSON{ "alias": "john", "aud": "https://dashboard.hello.xyz", "verified_credentials": [ { "address": "0x000123abc", "chain": "eip155", "id": "af615228-99e5-48ee-905d-4575f0a6bfc9", "wallet_name": "metamask" } ], "email": "[[email protected]](/cdn-cgi/l/email-protection)", "environment_id": "fb6dd9d1-09f5-43c3-8a8c-eab6e44c37f9", "family_name": "bot", "given_name": "jon", "iss": "app.dynamic.xyz/fb6dd9d1-09f5-43c3-8a8c-eab6e44c37f9", "lists": [ "Community dashboard acess list" ], "sub": "d261ee91-8ea0-4949-b8bb-b6ab4f712a49", "verified_account": { "address": "0x000123abc", "chain": "eip155", "id": "af615228-99e5-48ee-905d-4575f0a6bfc9", "wallet_name": "metamask" }, "iat": 1660677597, "exp": 1660684797 } ``` # UserProfile An object containing attributes about the user such as id, email, first name, etc. | Field | Description | | ---------------------------------------------------------------------------------------- | ----------------------------------------------------- | | userId?: string | \[Optional] - Dynamic's UUID | | sessionId: string | \[Optional] - The current session ID | | environmentId?: string | \[Optional] - Dynamic environment ID | | newUser?: boolean | \[Optional] - Is it first time user created/logged in | | email?: string | \[Optional] - User's email | | alias?: string | \[Optional] - User's alias | | firstName?: string | \[Optional] - User's first name | | lastName?: string | \[Optional] - User's last name | | phoneNumber? string | \[Optional] - User's phone number | | lists?: string\[] | \[Optional] - User's access lists | | verifiedCredentials?: [JWTVerifiedCredential](/react-sdk/objects/verified-credential)\[] | \[Optional] - User's verified credentials | | lastVerifiedCredentialId: string \|\ undefined | \[Optional] - User's last verified credential ID | | scope?: string | \[Optional] - User's scope | # JwtVerifiedCredential | Field | Description | | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | id: string | internal ID for this VC | | address?: string | \[Optional] - wallet address associated with the VC | | chain?: string | \[Optional] - chain associated with the VC | | refId?: string | \[Optional] - if using oauth, this is the embedded wallet\_id associated with the social account | | signerRefId?: boolean | \[Optional] - for smart contract wallets, signerRefId is the wallet ID of the signer for this SCW | | email?: string | \[Optional] - email associated with the VC | | nameService?: NameServiceData | \[Optional] - ens data name and avatar url, if one is associated with the wallet in the VC, see [NameServiceData](/react-sdk/objects/verified-credential#nameservicedata) below for more details | | publicIdentifier?: string | \[Optional] - common way to reference the VC. i.e. email address for email VCs, name of user for Google VC | | walletName?: string | \[Optional] - wallet name associated with the VC | | walletProvider?: WalletProviderEnum | \[Optional] - type of wallet, see [WalletProviderEnum](/react-sdk/objects/verified-credential#walletproviderenum) below for more details | | walletProperties?: WalletProperties | \[Optional] - generally only used for embedded wallets with Turnkey, see [WalletProperties](http://localhost:3000/react-sdk/objects/verified-credential#walletproperties) below for more details | | format: JwtVerifiedCredentialFormatEnum | \[Optional] - the type of VC i.e. email, see [JwtVerifiedCredentialFormatEnum](/react-sdk/objects/verified-credential#jwtverifiedcredentialformatenum) below for more details | | oauthProvider?: SocialSignInProviderEnum | \[Optional] - the social provider associated with the VC i.e. apple, see [ProviderEnum](/react-sdk/objects/verified-credential#providerenum) below for more details | | oauthUsername?: string | \[Optional] - username associated with the social provider for the VC | | oauthDisplayName?: string | \[Optional] - display name associated with the social provider for the VC | | oauthAccountId?: string | \[Optional] - ID associated with the social provider for the VC | | oauthAccountPhotos?: Array\ | \[Optional] - photos associated with the social provider for the VC | | oauthEmails?: string | \[Optional] - emails associated with the social provider for the VC | | previousUsers?: Array\ | \[Optional] - user IDs who were previously associated with the VC | | embeddedWalletId?: string \| null | \[Optional] - ID of the embedded wallet associated with the VC | ## NameServiceData | Field | Description | | --------------- | -------------------------------------------- | | avatar?: string | \[Optional] - avatar associated with the ens | | name?: string | \[Optional] - name associated with the ens | ## WalletProviderEnum 'browserExtension' || 'custodialService' || 'walletConnect' || 'qrCode' || 'deepLink' || 'embeddedWallet' || 'smartContractWallet' ## WalletProperties | Field | Description | | --------------------------------- | ------------------------------------------------------------------ | | turnkeySubOrganizationId?: string | \[Optional] - turnkey sub organization ID associated with wallet | | turnkeyHDWalletId?: string | \[Optional] - turnkey HD wallet ID associated with the the wallet | | isAuthenticatorAttached?: boolean | \[Optional] - is authenticator i.e. passkey attached to the wallet | ## JwtVerifiedCredentialFormatEnum 'blockchain' || 'email' || 'oauth' || 'passkey' ## ProviderEnum 'emailOnly' || 'magicLink' || 'apple' || 'bitbucket' || 'discord' || 'facebook' || 'github' || 'gitlab' || 'google' || 'instagram' || 'linkedin' || 'microsoft' || 'twitch' || 'twitter' || 'blocto' || 'banxa' || 'dynamic' || 'alchemy' || 'zerodev' || 'turnkey' # SdkViews Views are a new feature as of SDK V0.19, please be aware there may be breaking changes in the future. ## What is it? Views are used to customize the kind of UI that shows up at any point in time in your application. ## How does it work? Views are used primarily in the overrides prop of the [DynamicContextProvider](/react-sdk/providers/dynamiccontextprovider). You pass in an array of configurations for each view you want to customize, each view has its own set of options. ## Supported views: * [Login](/react-sdk/objects/views#login-view) * [Wallet List](/react-sdk/objects/views#wallet-list) ## Login View The `SdkViewType.Login` is used to adjust the login/signup UI options programmatically. When using the login view, you add an object to the views array. This object should have `type: SdkViewType.Login` and `sections` which is an array of SdkViewSection objects. Please read [here](/design-customizations/views#types-of-views) for a comprehensive guide on using this feature. ## Wallet List The `wallet-list` configuration enables you to define tabs with predetermined labels, icons, filters, and recommended wallets, enhancing your application's wallet selection interface. This feature is particularly useful for grouping wallets. Available from version 2.0.0+ #### Configuring Wallet List Tabs In the `DynamicContextProvider` setup, the `overrides` field is used to configure each tab in the wallet list. The configuration options available for each tab allow for detailed customization: * **Label and Icon**: Customize the tab's appearance with a `label` for text and an `icon` for visual representation. The `icon` can be one of the following options: * A icon from the dynamic iconic package ```tsx import { BitcoinIcon } from '@dynamic-labs/iconic'; } ] } } ] } }} /> ``` * A image URL ```tsx ``` * Or you can bring your own React icon ```tsx } ] } } ] } }} /> ``` * **Wallets Filter**: This option enables to dynamic display of wallets based on the selected tab. Clients have the flexibility to write custom filter functions or utilize predefined ones, for more information read the [sort and filter wallets](/wallets/advanced-wallets/sort-and-filter-wallets) doc * **Recommended Wallets**: Specify recommended wallets for each tab by providing [wallet option](/react-sdk/objects/wallet-option) keys and optional labels. This feature is designed to highlight preferred wallets, steering users towards secure and suitable options for their specific needs. * **Style**: An optional field that determines how the tabs are displayed within the wallet list. Currently, the only supported style is `"grid"`. #### Example Configuration Below is an example showcasing the setup for tabs that categorize wallets by blockchain network, utilizing both custom and predefined filter functions: ```tsx import { DynamicContextProvider, FilterChain } from '@dynamic-labs/sdk-react-core' import { BitcoinIcon, EthereumIcon, FlowIcon, SolanaIcon, } from '@dynamic-labs/iconic'; const App = () => { return ( }, walletsFilter: FilterChain('EVM'), recommendedWallets: [ { walletKey: 'phantomevm', }, ], }, { label: { icon: }, walletsFilter: FilterChain('SOL'), }, { label: { icon: }, walletsFilter: FilterChain('BTC'), }, { label: { icon: }, walletsFilter: FilterChain('FLOW'), }, ] } } ] } }} > ) } ``` This is the wallet list view with the tabs | All chains tab selected | Ethereum selected | | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | | | # Wallet An object containing the attributes about the user wallets. ### Props | Field | Description | | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | additionalAddresses: WalletAdditionalAddress\[] | Additional addresses associated to the wallet (e.g. ordinals and payment addresses for bitcoin wallets) | | address: string | Public address of the connected wallet | | chain: string | Current BlockChain name (e.g: 'ETH', 'SOL', 'BTC', etc) | | connector: WalletConnector | The wallet connector object | | id: string | The wallet's unique id (matches thw wallet verified credential on connect-anf-sign) | | isAuthenticated: boolean | True if the user is authenticated, otherwise it's false | | key: string | The wallet key (e.g. metamask, phantom, etc) | ### Methods | Method | Description | | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | getBalance(): Promise\ | Retrieves the balance of the wallet. | | getNameService(): Promise\ | Retrieves the name service data associated with the wallet. | | isConnected(): Promise\ | If the wallet is connected. | | proveOwnership(messageToSign: string): Promise\ | Proves ownership of the wallet by signing a message. | | signMessage(messageToSign: string): Promise\ | Signs a message using the wallet. | | switchNetwork(networkChainId: number \| string): Promise\ | Switches the network that the wallet is connected to. | | sync(): Promise\ | Prompts the user to reconnect the wallet if not connected and only resolves when the wallet is connected and active. | # WalletOption A WalletOption type is used to represent a wallet option in the wallet selection modal. This is as opposed to a [Wallet](/react-sdk/objects/wallet) type, which is used to represent a wallet that is currently connected. | Field | Optional/Required | Type | Description | | -------------------- | ----------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | isInstalledOnBrowser | | boolean | Is this wallet installed via a browser extension | | key | | string | Normalization of the wallet name | | name | | string | The name of the given wallet | | walletConnector | | [WalletConnector](/react-sdk/objects/walletconnector) | The wallet connector interface for the given wallet | | group | Optional | string | The wallet which can connect to multiple chains, not present if the wallet is not multi-chain compatible, or if multiple chains are not enabled | | groupedWallets | Optional | WalletOption\[] | Where a wallet supports multiple chains, this array contains t | ## Example ```jsx isInstalledOnBrowser: true; key: 'phantom'; name: 'Phantom'; walletConnector: WalletConnector; group: 'phantom'; groupedWallets: [ { isInstalledOnBrowser: true; key: ''; name: 'phantom EVM'; walletConnector: WalletConnector; }, { isInstalledOnBrowser: true; key: ''; name: 'phantom Solana'; walletConnector: WalletConnector; }, { isInstalledOnBrowser: true; key: ''; name: 'phantom Ledger'; walletConnector: WalletConnector; }, ]; ``` # WalletConnectConnector This is Dynamic's WalletConnect connector over the basic wallet interface. This can be used to interact with the users WalletConnect wallets. It has all methods available in the [WalletConnector](https://docs.dynamic.xyz/react-sdk/objects/walletconnector) and some additional method specific to WalletConnect wallets. IWalletConnectConnector is available in SDK v2.0.0+. | Field | Description | | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | getSupportedNetworks: Promise\ | A method to retrieve the supported/approved networks for the WalletConnect wallet. Some wallets will only allow approve a network if the user manually switches in the wallet app first. | ## Interface definition ```ts interface IWalletConnectConnector { getSupportedNetworks: Promise }; ``` ### How to use it In this example, we are going to return all supported networks for the wallet connector. ```JavaScript import { useDynamicContext } from '@dynamic-labs/sdk-react-core'; import { isWalletConnectConnector } from '@dynamic-labs/wallet-connector-core'; const MyComponent = () => { const { primaryWallet } = useDynamicContext(); const getWCSupportedNetworks = async () => { if (!isWalletConnectConnector(primaryWallet?.connector)) { return; } const supportedNetworks = await primaryWallet.connector.getSupportedNetworks(); console.log('supportedNetworks', supportedNetworks); return supportedNetworks; }; ... }; ``` # WalletConnector This is Dynamic's abstraction over the wallet interface. This can be used to interact with the users wallet. | Field | Description | | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | fetchPublicAddress: Promise\ | A method to fetch the public address (alternatively the address could be fetched from useDynamicContext's user object) | | getPublicClient(): Viem Public Client \| undefined | The provider should be used for read only actions on the block chain.Ethereum - A [Viem Public Client](https://viem.sh/docs/clients/public.html) SOLANA -[solana/web3js.Connection](https://solana-labs.github.io/solana-web3.js/classes/Connection.html) | | getWalletClient() : Promise\\\ | Representation of the signer (the wallet) for actions that require signatures with the private key.Ethereum - [Viem Wallet Client](https://viem.sh/docs/clients/wallet.html), Solana - The active wallet | | name: string | The wallet name | | signMessage(messageToSign: string): Promise\ | A method to sign a message | | supportedChains: Chain\[] | The chains that the wallet supports | | getDeepLink(): string | A method to get a deep link to a wallet for mobile | | getAccountAbstraction(): Smart Wallet Provider | A method to get the smart wallet provider for more advanced usage | | supportsNetworkSwitching(): boolean | Whether the connector supports network switching. | | switchNetwork(\{ networkChainId, networkName }: \{ networkChainId?: number; networkName?: string; }): Promise\ | Switch to another network by provider either the network name or chain id specified in the list of EvmNetwork | # WalletsByChain ## Description An Array of objects, in which each object contains the chain name to be connected for the chain. Primarily used for [bridging](/building-bridges/dynamic-bridge-widget) purposes. | Field | Description | | ------------- | ----------- | | chain: string | Chain name | ## Example ```jsx [ { chain: "EVM", }, { chain: "STARK", }, ]; ``` # Introduction to the SDK The SDK allows you to build authentication and authorization into your application in a few lines of code. ## Getting Started We provider step by step guides on getting started with the SDK [here](/quickstart). You'll also want to check out the [UI components customization guides](/ui-components), or [the headless guides](/headless/headless-overview) if you need to use your own UI components. Below we'll introduce you to the main parts of the SDK and how they can be used. ## Main Concepts ### Loading States [Our Loading/Login States guide](/react-sdk/loading-login-states) show you how do everything from wait for the SDK to be loaded to checking if a user is authenticated. ### Components [Components](/react-sdk/components/components-introduction) exist as three main types: 1. UI components (create UI for different parts of the onboarding flow) 2. Context providers (wrap your app in a React context to access SDK functionality) 3. Connectors (help integrate different parts of the SDK i.e. Wagmi or specific chains) ### Handlers [Handlers](/react-sdk/handlers/handlers-introduction) are a way to programmatically customize synchronous behaviors of the SDK (i.e. run a blocking fraud check during wallet connection). ### Events [Events](/react-sdk/events/events-introduction) are a way to listen for SDK events and run your own asynchronous code at certain points. ### Hooks [Dynamic hooks](/react-sdk/hooks/hooks-introduction) are custom React hooks that allow you to access SDK functionality in your React components. ### Utilities [Utilities](/react-sdk/utilities/utilities-introduction) are functions that allow you to do certain tasks in your application quickly i.e. check the network of a wallet. # DynamicContextProvider ## Settings Passed in using the "settings" prop, available when you first initialize `DynamicContextProvider` in your App. ### accessDeniedMessagePrimary **Type:** `string` **Description:** Custom main error message used when a wallet attempts to authenticate via Dynamic and is rejected because it does not have access. Defaults to "Access denied" ### accessDeniedMessageSecondary **Type:** `string` **Description:** Custom secondary error message used when a wallet attempts to authenticate via Dynamic and is rejected because it does not have access. Defaults to "We couldn't find your wallet address on our access list of customers." ### accessDeniedButton **Type:** `AccessDeniedCustomButton` **Description:** Custom secondary error button text and action when a wallet attempts to authenticate via Dynamic and is rejected because it does not have access. Defaults to "Try another method" and allow user to choose another login option. Please see: [AccessDeniedCustomButton](/react-sdk/objects/access-denied-custom-button) ### coinbaseWalletPreference **Type:** `'all' | 'smartWalletOnly' | 'eoaOnly'` **Description:** Determines which connection options users will see. Defaults to all. Please see: [https://www.smartwallet.dev/sdk/makeWeb3Provider#options-optional](https://www.smartwallet.dev/sdk/makeWeb3Provider#options-optional) ### cssOverrides **Type:** `string | JSX.Element` **Description:** Allows for custom CSS overrides via ShadowDom. Please see: [Custom CSS](/design-customizations/css/custom-css)] ### debugError **Type:** `boolean` **Description:** When enabled, errors caught during the authentication step and their stack trace will be set in a state and displayed in the front end. ### deepLinkPreference **Type:** `'native' | 'universal'` **Description:** Controls the type of deep link used when connecting a mobile wallet. Defaults to 'native'. This is useful for example if your app is running in a webview of a native mobile app, and you want to be able to link out to any wallet without having to modify your iOS build config. In this case, you can set this to 'universal'. ### displaySiweStatement **Type:** `boolean` **Description:** When enabled, this will show a message on terms of service and privacy policy in the signing message on the authentication step. ### enableVisitTrackingOnConnectOnly **Type:** `boolean` **Description:** When the Dynamic SDK is being used with auth mode = connect-only, we require this to be set to "true" to track visits of connected wallets in this environment. ### environmentId **Type:** `string` **Description:** You will need to specify your app's environment ID, which refers to a unique environment and its settings in Dynamic. To get your environment ID, go to [dashboard's API tab](https://app.dynamic.xyz/dashboard/api) ### events **Type:** `DynamicEvents` **Description:** This prop allows custom event callbacks after important events during the authentication flows for Dynamic's React SDK. For more information, please see [the main React SDK reference](/react-sdk) ### initialAuthenticationMode **Type:** `AuthModeType` **Description:** Sets the initial SDK authentication mode to either connect-only or connect-and-sign. connect-only does not require users to authenticate to prove ownership of their wallet. connect-and-sign will require an additional step for users to prove ownership of their wallet. Defaults to connect-and-sign. See also the [setAuthMode](/react-sdk/hooks/usedynamiccontext) method, which allows you to toggle this after the app has loaded. ### logLevel **Type:** `keyof typeof LogLevel` **Description:** The log level to use for client side logging with our SDK. Defaults to WARN ### mobileExperience **Type:** `'in-app-browser' | 'redirect'` **Description:** This setting determines how users connect on mobile devices. By default, it is set to 'in-app-browser', which means the connection will open within the wallet's in-app browser. If you prefer to have users connect via WalletConnect, set this option to 'redirect'. This will prompt users to accept connection requests in their wallet app and, for Phantom users, automatically redirect them back to their mobile browser. [See here for examples](#setting-mobile-experience) ### newToWeb3WalletChainMap **Type:** `ChainToWalletMap` **Description:** When provided, this is used in the Get your first wallet view in the wallet list modal. This can be helpful to steer initial customers who do not have a wallet to download and use a specific chain and wallet. ### networkValidationMode **Type:** `'always' | 'sign-in' | 'never'` **Description:** Note: Supported only in connect-only. Defines how the Dynamic SDK will enforce the wallet network. * **always** - requires the wallet to be on an enabled network while connecting and while the session is active * **sign-in** - will only enforce the network on connect * **never** - completely turn off the network validation. Defaults to `sign-in`. ### onboardingImageUrl **Type:** `string` **Description:** When provided, this image will be shown during the customer information capture step after a wallet successfully authenticates with Dynamic and the environment requires additional information from the user. ### policiesConsentInnerComponent **Type:** `ReactNode | ReactNode[]` **Description:** For environments with the username setting enabled, you will need to pass in a value for this prop to show a custom prompt or label for the policies contest checkboxes displayed during customer information capture after signing. ### privacyPolicyUrl **Type:** `string` **Description:** When provided, this will display a privacy policy URL on the signing step. This should be set to a URL of your organization's privacy policy web page. ### recommendedWallets **Type:** `RecommendedWallet[]` **Description:** Available from V1.2 only. An array of wallet keys that will be recommended to the user. See more in [our section on recommending wallets](/wallets/advanced-wallets/recommend-wallets). ### redirectUrl **Type:** `string` **Description:** When provided, this will redirect the user to the specified URL after the user has successfully gone through an oauth flow (social login or social account linking). ### shadowDOMEnabled **Type:** `boolean` **Description:** Shadow DOM allows the SDK to look as intended wherever it is hosted and it plays nicely with your existing styling system. For more information, please see: [Custom CSS](/design-customizations/css/custom-css) ### siweStatement **Type:** `string` **Description:** When provided, this custom message will be shown on the message to sign for the wallet signing step. ### termsOfServiceUrl **Type:** `string` **Description:** When provided, this will display a terms of service URL on the signing step. This should be set to a URL of your organization's terms of service web page. ### walletConnectors **Type:** `[]walletConnector` **Description:** When provided, will enable whatever connectors you pass so that your end user can signup/login using those wallets. For the list of available connectors, see the walletConnectors section below. ### walletConnectPreferredChains **Type:** Not specified **Description:** Relevant to Wallet Connect only, used to determine which chains to establish a connection with first. The value must be an array containing [CAIP-2](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-2.md) chain ID's. The format for this is `{namespace-goes-here}:{reference-goes-here}`. Currently we only support Ethereum, so it will always be `eip155:{reference-goes-here}`. For example, Ethereum mainnet being \['eip155:1'] ### walletsFilter **Type:** `(options: WalletOption[]) => WalletOption[]` **Description:** When specified, this is a custom function that allows clients of Dynamic SDK to filter out wallet options based on a function on the wallet options. For example: `walletsFilter: (wallets) => wallets.filter((w) => w.key !== 'walletx')` will exclude walletx from showing up on the wallet list. ### bridgeChains **Type:** `WalletsByChain` **Description:** (Only use with bridging) Which chains should be used for bridging. ### socialProvidersFilter **Type:** `(providers: SocialOAuthProvider[]) => SocialOAuthProvider[]` **Description:** When specified, this is a custom function that allows clients of Dynamic SDK using social auth to filter or modify the order of the social options displayed to the user. For example, we can only show github oauth option: `socialProvidersFilter: (providers) => (['github'])`. ### overrides **Type:** `{ views: SdkView[], evmNetworks: EvmNetwork[] }` **Description:** Used for passing in [Views](/react-sdk/objects/views) or [evmNetworks](/chains/network-switching#evmnetworks). ### enableConnectOnlyFallback **Type:** `boolean` **Description:** When `true`, enables the SDK to fallback to wallet connect-only auth mode if connection to Dynamic's servers is not possible. Available in version 1.1 and above ### defaultPhoneInputIso2 **Type:** `string` **Description:** Used to define which phone number country code should be used as the default in all phone inputs, ex: `defaultPhoneInputIso2: "fr"` ### social **Type:** `{ strategy: 'redirect' | 'popup' }` **Description:** Allow to customize the default social behavior from 'redirect' to 'popup' ### tokenFilter **Type:** `(tokens: TokenBalance[]) => TokenBalance[]` **Description:** Allows filtering which tokens show in the widget balance view. Hidden tokens will not count towards the total balance. ## walletConnectors Here are the possible options for the walletConnectors array. For each one, you must make sure you have installed the package first: Please note that @dynamic-labs/ethereum (EthereumWalletConnectors) contains all EVM chains, not just Ethereum. It also includes Dynamic-powered embedded wallets, as these are EVM based too. | Package Name | Chain | WalletConnector to include | | :--------------------- | :----- | -------------------------- | | @dynamic-labs/ethereum | EVM | `EthereumWalletConnectors` | | @dynamic-labs/algorand | ALGO | `AlgorandWalletConnectors` | | @dynamic-labs/solana | SOL | `SolanaWalletConnectors` | | @dynamic-labs/flow | FLOW | `FlowWalletConnectors` | | @dynamic-labs/starknet | STARK | `StarknetWalletConnectors` | | @dynamic-labs/cosmos | COSMOS | `CosmosWalletConnectors` | ##### EVM Addon Wallets | Package Name | Which Wallets | WalletConnector to include | | :------------------- | :------------ | :-------------------------- | | @dynamic-labs/magic | *magic* | `MagicWalletConnectors` | | @dynamic-labs/blocto | *blocto* | `BloctoEvmWalletConnectors` | ## Locale This prop is for editing copy and adding translations to the SDK. For more information, please see [the customizing copy guide](/design-customizations/customizing-copy-translations) and [reference](/react-sdk/objects/locale). ## Examples #### Initiate Dynamic using only defaults ```JavaScript ``` #### Initiate Dynamic with Ethereum and Starknet wallets enabled ```JavaScript import { EthereumWalletConnectors } from "@dynamic-labs/ethereum"; import { StarknetWalletConnectors } from "@dynamic-labs/starknet"; ``` #### Initiate Dynamic using all available methods ```JavaScript { console.log('in onAuthFlowClose'); }, onAuthFlowOpen: () => { console.log('in onAuthFlowOpen'); }, onAuthSuccess: () => { navigate('/dashboard/overview'); }, onLogout: () => { console.log('in onLogout'); }, }, initialAuthenticationMode: 'connect-only', logLevel: 'DEBUG', newToWeb3WalletChainMap: { 1: ['metamask', 'walletconnect'], 137: ['metamask', 'walletconnect'], 56: ['metamask', 'walletconnect'], 80001: ['metamask', 'walletconnect'], }, onboardingImageUrl: 'https://i.imgur.com/3g7nmJC.png', policiesConsentInnerComponent: (

By clicking "Connect", you agree to our{' '} Terms of Service {' '} and{' '} Privacy Policy .

), privacyPolicyUrl: 'https://www.dynamic.xyz/privacy-policy', shadowDOMEnabled: true, siweStatement: 'Custom message to sign', termsOfServiceUrl: 'https://www.dynamic.xyz/terms-of-service', walletsFilter: (wallets) => wallets.filter((w) => w.key !== 'walletx'), }}>
``` #### Do not show `walletx` on the wallet list ```JavaScript >' walletsFilter: (wallets) => wallets.filter((w) => w.key !== 'walletx'), }} > ``` #### With events callbacks ```JavaScript >', events: { onAuthFlowClose: () => { console.log('in onAuthFlowClose'); }, onAuthFlowOpen: () => { console.log('in onAuthFlowOpen'); }, onAuthSuccess: () => { navigate('/dashboard/overview'); }, onLogout: () => { console.log('in onLogout'); }, }, }}> ``` #### Setting mobile experience ##### Globally for all wallets ```JavaScript >', mobileExperience: 'redirect' | 'in-app-browser' }}> ``` ##### On a wallet by wallet basis with optional default for all non-specified wallets **Note**: The walletKey can be found on the chains and networks page of the dashboard [here](https://app.dynamic.xyz/dashboard/chains-and-networks#evm) ```JavaScript >', mobileExperience: { '<>': 'redirect' | 'in-app-browser', default: 'in-app-browser' } }}> ``` # DynamicWagmiConnector The `DynamicWagmiConnector` component integrates your Dynamic project settings with Wagmi # Usage ```typescript import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector"; import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core"; function App() { return ( ); } ``` # Props ## evmNetworks You can pass a static `evmNetworks` array. This will be passed down to the [Wagmi client config](https://wagmi.sh/react/client#configuration). The reference for an EvmNetwork can be found [here](/react-sdk/objects/evmNetwork). Example: ```typescript const evmNetworks: EvmNetwork[] = [ { blockExplorerUrls: ["https://etherscan.io/"], chainId: 1, chainName: "Ethereum Mainnet", iconUrls: ["https://app.dynamic.xyz/assets/networks/eth.svg"], nativeCurrency: { decimals: 18, name: "Ether", symbol: "ETH" }, networkId: 1, privateCustomerRpcUrls: ["https://mainnet.infura.io/v3/your-api-key"], rpcUrls: ["https://cloudflare-eth.com"], vanityName: "Ethereum", }, ]; ``` ### WebSocket For webSocket support with Wagmi, you can pass an object as the privateCustomerRpcUrls with your webSocket url configuration ```typescript const evmNetworks: EvmNetwork[] = [ { ... privateCustomerRpcUrls: [ { url: "https://mainnet.infura.io/v3/your-api-key", webSocket: "wss://mainnet.infura.io/v3/your-api-key" } ], ... }, ]; ``` # Providers and Connectors Introduction You can see the full UI implemented at any time in our demo environment: [https://demo.dynamic.xyz](https://demo.dynamic.xyz) #### Dynamic Context Provider The [**DynamicContextProvider**](/react-sdk/providers/dynamiccontextprovider) is a provider component provides the context for the rest of the components to work. It must wrap all Dynamic related components of your application. #### Dynamic Wagmi Connector The [**DynamicWagmiConnnector**](/react-sdk/providers/dynamicwagmiconnector) is responsible for helping your Dynamic application to integrate with Wagmi out of the box. # Upgrade from V0 to V1 ## From V0.19 to V1 This upgrade guide is specific to implementing the SDK itself. ### Breaking Changes #### userWallets hooks * connectedWallets , secondaryWallets and linkedWallets all been removed in favor of userWallets hook. See [here](/react-sdk/hooks/useuserwallets) for more info. ```jsx import { useDynamicContext, getNetwork } from '@dynamic-labs/sdk-react-core'; const App = () => { const { connectedWallets } = useDynamicContext(); useEffect(() => { connectedWallets.forEach(async ({ connector }) => { const network = await getNetwork(connector); ... }); }, [connectedWallets]); ... } ``` ```jsx import { useUserWallets, getNetwork } from '@dynamic-labs/sdk-react-core'; const App = () => { const userWallets = useUserWallets(); useEffect(() => { userWallets.forEach(async ({ connector }) => { const network = await getNetwork(connector); ... }); }, [userWallets]); ... } ``` #### EthereumSmartWalletConnectors -> ZeroDevSmartWalletConnectors * (v1 alpha -> v1) EthereumSmartWalletConnectors is now renamed to ZeroDevSmartWalletConnectors. You use this connector when you want to use AA wallets. ```jsx import {DynamicContextProvider} from "@dynamic-labs/sdk-react-core"; import { EthereumWalletConnectors } from '@dynamic-labs/ethereum'; import { ZeroDevSmartWalletConnectors } from '@dynamic-labs/ethereum-aa'; const App = () => ( ); export default App; ``` ```jsx import {DynamicContextProvider} from "@dynamic-labs/sdk-react-core"; import { EthereumWalletConnectors } from "@dynamic-labs/ethereum"; import { EthereumSmartWalletConnectors } from "@dynamic-labs/ethereum-aa"; const App = () => ( ); export default App; ``` #### wallets -> walletConnectorOptions * Wallets property returned by useDynamicContext now renamed to walletConnectorOptions `````jsx import { useDynamicContext } from "@dynamic-labs/sdk-react-core"; const App = () => { const { walletConnectorOptions } = useDynamicContext(); return (
{walletConnectorOptions.map((wallet) => (
{wallet.name}
))}
); }; export default App ;````
```jsx import { useDynamicContext } from "@dynamic-labs/sdk-react-core"; const App = () => { const { wallets } = useDynamicContext(); return (
{wallets.map((wallet) => (
{wallet.name}
))}
); }; export default App; `````
#### walletsByChain -> bridgeChains * walletsByChain has been renamed to bridgeChains ```jsx import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core"; const App = () => { return ( ); }; export default App; ``` ```jsx import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core"; const App = () => { return ( ); }; export default App; ``` ### Non Breaking Changes * Turnkey wallets are now created as Turnkey HD wallets. ### New Features * eip6963 is now fully supported without any need for changes on your end! * Listening to changes in wallet connectors is now supported via a hook called useWalletConnectorEvent. See [here](/react-sdk/hooks/usewalletconnectorevent) for more info. * You can now trigger the onramp flow programmatically using the useFunding hook. See [here](/react-sdk/hooks/usefunding) for more info. * Support for account recovery via a hook has been added. See [here](/react-sdk/hooks/usepasskeyrecovery) for more info. * We now generate HD wallets by default, there is nothing you need to do to take advantage of this. * You can now generate smart contract wallets (SCWs) using our Smart Wallet integrations. See [here](/smart-wallets/add-smart-wallets) for more info. * All of the copy which is used in the UI from the SDK is now completely editable. See [here](/design-customizations/customizing-copy-translations) for more info. * You can control what kind of signup/login options are shown in your UI on a programmatic basis regardless of what is enabled in the dashboard. See [here](/design-customizations/views) for more info. * Embedded wallets has been split up into the generation step and the claim step which means you can now give a user a wallet but without them adding a passkey until they make their first transaction. * Along the same lines as above, you can also pregenerate a wallet for a user without any interaction from them by using our API directly. See [here](/api-reference/wallets/createWallet) for more info. * Webhooks are now offered out of the box! You do not need to make any SDK changes to take advantage of this. See [here](/developer-dashboard/webhooks) for more info. ## From V0.18 to V0.19 ### *Summary* This upgrade guide is specific to implementing the SDK itself. There are a number of breaking changes in v0.19, mainly to the way the SDK is structured. To upgrade you should follow three steps, which are outlined in the breaking changes section below. Uninstall sdk-react (if used) and [install the latest sdk-react-core](/react-sdk/upgrade#sdk-react-sdk-react-core). [Install the WalletConnectors you need](/react-sdk/upgrade#walletconnectors) alongside the SDK and [use them in the DynamicContextProvider](/react-sdk/upgrade#using-walletconnectors). If you're happy for Viem to be the default instead of Ethers, do nothing. Otherwise, [use the Ethers extension](/react-sdk/upgrade#ethers-viem). ### Breaking Changes #### sdk-react -> sdk-react-core