feat: debug - add manual sa version override (#5311)

Co-authored-by: Copilot <[email protected]>

Author: tomiir

apps/laboratory/src/components/SmartAccount/SmartAccountVersionInput.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react'
+
+import { Flex, FormControl, FormLabel, HStack, Radio, RadioGroup, Switch } from '@chakra-ui/react'
+
+const SmartAccountVersionInput = () => {
+  const [smartAccountVersion, setSmartAccountVersion] = useState<'v6' | 'v7'>('v7')
+  const [isForced, setIsForced] = useState(false)
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem('@appkit-wallet/dapp_smart_account_version')
+      if (saved === 'v6' || saved === 'v7') {
+        setSmartAccountVersion(saved)
+        setIsForced(true)
+      }
+    } catch {
+      // no-op
+    }
+  }, [])
+
+  useEffect(() => {
+    try {
+      if (isForced) {
+        localStorage.setItem('@appkit-wallet/dapp_smart_account_version', smartAccountVersion)
+      } else {
+        localStorage.removeItem('@appkit-wallet/dapp_smart_account_version')
+      }
+    } catch {
+      // no-op
+    }
+  }, [isForced, smartAccountVersion])
+  return (
+    <Flex gridGap="4" flexDirection="column">
+      <FormControl>
+        <HStack>
+          <FormLabel m={0}>Force Smart Account Version</FormLabel>
+          <Switch isChecked={isForced} onChange={e => setIsForced(e.target.checked)} />
+        </HStack>
+      </FormControl>
+      <FormControl isDisabled={!isForced}>
+        <FormLabel>Smart Account Version</FormLabel>
+        <RadioGroup
+          onChange={val => setSmartAccountVersion(val as 'v6' | 'v7')}
+          value={smartAccountVersion}
+        >
+          <HStack spacing="4">
+            <Radio value="v6">v6</Radio>
+            <Radio value="v7">v7</Radio>
+          </HStack>
+        </RadioGroup>
+      </FormControl>
+    </Flex>
+  )
+}
+
+export default SmartAccountVersionInput

apps/laboratory/src/layout/OptionsDrawer.tsx

@@ -20,6 +20,8 @@ import MixColorInput from '@/src/components/Theming/MixColorInput'
 import QrColorInput from '@/src/components/Theming/QrColorInput'
 import { ThemeStore } from '@/src/utils/StoreUtil'
 
+import SmartAccountVersionInput from '../components/SmartAccount/SmartAccountVersionInput'
+
 interface Props {
   controls: ReturnType<typeof useDisclosure>
 }
@@ -84,6 +86,9 @@ export function OptionsDrawer({ controls }: Props) {
             <Flex gridGap="4" flexDirection="column">
               <BorderRadiusInput />
             </Flex>
+            <Flex gridGap="4" flexDirection="column">
+              <SmartAccountVersionInput />
+            </Flex>
           </Flex>
         </DrawerBody>
       </DrawerContent>

packages/appkit/exports/constants.ts

@@ -1 +1 @@
-export const PACKAGE_VERSION = '1.8.11'
+export const PACKAGE_VERSION = '1.8.12'

packages/wallet/src/W3mFrame.ts

@@ -3,6 +3,7 @@ import { ConstantsUtil } from '@reown/appkit-common'
 import { SECURE_SITE_SDK, SECURE_SITE_SDK_VERSION, W3mFrameConstants } from './W3mFrameConstants.js'
 import { W3mFrameHelpers } from './W3mFrameHelpers.js'
 import { W3mFrameSchema } from './W3mFrameSchema.js'
+import { W3mFrameStorage } from './W3mFrameStorage.js'
 import type { W3mFrameTypes } from './W3mFrameTypes.js'
 
 type EventKey = typeof W3mFrameConstants.APP_EVENT_KEY | typeof W3mFrameConstants.FRAME_EVENT_KEY
@@ -36,6 +37,12 @@ function createSecureSiteSdkUrl({
   url.searchParams.set('version', SECURE_SITE_SDK_VERSION)
   url.searchParams.set('enableLogger', String(enableLogger))
   url.searchParams.set('rpcUrl', rpcUrl)
+  // Intended for debug usage only
+  const smartAccountVersion = W3mFrameStorage.get('dapp_smart_account_version')
+  if (smartAccountVersion && (smartAccountVersion === 'v6' || smartAccountVersion === 'v7')) {
+    console.warn('>> AppKit - Forcing smart account version', smartAccountVersion)
+    url.searchParams.set('smartAccountVersion', smartAccountVersion)
+  }
   if (enableCloudAuthAccount) {
     url.searchParams.set('enableCloudAuthAccount', 'true')
   }