diff --git a/examples/next/package.json b/examples/next/package.json index abc23617..9784cbfd 100644 --- a/examples/next/package.json +++ b/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", diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/Banner.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/Banner.tsx index a2fe0f30..8d21df2f 100644 --- a/packages/kit/src/components/KitProvider/ConnectWalletContent/Banner.tsx +++ b/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 diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/ExtendedWalletList.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/ExtendedWalletList.tsx index f162e9d4..43aad882 100644 --- a/packages/kit/src/components/KitProvider/ConnectWalletContent/ExtendedWalletList.tsx +++ b/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 diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx index f931615d..87ca4577 100644 --- a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx +++ b/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' diff --git a/packages/kit/src/components/KitProvider/index.tsx b/packages/kit/src/components/KitProvider/index.tsx index 27abe446..df5b96c6 100644 --- a/packages/kit/src/components/KitProvider/index.tsx +++ b/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,7 +17,8 @@ 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' @@ -26,46 +26,6 @@ import { ConnectWalletContent } from './ConnectWalletContent' import { NetworkBadge } from './NetworkBadge' import { SequenceLogo } from './SequenceLogo' -export declare const THEME: readonly ['dark', 'light'] -export declare type Theme = Exclude['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(false) - const [theme, setTheme] = useState>(defaultTheme || THEMES.dark) + const [theme, setTheme] = useState>(defaultTheme || 'dark') const [modalPosition, setModalPosition] = useState(position) const [displayedAssets, setDisplayedAssets] = useState(displayedAssetsSetting) const [analytics, setAnalytics] = useState() diff --git a/packages/kit/src/contexts/KitConfig.ts b/packages/kit/src/contexts/KitConfig.ts index e06f20db..266f8bba 100644 --- a/packages/kit/src/contexts/KitConfig.ts +++ b/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() diff --git a/packages/kit/src/contexts/Theme.ts b/packages/kit/src/contexts/Theme.ts index 062bf88d..5bc1d10f 100644 --- a/packages/kit/src/contexts/Theme.ts +++ b/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> diff --git a/packages/kit/src/contexts/WalletSettings.ts b/packages/kit/src/contexts/WalletSettings.ts index 928eea92..5551c507 100644 --- a/packages/kit/src/contexts/WalletSettings.ts +++ b/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 = { diff --git a/packages/kit/src/hooks/useWaasEmailAuth.ts b/packages/kit/src/hooks/useWaasEmailAuth.ts index d29ea259..a7da7ba4 100644 --- a/packages/kit/src/hooks/useWaasEmailAuth.ts +++ b/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) { diff --git a/packages/kit/src/index.ts b/packages/kit/src/index.ts index fe0f417d..274007b7 100644 --- a/packages/kit/src/index.ts +++ b/packages/kit/src/index.ts @@ -3,3 +3,4 @@ export * from './constants' export * from './hooks' export * from './contexts' export * from './utils' +export * from './types' diff --git a/packages/kit/src/types.ts b/packages/kit/src/types.ts new file mode 100644 index 00000000..0473389a --- /dev/null +++ b/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 + logoLight: FunctionComponent + monochromeLogoDark?: FunctionComponent + monochromeLogoLight?: FunctionComponent + 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 +} diff --git a/packages/kit/src/utils/ethAuth.ts b/packages/kit/src/utils/ethAuth.ts index 3898a5ec..9350c10a 100644 --- a/packages/kit/src/utils/ethAuth.ts +++ b/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' diff --git a/packages/kit/src/utils/getKitConnectWallets.ts b/packages/kit/src/utils/getKitConnectWallets.ts index b18ffb0a..cdac7af0 100644 --- a/packages/kit/src/utils/getKitConnectWallets.ts +++ b/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 - logoLight: React.FunctionComponent - monochromeLogoDark?: React.FunctionComponent - monochromeLogoLight?: React.FunctionComponent - 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[] = [] diff --git a/packages/kit/src/utils/styling.ts b/packages/kit/src/utils/styling.ts index 666970c9..9b3b79d8 100644 --- a/packages/kit/src/utils/styling.ts +++ b/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