With the Embedded Wallet SDK, you can supercharge your dApp’s UX. It is super easy to integrate and completely customisable to meet your dApp’s styles. It also helps solve the current Snaps limitations and integrating this will allow users to view their balances, manage their assets, and more.
Record of addresses and REST URLs corresponding to given chain ID.
isOpen
boolean
Whether the modal is open
onClose
() => void
Callback function when the modal is closed
config
Config
Config of the modal
height
string
Height of the component
width
string
Width of the component
enableWalletConnect
boolean
When true, wallet connection can be controlled via embedded wallet
restrictChains
boolean
Defaults to false, shows balances of all discoverable chains. Passing this as true restricts to only fetching balances for specified chains.
Here is the type definition of Config:
typeConfig= {// This function is called to render the title of the modaltitle?: (page:Page) =>React.ReactNode;// This function is called to render the sub-title of the modalsubTitle?: (page:Page) =>React.ReactNode;// Should the modal be closed when the backdrop is clicked closeOnBackdropClick?:boolean;// Should the modal be closed when the escape key is pressed closeOnEscape?:boolean;// Configure the action list on the home page actionListConfig?:ActionListConfig;// Should action buttons be visible showActionButtons?:boolean;};typeActionListConfig=Record<string, { label?:string;onClick?: () =>void; enabled?:boolean; order?:number; }>;enumPage { HOME ="home", ADDRESSES ="addresses"}
In case you want to create your own UI in react, we have exposed the react hooks that we use internally. If you are not using react, then you can check out the next page.
For making queries, we primarily use swr, so a lot of return values from hooks will have the same return type (except for the data).
User Balances
To fetch user balances, you can use useRichBalance hook.
address - the wallet address your querying the balance for
chainId - self explanatory
restUrl (optional) - custom rest url for the node
Return Value -
The activityQuery.data.pages field will be a list of objects with the following fields -
{ sender: [] // array of activity where user is sender of tokens recipient: [] // // array of activity where user is received of tokens}
Usage Example -
Using the activity data
import { type ActivityCardContent } from'@leapwallet/snaps-sdk-core'// flat list of activityconstactivityList=activityQuery.data.pages.reduce((acc, cur) => {return [...acc,...cur.sender.activity,...cur.recipient.activity]; }, [] asActivityCardContent[]);// you can now sort this list however you want
Triggering the next (data) page load using the last element on the list