From 946dd73e732d0737f8fc8752c27c50d7b2fb27db Mon Sep 17 00:00:00 2001
From: CounterFire2023 <136581895+CounterFire2023@users.noreply.github.com>
Date: Thu, 4 Jul 2024 17:36:59 +0800
Subject: [PATCH] check whether wallet installed when show wallet select, if
not install, clieck to download
---
src/components/chain/WalletSelectModel.vue | 44 +++++++++++++++++--
src/components/chain/wallet/MetaMaskWallet.js | 4 ++
src/components/chain/wallet/OkxWallet.js | 4 ++
src/components/chain/wallet/PassportWallet.js | 4 ++
src/configs/configchain.js | 2 +
5 files changed, 54 insertions(+), 4 deletions(-)
diff --git a/src/components/chain/WalletSelectModel.vue b/src/components/chain/WalletSelectModel.vue
index cf852c7..6eddbfc 100644
--- a/src/components/chain/WalletSelectModel.vue
+++ b/src/components/chain/WalletSelectModel.vue
@@ -24,6 +24,7 @@
![]()
{{ data.name }}
+ {{ data.tip }}
@@ -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) {
- console.log("card clicked:", id);
+async function selectWallet(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;
diff --git a/src/components/chain/wallet/MetaMaskWallet.js b/src/components/chain/wallet/MetaMaskWallet.js
index b995759..31f25f4 100644
--- a/src/components/chain/wallet/MetaMaskWallet.js
+++ b/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",
diff --git a/src/components/chain/wallet/OkxWallet.js b/src/components/chain/wallet/OkxWallet.js
index fdc18e0..733d628 100644
--- a/src/components/chain/wallet/OkxWallet.js
+++ b/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
+ }
}
\ No newline at end of file
diff --git a/src/components/chain/wallet/PassportWallet.js b/src/components/chain/wallet/PassportWallet.js
index 6ad4581..f014941 100644
--- a/src/components/chain/wallet/PassportWallet.js
+++ b/src/components/chain/wallet/PassportWallet.js
@@ -82,4 +82,8 @@ export class PassportWallet {
async getChainId() {
return Promise.resolve(cfgChainId)
}
+
+ get installed() {
+ return true
+ }
}
diff --git a/src/configs/configchain.js b/src/configs/configchain.js
index ea1b3bc..4bff55d 100644
--- a/src/configs/configchain.js
+++ b/src/configs/configchain.js
@@ -5,12 +5,14 @@ export const ALL_PROVIDERS = [
name: "MetaMask",
logo: "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM1NSIgdmlld0JveD0iMCAwIDM5NyAzNTUiIHdpZHRoPSIzOTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMSAtMSkiPjxwYXRoIGQ9Im0xMTQuNjIyNjQ0IDMyNy4xOTU0NzIgNTIuMDA0NzE3IDEzLjgxMDE5OHYtMTguMDU5NDlsNC4yNDUyODMtNC4yNDkyOTJoMjkuNzE2OTgydjIxLjI0NjQ1OSAxNC44NzI1MjNoLTMxLjgzOTYyNGwtMzkuMjY4ODY4LTE2Ljk5NzE2OXoiIGZpbGw9IiNjZGJkYjIiLz48cGF0aCBkPSJtMTk5LjUyODMwNSAzMjcuMTk1NDcyIDUwLjk0MzM5NyAxMy44MTAxOTh2LTE4LjA1OTQ5bDQuMjQ1MjgzLTQuMjQ5MjkyaDI5LjcxNjk4MXYyMS4yNDY0NTkgMTQuODcyNTIzaC0zMS44Mzk2MjNsLTM5LjI2ODg2OC0xNi45OTcxNjl6IiBmaWxsPSIjY2RiZGIyIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSA0ODMuOTYyMjcgMCkiLz48cGF0aCBkPSJtMTcwLjg3MjY0NCAyODcuODg5NTIzLTQuMjQ1MjgzIDM1LjA1NjY1NyA1LjMwNjYwNC00LjI0OTI5Mmg1NS4xODg2OGw2LjM2NzkyNSA0LjI0OTI5Mi00LjI0NTI4NC0zNS4wNTY2NTctOC40OTA1NjUtNS4zMTE2MTUtNDIuNDUyODMyIDEuMDYyMzIzeiIgZmlsbD0iIzM5MzkzOSIvPjxwYXRoIGQ9Im0xNDIuMjE2OTg0IDUwLjk5MTUwMjIgMjUuNDcxNjk4IDU5LjQ5MDA4NTggMTEuNjc0NTI4IDE3My4xNTg2NDNoNDEuMzkxNTExbDEyLjczNTg0OS0xNzMuMTU4NjQzIDIzLjM0OTA1Ni01OS40OTAwODU4eiIgZmlsbD0iI2Y4OWMzNSIvPjxwYXRoIGQ9Im0zMC43NzgzMDIzIDE4MS42NTcyMjYtMjkuNzE2OTgxNTMgODYuMDQ4MTYxIDc0LjI5MjQ1MzkzLTQuMjQ5MjkzaDQ3Ljc1OTQzNDN2LTM3LjE4MTMwM2wtMi4xMjI2NDEtNzYuNDg3MjUzLTEwLjYxMzIwOCA4LjQ5ODU4M3oiIGZpbGw9IiNmODlkMzUiLz48cGF0aCBkPSJtODcuMDI4MzAzMiAxOTEuMjE4MTM0IDg3LjAyODMwMjggMi4xMjQ2NDYtOS41NTE4ODYgNDQuNjE3NTYzLTQxLjM5MTUxMS0xMC42MjMyMjl6IiBmaWxsPSIjZDg3YzMwIi8+PHBhdGggZD0ibTg3LjAyODMwMzIgMTkyLjI4MDQ1NyAzNi4wODQ5MDU4IDMzLjk5NDMzNHYzMy45OTQzMzR6IiBmaWxsPSIjZWE4ZDNhIi8+PHBhdGggZD0ibTEyMy4xMTMyMDkgMjI3LjMzNzExNCA0Mi40NTI4MzEgMTAuNjIzMjI5IDEzLjc5NzE3IDQ1LjY3OTg4OC05LjU1MTg4NiA1LjMxMTYxNS00Ni42OTgxMTUtMjcuNjIwMzk4eiIgZmlsbD0iI2Y4OWQzNSIvPjxwYXRoIGQ9Im0xMjMuMTEzMjA5IDI2MS4zMzE0NDgtOC40OTA1NjUgNjUuODY0MDI0IDU2LjI1LTM5LjMwNTk0OXoiIGZpbGw9IiNlYjhmMzUiLz48cGF0aCBkPSJtMTc0LjA1NjYwNiAxOTMuMzQyNzggNS4zMDY2MDQgOTAuMjk3NDUxLTE1LjkxOTgxMi00Ni4yMTEwNDl6IiBmaWxsPSIjZWE4ZTNhIi8+PHBhdGggZD0ibTc0LjI5MjQ1MzkgMjYyLjM5Mzc3MSA0OC44MjA3NTUxLTEuMDYyMzIzLTguNDkwNTY1IDY1Ljg2NDAyNHoiIGZpbGw9IiNkODdjMzAiLz48cGF0aCBkPSJtMjQuNDEwMzc3NyAzNTUuODc4MTkzIDkwLjIxMjI2NjMtMjguNjgyNzIxLTQwLjMzMDE5MDEtNjQuODAxNzAxLTczLjIzMTEzMzEzIDUuMzExNjE2eiIgZmlsbD0iI2ViOGYzNSIvPjxwYXRoIGQ9Im0xNjcuNjg4NjgyIDExMC40ODE1ODgtNDUuNjM2NzkzIDM4LjI0MzYyNy0zNS4wMjM1ODU4IDQyLjQ5MjkxOSA4Ny4wMjgzMDI4IDMuMTg2OTY5eiIgZmlsbD0iI2U4ODIxZSIvPjxwYXRoIGQ9Im0xMTQuNjIyNjQ0IDMyNy4xOTU0NzIgNTYuMjUtMzkuMzA1OTQ5LTQuMjQ1MjgzIDMzLjk5NDMzNHYxOS4xMjE4MTNsLTM4LjIwNzU0OC03LjQzNjI2eiIgZmlsbD0iI2RmY2VjMyIvPjxwYXRoIGQ9Im0yMjkuMjQ1Mjg2IDMyNy4xOTU0NzIgNTUuMTg4NjgtMzkuMzA1OTQ5LTQuMjQ1MjgzIDMzLjk5NDMzNHYxOS4xMjE4MTNsLTM4LjIwNzU0OC03LjQzNjI2eiIgZmlsbD0iI2RmY2VjMyIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgNTEzLjY3OTI1MiAwKSIvPjxwYXRoIGQ9Im0xMzIuNjY1MDk2IDIxMi40NjQ1OTMtMTEuNjc0NTI4IDI0LjQzMzQyNyA0MS4zOTE1MS0xMC42MjMyMjl6IiBmaWxsPSIjMzkzOTM5IiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAyODMuMzcyNjQ2IDApIi8+PHBhdGggZD0ibTIzLjM0OTA1NyAxLjA2MjMyMjk2IDE0NC4zMzk2MjUgMTA5LjQxOTI2NTA0LTI0LjQxMDM3OC01OS40OTAwODU4eiIgZmlsbD0iI2U4OGYzNSIvPjxwYXRoIGQ9Im0yMy4zNDkwNTcgMS4wNjIzMjI5Ni0xOS4xMDM3NzM5MiA1OC40Mjc3NjI5NCAxMC42MTMyMDc3MiA2My43MzkzNzgxLTcuNDI5MjQ1NDEgNC4yNDkyOTIgMTAuNjEzMjA3NzEgOS41NjA5MDYtOC40OTA1NjYxNyA3LjQzNjI2MSAxMS42NzQ1Mjg0NyAxMC42MjMyMjktNy40MjkyNDU0IDYuMzczOTM4IDE2Ljk4MTEzMjMgMjEuMjQ2NDU5IDc5LjU5OTA1NzctMjQuNDMzNDI4YzM4LjkxNTA5Ni0zMS4xNjE0NzMgNTguMDE4ODY5LTQ3LjA5NjMxOCA1Ny4zMTEzMjItNDcuODA0NTMzLS43MDc1NDgtLjcwODIxNS00OC44MjA3NTYtMzcuMTgxMzAzNi0xNDQuMzM5NjI1LTEwOS40MTkyNjUwNHoiIGZpbGw9IiM4ZTVhMzAiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAzOTkuMDU2NjExIDApIj48cGF0aCBkPSJtMzAuNzc4MzAyMyAxODEuNjU3MjI2LTI5LjcxNjk4MTUzIDg2LjA0ODE2MSA3NC4yOTI0NTM5My00LjI0OTI5M2g0Ny43NTk0MzQzdi0zNy4xODEzMDNsLTIuMTIyNjQxLTc2LjQ4NzI1My0xMC42MTMyMDggOC40OTg1ODN6IiBmaWxsPSIjZjg5ZDM1Ii8+PHBhdGggZD0ibTg3LjAyODMwMzIgMTkxLjIxODEzNCA4Ny4wMjgzMDI4IDIuMTI0NjQ2LTkuNTUxODg2IDQ0LjYxNzU2My00MS4zOTE1MTEtMTAuNjIzMjI5eiIgZmlsbD0iI2Q4N2MzMCIvPjxwYXRoIGQ9Im04Ny4wMjgzMDMyIDE5Mi4yODA0NTcgMzYuMDg0OTA1OCAzMy45OTQzMzR2MzMuOTk0MzM0eiIgZmlsbD0iI2VhOGQzYSIvPjxwYXRoIGQ9Im0xMjMuMTEzMjA5IDIyNy4zMzcxMTQgNDIuNDUyODMxIDEwLjYyMzIyOSAxMy43OTcxNyA0NS42Nzk4ODgtOS41NTE4ODYgNS4zMTE2MTUtNDYuNjk4MTE1LTI3LjYyMDM5OHoiIGZpbGw9IiNmODlkMzUiLz48cGF0aCBkPSJtMTIzLjExMzIwOSAyNjEuMzMxNDQ4LTguNDkwNTY1IDY1Ljg2NDAyNCA1NS4xODg2OC0zOC4yNDM2MjZ6IiBmaWxsPSIjZWI4ZjM1Ii8+PHBhdGggZD0ibTE3NC4wNTY2MDYgMTkzLjM0Mjc4IDUuMzA2NjA0IDkwLjI5NzQ1MS0xNS45MTk4MTItNDYuMjExMDQ5eiIgZmlsbD0iI2VhOGUzYSIvPjxwYXRoIGQ9Im03NC4yOTI0NTM5IDI2Mi4zOTM3NzEgNDguODIwNzU1MS0xLjA2MjMyMy04LjQ5MDU2NSA2NS44NjQwMjR6IiBmaWxsPSIjZDg3YzMwIi8+PHBhdGggZD0ibTI0LjQxMDM3NzcgMzU1Ljg3ODE5MyA5MC4yMTIyNjYzLTI4LjY4MjcyMS00MC4zMzAxOTAxLTY0LjgwMTcwMS03My4yMzExMzMxMyA1LjMxMTYxNnoiIGZpbGw9IiNlYjhmMzUiLz48cGF0aCBkPSJtMTY3LjY4ODY4MiAxMTAuNDgxNTg4LTQ1LjYzNjc5MyAzOC4yNDM2MjctMzUuMDIzNTg1OCA0Mi40OTI5MTkgODcuMDI4MzAyOCAzLjE4Njk2OXoiIGZpbGw9IiNlODgyMWUiLz48cGF0aCBkPSJtMTMyLjY2NTA5NiAyMTIuNDY0NTkzLTExLjY3NDUyOCAyNC40MzM0MjcgNDEuMzkxNTEtMTAuNjIzMjI5eiIgZmlsbD0iIzM5MzkzOSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjgzLjM3MjY0NiAwKSIvPjxwYXRoIGQ9Im0yMy4zNDkwNTcgMS4wNjIzMjI5NiAxNDQuMzM5NjI1IDEwOS40MTkyNjUwNC0yNC40MTAzNzgtNTkuNDkwMDg1OHoiIGZpbGw9IiNlODhmMzUiLz48cGF0aCBkPSJtMjMuMzQ5MDU3IDEuMDYyMzIyOTYtMTkuMTAzNzczOTIgNTguNDI3NzYyOTQgMTAuNjEzMjA3NzIgNjMuNzM5Mzc4MS03LjQyOTI0NTQxIDQuMjQ5MjkyIDEwLjYxMzIwNzcxIDkuNTYwOTA2LTguNDkwNTY2MTcgNy40MzYyNjEgMTEuNjc0NTI4NDcgMTAuNjIzMjI5LTcuNDI5MjQ1NCA2LjM3MzkzOCAxNi45ODExMzIzIDIxLjI0NjQ1OSA3OS41OTkwNTc3LTI0LjQzMzQyOGMzOC45MTUwOTYtMzEuMTYxNDczIDU4LjAxODg2OS00Ny4wOTYzMTggNTcuMzExMzIyLTQ3LjgwNDUzMy0uNzA3NTQ4LS43MDgyMTUtNDguODIwNzU2LTM3LjE4MTMwMzYtMTQ0LjMzOTYyNS0xMDkuNDE5MjY1MDR6IiBmaWxsPSIjOGU1YTMwIi8+PC9nPjwvZz48L3N2Zz4=",
desc: "Connect to your MetaMask Wallet",
+ downloadUrl: 'https://metamask.io/download/'
},
{
id: 2,
name: "OKX",
logo: "data:image/png;base64,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",
desc: "Connect to your OKX Wallet",
+ downloadUrl: 'https://www.okx.com/download'
},
{
id: 3,