0.3.7 • Published 4 months ago
@leapwallet/embedded-wallet-sdk-react v0.3.7
Leap Snaps SDK React
Installation
npm install @leapwallet/embedded-wallet-sdk-react
Usage
Get Started
import React from "react";
import { useChain } from "@cosmos-kit/react";
import { AccountModal } from "@leapwallet/embedded-wallet-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,
},
},
};