Update Sei Global Wallet docs

content/evm/_meta.js

@@ -13,8 +13,9 @@ export default {
 		title: 'Frontend Development'
 	},
 	'building-a-frontend': 'Building a Frontend',
-	'sei-account': {
-		title: 'Sei Account'
+	'sei-global-wallet': {
+		title: 'Sei Global Wallet',
+		display: 'hidden'
 	},
 
 	'-- Smart Contracts': {

content/evm/sei-global-wallet.mdx

@@ -0,0 +1,202 @@
+import { Callout } from 'nextra/components';
+
+# Sei Global Wallet
+
+<Callout type="error">The wallet integration (Sei Global Wallet) available on sei.io is provided and maintained by
+    Dynamic, an independent third-party service. Sei does not develop, operate, or control this integration, and makes
+    no representations or warranties regarding its functionality, security, or availability.
+    By clicking "Log in with Sei," you acknowledge that any interactions, transactions, or security measures related to
+    your wallet are managed solely by Dynamic. Sei is not responsible for any loss, unauthorized access, or security
+    breaches arising from your use of the wallet integration.
+    For support, security concerns, or troubleshooting related to the wallet integration, please refer to Dynamic’s
+    terms of service and support resources.
+    If you do not agree to these terms, please refrain from using the wallet integration on sei.io.</Callout>
+
+Sei Global Wallet is a cross-application embedded crypto wallet powered by
+[Dynamic Global Wallets](https://docs.dynamic.xyz/global-wallets/overview) that is accessed via conventional
+login methods (i.e., email, X, Telegram). With Sei Global Wallet, users gain access to the same embedded wallet on any
+integrated app within the Sei ecosystem-- enabling seamless onboarding without fragmenting liquidity
+(or adding an extra deposit step) for your users.
+Integrating is straightforward for developers using EIP-6963-compatible wallets or libraries like RainbowKit,
+WalletConnectKit, or Dynamic. Our lightweight SDK allows to easily add Sei Global Wallet to your app with just a
+few lines of code.
+
+### Benefits of the Sei
+
+- Simplifies onboarding for users
+- Provides a seamless way for users to explore onchain apps without a browser extension or native app
+- Allows developers to utilize a secure popup that is compatible with RainbowKit, WalletConnect, and Dynamic
+- Offers users simple login flows without compromising access to liquidity
+- Works across all dApps that use EIP-6963-compatible wallets or libraries
+
+### Features
+- Does not require a browser extension
+- Login with email
+- Social login (Google, X, Telegram)
+- All existing wallets will work as well (e.g. Metamask, Trust, WalletConnect, Coinbase)
+
+## EIP-6963
+EIP-6963 is a standardized communication protocol for embedded wallets, enabling seamless cross-application
+interoperability in the web3 ecosystem. It defines a common API for:
+
+- Wallet Discovery & Pairing: Allowing decentralized applications (dApps) to locate and securely connect with embedded wallets.
+- Authentication & Session Management: Facilitating unified login experiences and secure authentication across multiple apps.
+- Transaction Signing: Providing a consistent method for users to sign transactions through their embedded wallets.
+
+## Installation
+
+1.**Install Sei Global Wallet Package**
+
+```bash copy
+yarn add @sei-js/sei-global-wallet
+```
+or
+```bash copy
+npm install @sei-js/sei-global-wallet
+```
+
+2.**Importing the Sei Global Wallet**
+To use this wallet with any wallet provider that supports the EIP-6963 standard, you need to import the wallet
+package in your project.
+
+```javascript copy
+ import "@sei-js/sei-global-wallet/eip6963";
+ ```
+
+3.**Use Sei Global Wallet**
+Your Sei Global Wallet is now ready to use within the project.
+
+## Library Specific Examples
+
+Here are some examples of how to use Sei Global Wallet with some popular libraries: Dynamic, WalletConnect and RainbowKit.
+
+### Dynamic
+
+        ```tsx copy filename="layout.tsx"
+        "use client";
+
+        import "./globals.css";
+
+        import { Inter } from "next/font/google";
+        import Providers from "@/lib/providers";
+
+        const inter = Inter({ subsets: ["latin"] });
+
+        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>
+          );
+        }
+     ```
+### WalletConnectKit
+        ```tsx copy filename="main.tsx"
+        import { FC, PropsWithChildren, StrictMode } from "react";
+        import { createRoot } from "react-dom/client";
+        import "./index.css";
+        import { WagmiProvider, createConfig, http } from "wagmi";
+        import { seiTestnet } from "wagmi/chains";
+        import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+        import {
+          ConnectKitButton,
+          ConnectKitProvider,
+          getDefaultConfig,
+    } from "connectkit";
+
+        import "@sei-js/sei-global-wallet/eip6963";
+
+        const config = createConfig(
+        getDefaultConfig({
+          // Your dApps chains
+          chains: [seiTestnet],
+          transports: {
+            // RPC URL for each chain
+            [seiTestnet.id]: http(),
+          },
+
+          // Required API Keys
+          walletConnectProjectId: "",
+
+          // Required App Info
+          appName: "Your App Name",
+
+          // Optional App Info
+          appDescription: "Your App Description",
+          appUrl: "https://family.co", // your app's url
+          appIcon: "https://family.co/logo.png", // your app's icon, no bigger than 1024x1024px (max. 1MB)
+      })
+    );
+
+        const queryClient = new QueryClient();
+
+        export const Web3Provider: FC<PropsWithChildren> = ({ children }) => {
+        return (
+          <WagmiProvider config={config}>
+            <QueryClientProvider client={queryClient}>
+              <ConnectKitProvider>{children}</ConnectKitProvider>
+            </QueryClientProvider>
+          </WagmiProvider>
+          );
+        };
+
+        createRoot(document.getElementById("root")!).render(
+          <StrictMode>
+              <Web3Provider>
+                  <ConnectKitButton />
+              </Web3Provider>
+          </StrictMode>
+        );
+        ```
+### RainbowKit
+        ```tsx copy filename="main.tsx"
+        import { StrictMode } from "react";
+        import { createRoot } from "react-dom/client";
+        import "./index.css";
+
+        import "@rainbow-me/rainbowkit/styles.css";
+        import {
+          ConnectButton,
+          getDefaultConfig,
+          RainbowKitProvider,
+    } from "@rainbow-me/rainbowkit";
+        import { WagmiProvider } from "wagmi";
+        import { seiTestnet } from "wagmi/chains";
+        import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
+
+        import "@sei-js/sei-global-wallet/eip6963";
+
+        const queryClient = new QueryClient();
+
+        const config = getDefaultConfig({
+          appName: "My RainbowKit App",
+          projectId: "YOUR_PROJECT_ID",
+          chains: [seiTestnet],
+          ssr: true, // If your dApp uses server side rendering (SSR)
+    });
+
+        createRoot(document.getElementById("root")!).render(
+          <StrictMode>
+              <WagmiProvider config={config}>
+                  <QueryClientProvider client={queryClient}>
+                      <RainbowKitProvider>
+                          <ConnectButton />
+                      </RainbowKitProvider>
+                  </QueryClientProvider>
+              </WagmiProvider>
+          </StrictMode>
+        );
+        ```
+
+## References and links
+
+- [<ins>Dynamic Global Wallet Documentation</ins>](https://docs.dynamic.xyz/global-wallets/overview)
+- [<ins>Creating Dynamic based example app</ins>](https://docs.dynamic.xyz/example-apps)