From dda1020a19bd3b31ee23094b93f85d68fc411f32 Mon Sep 17 00:00:00 2001 From: samuelea Date: Fri, 3 Nov 2023 17:31:38 -0400 Subject: [PATCH] useMock setting, mock connector --- examples/react/src/App.tsx | 40 +++++++++++--- packages/connectors/src/connectors/index.ts | 1 + .../connectors/src/connectors/mock/index.ts | 1 + .../connectors/src/connectors/mock/mock.ts | 53 +++++++++++++++++++ .../ConnectWalletContent/index.tsx | 13 +++++ .../kit/src/components/KitProvider/index.tsx | 5 +- 6 files changed, 103 insertions(+), 10 deletions(-) create mode 100644 packages/connectors/src/connectors/mock/index.ts create mode 100644 packages/connectors/src/connectors/mock/mock.ts diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index d27e1115..9b6684d2 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -1,27 +1,50 @@ import { ethers } from 'ethers' +import qs from 'query-string' import { ThemeProvider } from '@0xsequence/design-system' -import { KitProvider, THEMES, KitConfig } from '@0xsequence/kit' -import { getDefaultConnectors } from '@0xsequence/kit-connectors' +import { KitProvider, THEMES, KitConfig, getKitConnectWallets } from '@0xsequence/kit' +import { getDefaultConnectors, mock } from '@0xsequence/kit-connectors' import { KitWalletProvider } from '@0xsequence/kit-wallet' import { KitCheckoutProvider } from '@0xsequence/kit-checkout' import Homepage from './components/Homepage' import { WagmiConfig, createConfig, configureChains } from 'wagmi' import { publicProvider } from 'wagmi/providers/public' -import { mainnet, polygon, arbitrumGoerli } from 'wagmi/chains' +import { mainnet, polygon } from 'wagmi/chains' +import { http } from 'viem' import '@0xsequence/design-system/styles.css' function App() { + // append ?debug=true to url to enable debug mode + const { debug } = qs.parse(location.search) + const isDebugMode = debug === 'true' + const { chains, publicClient, webSocketPublicClient } = configureChains( [polygon, mainnet], [publicProvider()], ) - const connectors = getDefaultConnectors({ - chains, - walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8', - defaultChainId: 137 - }) + const connectors = [ + ...getDefaultConnectors({ + chains, + walletConnectProjectId: 'c65a6cb1aa83c4e24500130f23a437d8', + defaultChainId: 137 + }), + ...( + isDebugMode + ? + getKitConnectWallets([ + mock({ + chains, + options: { + chain: polygon, + account: '0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9', + transport: http() + } + }) + ]) + : [] + ) + ] const config = createConfig({ autoConnect: true, @@ -35,6 +58,7 @@ function App() { signIn: { projectName: 'Skyweaver', // logoUrl: 'sw-logo-white.svg', + useMock: isDebugMode }, displayedAssets: [ // Matic token diff --git a/packages/connectors/src/connectors/index.ts b/packages/connectors/src/connectors/index.ts index 44bb0e4d..56ec1afe 100644 --- a/packages/connectors/src/connectors/index.ts +++ b/packages/connectors/src/connectors/index.ts @@ -8,3 +8,4 @@ export * from './apple' export * from './email' export * from './discord' export * from './twitch' +export * from './mock' diff --git a/packages/connectors/src/connectors/mock/index.ts b/packages/connectors/src/connectors/mock/index.ts new file mode 100644 index 00000000..f458402c --- /dev/null +++ b/packages/connectors/src/connectors/mock/index.ts @@ -0,0 +1 @@ +export * from './mock' \ No newline at end of file diff --git a/packages/connectors/src/connectors/mock/mock.ts b/packages/connectors/src/connectors/mock/mock.ts new file mode 100644 index 00000000..3ee8c3df --- /dev/null +++ b/packages/connectors/src/connectors/mock/mock.ts @@ -0,0 +1,53 @@ +import { ethers } from 'ethers' +import { Chain } from 'wagmi' +import { MockConnector } from 'wagmi/connectors/mock' +import type { Wallet } from '@0xsequence/kit' +import { createWalletClient, http, PublicClient, FallbackTransport } from 'viem' +import { polygon } from 'viem/chains' + +import { SequenceLogo } from '../sequence/SequenceLogo' + +export interface MockFlags { + isAuthorized?: boolean, + failConnect?: boolean, + failSwitchChain?: boolean, + noSwitchChain?: boolean +} + +export interface MockParams { + chains: Chain[]; + options: MockOptions +} + +export interface MockOptions { + chain?: Chain, + flags?:MockFlags + account: `0x${string}`, + transport: any, +} + +export const mock = ({ chains, options }: MockParams) => ({ + id: 'mock', + isSequenceBased: true, + logoDark: SequenceLogo, + logoLight: SequenceLogo, + // iconBackground: '#777', + name: 'Mock', + createConnector: () => { + const connector = new MockConnector({ + chains, + options: { + chainId: options?.chain?.id || 137, + walletClient: createWalletClient({ + account: options.account, + chain: options?.chain || polygon, + // Get transport from publicClient + // publicClient({ chainId }).transport + transport: options.transport + }), + ...options, + } + }); + return connector + } +}) as Wallet \ No newline at end of file diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx index 189b6a36..c4a9760d 100644 --- a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx +++ b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx @@ -39,6 +39,8 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { const { connectors: baseConnectors, connect, isLoading } = useConnect() const connectors = baseConnectors as ExtendedConnector[] const [showExtendedList, setShowExtendedList] = useState(false) + const mockConnector = connectors.find(connector => connector.id === 'mock') + const emailConnector = connectors.find(c => c._wallet.id === 'email') const normalConnectors = connectors.filter(connector => { @@ -64,7 +66,13 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { } }, [isConnected, openConnectModal]) + const onConnect = (connector: ExtendedConnector) => { + if (signIn.useMock && mockConnector) { + connect({ connector: mockConnector }) + return + } + if (connector._wallet.id === 'email') { const email = prompt('Auto-email login, please specify the email address:') localStorage.setItem(EMAIL_CONNECTOR_LOCAL_STORAGE_KEY, email || '') @@ -73,6 +81,11 @@ export const ConnectWalletContent = (props: ConnectWalletContentProps) => { } const onConnectInlineEmail = (e: React.FormEvent) => { + if (signIn.useMock && mockConnector) { + connect({ connector: mockConnector }) + return + } + e.preventDefault() localStorage.setItem(EMAIL_CONNECTOR_LOCAL_STORAGE_KEY, email) connect({ connector: emailConnector }) diff --git a/packages/kit/src/components/KitProvider/index.tsx b/packages/kit/src/components/KitProvider/index.tsx index fffad58d..30cd740c 100644 --- a/packages/kit/src/components/KitProvider/index.tsx +++ b/packages/kit/src/components/KitProvider/index.tsx @@ -48,8 +48,9 @@ export interface KitConfig { logoUrl?: string, projectName?: string, showEmailInput?: boolean, - miniAuthOptions?: string[] - authOptions?: string[] + miniAuthOptions?: string[], + authOptions?: string[], + useMock?: boolean }, displayedAssets?: DisplayedAsset[], ethAuth?: EthAuthSettings