# Leap Snaps SDK React

## Installation

```bash
npm install @leapwallet/embedded-wallet-sdk-react
```

## Usage

### Get Started

```tsx
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`:

```ts
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

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