Skip to content

@leapwallet leapwallet

embedded-wallet-sdk-react / 2.1.0-beta.3

embedded-wallet-sdk-react 2.1.0-beta.3

Install from the command line:
Learn more about npm packages
$ npm install @leapwallet/embedded-wallet-sdk-react@2.1.0-beta.3
Install via package.json:
"@leapwallet/embedded-wallet-sdk-react": "2.1.0-beta.3"

About this version

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

Details

Assets

  • embedded-wallet-sdk-react-2.1.0-beta.3.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all