minor fixes to demo app

Web3Auth · Sep 24, 2024 · 45aa76c · 45aa76c
1 parent b58a9ac
commit 45aa76c
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 9 deletions.
diff --git a/demo/vue-app-new/.env.development b/demo/vue-app-new/.env.development
diff --git a/demo/vue-app-new/.env.sample b/demo/vue-app-new/.env.sample
@@ -1 +1,2 @@
-VITE_APP_PIMLICO_API_KEY=
+VITE_APP_PIMLICO_API_KEY=""
+VITE_SOLANA_MAINNET_RPC=""
diff --git a/demo/vue-app-new/src/components/AppDashboard.vue b/demo/vue-app-new/src/components/AppDashboard.vue
@@ -195,7 +195,7 @@ const onSignPersonalMsg = async () => {
             {{ $t("app.buttons.btnGetUserInfo") }}
           </Button>
         </div>
-        <Card v-if="isDisplay('walletServices')" class="h-auto gap-4 px-4 py-4 mb-2" :shadow="false">
+        <Card v-if="isDisplay('walletServices')" class="!h-auto lg:!h-[calc(100dvh_-_240px)] gap-4 px-4 py-4 mb-2" :shadow="false">
           <div class="mb-2 text-xl font-bold leading-tight text-left">Wallet Service</div>
           <Button block size="xs" pill class="mb-2" @click="showWalletUI">
             {{ $t("app.buttons.btnShowWalletUI") }}

diff --git a/demo/vue-app-new/src/components/AppSettings.vue b/demo/vue-app-new/src/components/AppSettings.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Button, Card, Select, Tab, Tabs, Tag, TextField, Toggle } from "@toruslabs/vue-components";
-import { ADAPTER_STATUS, CHAIN_NAMESPACES, ChainNamespaceType } from "@web3auth/base";
+import { ADAPTER_STATUS, CHAIN_NAMESPACES, ChainNamespaceType, log } from "@web3auth/base";
 import { useWeb3Auth } from "@web3auth/modal-vue-composables";
 import { computed, InputHTMLAttributes, ref } from "vue";
 
@@ -54,6 +54,9 @@ const isDisabled = (name: string): boolean => {
     case "paymasterUrl":
       return !formData.useAccountAbstractionProvider;
 
+    case "accountAbstraction":
+      return formData.chainNamespace !== CHAIN_NAMESPACES.EIP155;
+
     default: {
       return false;
     }
@@ -65,6 +68,12 @@ const onTabChange = (index: number) => {
   activeTab.value = index;
 };
 const isActiveTab = (index: number) => activeTab.value === index;
+
+const onChainNamespaceChange = (value: string) => {
+  log.info("onChainNamespaceChange", value);
+  formData.chain = chainConfigs[value as ChainNamespaceType][0].chainId;
+  formData.adapters = [];
+};
 </script>
 
 <template>
@@ -85,8 +94,12 @@ const isActiveTab = (index: number) => activeTab.value === index;
         <Tab variant="underline" :active="isActiveTab(0)" @click="onTabChange(0)">General</Tab>
         <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="formData.chainNamespace === CHAIN_NAMESPACES.EIP155" variant="underline" :active="isActiveTab(3)" @click="onTabChange(3)">
+          Wallet Plugin
+        </Tab>
+        <Tab v-if="formData.chainNamespace === CHAIN_NAMESPACES.EIP155" 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
@@ -104,6 +117,7 @@ const isActiveTab = (index: number) => activeTab.value === index;
           :aria-label="$t('app.chainNamespace')"
           :placeholder="$t('app.chainNamespace')"
           :options="chainNamespaceOptions"
+          @update:model-value="onChainNamespaceChange"
         />
         <Select
           v-model="formData.chain"

diff --git a/packages/composables/modal-vue-composables/src/Web3AuthProvider.ts b/packages/composables/modal-vue-composables/src/Web3AuthProvider.ts
@@ -143,7 +143,7 @@ export const Web3AuthProvider = defineComponent({
       { immediate: true }
     );
 
-    watch(isConnected, () => {
+    watch(isConnected, (newIsConnected) => {
       if (web3Auth.value) {
         const addState = async (web3AuthInstance: Web3Auth) => {
           provider.value = web3AuthInstance.provider;
@@ -158,7 +158,7 @@ export const Web3AuthProvider = defineComponent({
           isMFAEnabled.value = false;
         };
 
-        if (isConnected.value) addState(web3Auth.value as Web3Auth);
+        if (newIsConnected) addState(web3Auth.value as Web3Auth);
         else resetState();
       }
     });

diff --git a/packages/no-modal/src/noModal.ts b/packages/no-modal/src/noModal.ts
@@ -319,8 +319,8 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
       }
 
       this.commonJRPCProvider.updateProviderEngineProxy(finalProvider);
-      this.status = ADAPTER_STATUS.CONNECTED;
       this.connectedAdapterName = data.adapter;
+      this.status = ADAPTER_STATUS.CONNECTED;
       this.cacheWallet(data.adapter);
       log.debug("connected", this.status, this.connectedAdapterName);
       this.connectToPlugins(data);