> ## Documentation Index
> Fetch the complete documentation index at: https://seilabs-docs-evm-cookbook.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Sei Global Wallet Integration Guide

> Learn how to integrate and use Sei Global Wallet, a cross-application embedded crypto wallet that provides persistent wallet experience across Sei ecosystem applications.

<Danger>By logging in with Sei Global Wallet, you agree to our [Terms of Use](https://dashboard.sei.io/terms).</Danger>

Sei Global Wallet is a cross-application embedded crypto wallet powered by [Dynamic Global Wallets](https://www.dynamic.xyz/docs/react/global-wallets/overview). It gives users a persistent wallet experience across any integrated dApp in the Sei ecosystem. Users can authenticate and interact with familiar login methods, such as Google, Twitter, or Telegram. They do not need a browser extension or prior crypto knowledge.

<Info>Other authentication methods are possible through Dynamic, such as existing wallet apps (for example, MetaMask). However, these methods are not currently enabled.</Info>

## What is Sei Global Wallet?

Unlike traditional browser extension wallets, Sei Global Wallet is built directly into web applications. Users can authenticate with familiar methods, such as Google, Twitter, Telegram, or email. They do not need to download anything or know about crypto.

## Why use Sei Global Wallet?

**For users:**

* The wallet works directly in the browser, without extensions.
* Users log in with Google, Twitter, Telegram, or email.
* The same wallet works across all Sei ecosystem dApps.
* The wallet is self-custodial: users keep full control of their keys.

**For developers:**

* Integration takes one line: a single EIP-6963 import works with RainbowKit, ConnectKit, Web3-React, and other compatible libraries.
* `@sei-js/sei-global-wallet@2` is ESM-only and has no `require()` entry. Add the [required consumer overrides](https://github.com/sei-protocol/sei-js/tree/main/packages/sei-global-wallet#required-consumer-overrides) before you install it.

## How to create a Sei Global Wallet account

1. Go to [dashboard.sei.io](https://dashboard.sei.io) or any Sei ecosystem dApp.
2. Click **Connect Wallet**. Then select **Sei Global Wallet**.
3. Choose your preferred login method (Google, X, Telegram, or Email).
4. Complete the authentication flow.
5. Your wallet is created automatically. You can use it across all integrated Sei dApps.

## How to integrate Sei Global Wallet

### Prerequisites

**EIP-6963:** A standard that lets multiple wallets coexist without conflicts. Instead of competing for `window.ethereum`, wallets announce themselves through events. Users can then choose which wallet to use.

**Dynamic:** The infrastructure that powers Sei Global Wallet. It handles authentication, key management, and cross-app wallet persistence, and it keeps wallets non-custodial.

## Installation

<Warning>
  Add the [required consumer overrides](https://github.com/sei-protocol/sei-js/tree/main/packages/sei-global-wallet#required-consumer-overrides) to your root manifest **before** you install. Dynamic Global Wallet Client pulls `axios` and `uuid` versions with known vulnerabilities. This package cannot push overrides into your app. The npm block pins `axios` to 1.18.0, `uuid` to 11.1.1, and `ws` to 8.21.0 under `viem`. The Bun block pins only `axios` and `uuid`. When Dynamic ships a release that fixes those pins, remove the overrides.
</Warning>

Install the Sei Global Wallet package:

```bash theme={null}
npm install @sei-js/sei-global-wallet
```

or

```bash theme={null}
yarn add @sei-js/sei-global-wallet
```

Import the package to register the wallet:

```js theme={null}
import '@sei-js/sei-global-wallet/eip6963';
```

<Note>
  `@sei-js/sei-global-wallet@2` is ESM-only. The `/eip6963` import still registers the provider. It also exports `registerEIP6963Provider`, `unregisterEIP6963Provider`, and `eip6963ProviderInfo`. Other entrypoints are `/ethereum`, `/solana`, and `/zerodev`.
</Note>

<Warning>Make sure that the provider stack of your dApp is configured correctly to interact with the wallet. Importing the package only registers the wallet for discovery. Most wallet connection libraries that support EIP-6963 detect the wallet automatically after the import.</Warning>

***

## Integration examples

These examples show how to integrate the preconfigured Sei Global Wallet package with different frameworks and wallet provider libraries.

<Accordion title="RainbowKit integration">
  **Create a new Vite app:**

  ```bash theme={null}
  npm create vite@latest my-sei-dapp -- --template react-ts
  cd my-sei-dapp
  ```

  **Install dependencies:**

  ```bash theme={null}
  npm install @rainbow-me/rainbowkit wagmi viem @tanstack/react-query @sei-js/sei-global-wallet
  ```

  **Update `App.tsx`:**

  ```tsx theme={null}
  import '@rainbow-me/rainbowkit/styles.css';
  import '@sei-js/sei-global-wallet/eip6963';

  import { ConnectButton, getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
  import { WagmiProvider } from 'wagmi';
  import { sei, seiTestnet } from 'wagmi/chains';
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  import { useAccount, useBalance } from 'wagmi';

  const config = getDefaultConfig({
    appName: 'My Sei dApp',
    projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
    chains: [sei, seiTestnet],
    ssr: false
  });

  const queryClient = new QueryClient();

  function AccountInfo() {
    const { address, isConnected, chain } = useAccount();
    const { data: balance } = useBalance({ address });

    if (!isConnected) {
      return <p>Connect your wallet to see account details</p>;
    }

    return (
      <div className="account-info">
        <h3>Account Information</h3>
        <p>
          <strong>Address:</strong> {address}
        </p>
        <p>
          <strong>Network:</strong> {chain?.name}
        </p>
        <p>
          <strong>Balance:</strong> {balance?.formatted} {balance?.symbol}
        </p>
      </div>
    );
  }

  export default function App() {
    return (
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitProvider>
            <div className="app-container">
              <h1>My Sei dApp</h1>
              <ConnectButton />
              <AccountInfo />
            </div>
          </RainbowKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    );
  }
  ```

  **Run your app:**

  ```bash theme={null}
  npm run dev
  ```
</Accordion>

<Accordion title="ConnectKit integration">
  **Create a new Vite app:**

  ```bash theme={null}
  npm create vite@latest my-sei-dapp -- --template react-ts
  cd my-sei-dapp
  ```

  **Install dependencies:**

  ```bash theme={null}
  npm install connectkit wagmi viem @tanstack/react-query @sei-js/sei-global-wallet
  ```

  **Update `App.tsx`:**

  ```tsx theme={null}
  import '@sei-js/sei-global-wallet/eip6963';

  import { ConnectKitButton, ConnectKitProvider, getDefaultConfig } from 'connectkit';
  import { WagmiProvider, createConfig, http } from 'wagmi';
  import { sei, seiTestnet } from 'wagmi/chains';
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  import { useAccount, useBalance } from 'wagmi';

  const config = createConfig(
    getDefaultConfig({
      chains: [sei, seiTestnet],
      transports: {
        [sei.id]: http(),
        [seiTestnet.id]: http()
      },
      walletConnectProjectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
      appName: 'My Sei dApp'
    })
  );

  const queryClient = new QueryClient();

  function AccountInfo() {
    const { address, isConnected, chain } = useAccount();
    const { data: balance } = useBalance({ address });

    if (!isConnected) {
      return <p>Connect your wallet to see account details</p>;
    }

    return (
      <div className="account-info">
        <h3>Account Information</h3>
        <p>
          <strong>Address:</strong> {address}
        </p>
        <p>
          <strong>Network:</strong> {chain?.name}
        </p>
        <p>
          <strong>Balance:</strong> {balance?.formatted} {balance?.symbol}
        </p>
      </div>
    );
  }

  export default function App() {
    return (
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <ConnectKitProvider>
            <div className="app-container">
              <h1>My Sei dApp</h1>
              <ConnectKitButton />
              <AccountInfo />
            </div>
          </ConnectKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    );
  }
  ```

  **Run your app:**

  ```bash theme={null}
  npm run dev
  ```
</Accordion>

<Accordion title="Web3-React v8 integration">
  **Create a new Vite app:**

  ```bash theme={null}
  npm create vite@latest my-sei-dapp -- --template react-ts
  cd my-sei-dapp
  ```

  **Install dependencies:**

  ```bash theme={null}
  npm install @web3-react/core @web3-react/eip1193 @web3-react/types @sei-js/sei-global-wallet
  ```

  **Update `App.tsx`:**

  ```tsx theme={null}
  import '@sei-js/sei-global-wallet/eip6963';

  import React, { useEffect, useState } from 'react';
  import { Web3ReactProvider, initializeConnector } from '@web3-react/core';
  import { EIP1193 } from '@web3-react/eip1193';

  interface EIP6963ProviderInfo {
    uuid: string;
    name: string;
    icon: string;
    rdns: string;
  }

  interface EIP6963ProviderDetail {
    info: EIP6963ProviderInfo;
    provider: any;
  }

  function findSeiGlobalWallet(): any {
    if (typeof window === 'undefined') return null;

    const providers = new Map<string, EIP6963ProviderDetail>();

    const handleProviderAnnouncement = (event: Event) => {
      const customEvent = event as CustomEvent<EIP6963ProviderDetail>;
      providers.set(customEvent.detail.info.uuid, customEvent.detail);
    };

    window.addEventListener('eip6963:announceProvider', handleProviderAnnouncement as EventListener);

    window.dispatchEvent(new Event('eip6963:requestProvider'));
    window.removeEventListener('eip6963:announceProvider', handleProviderAnnouncement);

    for (const [uuid, provider] of providers) {
      if (provider.info.name.toLowerCase().includes('sei') || provider.info.rdns.includes('sei')) {
        return provider.provider;
      }
    }
  }

  export const [eip6963Connector, eip6963Hooks] = initializeConnector<EIP1193>((actions) => {
    const seiProvider = findSeiGlobalWallet();
    return new EIP1193({ actions, provider: seiProvider });
  });

  const connectors: [EIP1193, typeof eip6963Hooks][] = [[eip6963Connector, eip6963Hooks]];

  function InnerApp() {
    const { useAccount, useChainId, useIsActive } = eip6963Hooks;
    const account = useAccount();
    const chainId = useChainId();
    const isActive = useIsActive();
    const [isConnecting, setIsConnecting] = useState(false);

    useEffect(() => {
      const autoConnect = async () => {
        try {
          setIsConnecting(true);
          await eip6963Connector.activate();
        } catch (err) {
          console.error('Failed to connect Sei Global Wallet', err);
        } finally {
          setIsConnecting(false);
        }
      };
      autoConnect();
    }, []);

    if (!isActive) {
      return (
        <div>
          <h3>{isConnecting ? 'Connecting to Sei Global Wallet…' : 'Not Connected'}</h3>
          {!isConnecting && (
            <button onClick={() => eip6963Connector.activate()} className="connect-button">
              Connect Sei Global Wallet
            </button>
          )}
        </div>
      );
    }

    return (
      <div className="connected-info">
        <h2>✅ Connected to Sei Global Wallet!</h2>
        <p>
          <strong>Account:</strong> <code>{account}</code>
        </p>
        <p>
          <strong>Chain ID:</strong> <code>{chainId}</code>
        </p>

        <button
          onClick={() => {
            if (eip6963Connector?.deactivate) {
              eip6963Connector.deactivate();
            } else {
              eip6963Connector.resetState();
            }
          }}
          className="disconnect-button">
          Disconnect
        </button>
      </div>
    );
  }

  export default function App() {
    return (
      <Web3ReactProvider connectors={connectors}>
        <div className="app-container">
          <h1>Sei Global Wallet via EIP-6963 Discovery</h1>
          <p>This app targets the Sei Global Wallet using EIP-6963 discovery</p>
          <InnerApp />
        </div>
      </Web3ReactProvider>
    );
  }
  ```

  **Run your app:**

  ```bash theme={null}
  npm run dev
  ```
</Accordion>

<Accordion title="wagmi + Dynamic integration">
  **Create a new Vite app:**

  ```bash theme={null}
  npm create vite@latest my-sei-dapp -- --template react-ts
  cd my-sei-dapp
  ```

  **Install dependencies:**

  ```bash theme={null}
  npm install @dynamic-labs/sdk-react-core \
    @dynamic-labs/wagmi-connector @dynamic-labs/ethereum \
    wagmi viem @tanstack/react-query @sei-js/sei-global-wallet
  ```

  **Update `App.tsx`:**

  ```tsx theme={null}
  import React from 'react';
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  import { createConfig, WagmiProvider, useAccount } from 'wagmi';
  import { http } from 'viem';
  import { sei, seiTestnet } from 'viem/chains';

  // Dynamic imports
  import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core';
  import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector';
  import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';

  // Import Sei Global Wallet for EIP-6963 discovery
  import '@sei-js/sei-global-wallet/eip6963';

  const queryClient = new QueryClient();

  const wagmiConfig = createConfig({
    chains: [sei, seiTestnet],
    transports: {
      [sei.id]: http('https://evm-rpc.sei-apis.com'),
      [seiTestnet.id]: http('https://evm-rpc-testnet.sei-apis.com')
    }
  });

  export default function App() {
    return (
      <DynamicContextProvider
        settings={{
          environmentId: 'REPLACE-WITH-YOUR-ENVIRONMENT-ID', // <- Replace
          walletConnectors: [EthereumWalletConnectors],
          overrides: {
            evmNetworks: (networks) => [
              ...networks,
              {
                blockExplorerUrls: ['https://seiscan.io'],
                chainId: 1329,
                chainName: 'Sei Network',
                iconUrls: ['https://app.dynamic.xyz/assets/networks/sei.svg'],
                name: 'Sei',
                nativeCurrency: {
                  decimals: 18,
                  name: 'Sei',
                  symbol: 'SEI'
                },
                networkId: 1329,
                rpcUrls: ['https://evm-rpc.sei-apis.com'],
                vanityName: 'Sei Mainnet'
              },
              {
                blockExplorerUrls: ['https://testnet.seiscan.io'],
                chainId: 1328,
                chainName: 'Sei Testnet',
                iconUrls: ['https://app.dynamic.xyz/assets/networks/sei.svg'],
                name: 'Sei Testnet',
                nativeCurrency: {
                  decimals: 18,
                  name: 'Sei',
                  symbol: 'SEI'
                },
                networkId: 1328,
                rpcUrls: ['https://evm-rpc-testnet.sei-apis.com'],
                vanityName: 'Sei Testnet'
              }
            ]
          }
        }}>
        <WagmiProvider config={wagmiConfig}>
          <QueryClientProvider client={queryClient}>
            <DynamicWagmiConnector>
              <div className="app-container">
                <h1>Dynamic + Wagmi + Sei Global Wallet</h1>
                <DynamicWidget />
                <AccountInfo />
              </div>
            </DynamicWagmiConnector>
          </QueryClientProvider>
        </WagmiProvider>
      </DynamicContextProvider>
    );
  }

  function AccountInfo() {
    const { address, isConnected, chain } = useAccount();

    if (!isConnected) {
      return <p>Connect your wallet to see account info</p>;
    }

    return (
      <div className="account-info">
        <h3>Account Information</h3>
        <p>
          <strong>Address:</strong> {address}
        </p>
        <p>
          <strong>Chain:</strong> {chain?.name} (ID: {chain?.id})
        </p>
        <p>
          <strong>Connected:</strong> {isConnected ? 'Yes' : 'No'}
        </p>
      </div>
    );
  }
  ```

  **Run your app:**

  ```bash theme={null}
  npm run dev
  ```

  **Note:** Replace `"REPLACE-WITH-YOUR-ENVIRONMENT-ID"` with your Dynamic environment ID from your [Dynamic dashboard](https://app.dynamic.xyz/dashboard/overview).
</Accordion>

<Accordion title="Dynamic (Next.js) integration">
  **Create a new Next.js app:**

  ```bash theme={null}
  npx create-next-app@latest my-sei-dapp --typescript --tailwind --eslint
  cd my-sei-dapp
  ```

  **Install dependencies:**

  ```bash theme={null}
  npm install @dynamic-labs/sdk-react-core \
    @dynamic-labs/wagmi-connector wagmi viem \
    @tanstack/react-query @sei-js/sei-global-wallet \
    @dynamic-labs/ethereum
  ```

  **`layout.tsx`:**

  ```tsx theme={null}
  'use client';

  import './globals.css';
  import { Inter } from 'next/font/google';
  import Providers from './lib/providers';
  const inter = Inter({ subsets: ['latin'] });

  // Import the global wallet implementation
  import '@sei-js/sei-global-wallet/eip6963';

  export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
      <html lang="en">
        <body className={inter.className}>
          <Providers>{children}</Providers>
        </body>
      </html>
    );
  }
  ```

  **`lib/providers.tsx`:**

  ```tsx theme={null}
  'use client';

  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  import { createConfig, WagmiProvider } from 'wagmi';
  import { http } from 'viem';
  import { sei, seiTestnet } from 'viem/chains';

  // Dynamic imports
  import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core';
  import { DynamicWagmiConnector } from '@dynamic-labs/wagmi-connector';
  import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';

  // Import Sei Global Wallet for EIP-6963 discovery
  import '@sei-js/sei-global-wallet/eip6963';

  const queryClient = new QueryClient();

  const wagmiConfig = createConfig({
    chains: [sei, seiTestnet],
    transports: {
      [sei.id]: http('https://evm-rpc.sei-apis.com'),
      [seiTestnet.id]: http('https://evm-rpc-testnet.sei-apis.com')
    }
  });

  export default function Providers({ children }: { children: React.ReactNode }) {
    return (
      <DynamicContextProvider
        settings={{
          environmentId: 'REPLACE-WITH-YOUR-ENVIRONMENT-ID', // Replace with your environmentId
          walletConnectors: [EthereumWalletConnectors],
          overrides: {
            evmNetworks: (networks) => [
              ...networks,
              {
                blockExplorerUrls: ['https://seiscan.io'],
                chainId: 1329,
                chainName: 'Sei Network',
                iconUrls: ['https://app.dynamic.xyz/assets/networks/sei.svg'],
                name: 'Sei',
                nativeCurrency: {
                  decimals: 18,
                  name: 'Sei',
                  symbol: 'SEI'
                },
                networkId: 1329,
                rpcUrls: ['https://evm-rpc.sei-apis.com'],
                vanityName: 'Sei Mainnet'
              },
              {
                blockExplorerUrls: ['https://testnet.seiscan.io'],
                chainId: 1328,
                chainName: 'Sei Testnet',
                iconUrls: ['https://app.dynamic.xyz/assets/networks/sei.svg'],
                name: 'Sei Testnet',
                nativeCurrency: {
                  decimals: 18,
                  name: 'Sei',
                  symbol: 'SEI'
                },
                networkId: 1328,
                rpcUrls: ['https://evm-rpc-testnet.sei-apis.com'],
                vanityName: 'Sei Testnet'
              }
            ]
          }
        }}>
        <WagmiProvider config={wagmiConfig}>
          <QueryClientProvider client={queryClient}>
            <DynamicWagmiConnector>{children}</DynamicWagmiConnector>
          </QueryClientProvider>
        </WagmiProvider>
      </DynamicContextProvider>
    );
  }
  ```

  **Note:** Replace `"REPLACE-WITH-YOUR-ENVIRONMENT-ID"` with your Dynamic environment ID from your [Dynamic dashboard](https://app.dynamic.xyz/dashboard/overview).

  **`page.tsx`:**

  ```tsx theme={null}
  'use client';

  import { DynamicWidget } from '@dynamic-labs/sdk-react-core';
  import { useAccount, useBalance } from 'wagmi';

  export default function Home() {
    return (
      <main className="container mx-auto px-4 py-8">
        <div className="max-w-2xl mx-auto space-y-6">
          <h1 className="text-3xl font-bold text-center">Dynamic with Next.js</h1>

          <div className="flex justify-center">
            <DynamicWidget />
          </div>
        </div>
      </main>
    );
  }
  ```

  **Run your app:**

  ```bash theme={null}
  npm run dev
  ```
</Accordion>

<Accordion title="HTML bundle integration">
  If your project uses plain HTML and JavaScript without a build system, you can create a bundled version of Sei Global Wallet. You can then include it directly in your HTML pages.

  **Create a bundle directory**

  ```bash theme={null}
  mkdir sei-global-wallet-bundle
  cd sei-global-wallet-bundle
  ```

  **Initialize an npm project**

  ```bash theme={null}
  npm init -y
  ```

  **Install dependencies**

  ```bash theme={null}
  npm install @sei-js/sei-global-wallet
  ```

  ```bash theme={null}
  npm install --save-dev esbuild
  ```

  **Create a bundle source file**
  Create `bundle.js`:

  ```js theme={null}
  // bundle.js
  import '@sei-js/sei-global-wallet/eip6963';
  ```

  **Update `package.json`**
  Add this build script to your `package.json` file:

  ```json theme={null}
  {
    "scripts": {
      "build": "esbuild bundle.js --bundle --format=iife --outfile=sei-wallet-bundled.js"
    }
  }
  ```

  **Build the bundle**

  ```bash theme={null}
  npm run build
  ```

  This command creates `sei-wallet-bundled.js`.

  **Use the bundle in your HTML project**

  Copy `sei-wallet-bundled.js` to your web project. Then load it in your HTML, as in this example:

  ```html theme={null}
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Sei Global Wallet HTML Integration</title>
    </head>
    <body>
      <h1>Sei Global Wallet HTML Integration</h1>
      <p>Connect your Sei Global Wallet using plain HTML and JavaScript.</p>

      <button onclick="scanForWallets()" id="scanBtn">🔍 Scan for Wallets</button>
      <button onclick="connectToSei()" id="connectBtn" disabled>🔗 Connect to Sei</button>

      <div id="walletList"></div>
      <div id="accountInfo"></div>

      <!-- Load the bundled Sei wallet file -->
      <script src="./sei-wallet-bundled.js"></script>

      <script>
        let detectedWallets = [];

        function scanForWallets() {
          console.log('Scanning for EIP-6963 wallets...');
          detectedWallets = [];

          document.getElementById('walletList').innerHTML = '<p>Scanning for wallets...</p>';

          const handleWalletAnnouncement = (event) => {
            const wallet = event.detail;
            if (!detectedWallets.find((w) => w.info.uuid === wallet.info.uuid)) {
              detectedWallets.push(wallet);
              updateWalletList();
            }
          };

          window.addEventListener('eip6963:announceProvider', handleWalletAnnouncement);
          window.dispatchEvent(new Event('eip6963:requestProvider'));

          setTimeout(() => {
            window.removeEventListener('eip6963:announceProvider', handleWalletAnnouncement);
            if (detectedWallets.length === 0) {
              document.getElementById('walletList').innerHTML = '<p>No wallets detected</p>';
            }
          }, 2000);
        }

        function updateWalletList() {
          const walletListDiv = document.getElementById('walletList');
          walletListDiv.innerHTML =
            `<h3>Detected Wallets:</h3>` +
            detectedWallets
              .map((wallet) => {
                const isSeiWallet = wallet.info.name.toLowerCase().includes('sei');
                return `<div>
                          <strong>${wallet.info.name}</strong> ${isSeiWallet ? '🎯' : ''}
                          <br><small>${wallet.info.rdns}</small>
                      </div>`;
              })
              .join('');

          const seiWallet = detectedWallets.find((w) => w.info.name.toLowerCase().includes('sei'));
          if (seiWallet) {
            document.getElementById('connectBtn').disabled = false;
          }
        }

        async function connectToSei() {
          const seiWallet = detectedWallets.find((w) => w.info.name.toLowerCase().includes('sei'));

          if (!seiWallet) {
            console.error('No Sei wallet found');
            return;
          }

          try {
            const accounts = await seiWallet.provider.request({
              method: 'eth_requestAccounts'
            });

            if (accounts && accounts.length > 0) {
              document.getElementById('accountInfo').innerHTML = `
                          <div>
                              <h3>👤 Connected Account</h3>
                              <p><strong>Wallet:</strong> ${seiWallet.info.name}</p>
                              <p><strong>Address:</strong> ${accounts[0]}</p>
                              <p><strong>Status:</strong> ✅ Connected successfully!</p>
                          </div>`;
            }
          } catch (error) {
            alert(`Connection failed: ${error.message}`);
          }
        }

        window.addEventListener('load', () => {
          setTimeout(scanForWallets, 500);
        });
      </script>
    </body>
  </html>
  ```
</Accordion>

<Accordion title="Web3Auth integration">
  **Create a new Vite app:**

  ```bash theme={null}
  npm create vite@latest my-sei-dapp -- --template react-ts
  cd my-sei-dapp
  ```

  **Install dependencies:**

  ```bash theme={null}
  npm install @web3auth/modal \
    wagmi viem @tanstack/react-query \
    @sei-js/sei-global-wallet
  ```

  **Create a Web3Auth context (`src/web3authContext.ts`):**

  ```ts theme={null}
  import '@sei-js/sei-global-wallet/eip6963';
  import { WEB3AUTH_NETWORK } from '@web3auth/modal';
  import { type Web3AuthContextConfig } from '@web3auth/modal/react';

  const clientId = 'YOUR_CLIENT_ID'; // get from https://dashboard.web3auth.io

  const web3AuthContextConfig: Web3AuthContextConfig = {
    web3AuthOptions: {
      clientId,
      web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
    }
  };

  export default web3AuthContextConfig;
  ```

  **Update `App.tsx`:**

  ```tsx theme={null}
  import './App.css';
  import '@sei-js/sei-global-wallet/eip6963';
  import { useWeb3AuthConnect, useWeb3AuthUser } from '@web3auth/modal/react';
  import { useWeb3AuthDisconnect } from '@web3auth/modal/react';
  import { useAccount } from 'wagmi';

  function App() {
    const { connect, isConnected, connectorName } = useWeb3AuthConnect();

    const { loading: connectLoading, error: connectError } = useWeb3AuthConnect();

    const { disconnect, loading: disconnectLoading } = useWeb3AuthDisconnect();

    const { error: disconnectError } = useWeb3AuthDisconnect();

    const { userInfo } = useWeb3AuthUser();
    const { address } = useAccount();

    function uiConsole(...args: any[]): void {
      const el = document.querySelector('#console>p');
      if (el) {
        el.innerHTML = JSON.stringify(args || {}, null, 2);
        console.log(...args);
      }
    }
    const loggedInView = (
      <div className="grid">
        <h2>Connected to {connectorName}</h2>
        <div className="account-info">
          <p>
            <strong>Address:</strong> {address}
          </p>
        </div>

        <div className="flex-container">
          <button onClick={() => uiConsole(userInfo)} className="card">
            Get User Info
          </button>

          <button onClick={() => disconnect()} className="card">
            Log Out
          </button>
        </div>

        {disconnectLoading && <div className="loading">Disconnecting...</div>}
        {disconnectError && <div className="error">{disconnectError.message}</div>}
      </div>
    );

    const unloggedInView = (
      <div className="grid">
        <button onClick={() => connect()} className="card">
          Connect with Web3Auth
        </button>
        {connectLoading && <div className="loading">Connecting...</div>}
        {connectError && <div className="error">{connectError.message}</div>}
      </div>
    );

    return (
      <div className="container">
        <h1 className="title">
          <a target="_blank" href="https://web3auth.io/docs/sdk/pnp/web/modal" rel="noreferrer">
            Web3Auth
          </a>{' '}
          + Sei Global Wallet Integration
        </h1>

        {isConnected ? loggedInView : unloggedInView}

        <div id="console" style={{ whiteSpace: 'pre-line' }}>
          <p style={{ whiteSpace: 'pre-line' }}></p>
        </div>
      </div>
    );
  }

  export default App;
  ```

  **Set up `main.tsx` with the Web3Auth provider:**

  ```tsx theme={null}
  import { StrictMode } from 'react';
  import { createRoot } from 'react-dom/client';
  import { Web3AuthProvider } from '@web3auth/modal/react';
  import { WagmiProvider } from 'wagmi';
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  import { createConfig, http } from 'wagmi';
  import { sei, seiTestnet } from 'wagmi/chains';
  import web3AuthContextConfig from './web3authContext';
  import App from './App';

  const queryClient = new QueryClient();

  const wagmiConfig = createConfig({
    chains: [sei, seiTestnet],
    transports: {
      [sei.id]: http('https://evm-rpc.sei-apis.com'),
      [seiTestnet.id]: http('https://evm-rpc-testnet.sei-apis.com')
    }
  });

  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <Web3AuthProvider config={web3AuthContextConfig}>
        <WagmiProvider config={wagmiConfig}>
          <QueryClientProvider client={queryClient}>
            <App />
          </QueryClientProvider>
        </WagmiProvider>
      </Web3AuthProvider>
    </StrictMode>
  );
  ```

  **Run your app:**

  ```bash theme={null}
  npm run dev
  ```

  **Note:** Replace the `clientId` in `web3authContext.ts` with your Web3Auth client ID from your [Web3Auth dashboard](https://dashboard.web3auth.io).
</Accordion>

## Troubleshooting & FAQ

<Tabs>
  <Tab title="Troubleshooting">
    ### Troubleshooting & debugging tips

    #### Common issues

    **Issue:** Sei Global Wallet does not appear in the wallet list

    ```bash theme={null}
    # Ensure the import is at the top of your App.tsx
    import '@sei-js/sei-global-wallet/eip6963';
    ```

    **Issue:** TypeScript errors about `window.ethereum`

    ```typescript theme={null}
    // Add this to your App.tsx or create types/global.d.ts
    declare global {
      interface Window {
        ethereum?: any;
      }
    }
    ```

    **Issue:** WalletConnect connection fails

    ```bash theme={null}
    # Get a proper project ID from cloud.walletconnect.com
    # Replace 'YOUR_WALLETCONNECT_PROJECT_ID' with your actual ID
    ```

    **Issue:** Network not found in MetaMask

    ```javascript theme={null}
    // Use the exact chainId in hex format
    chainId: '0x531'; // for Sei Mainnet (1329)
    chainId: '0x530'; // for Sei Testnet (1328)
    ```

    ### Debugging commands

    ```javascript theme={null}
    window.addEventListener('eip6963:announceProvider', (event) => {
      console.log('Wallet announced:', event.detail);
    });

    window.dispatchEvent(new Event('eip6963:requestProvider'));
    ```

    ### Testing tips

    1. Test with multiple browsers to check cross-browser compatibility.
    2. If wallets do not appear, clear the browser cache.
    3. Check the browser console for EIP-6963 events and errors.
    4. Test connections to both Sei Testnet and Sei Mainnet.
    5. Verify that social login methods work across different authentication providers.

    ### Security considerations

    * Sei Global Wallet is self-custodial: users control their private keys.
    * All communications between the dApp and the wallet are encrypted.
    * Multi-factor authentication is available for extra security.
    * Users can export their keys to other wallets, such as MetaMask.
    * Cure53 has audited the platform for security compliance.
  </Tab>

  <Tab title="FAQ">
    ### FAQ

    #### Q: What is Sei Global Wallet?

    Sei Global Wallet is an embedded wallet for the Sei network. Users create a wallet and authenticate through social logins. Unlike traditional embedded wallets, Sei Global Wallet gives users more flexibility: they can carry their wallets across different dApps in the Sei ecosystem.

    #### Q: What are the key benefits of Sei Global Wallet for developers and users?

    **For developers:**

    * You can add Sei as a login method to your dApp ("Log in with Sei").
    * Integration is simple. The wallet is compatible with tools such as RainbowKit, ConnectKit, and Web3-React.
    * Multi-factor authentication (MFA) and secure key management improve security.

    **For users:**

    * Users create wallets with familiar social logins, which simplifies onboarding.
    * Users can move between Sei ecosystem dApps with the same wallet.
    * Transaction simulation helps users understand the effects of a transaction before they confirm it.

    #### Q: What login methods are currently supported?

    Sei Global Wallet supports email, Google, X (Twitter), and Telegram authentication.

    #### Q: How do the security considerations differ from traditional wallets?

    Security differences include:

    * **Secure encrypted communication:** All communication between the dApp and the wallet popup is encrypted.
    * **Protection against replay attacks:** Encrypted messaging prevents malicious reuse of data.
    * **Trusted Execution Environments (TEEs):** Operations occur in secure environments.
    * **Verified origins:** Only verified origins can interact with Sei Global Wallet.

    #### Q: Is Sei Global Wallet self-custodial or custodial?

    Sei Global Wallet is self-custodial, so users have full control. Users can export their keys at any time and import them into other wallets, such as MetaMask.

    #### Q: Do Sei Global Wallet require browser extensions?

    No. They are embedded wallets that work directly in the browser, without extensions.

    #### Q: Can I link my existing external wallet to my Sei Global Wallet?

    No, not currently. In the future, you will be able to link external wallets to a Sei global account.

    #### Q: What extra protections can I add to my Sei Global Wallet?

    Although Global Wallets are non-custodial, good security practices include:

    * Enable multi-factor authentication (MFA) for sensitive actions.
    * Be careful of phishing attempts. Verify sources before you share information.
    * Always have backup methods. Link more email or social login methods.
    * Never store authentication keys digitally. Keep private keys secure and offline.

    #### Q: Have Sei Global Wallet been audited?

    Yes. Cure53 has audited the Dynamic Global Wallets product.

    #### Q: How should bugs be reported?

    Include this information:

    * Device details
    * Browser information
    * A clear description of the issue
    * If possible, a Loom video or screen recording
  </Tab>
</Tabs>

## References and links

* [Dynamic Global Wallet documentation](https://www.dynamic.xyz/docs/react/global-wallets/overview)
* [EIP-6963 standard](https://eips.ethereum.org/EIPS/eip-6963)
* [RainbowKit documentation](https://www.rainbowkit.com/docs/introduction)
* [ConnectKit documentation](https://docs.family.co/connectkit)
* [Web3-React documentation](https://github.com/Uniswap/web3-react)
* [wagmi documentation](https://wagmi.sh)
* [WalletConnect Cloud](https://cloud.walletconnect.com)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.