useMock setting, mock connector

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

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'

packages/connectors/src/connectors/mock/index.ts

@@ -0,0 +1 @@
+export * from './mock'

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

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<boolean>(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<HTMLFormElement>) => {
+    if (signIn.useMock && mockConnector) {
+      connect({ connector: mockConnector })
+      return
+    }
+
     e.preventDefault()
     localStorage.setItem(EMAIL_CONNECTOR_LOCAL_STORAGE_KEY, email)
     connect({ connector: emailConnector })

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