Merge pull request #1965 from Web3Auth/fix/demo-dashboard-ether

dashboard use ether handler
Web3Auth · Sep 24, 2024 · b58a9ac · b58a9ac
2 parents 2190c30 + e603777
commit b58a9ac
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 93 deletions.
diff --git a/demo/vue-app-new/src/components/AppDashboard.vue b/demo/vue-app-new/src/components/AppDashboard.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import { METHOD_TYPES } from "@toruslabs/ethereum-controllers";
 import { Button, Card } from "@toruslabs/vue-components";
 import { CHAIN_NAMESPACES, IProvider, log, WALLET_ADAPTERS, WALLET_PLUGINS } from "@web3auth/base";
 import { useWeb3Auth } from "@web3auth/modal-vue-composables";
 import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
-import { recoverAddress, TypedDataEncoder, verifyMessage } from "ethers";
 import { useI18n } from "vue-i18n";
 
-import { getV4TypedData } from "../config";
-import { getAccounts, getBalance, getChainId, sendEth, signEthMessage, signTransaction as signEthTransaction } from "../services/ethHandlers";
+import {
+  getAccounts,
+  getBalance,
+  getChainId,
+  sendEth,
+  signEthMessage,
+  signPersonalMessage,
+  signTransaction as signEthTransaction,
+  signTypedMessage,
+} from "../services/ethHandlers";
 import { signAllTransactions, signAndSendTransaction, signMessage, signTransaction as signSolTransaction } from "../services/solHandlers";
 import { formDataStore } from "../store/form";
 
@@ -167,66 +173,11 @@ const authenticateUser = async () => {
 };
 
 const onSignTypedData_v4 = async () => {
-  try {
-    printToConsole("Initiating sign typed data v4");
-
-    const chain = await getChainId(provider.value as IProvider, () => {});
-    const accounts = await getAccounts(provider.value as IProvider, () => {});
-    const typedData = getV4TypedData(chain as string);
-    let signTypedDataV4VerifyResult = "";
-    // const signedMessage = await ethersProvider?.send("eth_signTypedData_v4", [account.value, JSON.stringify(typedData)]);
-
-    const from = accounts?.[0];
-
-    const signedMessage = (await provider.value?.request({
-      method: METHOD_TYPES.ETH_SIGN_TYPED_DATA_V4,
-      params: [from, JSON.stringify(typedData)],
-    })) as string;
-
-    const msg = TypedDataEncoder.hash(typedData.domain, typedData.types, typedData.message);
-    const recoveredAddr = recoverAddress(msg, signedMessage);
-    if (recoveredAddr.toLowerCase() === from?.toLowerCase()) {
-      log.info(`Successfully verified signer as ${recoveredAddr}`);
-      signTypedDataV4VerifyResult = recoveredAddr;
-    } else {
-      throw new Error(`Failed to verify signer when comparing ${recoveredAddr} to ${from}`);
-    }
-    printToConsole(`Success`, { signedMessage, verify: signTypedDataV4VerifyResult });
-  } catch (error) {
-    log.error(error);
-    printToConsole("Failed", (error as Error).message);
-  }
+  await signTypedMessage(provider.value as IProvider, printToConsole);
 };
 
 const onSignPersonalMsg = async () => {
-  try {
-    printToConsole("Initiating personal sign");
-    const message = "Example `personal_sign` messages";
-    const accounts = await getAccounts(provider.value as IProvider, () => {});
-    const from = accounts?.[0];
-    let personalSignVerifySigUtilResult = "";
-    // const signedMessage = await ethersProvider?.send("personal_sign", [message, account.value]);
-    const msg = `0x${Buffer.from(message, "utf8").toString("hex")}`;
-    const signedMessage = (await provider.value?.request({
-      method: METHOD_TYPES.PERSONAL_SIGN,
-      params: [msg, from, "Example password"],
-    })) as string;
-
-    // Verify
-    const recoveredAddr = verifyMessage(message, signedMessage);
-
-    if (recoveredAddr.toLowerCase() === from?.toLowerCase()) {
-      log.info(`SigUtil Successfully verified signer as ${recoveredAddr}`);
-      personalSignVerifySigUtilResult = recoveredAddr;
-    } else {
-      throw new Error(`SigUtil Failed to verify signer when comparing ${recoveredAddr} to ${from}`);
-    }
-
-    printToConsole(`Success`, { signedMessage, verify: personalSignVerifySigUtilResult });
-  } catch (error) {
-    log.error(error);
-    printToConsole("Failed", (error as Error).message);
-  }
+  await signPersonalMessage(provider.value as IProvider, printToConsole);
 };
 </script>
 

diff --git a/demo/vue-app-new/src/components/AppSettings.vue b/demo/vue-app-new/src/components/AppSettings.vue
@@ -86,6 +86,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>
       </Tabs>
       <Card v-if="isActiveTab(0)" class="grid grid-cols-1 gap-2 px-4 py-4" :shadow="false">
         <Select
@@ -122,38 +123,6 @@ const isActiveTab = (index: number) => activeTab.value === index;
           multiple
           :show-check-box="true"
         />
-        <Toggle
-          v-model="formData.useAccountAbstractionProvider"
-          data-testid="accountAbstractionProvider"
-          :show-label="true"
-          :size="'small'"
-          :label-disabled="$t('app.accountAbstractionProvider.title')"
-          :label-enabled="$t('app.accountAbstractionProvider.title')"
-          class="my-2"
-        />
-        <Select
-          v-model="formData.smartAccountType"
-          data-testid="smartAccountType"
-          :label="$t('app.accountAbstractionProvider.smartAccountType')"
-          :aria-label="$t('app.accountAbstractionProvider.smartAccountType')"
-          :placeholder="$t('app.accountAbstractionProvider.smartAccountType')"
-          :options="SmartAccountOptions"
-          :disabled="isDisabled('smartAccountType')"
-        />
-        <TextField
-          v-model="formData.bundlerUrl"
-          :label="$t('app.accountAbstractionProvider.bundlerUrl')"
-          :aria-label="$t('app.accountAbstractionProvider.bundlerUrl')"
-          :placeholder="$t('app.accountAbstractionProvider.bundlerUrl')"
-          :disabled="isDisabled('bundlerUrl')"
-        />
-        <TextField
-          v-model="formData.paymasterUrl"
-          :label="$t('app.accountAbstractionProvider.paymasterUrl')"
-          :aria-label="$t('app.accountAbstractionProvider.paymasterUrl')"
-          :placeholder="$t('app.accountAbstractionProvider.paymasterUrl')"
-          :disabled="isDisabled('paymasterUrl')"
-        />
       </Card>
       <Card v-if="isActiveTab(1)" class="grid grid-cols-1 gap-2 px-4 py-4 sm:grid-cols-2" :shadow="false">
         <Toggle
@@ -358,6 +327,40 @@ const isActiveTab = (index: number) => activeTab.value === index;
           class="sm:col-span-2"
         />
       </Card>
+      <Card v-if="isActiveTab(4)" class="grid grid-cols-1 gap-2 px-4 py-4" :shadow="false">
+        <Toggle
+          v-model="formData.useAccountAbstractionProvider"
+          data-testid="accountAbstractionProvider"
+          :show-label="true"
+          :size="'small'"
+          :label-disabled="$t('app.accountAbstractionProvider.title')"
+          :label-enabled="$t('app.accountAbstractionProvider.title')"
+          class="my-2"
+        />
+        <Select
+          v-model="formData.smartAccountType"
+          data-testid="smartAccountType"
+          :label="$t('app.accountAbstractionProvider.smartAccountType')"
+          :aria-label="$t('app.accountAbstractionProvider.smartAccountType')"
+          :placeholder="$t('app.accountAbstractionProvider.smartAccountType')"
+          :options="SmartAccountOptions"
+          :disabled="isDisabled('smartAccountType')"
+        />
+        <TextField
+          v-model="formData.bundlerUrl"
+          :label="$t('app.accountAbstractionProvider.bundlerUrl')"
+          :aria-label="$t('app.accountAbstractionProvider.bundlerUrl')"
+          :placeholder="$t('app.accountAbstractionProvider.bundlerUrl')"
+          :disabled="isDisabled('bundlerUrl')"
+        />
+        <TextField
+          v-model="formData.paymasterUrl"
+          :label="$t('app.accountAbstractionProvider.paymasterUrl')"
+          :aria-label="$t('app.accountAbstractionProvider.paymasterUrl')"
+          :placeholder="$t('app.accountAbstractionProvider.paymasterUrl')"
+          :disabled="isDisabled('paymasterUrl')"
+        />
+      </Card>
       <div class="flex justify-center mt-5">
         <Button
           :class="['w-full !h-auto group py-3 rounded-full flex items-center justify-center']"