added dev mode

examples/react/src/config.ts

@@ -14,7 +14,7 @@ const connectionMode: ConnectionMode = searchParams.get('mode') === 'universal'
 
 // append ?debug to url to enable debug mode
 const isDebugMode = searchParams.has('debug')
-const projectAccessKey = 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
+const projectAccessKey = isDebugMode ? 'AQAAAAAAAAK2JvvZhWqZ51riasWBftkrVXE' : 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
 
 const chains = [arbitrumNova, arbitrumSepolia, mainnet, polygon] as const satisfies Chain[]
 const transports = chains.reduce<Record<number, Transport>>((acc, chain) => {
@@ -33,8 +33,12 @@ chains.forEach(chain => {
   transports[chain.id] = http(network.rpcUrl)
 })
 
-const waasConfigKey = 'eyJwcm9qZWN0SWQiOjE2ODE1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0='
-const googleClientId = '970987756660-35a6tc48hvi8cev9cnknp0iugv9poa23.apps.googleusercontent.com'
+const waasConfigKey = isDebugMode
+  ? 'eyJwcm9qZWN0SWQiOjY5NCwicnBjU2VydmVyIjoiaHR0cHM6Ly9kZXYtd2Fhcy5zZXF1ZW5jZS5hcHAiLCJlbWFpbFJlZ2lvbiI6ImNhLWNlbnRyYWwtMSIsImVtYWlsQ2xpZW50SWQiOiI1NGF0bjV1cGk2M3FjNTlhMWVtM3ZiaHJzbiJ9'
+  : 'eyJwcm9qZWN0SWQiOjE2ODE1LCJycGNTZXJ2ZXIiOiJodHRwczovL3dhYXMuc2VxdWVuY2UuYXBwIn0='
+const googleClientId = isDebugMode 
+? '603294233249-6h5saeg2uiu8akpcbar3r2aqjp6j7oem.apps.googleusercontent.com'
+: '970987756660-35a6tc48hvi8cev9cnknp0iugv9poa23.apps.googleusercontent.com'
 const appleClientId = 'com.horizon.sequence.waas'
 const appleRedirectURI = 'https://' + window.location.host
 
@@ -49,15 +53,16 @@ const getWaasConnectors = () => {
       appleRedirectURI,
       appName: 'Kit Demo',
       projectAccessKey,
-      enableConfirmationModal: localStorage.getItem('confirmationEnabled') === 'true'
+      enableConfirmationModal: localStorage.getItem('confirmationEnabled') === 'true',
+      isDev: isDebugMode
     }),
-    ...(isDebugMode
-      ? getKitConnectWallets(projectAccessKey, [
-          mock({
-            accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9']
-          })
-        ])
-      : [])
+    // ...(isDebugMode
+    //   ? getKitConnectWallets(projectAccessKey, [
+    //       mock({
+    //         accounts: ['0xCb88b6315507e9d8c35D81AFB7F190aB6c3227C9']
+    //       })
+    //     ])
+    //   : [])
   ]
 
   return connectors

examples/react/src/utils/helpers.ts

@@ -1,6 +1,8 @@
 import { CheckoutSettings } from '@0xsequence/kit-checkout'
 import { Address } from 'viem'
 
+import { ConnectionMode } from '../config'
+
 export const truncateAtMiddle = (text: string, truncateAt: number) => {
   let finalText = text
 

packages/connectors/src/connectors/wagmiConnectors/sequenceWaasConnector.ts

@@ -11,7 +11,8 @@ export interface SequenceWaasConnectConfig {
   appleClientId?: string
   appleRedirectURI?: string
   enableConfirmationModal?: boolean
-  loginType: 'email' | 'google' | 'apple'
+  loginType: 'email' | 'google' | 'apple',
+  isDev?: boolean
 }
 
 export type BaseSequenceWaasConnectorOptions = SequenceConfig & SequenceWaasConnectConfig & Partial<ExtendedSequenceConfig>
@@ -36,13 +37,16 @@ export function sequenceWaasWallet(params: BaseSequenceWaasConnectorOptions) {
     [LocalStorageKey.WaasAppleRedirectURI]: string
   }
 
+  const isDev = !!params?.isDev
+  const nodesUrl = isDev ? 'https://dev-nodes.sequence.app' : 'https://nodes.sequence.app'
+
   const showConfirmationModal = params.enableConfirmationModal ?? false
 
   const initialChain = params.network ?? 137
   const initialChainName = sequence.network.allNetworks.find(n => n.chainId === initialChain || n.name === initialChain)?.name
 
   const initialJsonRpcProvider = new ethers.providers.JsonRpcProvider(
-    `https://nodes.sequence.app/${initialChainName ?? 'polygon'}/${params.projectAccessKey}`
+    `${nodesUrl}/${initialChainName ?? 'polygon'}/${params.projectAccessKey}`
   )
 
   const sequenceWaas = new SequenceWaaS({
@@ -57,7 +61,7 @@ export function sequenceWaasWallet(params: BaseSequenceWaasConnectorOptions) {
     const networkName = sequence.network.allNetworks.find(n => n.chainId === chainId || n.name === initialChain)?.name
 
     const jsonRpcProvider = new ethers.providers.JsonRpcProvider(
-      `https://nodes.sequence.app/${networkName}/${params.projectAccessKey}`
+      `${nodesUrl}/${networkName}/${params.projectAccessKey}`
     )
     sequenceWaasProvider.updateJsonRpcProvider(jsonRpcProvider)
     sequenceWaasProvider.updateNetwork(ethers.providers.getNetwork(chainId))

packages/connectors/src/defaultConnectors.ts

@@ -89,6 +89,8 @@ interface GetDefaultWaasConnectors {
   defaultChainId?: number
 
   enableConfirmationModal?: boolean
+
+  isDev?: boolean
 }
 
 export const getDefaultWaasConnectors = ({
@@ -100,10 +102,17 @@ export const getDefaultWaasConnectors = ({
   walletConnectProjectId,
   appName,
   defaultChainId,
-  enableConfirmationModal
+  enableConfirmationModal,
+  isDev = false
 }: GetDefaultWaasConnectors): CreateConnectorFn[] => {
   const wallets: any[] = [
-    emailWaas({ projectAccessKey, waasConfigKey, enableConfirmationModal, network: defaultChainId }),
+    emailWaas({
+      projectAccessKey,
+      waasConfigKey,
+      enableConfirmationModal,
+      network: defaultChainId,
+      isDev
+    }),
     coinbaseWallet({
       appName
     }),
@@ -114,7 +123,14 @@ export const getDefaultWaasConnectors = ({
   ]
   if (googleClientId) {
     wallets.push(
-      googleWaas({ projectAccessKey, googleClientId, waasConfigKey, enableConfirmationModal, network: defaultChainId })
+      googleWaas({
+        projectAccessKey,
+        googleClientId,
+        waasConfigKey,
+        enableConfirmationModal,
+        network: defaultChainId,
+        isDev
+      })
     )
   }
   if (appleClientId && appleRedirectURI) {
@@ -125,7 +141,8 @@ export const getDefaultWaasConnectors = ({
         appleRedirectURI,
         waasConfigKey,
         enableConfirmationModal,
-        network: defaultChainId
+        network: defaultChainId,
+        isDev
       })
     )
   }

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

@@ -37,7 +37,7 @@ export const KitProvider = (props: KitConnectProviderProps) => {
     position = 'center',
     displayedAssets: displayedAssetsSetting = [],
     ethAuth = {} as EthAuthSettings,
-    disableAnalytics = false
+    disableAnalytics = false,
   } = config
 
   const defaultAppName = signIn.projectName || 'app'

packages/kit/src/hooks/useAPIClient.ts

@@ -2,12 +2,16 @@ import { SequenceAPIClient } from '@0xsequence/api'
 import { useMemo } from 'react'
 
 import { useProjectAccessKey } from './useProjectAccessKey'
+import { useKitConfig } from '../contexts/KitConfig'
 
 export const useAPIClient = () => {
   const projectAccessKey = useProjectAccessKey()
+  const { isDev = false } = useKitConfig() 
+
+  const clientUrl = isDev ? 'https://dev-api.sequence.app' : 'https://api.sequence.app'
 
   const apiClient = useMemo(() => {
-    return new SequenceAPIClient('https://api.sequence.app', projectAccessKey)
+    return new SequenceAPIClient(clientUrl, projectAccessKey)
   }, [projectAccessKey])
 
   return apiClient

packages/kit/src/hooks/useIndexerClient.ts

@@ -4,17 +4,22 @@ import { useMemo } from 'react'
 
 import { useProjectAccessKey } from './useProjectAccessKey'
 
+import { useKitConfig } from '../contexts/KitConfig'
+
 export const useIndexerClient = (chainId: ChainId) => {
   const projectAccessKey = useProjectAccessKey()
 
+  const { isDev = false } = useKitConfig() 
+
   const indexerClients = useMemo(() => {
     return new Map<ChainId, SequenceIndexer>()
   }, [projectAccessKey])
 
   const network = networks[chainId]
+  const clientUrl = isDev ? `https://dev-${network.name}-indexer.sequence.app` : `https://${network.name}-indexer.sequence.app`
 
   if (!indexerClients.has(chainId)) {
-    indexerClients.set(chainId, new SequenceIndexer(indexerURL(network.name), projectAccessKey))
+    indexerClients.set(chainId, new SequenceIndexer(clientUrl, projectAccessKey))
   }
 
   const indexerClient = indexerClients.get(chainId)
@@ -29,6 +34,8 @@ export const useIndexerClient = (chainId: ChainId) => {
 export const useIndexerClients = (chainIds: ChainId[]) => {
   const projectAccessKey = useProjectAccessKey()
 
+  const { isDev = false } = useKitConfig() 
+
   const indexerClients = useMemo(() => {
     return new Map<ChainId, SequenceIndexer>()
   }, [projectAccessKey])
@@ -37,9 +44,10 @@ export const useIndexerClients = (chainIds: ChainId[]) => {
 
   for (const chainId of chainIds) {
     const network = networks[chainId]
+    const clientUrl = isDev ? `https://dev-${network.name}-indexer.sequence.app` : `https://${network.name}-indexer.sequence.app`
 
     if (!indexerClients.has(chainId)) {
-      indexerClients.set(chainId, new SequenceIndexer(indexerURL(network.name), projectAccessKey))
+      indexerClients.set(chainId, new SequenceIndexer(clientUrl, projectAccessKey))
     }
 
     const indexerClient = indexerClients.get(chainId)

packages/kit/src/hooks/useMetadataClient.ts

@@ -3,11 +3,17 @@ import { useMemo } from 'react'
 
 import { useProjectAccessKey } from './useProjectAccessKey'
 
+import { useKitConfig } from '../contexts/KitConfig'
+
 export const useMetadataClient = () => {
   const projectAccessKey = useProjectAccessKey()
 
+  const { isDev = false } = useKitConfig() 
+
   const metadataClient = useMemo(() => {
-    return new SequenceMetadata('https://metadata.sequence.app', projectAccessKey)
+    const clientUrl = isDev ? 'https://dev-metadata.sequence.app' : 'https://metadata.sequence.app'
+
+    return new SequenceMetadata(clientUrl, projectAccessKey)
   }, [projectAccessKey])
 
   return metadataClient

packages/kit/src/types.ts

@@ -70,7 +70,8 @@ export interface KitConfig {
     useMock?: boolean
   }
   displayedAssets?: DisplayedAsset[]
-  ethAuth?: EthAuthSettings
+  ethAuth?: EthAuthSettings,
+  isDev?: boolean
 }
 
 export type StorageItem = {