Merge pull request #1966 from Web3Auth/fix/demo-aa-show

Fix demo aa show
Web3Auth · Sep 24, 2024 · 2b21ebb · 2b21ebb
2 parents 45aa76c + 34e3189
commit 2b21ebb
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 3 deletions.
diff --git a/demo/vue-app-new/package-lock.json b/demo/vue-app-new/package-lock.json
diff --git a/demo/vue-app-new/src/MainView.vue b/demo/vue-app-new/src/MainView.vue
@@ -76,9 +76,11 @@ const privateKeyProvider = computed((): IBaseProvider<string> => {
   }
 });
 
+const showAAProviderSettings = computed(() => formData.chainNamespace === CHAIN_NAMESPACES.EIP155);
+
 const accountAbstractionProvider = computed((): IBaseProvider<IProvider> | undefined => {
   const { useAccountAbstractionProvider } = formData;
-  if (!useAccountAbstractionProvider) return undefined;
+  if (!showAAProviderSettings.value || !useAccountAbstractionProvider) return undefined;
 
   const chainConfig = chainConfigs[formData.chainNamespace as ChainNamespaceType].find((x) => x.chainId === formData.chain)!;
   // setup aa provider
@@ -131,7 +133,7 @@ const options = computed((): Web3AuthOptions => {
     web3AuthNetwork: formData.network,
     uiConfig: enabledWhiteLabel ? { ...whiteLabel } : undefined,
     accountAbstractionProvider: accountAbstractionProvider.value,
-    useAAWithExternalWallet: true,
+    useAAWithExternalWallet: formData.useAAWithExternalWallet,
     // TODO: Add more options
     // chainConfig?: CustomChainConfig;
     // enableLogging?: boolean;

diff --git a/demo/vue-app-new/src/components/AppSettings.vue b/demo/vue-app-new/src/components/AppSettings.vue
@@ -52,6 +52,7 @@ const isDisabled = (name: string): boolean => {
     case "smartAccountType":
     case "bundlerUrl":
     case "paymasterUrl":
+    case "useAAWithExternalWallet":
       return !formData.useAccountAbstractionProvider;
 
     case "accountAbstraction":
@@ -351,6 +352,16 @@ const onChainNamespaceChange = (value: string) => {
           :label-enabled="$t('app.accountAbstractionProvider.title')"
           class="my-2"
         />
+        <Toggle
+          v-model="formData.useAAWithExternalWallet"
+          data-testid="useAAWithExternalWallet"
+          :show-label="true"
+          :size="'small'"
+          :label-disabled="$t('app.accountAbstractionProvider.useAAWithExternalWallet')"
+          :label-enabled="$t('app.accountAbstractionProvider.useAAWithExternalWallet')"
+          class="my-2"
+          :disabled="isDisabled('useAAWithExternalWallet')"
+        />
         <Select
           v-model="formData.smartAccountType"
           data-testid="smartAccountType"

diff --git a/demo/vue-app-new/src/config.ts b/demo/vue-app-new/src/config.ts
@@ -166,6 +166,7 @@ export type FormData = {
     logoLight: string;
   };
   useAccountAbstractionProvider: boolean;
+  useAAWithExternalWallet?: boolean;
   smartAccountType?: SmartAccountType;
   bundlerUrl?: string;
   paymasterUrl?: string;

diff --git a/demo/vue-app-new/src/store/form.ts b/demo/vue-app-new/src/store/form.ts
@@ -22,4 +22,5 @@ export const formDataStore = reactive<FormData>({
     logoDark: "",
   },
   useAccountAbstractionProvider: false,
+  useAAWithExternalWallet: true,
 });
diff --git a/demo/vue-app-new/src/translations/en.json b/demo/vue-app-new/src/translations/en.json
@@ -19,7 +19,8 @@
       "title": "Account Abstraction Provider",
       "smartAccountType": "Smart Account Type",
       "bundlerUrl": "Bundler Url",
-      "paymasterUrl": "Paymaster Url"
+      "paymasterUrl": "Paymaster Url",
+      "useAAWithExternalWallet": "Use Account Abstraction Provider with external wallet"
     },
     "whiteLabel": {
       "title": "Enable White Label",