check whether wallet installed when show wallet select, if not install, clieck to download

src/components/chain/WalletSelectModel.vue

@@ -24,6 +24,7 @@
           <img :src="data.logo" :alt="data.name" />
         </div>
         <div class="name">{{ data.name }}</div>
+        <div class="tip">{{ data.tip }}</div>
       </div>
       </div>
       
@@ -41,17 +42,44 @@ const props = defineProps({
 });
 
 const currentDatas = computed(() => {
-  return ALL_PROVIDERS;
+  let list = ALL_PROVIDERS.map((item) => {
+    const Provider = allProviders[item.id];
+    const installed = new Provider().installed;
+    return {
+      id: item.id,
+      name: item.name,
+      logo: item.logo,
+      installed,
+      downloadUrl: item.downloadUrl,
+      tip: installed ? item.tip || "" : "Click to Install",
+    };
+  });
+  
+  return list;
 });
 
-async function cardClicked(id) {
+async function selectWallet(id) {
-  console.log("card clicked:", id);
   const Provider = allProviders[id];
   const { provider, accounts } = await new Provider().web3Provider();
   console.log(accounts)
   hideModal({errcode: 0, provider, wallet: id, accounts});
 }
 
+
+async function cardClicked(id) {
+  console.log("card clicked:", id);
+  const data = currentDatas.value.find((item) => item.id === id);
+  if (!data.installed) {
+    // return
+    // // open download page
+    if (!data.downloadUrl) {
+      return;
+    }
+    window.open(data.downloadUrl, '_blank');
+  } 
+  await selectWallet(id);
+}
+
 function cancelSelect() {
   hideModal({errcode: 1, errmsg: "user cancel select wallet"});
 }
@@ -164,12 +192,20 @@ function hideModal(result = null) {
           }
         }
         .name {
-          width: 80%;
+          width: 60%;
           font-size: 24px;
           font-weight: 700;
           text-align: left;
           margin-left: 20px;
         }
+        .tip {
+          width: 30%;
+          text-align: right;
+          color: red;
+        }
+        .tip a{
+          color: red;
+        }
       }
       .chain-modal-card:hover {
         background-color: #D5BEFA;

src/components/chain/wallet/MetaMaskWallet.js

@@ -25,6 +25,10 @@ export class MetaMaskWallet{
     return { token, refreshToken }
   }
 
+  get installed() {
+    return !!window.ethereum && window.ethereum.isMetaMask;
+  }
+
   async logout() {
     await this.nativeProvider.request({
       "method": "wallet_revokePermissions",

src/components/chain/wallet/OkxWallet.js

@@ -33,4 +33,8 @@ export class OkxWallet{
     const chainId = await this.nativeProvider.request({ method: "eth_chainId" });
     return parseInt(chainId);
   }
+
+  get installed() {
+    return !!window.okxwallet && window.okxwallet.isOKExWallet
+  }
 }

src/components/chain/wallet/PassportWallet.js

@@ -82,4 +82,8 @@ export class PassportWallet {
   async getChainId() {
     return Promise.resolve(cfgChainId)
   }
+
+  get installed() {
+    return true
+  }
 }