Move shared types to separate file

examples/next/src/app/Providers.tsx

@@ -1,24 +1,27 @@
 'use client'
 
-import { KitConfig, 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 { Config, WagmiProvider } from 'wagmi'
+import { State, WagmiProvider } from 'wagmi'
+
+import { kitConfig, wagmiConfig } from '@/config'
 
 const queryClient = new QueryClient()
 
 export interface ProvidersProps {
-  wagmiConfig: Config
-  kitConfig: KitConfig
+  initialState: State
   children: React.ReactNode
+  // wagmiConfig: Config
+  // kitConfig: KitConfig
 }
 
 export const Providers = (props: ProvidersProps) => {
-  const { wagmiConfig, kitConfig, children } = props
+  const { initialState, children /* , wagmiConfig, kitConfig */ } = props
 
   return (
-    <WagmiProvider config={wagmiConfig}>
+    <WagmiProvider config={wagmiConfig} initialState={initialState}>
       <QueryClientProvider client={queryClient}>
         <KitProvider config={kitConfig}>
           <KitWalletProvider>

packages/checkout/src/contexts/CheckoutModal.tsx

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

packages/checkout/src/contexts/Navigation.tsx

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

packages/kit/src/components/KitProvider/ConnectWalletContent/Banner.tsx

@@ -1,7 +1,7 @@
 import { Box, Image } from '@0xsequence/design-system'
 import React from 'react'
 
-import { KitConfig } from '../index'
+import { KitConfig } from '../../../types'
 
 interface BannerProps {
   config: KitConfig

packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx

@@ -22,10 +22,10 @@ import { useConnect, useAccount, useConfig, Storage } from 'wagmi'
 
 import { LocalStorageKey, defaultSignInOptions } from '../../../constants'
 import { useEmailAuth } from '../../../hooks/useWaasEmailAuth'
+import { KitConfig } from '../../../types'
 import { isEmailValid } from '../../../utils'
 import { ExtendedConnector } from '../../../utils/getKitConnectWallets'
 import { getStorageItem } from '../../../utils/storage'
-import { KitConfig } from '../../index'
 import { KitConnectProviderProps } from '../index'
 
 import { Banner } from './Banner'

packages/kit/src/components/KitProvider/index.tsx

@@ -3,7 +3,6 @@ import { Box, Button, Card, Collapsible, Modal, Text, ThemeProvider } from '@0xs
 import { GoogleOAuthProvider } from '@react-oauth/google'
 import { ethers } from 'ethers'
 import { AnimatePresence } from 'framer-motion'
-import type { ComponentProps } from 'react'
 import React, { useState, useEffect } from 'react'
 import { Connector, useAccount, useConfig, useConnections } from 'wagmi'
 
@@ -18,54 +17,15 @@ import {
   AnalyticsContextProvider
 } from '../../contexts'
 import { useWaasConfirmationHandler } from '../../hooks/useWaasConfirmationHandler'
-import { ExtendedConnector, ModalPosition, getModalPositionCss } from '../../utils'
+import { DisplayedAsset, EthAuthSettings, KitConfig, ModalPosition, Theme } from '../../types'
+import { ExtendedConnector, getModalPositionCss } from '../../utils'
 import { setStorageItem } from '../../utils/storage'
 import { TxnDetails } from '../TxnDetails'
 
 import { ConnectWalletContent } from './ConnectWalletContent'
 import { NetworkBadge } from './NetworkBadge'
 import { SequenceLogo } from './SequenceLogo'
 
-export declare const THEME: readonly ['dark', 'light']
-export declare type Theme = Exclude<ComponentProps<typeof ThemeProvider>['theme'], undefined>
-export const THEMES = {
-  dark: 'dark' as Theme,
-  light: 'light' as Theme
-}
-
-export interface DisplayedAsset {
-  contractAddress: string
-  chainId: number
-}
-
-export interface EthAuthSettings {
-  app?: string
-  /** expiry number (in seconds) that is used for ETHAuth proof. Default is 1 week in seconds. */
-  expiry?: number
-  /** origin hint of the dapp's host opening the wallet. This value will automatically
-   * be determined and verified for integrity, and can be omitted. */
-  origin?: string
-  /** authorizeNonce is an optional number to be passed as ETHAuth's nonce claim for replay protection. **/
-  nonce?: number
-}
-
-export interface KitConfig {
-  projectAccessKey: string
-  disableAnalytics?: boolean
-  defaultTheme?: Theme
-  position?: ModalPosition
-  signIn?: {
-    logoUrl?: string
-    projectName?: string
-    showEmailInput?: boolean
-    socialAuthOptions?: string[]
-    walletAuthOptions?: string[]
-    useMock?: boolean
-  }
-  displayedAssets?: DisplayedAsset[]
-  ethAuth?: EthAuthSettings
-}
-
 export type KitConnectProviderProps = {
   children: React.ReactNode
   config: KitConfig
@@ -88,7 +48,7 @@ export const KitProvider = (props: KitConnectProviderProps) => {
 
   const { projectName } = signIn
   const [openConnectModal, setOpenConnectModal] = useState<boolean>(false)
-  const [theme, setTheme] = useState<Exclude<Theme, undefined>>(defaultTheme || THEMES.dark)
+  const [theme, setTheme] = useState<Exclude<Theme, undefined>>(defaultTheme || 'dark')
   const [modalPosition, setModalPosition] = useState<ModalPosition>(position)
   const [displayedAssets, setDisplayedAssets] = useState<DisplayedAsset[]>(displayedAssetsSetting)
   const [analytics, setAnalytics] = useState<sequence.SequenceClient['analytics']>()

packages/kit/src/contexts/Analytics.ts

@@ -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']>>

packages/kit/src/contexts/ConnectModal.ts

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

packages/kit/src/contexts/KitConfig.ts

@@ -1,4 +1,5 @@
-import { KitConfig } from '../components/KitProvider'
-import { createGenericContext } from '../utils'
+import { KitConfig } from '../types'
+
+import { createGenericContext } from './genericContext'
 
 export const [useKitConfig, KitConfigContextProvider] = createGenericContext<KitConfig>()

packages/kit/src/contexts/Theme.ts

@@ -1,7 +1,8 @@
 import React from 'react'
 
-import { Theme } from '../index'
-import { createGenericContext, ModalPosition } from '../utils'
+import { ModalPosition, Theme } from '../types'
+
+import { createGenericContext } from './genericContext'
 
 type ThemeContext = {
   setTheme: React.Dispatch<React.SetStateAction<Theme>>

packages/kit/src/contexts/WalletSettings.ts

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

packages/kit/src/contexts/genericContext.ts

@@ -0,0 +1,19 @@
+import { useContext, createContext } from 'react'
+
+// https://medium.com/@rivoltafilippo/typing-react-context-to-avoid-an-undefined-default-value-2c7c5a7d5947
+
+export const createGenericContext = <T>() => {
+  // Create a context with a generic parameter or undefined
+  const genericContext = createContext<T | undefined>(undefined)
+
+  // Check if the value provided to the context is defined or throw an error
+  const useGenericContext = () => {
+    const contextIsDefined = useContext(genericContext)
+    if (!contextIsDefined) {
+      throw new Error('useGenericContext must be used within a Provider')
+    }
+    return contextIsDefined
+  }
+
+  return [useGenericContext, genericContext.Provider] as const
+}

packages/kit/src/index.ts

@@ -3,3 +3,4 @@ export * from './constants'
 export * from './hooks'
 export * from './contexts'
 export * from './utils'
+export * from './types'

packages/kit/src/types.ts

@@ -0,0 +1,45 @@
+export interface DisplayedAsset {
+  contractAddress: string
+  chainId: number
+}
+
+export interface EthAuthSettings {
+  app?: string
+  /** expiry number (in seconds) that is used for ETHAuth proof. Default is 1 week in seconds. */
+  expiry?: number
+  /** origin hint of the dapp's host opening the wallet. This value will automatically
+   * be determined and verified for integrity, and can be omitted. */
+  origin?: string
+  /** authorizeNonce is an optional number to be passed as ETHAuth's nonce claim for replay protection. **/
+  nonce?: number
+}
+
+export type Theme = 'light' | 'dark'
+
+export type ModalPosition =
+  | 'center'
+  | 'middle-right'
+  | 'middle-left'
+  | 'top-center'
+  | 'top-right'
+  | 'top-left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'bottom-left'
+
+export interface KitConfig {
+  projectAccessKey: string
+  disableAnalytics?: boolean
+  defaultTheme?: Theme
+  position?: ModalPosition
+  signIn?: {
+    logoUrl?: string
+    projectName?: string
+    showEmailInput?: boolean
+    socialAuthOptions?: string[]
+    walletAuthOptions?: string[]
+    useMock?: boolean
+  }
+  displayedAssets?: DisplayedAsset[]
+  ethAuth?: EthAuthSettings
+}

packages/kit/src/utils/ethAuth.ts

@@ -4,8 +4,8 @@ import { ETHAuth, Proof } from '@0xsequence/ethauth'
 import { UsePublicClientReturnType } from 'wagmi'
 import { GetWalletClientData } from 'wagmi/query'
 
-import { EthAuthSettings } from '../components/KitProvider'
 import { LocalStorageKey, DEFAULT_SESSION_EXPIRATION } from '../constants'
+import { EthAuthSettings } from '../types'
 
 import { publicClientToProvider, walletClientToSigner } from './adapters'
 import { getStorageItem } from './storage'

packages/kit/src/utils/index.ts

@@ -1,7 +1,6 @@
 export * from './getKitConnectWallets'
 export * from './helpers'
 export * from './tokens'
-export * from './genericContext'
 export * from './styling'
 export * from './networks'
 export * from './adapters'

packages/kit/src/utils/styling.ts

@@ -1,13 +1,4 @@
-export type ModalPosition =
-  | 'center'
-  | 'middle-right'
-  | 'middle-left'
-  | 'top-center'
-  | 'top-right'
-  | 'top-left'
-  | 'bottom-center'
-  | 'bottom-right'
-  | 'bottom-left'
+import { ModalPosition } from '../types'
 
 export interface modalPositionCss {
   top?: string