Leap Snaps SDK React
Installation
npm install @leapwallet/snaps-sdk-reactUsage
Get Started
import React from "react";
import { useChain } from "@cosmos-kit/react";
import { AccountModal } from "@leapwallet/snaps-sdk-react";
const chainId = "osmosis-1";
const chain = "osmosis";
const restUrl = "https://rest.cosmos.directory/osmosis";
const YourApp = () => {
const { address } = useChain(chain);
const [isModalOpen, setIsModalOpen] = React.useState(false);
return (
<div>
{/* other components */}
<button onClick={() => setIsModalOpen(true)}>Open Modal</button>
<AccountModal
theme="dark"
chainId={chainId}
restUrl={restUrl}
address={address}
isOpen={isModalOpen}
onClose={closeModal}
/>
{/* other components */}
</div>
);
};Props
| Name | Type | Description |
|---|---|---|
theme |
"light" | "dark" | ThemeDefinition |
Theme of the modal |
chainId |
string |
Chain ID of the chain |
restUrl |
string |
REST URL of the chain |
address |
string |
Address of the user |
isOpen |
boolean |
Whether the modal is open |
onClose |
() => void |
Callback function when the modal is closed |
config |
Config |
Config of the modal |
Here is the type definition of Config:
type Config = {
// This function is called to render the title of the modal
title?: (page: Page) => React.ReactNode;
// This function is called to render the sub-title of the modal
subTitle?: (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;
};
type ActionListConfig = Record<
string,
{
label?: string;
onClick?: (chainId: string) => void;
enabled?: boolean;
}
>;
enum Page {
HOME = "home",
ACTIVITY = "activity",
}Example Configuration
const config: Config = {
title: (page) => {
switch (page) {
case Page.HOME:
return "Assets";
case Page.ACTIVITY:
return "Activity";
}
},
closeOnBackdropClick: true,
closeOnEscape: true,
actionListConfig: {
[Actions.Swap]: {
label: "Swap",
onClick: (chainId) => {
console.log(chainId);
},
enabled: true,
},
[Actions.Bridge]: {
enabled: false,
},
},
};