0xsequence · corbanbrook · May 13, 2024 · May 13, 2024 · May 13, 2024 · May 13, 2024
@@ -1,24 +1,25 @@
 'use client'
 
-import { KitProvider } from '@0xsequence/kit'
+import { KitProvider } from '@0xsequence/kit/components'
 import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
 import { KitWalletProvider } from '@0xsequence/kit-wallet'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { WagmiProvider } from 'wagmi'
+import { State, WagmiProvider } from 'wagmi'
 
-import { wagmiConfig, kitConfig } from './config'
+import { kitConfig, wagmiConfig } from '@/config'
 
 const queryClient = new QueryClient()
 
-export interface Web3ProviderProps {
+export interface ProvidersProps {
+  initialState: State | undefined
   children: React.ReactNode
 }
 
-export const Web3Provider = (props: Web3ProviderProps) => {
-  const { children } = props
+export const Providers = (props: ProvidersProps) => {
+  const { initialState, children } = props
 
   return (
-    <WagmiProvider config={wagmiConfig}>
+    <WagmiProvider config={wagmiConfig} initialState={initialState}>
       <QueryClientProvider client={queryClient}>
         <KitProvider config={kitConfig}>
           <KitWalletProvider>

@@ -1,5 +1,6 @@
 import { Box, Text, Card, Button, Select, SignoutIcon } from '@0xsequence/design-system'
-import { signEthAuthProof, useIndexerClient, useStorage, useWaasFeeOptions, validateEthProof } from '@0xsequence/kit'
+import { signEthAuthProof, validateEthProof } from '@0xsequence/kit'
+import { useIndexerClient, useWaasFeeOptions, useStorage } from '@0xsequence/kit/hooks'
 import { CheckoutSettings } from '@0xsequence/kit-checkout'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { allNetworks } from '@0xsequence/network'
@@ -16,7 +17,7 @@ import {
   useWriteContract
 } from 'wagmi'
 
-import { isDebugMode } from '../config'
+import { isDebugMode } from '../../config'
 
 import { Header } from './Header'
 

@@ -9,14 +9,15 @@ export const Header = () => {
   return (
     <Box position="fixed" width="full" padding="5" justifyContent="space-between">
       <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
-        <Image style={{ width: '36px' }} src="kit-logo.svg" alt="Sequence kit" />
+        <Image style={{ width: '36px' }} src="kit-logo.svg" alt="Sequence kit" disableAnimation />
         <Image
           style={{
             width: '24px'
             // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
           }}
           src="kit-logo-text.svg"
           alt="Sequence Kit Text Logo"
+          disableAnimation
         />
       </Box>
       <Box>

@@ -1,11 +1,14 @@
+import './globals.css'
+import '@0xsequence/design-system/styles.css'
 import { ThemeProvider } from '@0xsequence/design-system'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import { headers } from 'next/headers'
+import { cookieToInitialState } from 'wagmi'
 
-import './globals.css'
-import '@0xsequence/design-system/styles.css'
+import { wagmiConfig } from '../config'
 
-import { Web3Provider } from './Web3Provider'
+import { Providers } from './Providers'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -19,11 +22,13 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
+  const initialState = cookieToInitialState(wagmiConfig, headers().get('cookie'))
+
   return (
     <html lang="en">
       <body className={inter.className}>
         <ThemeProvider theme="dark">
-          <Web3Provider>{children}</Web3Provider>
+          <Providers initialState={initialState}>{children}</Providers>
         </ThemeProvider>
       </body>
     </html>

@@ -1,52 +1,41 @@
 'use client'
 
 import { Box, Image, Button } from '@0xsequence/design-system'
-import { useOpenConnectModal } from '@0xsequence/kit'
-import { useEffect, useState } from 'react'
+import { useOpenConnectModal } from '@0xsequence/kit/hooks'
 import { useAccount } from 'wagmi'
 
 import { Connected } from './components/Connected'
 import { Footer } from './components/Footer'
 
 export default function Home() {
-  const [isClient, setIsClient] = useState(false)
   const { isConnected } = useAccount()
   const { setOpenConnectModal } = useOpenConnectModal()
 
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
-
   return (
     <main>
-      {isClient ? (
-        <>
-          {!isConnected ? (
-            <Box flexDirection="column" alignItems="center" justifyContent="center" gap="5" height="vh">
-              <Box background="white" padding="2" borderRadius="sm">
-                <Image alt="Next" src="next.svg" height="3" />
-              </Box>
-              <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
-                <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="kit-logo.svg" />
-                <Image
-                  alt="Sequence Kit Text Logo"
-                  style={{
-                    width: '32px'
-                    // filter: theme === 'dark' ? 'invert(0)' : 'invert(1)'
-                  }}
-                  src="kit-logo-text.svg"
-                />
-              </Box>
-              <Box gap="2" flexDirection="row" alignItems="center">
-                <Button onClick={() => setOpenConnectModal(true)} variant="feature" label="Connect" />
-              </Box>
-            </Box>
-          ) : (
-            <Connected />
-          )}
-        </>
-      ) : null}
-
+      {!isConnected ? (
+        <Box flexDirection="column" alignItems="center" justifyContent="center" gap="5" height="vh">
+          <Box background="white" padding="2" borderRadius="sm">
+            <Image alt="Next" src="next.svg" height="3" disableAnimation />
+          </Box>
+          <Box flexDirection="row" alignItems="center" justifyContent="center" gap="3">
+            <Image alt="Sequence Kit Logo" style={{ width: '48px' }} src="kit-logo.svg" disableAnimation />
+            <Image
+              alt="Sequence Kit Text Logo"
+              style={{
+                width: '32px'
+              }}
+              src="kit-logo-text.svg"
+              disableAnimation
+            />
+          </Box>
+          <Box gap="2" flexDirection="row" alignItems="center">
+            <Button onClick={() => setOpenConnectModal(true)} variant="feature" label="Connect" />
+          </Box>
+        </Box>
+      ) : (
+        <Connected />
+      )}
       <Footer />
     </main>
   )

@@ -2,7 +2,7 @@ import { KitConfig, getKitConnectWallets } from '@0xsequence/kit'
 import { getDefaultConnectors, getDefaultWaasConnectors, mock } from '@0xsequence/kit-connectors'
 import { findNetworkConfig, allNetworks } from '@0xsequence/network'
 import { Transport, zeroAddress } from 'viem'
-import { createConfig, createStorage, http, noopStorage } from 'wagmi'
+import { createConfig, createStorage, http, noopStorage, cookieStorage } from 'wagmi'
 import { Chain, arbitrumNova, arbitrumSepolia, mainnet, polygon } from 'wagmi/chains'
 
 export type ConnectionMode = 'waas' | 'universal'
@@ -83,9 +83,10 @@ 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: typeof window !== 'undefined' && window.localStorage ? window.localStorage : noopStorage
+  // }),
+  storage: createStorage({ storage: cookieStorage }),
   ssr: true
 })
 

@@ -1,7 +1,7 @@
 import '@0xsequence/design-system/styles.css'
 
 import { ThemeProvider } from '@0xsequence/design-system'
-import { KitProvider } from '@0xsequence/kit'
+import { KitProvider } from '@0xsequence/kit/components'
 import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
 import { KitWalletProvider } from '@0xsequence/kit-wallet'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

@@ -16,14 +16,8 @@ import {
   Modal,
   TextInput
 } from '@0xsequence/design-system'
-import {
-  useOpenConnectModal,
-  signEthAuthProof,
-  validateEthProof,
-  useTheme as useKitTheme,
-  getModalPositionCss,
-  useStorage
-} from '@0xsequence/kit'
+import { getModalPositionCss, signEthAuthProof, validateEthProof } from '@0xsequence/kit'
+import { useOpenConnectModal, useTheme as useKitTheme, useStorage } from '@0xsequence/kit/hooks'
 import { useCheckoutModal } from '@0xsequence/kit-checkout'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { allNetworks } from '@0xsequence/network'

@@ -1,4 +1,6 @@
-import { createGenericContext, Theme } from '@0xsequence/kit'
+import { Theme } from '@0xsequence/kit'
+
+import { createGenericContext } from './genericContext'
 
 interface CoinQuantity {
   contractAddress: string

@@ -1,4 +1,4 @@
-import { createGenericContext } from '@0xsequence/kit'
+import { createGenericContext } from './genericContext'
 
 export interface SelectCheckoutNavigation {
   location: 'select-method-checkout'

@@ -1,5 +1,6 @@
 import { Box, Modal, ThemeProvider } from '@0xsequence/design-system'
-import { getModalPositionCss, useTheme } from '@0xsequence/kit'
+import { getModalPositionCss } from '@0xsequence/kit'
+import { useTheme } from '@0xsequence/kit/hooks'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { AnimatePresence } from 'framer-motion'
 import React, { useState, useEffect } from 'react'

@@ -1,5 +1,5 @@
 import { Box, Card, Image, Text, Skeleton, TokenImage, NetworkImage } from '@0xsequence/design-system'
-import { useContractInfo, useTokenMetadata } from '@0xsequence/kit'
+import { useContractInfo, useTokenMetadata } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React from 'react'
 

@@ -11,7 +11,8 @@ import {
   Skeleton,
   TokenImage
 } from '@0xsequence/design-system'
-import { getNativeTokenInfoByChainId, useBalances, useContractInfo, useTokenMetadata, useProjectAccessKey } from '@0xsequence/kit'
+import { getNativeTokenInfoByChainId } from '@0xsequence/kit'
+import { useBalances, useContractInfo, useTokenMetadata, useProjectAccessKey } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React from 'react'
 import { useAccount, useConfig } from 'wagmi'

@@ -1,5 +1,5 @@
 import { Box } from '@0xsequence/design-system'
-import { useProjectAccessKey } from '@0xsequence/kit'
+import { useProjectAccessKey } from '@0xsequence/kit/hooks'
 import React, { useEffect } from 'react'
 
 import { fetchSardineOrderStatus } from '../api'

@@ -0,0 +1,4 @@
+{
+  "main": "dist/0xsequence-kit-components.cjs.js",
+  "module": "dist/0xsequence-kit-components.esm.js"
+}
@@ -0,0 +1,4 @@
+{
+  "main": "dist/0xsequence-kit-contexts.cjs.js",
+  "module": "dist/0xsequence-kit-contexts.esm.js"
+}
@@ -0,0 +1,4 @@
+{
+  "main": "dist/0xsequence-kit-hooks.cjs.js",
+  "module": "dist/0xsequence-kit-hooks.esm.js"
+}
@@ -52,6 +52,17 @@
   },
   "files": [
     "src",
-    "dist"
-  ]
+    "dist",
+    "components",
+    "hooks",
+    "contexts"
+  ],
+  "preconstruct": {
+    "entrypoints": [
+      "index.ts",
+      "components/index.ts",
+      "hooks/index.ts",
+      "contexts/index.ts"
+    ]
+  }
 }
@@ -1,3 +1,5 @@
+'use client'
+
 import { sequence } from '0xsequence'
 import { Box, Button, Card, Collapsible, Modal, Text, ThemeProvider } from '@0xsequence/design-system'
 import { GoogleOAuthProvider } from '@react-oauth/google'

@@ -1,7 +1,7 @@
 import { commons } from '@0xsequence/core'
 import { Box, Card, GradientAvatar, Skeleton, Text, TokenImage } from '@0xsequence/design-system'
 import { ContractType } from '@0xsequence/indexer'
-import { useTokenMetadata, useBalances } from '@0xsequence/kit'
+import { useTokenMetadata, useBalances } from '@0xsequence/kit/hooks'
 import { ethers } from 'ethers'
 import React, { useEffect, useState } from 'react'
 import { useConfig } from 'wagmi'

@@ -1 +1,3 @@
+'use client'
+
 export * from './KitProvider'
@@ -14,8 +14,8 @@ const WAAS_ACTIVE_LOGIN_TYPE = 'waasActiveLoginType'
 
 // TODO: remove all of this.. we should not be storing these in local storage
 export enum LocalStorageKey {
-  Settings = `${PREFIX}.${SETTINGS}`,
-  Theme = `${PREFIX}.${THEME}`,
+  Settings = `${PREFIX}.${SETTINGS}`, // Wallet settings
+  Theme = `${PREFIX}.${THEME}`, // Wallet theme
   EthAuthProof = `${PREFIX}.${ETHAUTH_PROOF}`,
   EthAuthSettings = `${PREFIX}.${ETHAUTH_SETTINGS}`,
   WaasGoogleClientID = `${PREFIX}.${WAAS_GOOGLE_CLIENT_ID}`,

@@ -1,7 +1,7 @@
 import { sequence } from '0xsequence'
 import React from 'react'
 
-import { createGenericContext } from '../utils'
+import { createGenericContext } from './genericContext'
 
 type AnalyticsContext = {
   setAnalytics: React.Dispatch<React.SetStateAction<sequence.SequenceClient['analytics']>>

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { createGenericContext } from '../utils'
+import { createGenericContext } from './genericContext'
 
 type ConnectModalContext = {
   setOpenConnectModal: React.Dispatch<React.SetStateAction<boolean>>

@@ -1,4 +1,5 @@
 import { KitConfig } from '../types'
-import { createGenericContext } from '../utils'
+
+import { createGenericContext } from './genericContext'
 
 export const [useKitConfig, KitConfigContextProvider] = createGenericContext<KitConfig>()
@@ -1,7 +1,8 @@
 import React from 'react'
 
-import { ModalPosition, Theme } from '../index'
-import { createGenericContext } from '../utils'
+import { ModalPosition, Theme } from '../types'
+
+import { createGenericContext } from './genericContext'
 
 type ThemeContext = {
   setTheme: React.Dispatch<React.SetStateAction<Theme>>

@@ -1,7 +1,8 @@
 import React from 'react'
 
 import { DisplayedAsset } from '../types'
-import { createGenericContext } from '../utils'
+
+import { createGenericContext } from './genericContext'
 
 type WalletConfigContext = {
   setDisplayedAssets: React.Dispatch<React.SetStateAction<DisplayedAsset[]>>