@leapwallet/embedded-wallet-sdk-react

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,
    },
  },
};