From 61e23de4a7d82a6a581a08c6477e725872195112 Mon Sep 17 00:00:00 2001
From: MickWang <1244134672@qq.com>
Date: Thu, 25 Apr 2024 12:31:37 +0800
Subject: [PATCH] add h5 debugger

---
 components/transaction/EthereumTransactionFooter.vue | 10 ++++++----
 components/transaction/TransactionFooter.vue         |  9 ++++++---
 layouts/default.vue                                  |  9 ++++++++-
 nuxt.config.ts                                       |  3 +++
 store/onboard.ts                                     |  8 +++++++-
 5 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/components/transaction/EthereumTransactionFooter.vue b/components/transaction/EthereumTransactionFooter.vue
index 687e276f8..66c013fd3 100644
--- a/components/transaction/EthereumTransactionFooter.vue
+++ b/components/transaction/EthereumTransactionFooter.vue
@@ -63,7 +63,9 @@
           </slot>
         </CommonButton>
         <template v-if="connectorName === 'WalletConnect'">
-          <CommonButtonUnderlineText :opened="!!walletName?.includes('Binance')">If you're using the Binance Web3 Wallet, please update it to the newest version.</CommonButtonUnderlineText>
+          <CommonButtonUnderlineText :opened="!!walletName?.includes('Binance')"
+            >If you're using the Binance Web3 Wallet, please update it to the newest version.</CommonButtonUnderlineText
+          >
         </template>
       </template>
       <template v-else>
@@ -126,8 +128,8 @@ const getNetworkInfo = () => {
     return props.transaction ? newNetwork ?? primaryNetwork : obj;
   } else {
     let obj = zkSyncNetworks.find(
-      (item) => item.key && item.key.toLowerCase() === (props.transaction?.token?.networkKey || 'primary').toLowerCase()
-    )
+      (item) => item.key && item.key.toLowerCase() === (props.transaction?.token?.networkKey || "primary").toLowerCase()
+    );
     const objs = { l1Network: { id: l1Network.value?.id } };
     return props.transaction ? obj ?? primaryNetwork : objs;
   }
@@ -146,7 +148,7 @@ const isGateWalletUnsupportedChain = computed(() => {
 const buttonStep = computed(() => {
   console.log("buttonStep getNetworkInfo().l1Network?.id", getNetworkInfo().l1Network?.id);
   console.log("buttonStep network.value.chain?.id", network.value.chain?.id);
-  if (!account.value.address || isConnectingWallet.value) {
+  if (!account.value.address) {
     return "connect";
   } else if (!(network.value.chain?.id === getNetworkInfo().l1Network?.id)) {
     return "network";
diff --git a/components/transaction/TransactionFooter.vue b/components/transaction/TransactionFooter.vue
index 1110a3ebf..3253feb43 100644
--- a/components/transaction/TransactionFooter.vue
+++ b/components/transaction/TransactionFooter.vue
@@ -21,7 +21,8 @@
       <CommonButton
         v-if="
           connectorName !== 'WalletConnect' ||
-          (connectorName === 'WalletConnect' && (walletName?.includes('OKX') || walletName?.includes('MetaMask') || walletName?.includes('Binance')))
+          (connectorName === 'WalletConnect' &&
+            (walletName?.includes('OKX') || walletName?.includes('MetaMask') || walletName?.includes('Binance')))
         "
         type="submit"
         :disabled="switchingNetworkInProgress"
@@ -35,7 +36,9 @@
         Change network manually to {{ eraNetwork.name }} in your {{ walletName }} wallet
       </CommonButton>
       <template v-if="connectorName === 'WalletConnect'">
-        <CommonButtonUnderlineText :opened="!!walletName?.includes('Binance')">If you're using the Binance Web3 Wallet, please update it to the newest version.</CommonButtonUnderlineText>
+        <CommonButtonUnderlineText :opened="!!walletName?.includes('Binance')"
+          >If you're using the Binance Web3 Wallet, please update it to the newest version.</CommonButtonUnderlineText
+        >
       </template>
 
       <CommonButton v-else-if="walletName === 'Binance Web3'" disabled variant="primary" class="w-full">
@@ -68,7 +71,7 @@ const { isCorrectNetworkSet, switchingNetworkInProgress, switchingNetworkError }
 const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
 
 const buttonStep = computed(() => {
-  if (!account.value.address || isConnectingWallet.value) {
+  if (!account.value.address) {
     return "connect";
   } else if (!isCorrectNetworkSet.value) {
     return "network";
diff --git a/layouts/default.vue b/layouts/default.vue
index d5f464e7a..e90c4af84 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -15,7 +15,14 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { onBeforeMount } from "vue";
+onBeforeMount(() => {
+  if (window.innerWidth < 500) {
+    window.eruda.init();
+  }
+});
+</script>
 
 <style lang="scss" scoped>
 .app-layout {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 964bc80ab..367b69ce3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -45,6 +45,9 @@ export default defineNuxtConfig({
           src: "https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js",
           defer: true,
         },
+        {
+          src: '//cdn.jsdelivr.net/npm/eruda'
+        }
       ],
     },
   },
diff --git a/store/onboard.ts b/store/onboard.ts
index aac06f751..41c5a0c3d 100644
--- a/store/onboard.ts
+++ b/store/onboard.ts
@@ -311,7 +311,13 @@ export const useOnboardStore = defineStore("onboard", () => {
     isConnected: computed(() => !!account.value.address),
     network: computed(() => network.value),
     isConnectingWallet: computed(() => {
-      console.log("account.value", account.value.isConnecting, account.value.isReconnecting);
+      console.log(
+        "account.value",
+        account.value.address,
+        account.value.open,
+        account.value.isConnecting,
+        account.value.isReconnecting
+      );
       return account.value.isReconnecting || account.value.isConnecting;
     }),
     connectingWalletError,