From 24a777357d822551eb6f81e1347632cf4506f3d0 Mon Sep 17 00:00:00 2001
From: Nguyen Anh Tu <tunguyen.bhtech@gmail.com>
Date: Tue, 24 Sep 2024 19:34:46 +0700
Subject: [PATCH 1/2] feat(view): demo - add use aa with external wallet toggle

---
 demo/vue-app-new/src/MainView.vue               |  2 +-
 demo/vue-app-new/src/components/AppSettings.vue | 11 +++++++++++
 demo/vue-app-new/src/config.ts                  |  1 +
 demo/vue-app-new/src/store/form.ts              |  1 +
 demo/vue-app-new/src/translations/en.json       |  3 ++-
 5 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/demo/vue-app-new/src/MainView.vue b/demo/vue-app-new/src/MainView.vue
index 204330ed1..462b35c5e 100644
--- a/demo/vue-app-new/src/MainView.vue
+++ b/demo/vue-app-new/src/MainView.vue
@@ -131,7 +131,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
index 9322c9409..7861a8b2e 100644
--- 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;
 
     default: {
@@ -337,6 +338,16 @@ const isActiveTab = (index: number) => activeTab.value === index;
           :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
index 5e7a8ae5f..e1e008117 100644
--- 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
index f492abab9..7193934f8 100644
--- 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
index fe1765da0..933f9dcbf 100644
--- 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",

From f6653504ffa043940b6124001a0305dc4bad6fcb Mon Sep 17 00:00:00 2001
From: Nguyen Anh Tu <tunguyen.bhtech@gmail.com>
Date: Tue, 24 Sep 2024 19:50:51 +0700
Subject: [PATCH 2/2] feat(app): demo - only use aa provider with eth chain
 namespace

---
 demo/vue-app-new/package-lock.json              | 1 +
 demo/vue-app-new/src/MainView.vue               | 4 +++-
 demo/vue-app-new/src/components/AppSettings.vue | 4 +++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/demo/vue-app-new/package-lock.json b/demo/vue-app-new/package-lock.json
index 769593c61..ec1305c81 100644
--- a/demo/vue-app-new/package-lock.json
+++ b/demo/vue-app-new/package-lock.json
@@ -160,6 +160,7 @@
         "@web3auth/base": "^9.0.2",
         "@web3auth/base-solana-adapter": "^9.0.2",
         "@web3auth/solana-provider": "^9.0.2",
+        "@web3auth/wallet-connect-v2-adapter": "^9.1.0",
         "bn.js": "^5.2.1"
       },
       "engines": {
diff --git a/demo/vue-app-new/src/MainView.vue b/demo/vue-app-new/src/MainView.vue
index 462b35c5e..8b09e2182 100644
--- 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
diff --git a/demo/vue-app-new/src/components/AppSettings.vue b/demo/vue-app-new/src/components/AppSettings.vue
index 7861a8b2e..7319fe188 100644
--- a/demo/vue-app-new/src/components/AppSettings.vue
+++ b/demo/vue-app-new/src/components/AppSettings.vue
@@ -34,6 +34,8 @@ const adapterOptions = computed(() =>
       ]
 );
 
+const showAAProviderSettings = computed(() => formData.chainNamespace === CHAIN_NAMESPACES.EIP155);
+
 const isDisplay = (_name: string): boolean => {
   return !isConnected.value;
 };
@@ -87,7 +89,7 @@ const isActiveTab = (index: number) => activeTab.value === index;
         <Tab variant="underline" :active="isActiveTab(1)" @click="onTabChange(1)">WhiteLabel</Tab>
         <Tab variant="underline" :active="isActiveTab(2)" @click="onTabChange(2)">Login Provider</Tab>
         <Tab variant="underline" :active="isActiveTab(3)" @click="onTabChange(3)">Wallet Plugin</Tab>
-        <Tab variant="underline" :active="isActiveTab(4)" @click="onTabChange(4)">Account Abstraction Provider</Tab>
+        <Tab v-if="showAAProviderSettings" variant="underline" :active="isActiveTab(4)" @click="onTabChange(4)">Account Abstraction Provider</Tab>
       </Tabs>
       <Card v-if="isActiveTab(0)" class="grid grid-cols-1 gap-2 px-4 py-4" :shadow="false">
         <Select