@leapwallet/embedded-wallet-sdk-react
TypeScript icon, indicating that this package has built-in type declarations

0.3.7 • Public • Published

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

Package Sidebar

Install

npm i @leapwallet/embedded-wallet-sdk-react

Weekly Downloads

13

Version

0.3.7

License

MIT

Unpacked Size

586 kB

Total Files

100

Last publish

Collaborators

  • leapwallet