Added createConfig method and SequenceKit wrapper to simplify dapp setup

0xsequence · Oct 1, 2024 · e8134a5 · e8134a5
1 parent b9e8be6
commit e8134a5
Show file tree

Hide file tree

Showing 20 changed files with 413 additions and 318 deletions.
diff --git a/README.md b/README.md
@@ -31,6 +31,72 @@ yarn add @0xsequence/kit wagmi [email protected] viem 0xsequence @tanstack/react-que
 
 ### Setting up the Library
 
+#### The 'easy' way
+
+- `createConfig(walletType, options)` method is used to create your initial config and prepare sensible defaults that can be overridden
+
+`walletType` is either 'waas' or 'universal'
+
+```ts
+interface CreateConfigOptions {
+  appName: string
+  projectAccessKey: string
+  chainIds?: number[]
+  defaultChainId?: number
+  disableAnalytics?: boolean
+  defaultTheme?: Theme
+  position?: ModalPosition
+  signIn?: {
+    logoUrl?: string
+    projectName?: string
+    useMock?: boolean
+  }
+  displayedAssets?: Array<{
+    contractAddress: string
+    chainId: number
+  }>
+  ethAuth?: EthAuthSettings
+  isDev?: boolean
+
+  // optional wagmiConfig overrides
+  wagmiConfig?: WagmiConfig
+
+  walletConnectProjectId: string
+
+  // embedded wallet (waas) specific connector options
+  waasConfigKey: string
+  googleClientId?: string
+  appleClientId?: string
+  appleRedirectURI?: string
+  enableConfirmationModal?: boolean
+  legacyEmailAuth?: boolean
+}
+```
+
+```js
+import { SequenceKit, createConfig } from '@0xsequence/kit'
+
+import Content from './components/Content'
+
+const config = createConfig('waas', {
+  projectAccessKey: '<your-project-access-key>',
+  chainIds: [1, 137]
+  defaultChainId: 1
+  appName: 'Demo Dapp',
+  waasConfigKey: '<your-waas-config-key>'
+})
+
+function App() {
+  return (
+    <SequenceKit config={config}>
+      <Content />
+    </SequenceKit>
+  )
+}
+```
+
+#### Need more customization?
+
 React apps must be wrapped by a Wagmi client and the KitWalletProvider components. It is important that the Wagmi wrapper comes before the Sequence Kit wrapper.
 
 ```js
@@ -75,19 +141,23 @@ const connectors = getDefaultConnectors({
   })
   */
 
-const config = createConfig({
+const wagmiConfig = createConfig({
   chains,
   transports,
   connectors
 })
 
+const kitConfig = {
+  projectAccessKey: '...'
+}
+
 const queryClient = new QueryClient()
 
 function App() {
   return (
-    <WagmiProvider config={config}>
+    <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <KitProvider>
+        <KitProvider config={kitConfig}>
           <Content />
         </KitProvider>
       </QueryClientProvider>

diff --git a/examples/next/src/app/Providers.tsx b/examples/next/src/app/Providers.tsx
@@ -1,14 +1,11 @@
 'use client'
 
-import { KitProvider } from '@0xsequence/kit'
+import { SequenceKit } from '@0xsequence/kit'
 import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
 import { KitWalletProvider } from '@0xsequence/kit-wallet'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { State, WagmiProvider } from 'wagmi'
+import { State } from 'wagmi'
 
-import { wagmiConfig, kitConfig } from '../config'
-
-const queryClient = new QueryClient()
+import { config } from '../config'
 
 export interface ProvidersProps {
   children: React.ReactNode
@@ -19,14 +16,10 @@ export const Providers = (props: ProvidersProps) => {
   const { children, initialState } = props
 
   return (
-    <WagmiProvider config={wagmiConfig} initialState={initialState}>
-      <QueryClientProvider client={queryClient}>
-        <KitProvider config={kitConfig}>
-          <KitWalletProvider>
-            <KitCheckoutProvider>{children}</KitCheckoutProvider>
-          </KitWalletProvider>
-        </KitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+    <SequenceKit config={config} initialState={initialState}>
+      <KitWalletProvider>
+        <KitCheckoutProvider>{children}</KitCheckoutProvider>
+      </KitWalletProvider>
+    </SequenceKit>
   )
 }
diff --git a/examples/next/src/app/components/Connected.tsx b/examples/next/src/app/components/Connected.tsx
@@ -42,7 +42,9 @@ export const Connected = () => {
   }, [pendingFeeOptionConfirmation])
 
   useEffect(() => {
-    console.log(error?.message)
+    if (error?.message) {
+      console.log(error.message)
+    }
   }, [error])
 
   const chainId = useChainId()

diff --git a/examples/next/src/app/layout.tsx b/examples/next/src/app/layout.tsx
@@ -7,7 +7,7 @@ import { cookieToInitialState } from 'wagmi'
 import './globals.css'
 import '@0xsequence/design-system/styles.css'
 
-import { wagmiConfig } from '../config'
+import { config } from '../config'
 
 import { Providers } from './Providers'
 
@@ -23,7 +23,7 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  const initialState = cookieToInitialState(wagmiConfig, headers().get('cookie'))
+  const initialState = cookieToInitialState(config.wagmiConfig, headers().get('cookie'))
 
   return (
     <html lang="en">

diff --git a/examples/next/src/config.ts b/examples/next/src/config.ts
@@ -1,96 +1,17 @@
-import {
-  KitConfig,
-  getKitConnectWallets,
-  getDefaultConnectors,
-  getDefaultWaasConnectors,
-  mock,
-  getDefaultChains
-} from '@0xsequence/kit'
+import { KitConfig, createConfig } from '@0xsequence/kit'
 import { ChainId } from '@0xsequence/network'
-import { Transport, zeroAddress } from 'viem'
-import { cookieStorage, createConfig, createStorage, http } from 'wagmi'
+import { zeroAddress } from 'viem'
+import { cookieStorage, createStorage } from 'wagmi'
 
-export type ConnectionMode = 'waas' | 'universal'
-
-export const connectionMode = 'waas' as ConnectionMode
 export const isDebugMode = false
-const enableConfirmationModal = false
 
 const projectAccessKey = 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
 
-const chains = getDefaultChains([ChainId.ARBITRUM_NOVA, ChainId.ARBITRUM_SEPOLIA, ChainId.POLYGON])
-const transports = chains.reduce<Record<number, Transport>>((acc, chain) => {
-  acc[chain.id] = http()
-
-  return acc
-}, {})
-
-const waasConfigKey = 'eyJwcm9qZWN0SWQiOjE2ODE1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0='
-const googleClientId = '970987756660-35a6tc48hvi8cev9cnknp0iugv9poa23.apps.googleusercontent.com'
-const appleClientId = 'com.horizon.sequence.waas'
-const appleRedirectURI = 'http://localhost:3000'
-
-const getWaasConnectors = () => {
-  const connectors = [
-    ...getDefaultWaasConnectors({
-      walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-      defaultChainId: ChainId.ARBITRUM_NOVA,
-      waasConfigKey,
-      googleClientId,
-      appleClientId,
-      appleRedirectURI,
-      appName: 'Kit Demo',
-      projectAccessKey,
-      enableConfirmationModal
-    }),
-    ...(isDebugMode
-      ? getKitConnectWallets(projectAccessKey, [
-          mock({
-            accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9']
-          })
-        ])
-      : [])
-  ]
-
-  return connectors
-}
-
-const getUniversalConnectors = () => {
-  const connectors = [
-    ...getDefaultConnectors({
-      walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
-      defaultChainId: ChainId.ARBITRUM_NOVA,
-      appName: 'demo app',
-      projectAccessKey
-    }),
-    ...(isDebugMode
-      ? getKitConnectWallets(projectAccessKey, [
-          mock({
-            accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9']
-          })
-        ])
-      : [])
-  ]
-  return connectors
-}
-
-export const wagmiConfig = createConfig({
-  transports,
-  chains,
-  connectors: connectionMode === 'waas' ? getWaasConnectors() : getUniversalConnectors(),
-  // storage: createStorage({
-  //   storage: typeof window !== 'undefined' && window.localStorage ? window.localStorage : noopStorage
-  // }),
-  storage: createStorage({ storage: cookieStorage }),
-  ssr: true
-})
-
 export const kitConfig: KitConfig = {
   projectAccessKey,
   defaultTheme: 'dark',
   signIn: {
     projectName: 'Kit Demo',
-    // logoUrl: 'sw-logo-white.svg',
     useMock: isDebugMode
   },
   displayedAssets: [
@@ -121,3 +42,24 @@ export const kitConfig: KitConfig = {
     }
   ]
 }
+
+export const config = createConfig('waas', {
+  ...kitConfig,
+  appName: 'Kit Demo',
+  walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8',
+  chainIds: [ChainId.ARBITRUM_NOVA, ChainId.ARBITRUM_SEPOLIA, ChainId.POLYGON],
+  defaultChainId: ChainId.ARBITRUM_NOVA,
+
+  // Waas specific config options
+  waasConfigKey: 'eyJwcm9qZWN0SWQiOjE2ODE1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0=',
+  googleClientId: '970987756660-35a6tc48hvi8cev9cnknp0iugv9poa23.apps.googleusercontent.com',
+  appleClientId: 'com.horizon.sequence.waas',
+  appleRedirectURI: 'http://localhost:3000',
+  enableConfirmationModal: false,
+
+  wagmiConfig: {
+    // Next.js doesn't support localStorage in SSR
+    storage: createStorage({ storage: cookieStorage }),
+    ssr: true
+  }
+})
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -1,33 +1,23 @@
 import '@0xsequence/design-system/styles.css'
 
 import { ThemeProvider } from '@0xsequence/design-system'
-import { KitProvider } from '@0xsequence/kit'
+import { SequenceKit } from '@0xsequence/kit'
 import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
 import { KitWalletProvider } from '@0xsequence/kit-wallet'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { WagmiProvider } from 'wagmi'
 
 import { Homepage } from './components/Homepage'
-import { kitConfig, wagmiConfig } from './config'
-
-const queryClient = new QueryClient()
+import { config } from './config'
 
 export const App = () => {
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <KitProvider config={kitConfig}>
-          <KitWalletProvider>
-            <KitCheckoutProvider>
-              <div id="app">
-                <ThemeProvider root="#app" scope="app" theme="dark">
-                  <Homepage />
-                </ThemeProvider>
-              </div>
-            </KitCheckoutProvider>
-          </KitWalletProvider>
-        </KitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+    <ThemeProvider theme="dark">
+      <SequenceKit config={config}>
+        <KitWalletProvider>
+          <KitCheckoutProvider>
+            <Homepage />
+          </KitCheckoutProvider>
+        </KitWalletProvider>
+      </SequenceKit>
+    </ThemeProvider>
   )
 }
diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
@@ -14,7 +14,7 @@ import { allNetworks, ChainId } from '@0xsequence/network'
 import { ethers } from 'ethers'
 import { AnimatePresence } from 'framer-motion'
 import React, { ComponentProps, useEffect } from 'react'
-import { formatUnits, parseUnits, toHex } from 'viem'
+import { formatUnits, parseUnits } from 'viem'
 import {
   useAccount,
   useChainId,
@@ -78,7 +78,7 @@ export const Connected = () => {
 
   useEffect(() => {
     if (error?.message) {
-      console.log(error?.message)
+      console.log(error.message)
     }
   }, [error])