Skip to content

Commit f0507eb

Browse files
dsseidssei
committed
- Update Sei Account docs
1 parent 5226225 commit f0507eb

File tree

1 file changed

+157
-51
lines changed

1 file changed

+157
-51
lines changed

‎content/evm/sei-account.mdx

+157-51
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Callout } from 'nextra/components';
1+
import { Callout, Tabs } from 'nextra/components';
22

33
# Sei Account
44

@@ -12,11 +12,28 @@ import { Callout } from 'nextra/components';
1212
terms of service and support resources.
1313
If you do not agree to these terms, please refrain from using the wallet integration on sei.io.</Callout>
1414

15-
Sei Account is powered by [Dynamic Global Wallets](https://docs.dynamic.xyz/global-wallets/overview) that enables smooth
16-
user onboarding by providing embedded wallet that does not require installation of any additional wallet add-ons.
15+
Sei Account is powered by [Dynamic Global Wallets](https://docs.dynamic.xyz/global-wallets/overview) and is a programmable web3 crypto wallet that provides seamless
16+
onboarding for your users. For developers using EIP-6963-compatible wallets or libraries like RainbowKit,
17+
WalletConnectKit or Dynamic, integrating is straightforward. Our lightweight SDK allows to easily add Sei Account to
18+
your app.
1719

18-
Integration into existing dApp requires few lines of code and will work seamlessly across all dApps, provided dApp uses
19-
EIP-6963-compatible wallets or libraries like RainbowKit, WalletConnect, Dynamic itself and others.
20+
### Benefits of the Sei Account
21+
22+
- Simplifies onboarding for users
23+
- Provides a seamless way for users to explore onchain apps without a browser extension or native app
24+
- Allows developers to utilize a secure popup that is compatible with RainbowKit, WalletConnect, and Dynamic
25+
- Offers users simple login flows without compromising access to liquidity
26+
- Works across all dApps that use EIP-6963-compatible wallets or libraries
27+
28+
### Features
29+
- Does not require a browser extension
30+
- Login with email
31+
- Social login (Google, X, Telegram)
32+
- All existing wallets will work as well (e.g. Metamask, Trust, WalletConnect, Coinbase)
33+
34+
### Future Features
35+
- Login with Passkeys
36+
- Gas Sponsorship
2037

2138
## EIP-6963
2239
EIP-6963 is a standardized communication protocol for embedded wallets, enabling seamless cross-application
@@ -46,55 +63,144 @@ package in your project.
4663
import "@sei-js/sei-account/eip6963";
4764
```
4865

49-
For example, if you are using the Dynamic library, you can import the Sei Account package as follows:
50-
51-
```javascript
52-
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
53-
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
54-
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
55-
import { createConfig, WagmiProvider } from "wagmi";
56-
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
57-
import { http } from "viem";
58-
import { sei, seiTestnet } from "viem/chains";
59-
import Main from "./Main";
60-
import '@sei-js/sei-account/eip6963';
61-
62-
63-
const config = createConfig({
64-
chains: [sei, seiTestnet],
65-
multiInjectedProviderDiscovery: false,
66-
transports: {
67-
[sei.id]: http(),
68-
[seiTestnet.id]: http(),
69-
},
70-
});
71-
72-
const queryClient = new QueryClient();
73-
74-
const App = () => (
75-
<DynamicContextProvider
76-
theme="auto"
77-
settings={{
78-
environmentId: "<Yor Dynamic Environment ID>",
79-
walletConnectors: [EthereumWalletConnectors],
80-
}}
81-
>
82-
<WagmiProvider config={config}>
83-
<QueryClientProvider client={queryClient}>
84-
<DynamicWagmiConnector>
85-
<Main />
86-
</DynamicWagmiConnector>
87-
</QueryClientProvider>
88-
</WagmiProvider>
89-
</DynamicContextProvider>
90-
);
91-
92-
export default App;
93-
```
94-
9566
3.**Use Sei Account**
9667
Your Sei Account is now ready to use within the project.
9768

69+
## Library Specific Examples
70+
71+
Here are some examples of how to use Sei Account with some popular libraries: Dynamic, WalletConnect and RainbowKit.
72+
73+
<Tabs items={['Dynamic + nextjs', 'WalletConnect', 'RainbowKit']}>
74+
<Tabs.Tab>
75+
76+
```tsx copy filename="layout.tsx"
77+
"use client";
78+
79+
import "./globals.css";
80+
81+
import { Inter } from "next/font/google";
82+
import Providers from "@/lib/providers";
83+
84+
const inter = Inter({ subsets: ["latin"] });
85+
86+
import '@sei-js/sei-account/eip6963';
87+
88+
export default function RootLayout({
89+
children,
90+
}: {
91+
children: React.ReactNode;
92+
}) {
93+
return (
94+
<html lang="en">
95+
<body className={inter.className}>
96+
<Providers>{children}</Providers>
97+
</body>
98+
</html>
99+
);
100+
}
101+
```
102+
</Tabs.Tab>
103+
<Tabs.Tab>
104+
```tsx copy filename="main.tsx"
105+
import { FC, PropsWithChildren, StrictMode } from "react";
106+
import { createRoot } from "react-dom/client";
107+
import "./index.css";
108+
import { WagmiProvider, createConfig, http } from "wagmi";
109+
import { seiTestnet } from "wagmi/chains";
110+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
111+
import {
112+
ConnectKitButton,
113+
ConnectKitProvider,
114+
getDefaultConfig,
115+
} from "connectkit";
116+
117+
import "@sei-js/sei-account/eip6963";
118+
119+
const config = createConfig(
120+
getDefaultConfig({
121+
// Your dApps chains
122+
chains: [seiTestnet],
123+
transports: {
124+
// RPC URL for each chain
125+
[seiTestnet.id]: http(),
126+
},
127+
128+
// Required API Keys
129+
walletConnectProjectId: "",
130+
131+
// Required App Info
132+
appName: "Your App Name",
133+
134+
// Optional App Info
135+
appDescription: "Your App Description",
136+
appUrl: "https://family.co", // your app's url
137+
appIcon: "https://family.co/logo.png", // your app's icon, no bigger than 1024x1024px (max. 1MB)
138+
})
139+
);
140+
141+
const queryClient = new QueryClient();
142+
143+
export const Web3Provider: FC<PropsWithChildren> = ({ children }) => {
144+
return (
145+
<WagmiProvider config={config}>
146+
<QueryClientProvider client={queryClient}>
147+
<ConnectKitProvider>{children}</ConnectKitProvider>
148+
</QueryClientProvider>
149+
</WagmiProvider>
150+
);
151+
};
152+
153+
createRoot(document.getElementById("root")!).render(
154+
<StrictMode>
155+
<Web3Provider>
156+
<ConnectKitButton />
157+
</Web3Provider>
158+
</StrictMode>
159+
);
160+
```
161+
</Tabs.Tab>
162+
<Tabs.Tab>
163+
```tsx copy filename="main.tsx"
164+
import { StrictMode } from "react";
165+
import { createRoot } from "react-dom/client";
166+
import "./index.css";
167+
168+
import "@rainbow-me/rainbowkit/styles.css";
169+
import {
170+
ConnectButton,
171+
getDefaultConfig,
172+
RainbowKitProvider,
173+
} from "@rainbow-me/rainbowkit";
174+
import { WagmiProvider } from "wagmi";
175+
import { seiTestnet } from "wagmi/chains";
176+
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
177+
178+
import "@sei-js/sei-account/eip6963";
179+
180+
const queryClient = new QueryClient();
181+
182+
const config = getDefaultConfig({
183+
appName: "My RainbowKit App",
184+
projectId: "YOUR_PROJECT_ID",
185+
chains: [seiTestnet],
186+
ssr: true, // If your dApp uses server side rendering (SSR)
187+
});
188+
189+
createRoot(document.getElementById("root")!).render(
190+
<StrictMode>
191+
<WagmiProvider config={config}>
192+
<QueryClientProvider client={queryClient}>
193+
<RainbowKitProvider>
194+
<ConnectButton />
195+
</RainbowKitProvider>
196+
</QueryClientProvider>
197+
</WagmiProvider>
198+
</StrictMode>
199+
);
200+
```
201+
</Tabs.Tab>
202+
</Tabs>
203+
98204
## References and links
99205

100206
- [<ins>Dynamic Global Wallet Documentation</ins>](https://docs.dynamic.xyz/global-wallets/overview)

0 commit comments

Comments
 (0)