Merge pull request #130 from zkLinkProtocol/feat/binance_mobile_update

update icon for injected wallet on binance web3 app;
zkLinkProtocol · Apr 17, 2024 · 12cfb4f · 12cfb4f
2 parents dce0f95 + 5cfe31a
commit 12cfb4f
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 12 deletions.
diff --git a/public/img-browser-wallet.png b/public/img-browser-wallet.png
diff --git a/store/onboard.ts b/store/onboard.ts
@@ -25,6 +25,8 @@ import { useRuntimeConfig } from "#imports";
 import { confirmedSupportedWallets, disabledWallets } from "@/data/wallets";
 import { useNetworkStore } from "@/store/network";
 
+const isMobile = () => window.innerWidth < 800; // simple way to detect mobile device
+
 export const useOnboardStore = defineStore("onboard", () => {
   const { zkSyncNetworks } = useNetworks();
   const runtimeConfig = useRuntimeConfig();
@@ -151,20 +153,42 @@ export const useOnboardStore = defineStore("onboard", () => {
     }
   };
   identifyWalletName();
+
+  const autoConnectInBinanceWeb3 = async () => {
+    const connectors = getConnectors(wagmiConfig);
+    const injected = connectors.find((item) => item.id === "injected");
+    if (injected && !account.value?.address && window.innerWidth < 800) {
+      await injected.connect();
+      reconnect(wagmiConfig);
+    }
+  };
+
+  const BinanceWalletId = "8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4";
+  const excludeWalletIds = ["bc949c5d968ae81310268bf9193f9c9fb7bb4e1283e1284af8f2bd4992535fd6"];
+  if (isMobile()) {
+    excludeWalletIds.push(BinanceWalletId);
+  }
+  const featuredWalletIds = [
+    // "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",rainbow
+    "971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709", // okx wallet
+    // "8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4", // binance web3 wallet
+    "ad2eff108bf828a39e5cb41331d95861c9cc516aede9cb6a95d75d98c206e204", // Gate.io Wallet
+    "c7708575a2c3c9e6a8ab493d56cdcc56748f03956051d021b8cd8d697d9a3fd2", // fox wallet
+    // "aba1f652e61fd536e8a7a5cd5e0319c9047c435ef8f7e907717361ff33bb3588",
+    // "38f5d18bd8522c244bdd70cb4a68e0e718865155811c043f052fb9f1c51de662",//bitget
+  ];
+  if (!isMobile()) {
+    featuredWalletIds.unshift(BinanceWalletId);
+  }
+
   const web3modal = createWeb3Modal({
     wagmiConfig,
     projectId: env.walletConnectProjectID,
-    connectorImages: {},
-    excludeWalletIds: ["bc949c5d968ae81310268bf9193f9c9fb7bb4e1283e1284af8f2bd4992535fd6"],
-    featuredWalletIds: [
-      // "1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",rainbow
-      "971e689d0a5be527bac79629b4ee9b925e82208e5168b733496a09c0faed0709", // okx wallet
-      "8a0ee50d1f22f6651afcae7eb4253e52a3310b90af5daef78a8c4929a9bb99d4", // binance web3 wallet
-      "ad2eff108bf828a39e5cb41331d95861c9cc516aede9cb6a95d75d98c206e204", // Gate.io Wallet
-      "c7708575a2c3c9e6a8ab493d56cdcc56748f03956051d021b8cd8d697d9a3fd2", // fox wallet
-      // "aba1f652e61fd536e8a7a5cd5e0319c9047c435ef8f7e907717361ff33bb3588",
-      // "38f5d18bd8522c244bdd70cb4a68e0e718865155811c043f052fb9f1c51de662",//bitget
-    ],
+    connectorImages: {
+      injected: "/img-browser-wallet.png",
+    },
+    excludeWalletIds,
+    featuredWalletIds,
     // termsConditionsUrl: "https://zksync.io/terms",
     // privacyPolicyUrl: "https://zksync.io/privacy",
     themeMode: selectedColorMode.value,
@@ -294,7 +318,7 @@ export const useOnboardStore = defineStore("onboard", () => {
       if (!l1Network.value) throw new Error(`L1 network is not available on ${selectedNetwork.value.name}`);
       return getPublicClient(wagmiConfig, { chainId: chainId || l1Network.value?.id });
     },
-
+    autoConnectInBinanceWeb3,
     subscribeOnAccountChange,
     subscribeOnNetworkChange,
   };