Combine kit types

examples/next/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev -p 4444",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@0xsequence/design-system": "^1.7.0",

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/ExtendedWalletList.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Text, useTheme } from '@0xsequence/design-system'
 import React from 'react'
 import { useConnect } from 'wagmi'
 
-import { ExtendedConnector } from '../../../utils/getKitConnectWallets'
+import { ExtendedConnector } from '../../../types'
 
 interface ExtendedWalletListProps {
   onConnect: (connector: ExtendedConnector) => void

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

@@ -22,10 +22,9 @@ import { useConnect, useAccount, useConfig, Storage } from 'wagmi'
 
 import { LocalStorageKey, defaultSignInOptions } from '../../../constants'
 import { useEmailAuth } from '../../../hooks/useWaasEmailAuth'
+import { ExtendedConnector, 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 { ExtendedConnector, DisplayedAsset, EthAuthSettings, KitConfig, Theme, ModalPosition } from '../../types'
+import { 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/KitConfig.ts

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

packages/kit/src/contexts/Theme.ts

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

packages/kit/src/contexts/WalletSettings.ts

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { DisplayedAsset } from '../components/KitProvider'
+import { DisplayedAsset } from '../types'
 import { createGenericContext } from '../utils'
 
 type WalletConfigContext = {

packages/kit/src/hooks/useWaasEmailAuth.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { ExtendedConnector } from '../utils'
+import { ExtendedConnector } from '../types'
 
 export function useEmailAuth({ connector, onSuccess }: { connector?: ExtendedConnector; onSuccess: (idToken: string) => void }) {
   if (!connector) {

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,87 @@
+import { ETHAuthProof } from '@0xsequence/auth'
+import { LogoProps } from '@0xsequence/kit-connectors'
+import { FunctionComponent } from 'react'
+import { Connector, CreateConnectorFn } from 'wagmi'
+
+import { LocalStorageKey } from './constants'
+
+export interface WalletProperties {
+  id: string
+  logoDark: FunctionComponent<LogoProps>
+  logoLight: FunctionComponent<LogoProps>
+  monochromeLogoDark?: FunctionComponent<LogoProps>
+  monochromeLogoLight?: FunctionComponent<LogoProps>
+  name: string
+  iconBackground?: string
+  hideConnectorId?: string | null
+  isSequenceBased?: boolean
+}
+
+export type Wallet = WalletProperties & {
+  createConnector: (projectAccessKey: string) => CreateConnectorFn
+}
+
+export interface WalletField {
+  _wallet: WalletProperties
+}
+
+export type ExtendedConnector = Connector & WalletField
+
+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
+}
+
+export type StorageItem = {
+  [LocalStorageKey.EthAuthProof]: ETHAuthProof
+  [LocalStorageKey.EthAuthSettings]: EthAuthSettings
+  [LocalStorageKey.WaasSessionHash]: string
+  [LocalStorageKey.WaasEmailIdToken]: string
+  [LocalStorageKey.WaasGoogleClientID]: string
+  [LocalStorageKey.WaasGoogleIdToken]: string
+  [LocalStorageKey.WaasAppleClientID]: string
+  [LocalStorageKey.WaasAppleIdToken]: string
+  [LocalStorageKey.WaasAppleRedirectURI]: string
+  [LocalStorageKey.WaasActiveLoginType]: string
+}

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/getKitConnectWallets.ts

@@ -1,29 +1,6 @@
-import { LogoProps } from '@0xsequence/kit-connectors'
-import React from 'react'
-import { Connector, CreateConnectorFn } from 'wagmi'
-
-
-export interface WalletProperties {
-  id: string
-  logoDark: React.FunctionComponent<LogoProps>
-  logoLight: React.FunctionComponent<LogoProps>
-  monochromeLogoDark?: React.FunctionComponent<LogoProps>
-  monochromeLogoLight?: React.FunctionComponent<LogoProps>
-  name: string
-  iconBackground?: string
-  hideConnectorId?: string | null
-  isSequenceBased?: boolean
-}
-
-export type Wallet = WalletProperties & {
-  createConnector: (projectAccessKey: string) => CreateConnectorFn
-}
-
-export interface WalletField {
-  _wallet: WalletProperties
-}
+import { CreateConnectorFn } from 'wagmi'
 
-export type ExtendedConnector = Connector & WalletField
+import { ExtendedConnector, Wallet } from '../types'
 
 export const getKitConnectWallets = (projectAccessKey: string, wallets: Wallet[]): CreateConnectorFn[] => {
   const connectors: CreateConnectorFn[] = []

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