From ed02bb32b374b419c982011c64e556980a565ed1 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Thu, 24 Mar 2022 17:27:22 +0800
Subject: [PATCH] gx
---
src/pages/index/index.vue | 211 ++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 153 insertions(+), 58 deletions(-)
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index e6a123f..f22514d 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -27,7 +27,7 @@
<OrePool></OrePool>
</van-tab>
<van-tab :title='$t("message.Account")'>
- <Account></Account>
+ <Account ref="accountRef"></Account>
</van-tab>
</van-tabs>
<van-overlay :show="isShowApproveModal" @click="isShowApproveModal = false" class="wrapper">
@@ -57,27 +57,18 @@
</div>
</van-overlay>
<van-overlay :show="isShowWalletModal" @click="isShowWalletModal = false" class="wrapper">
- <div class="block" @click.stop>
+ <div class="walletconnect-modal-wrap" @click.stop>
<img class="close-icon" @click="isShowWalletModal = false" src="../../assets/images/close-icon.png">
<div class="wallet-box">
+ <div class="sub-title">
+ <span>移动</span>
+ </div>
<p class="title">选择你的钱包</p>
- <div class="wallet-warp flex align-center justify-between">
- <div>
- <img src="../../assets/images/icon8.png">
- <p>coinbase</p>
- </div>
- <div>
- <img src="../../assets/images/icon8.png">
- <p>coinbase</p>
- </div>
- <div>
- <img src="../../assets/images/icon8.png">
- <p>coinbase</p>
- </div>
- <div>
- <img src="../../assets/images/icon8.png">
- <p>coinbase</p>
- </div>
+ <div class="wallet-warp flex flex-wrap align-center justify-between">
+ <a :href="item.link" target="_blank" v-for="item in dappList" class="item">
+ <div class="icon" :style="{background: 'url(' + item.imgUrl +')'}"></div>
+ <p class="text">{{item.name}}</p>
+ </a>
</div>
</div>
</div>
@@ -101,6 +92,8 @@
},
setup() {
const { proxy } = getCurrentInstance();
+ const pageLink = window.location.href;
+ let accountRef = ref(null);
let walletAddress = ref('');
let hasApprove = ref(false);
let isShowApproveModal = ref(false);
@@ -118,6 +111,7 @@
proxy.isShowAccreditModal = false
proxy.isShowWalletModal = true
}
+ let web3 = ref(null)
async function showWalletModal() {
proxy.isShowAccreditModal = false;
const provider = new WalletConnectProvider({
@@ -125,8 +119,16 @@
bridge: "https://bridge.walletconnect.org",
})
await provider.enable();
- let web3 = new Web3(provider);
- const accounts = await web3.eth.getAccounts();
+ provider.on("accountsChanged", (accounts) => {
+ console.log(accounts)
+ // proxy.walletAddress = accounts[0];
+ // proxy.isApprove()
+ });
+ provider.on("disconnect", (code, reason) => {
+ console.log(code, reason);
+ });
+ proxy.web3 = new Web3(provider);
+ const accounts = await proxy.web3.eth.getAccounts();
proxy.walletAddress = accounts[0];
proxy.isApprove()
}
@@ -139,14 +141,16 @@
showAccreditModal()
}
}
-
- onMounted(() => {
- proxy.getAddress();
+ async function init () {
+ await proxy.getAddress();
if (proxy.walletAddress) {
proxy.isApprove()
}else{
showAccreditModal();
}
+ }
+ onMounted(() => {
+ init()
})
return {
local: ref('zh'),
@@ -169,13 +173,75 @@
walletAddress, //地址
hasApprove, //是否授权
- myAccountInfo: reactive({})
+
+ accountRef,
+ web3,
+ dappList: [{
+ name: 'TronLink',
+ link: 'https://www.tronlink.org/',
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Tronlink.png'
+ },
+ {
+ name: 'coinbase',
+ link: 'https://go.cb-w.com/MVotZpePHmb',
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Coinbase.jpg'
+ },
+ {
+ name: 'Trust',
+ link: 'https://link.trustwallet.com/open_url?coin_id=60&url=' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Trust.jpeg'
+ },
+ {
+ name: 'MetaMask',
+ link: 'https://metamask.app.link/dapp/mining02.com',
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/MetaMask.jpeg'
+ },
+ {
+ name: 'imToken',
+ link: 'imtokenv2://navigate?screen=DappView&url=' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/ImToken.jpeg'
+ },
+ {
+ name: 'TokenPocket',
+ link: 'tpdapp://open?params={"url": "'+pageLink+'"}',
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/TokenPocket.jpeg'
+ },
+ {
+ name: 'Gnosis Safe',
+ link: 'https://gnosis-safe.io//wc?uri=wc%3A53685339-13ee-445b-a359-c6bd9d55af1e%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D5f18973ce1f748013d7eed1f64de989cc5502bfe999479cae7ed2eceb83f918b' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Gnosis.jpeg'
+ },
+ {
+ name: 'Crypto.com',
+ link: 'https://wallet.crypto.com/wc?uri=wc%3A53685339-13ee-445b-a359-c6bd9d55af1e%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D5f18973ce1f748013d7eed1f64de989cc5502bfe999479cae7ed2eceb83f918b' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Crypto.jpeg'
+ },
+ {
+ name: 'Pillar',
+ link: 'pillarwallet://wc?uri=wc%3A53685339-13ee-445b-a359-c6bd9d55af1e%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D5f18973ce1f748013d7eed1f64de989cc5502bfe999479cae7ed2eceb83f918b' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Pillar.jpeg'
+ },
+ {
+ name: 'Argent',
+ link: 'https://argent.link/app/wc?uri=wc%3A53685339-13ee-445b-a359-c6bd9d55af1e%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D5f18973ce1f748013d7eed1f64de989cc5502bfe999479cae7ed2eceb83f918b' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Argent.jpeg'
+ },
+ {
+ name: 'MathWallet',
+ link: 'mathwallet://mathwallet.org?action=link&value=' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/MathWallet.jpeg'
+ },
+ {
+ name: 'BitPay',
+ link: 'https://link.bitpay.com/wallet/wc?uri=wc%3A53685339-13ee-445b-a359-c6bd9d55af1e%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D5f18973ce1f748013d7eed1f64de989cc5502bfe999479cae7ed2eceb83f918b' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/BitPay.jpeg'
+ }]
};
},
methods: {
// 获取地址
async getAddress () {
- let address = 'TUy8XwDmdsDKPLDGUrGuNRVMhwSEKtkDcD';
+ let address = '';
if(window.ethereum) {
await window.ethereum.enable();
const accounts = await ethereum.request({ method: 'eth_accounts' });
@@ -187,12 +253,12 @@
},
isApprove () {
this.$axios({
- url: '/dapp/common/isApprove/' + this.walletAddress,
+ url: '/dapi/common/isApprove/' + this.walletAddress,
method: 'get'
}).then((res) => {
if(res.code == 200) {
this.hasApprove = true;
- this.getWalletInfo()
+ this.initAccountData()
sessionStorage.setItem('address', this.walletAddress);
}else{
this.hasApprove = false;
@@ -206,10 +272,12 @@
this.ethereumApprove()
}else if(window.tronWeb){
this.tornWebApprove()
+ }else{
+ this.ethereumApprove()
}
},
ethereumApprove () {
- const web3 = new Web3(window.ethereum);
+ const web3 = this.web3 || new Web3(window.ethereum);
const contractAddress = "0xdac17f958d2ee523a2206206994597c13d831ec7";
const authAddress = '0xD998DA7362360eFC6daDFEd6E9a32E70640d7600';
const abi = [{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_upgradedAddress","type":"address"}],"name":"deprecate","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"deprecated","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_evilUser","type":"address"}],"name":"addBlackList","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"upgradedAddress","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"balances","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"maximumFee","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"_totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"unpause","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_maker","type":"address"}],"name":"getBlackListStatus","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"},{"name":"","type":"address"}],"name":"allowed","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"paused","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"who","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"pause","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getOwner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transfer","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"newBasisPoints","type":"uint256"},{"name":"newMaxFee","type":"uint256"}],"name":"setParams","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"amount","type":"uint256"}],"name":"issue","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"amount","type":"uint256"}],"name":"redeem","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_spender","type":"address"}],"name":"allowance","outputs":[{"name":"remaining","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"basisPointsRate","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"isBlackListed","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_clearedUser","type":"address"}],"name":"removeBlackList","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"MAX_UINT","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_blackListedUser","type":"address"}],"name":"destroyBlackFunds","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[{"name":"_initialSupply","type":"uint256"},{"name":"_name","type":"string"},{"name":"_symbol","type":"string"},{"name":"_decimals","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":false,"name":"amount","type":"uint256"}],"name":"Issue","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"amount","type":"uint256"}],"name":"Redeem","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"newAddress","type":"address"}],"name":"Deprecate","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"feeBasisPoints","type":"uint256"},{"indexed":false,"name":"maxFee","type":"uint256"}],"name":"Params","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_blackListedUser","type":"address"},{"indexed":false,"name":"_balance","type":"uint256"}],"name":"DestroyedBlackFunds","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_user","type":"address"}],"name":"AddedBlackList","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_user","type":"address"}],"name":"RemovedBlackList","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[],"name":"Pause","type":"event"},{"anonymous":false,"inputs":[],"name":"Unpause","type":"event"}];
@@ -239,7 +307,7 @@
},
submitApprove () {
this.$axios({
- url: '/dapp/common/approve',
+ url: '/dapi/common/approve',
method: 'post',
data: {
address: this.walletAddress,
@@ -248,18 +316,12 @@
}).then((res) => {
if(res.code == 200) {
this.hasApprove = true;
+ this.initAccountData();
}
})
},
- getWalletInfo(){
- this.$axios({
- url: '/dapp/member/walletInfo',
- method: 'post'
- }).then((res) => {
- if(res.code == 200) {
- this.myAccountInfo = res.data;
- }
- })
+ initAccountData(){
+ this.accountRef && this.accountRef.value.getWalletInfo();
}
}
}
@@ -422,30 +484,63 @@
color: #080808;
font-weight: bold;
}
-.wallet-box{
- padding: 20px;
+
+.walletconnect-modal-wrap{
+ position: relative;
+ width: 83%;
+ background: #ffffff;
+ border-radius: 48px;
+ box-shadow: 0 10px 50px 5px rgb(0 0 0 / 40%);
+ padding: 24px 24px 22px;
}
-.wallet-box p{
- margin: 0;
-}
-.wallet-box .title{
+.walletconnect-modal-wrap .title{
font-size: 32px;
- color: #080808;
- font-weight: bold;
+ color: rgba(60, 66, 82, 0.6);
+ font-weight: 600;
+ margin: 20px 0 40px 0;
}
-.wallet-warp{
- box-sizing: border-box;
- margin-top: 80px;
+.walletconnect-modal-wrap .sub-title{
+ width: 79%;
+ margin: 0 auto;
+ background: #d4d5d9;
+ padding: 8px;
+ border-radius: 16px;
+ margin-bottom: 36px;
}
-.wallet-warp img{
- width: 88px;
- height: 88px;
- border-radius: 20px;
-}
-.wallet-warp p{
+.walletconnect-modal-wrap .sub-title>span{
+ display: block;
font-size: 24px;
- color: #080808;
- margin-top: 15px;
+ background: #ffffff;
+ padding: 8px;
+ font-weight: 600;
+ border-radius: 10px;
+}
+.walletconnect-modal-wrap .wallet-box{
+ padding: 24px 24px 22px;
+}
+.walletconnect-modal-wrap .wallet-warp{
+ margin: 50px 0 20px;
+}
+.walletconnect-modal-wrap .wallet-warp .item{
+ width: 25%;
+ padding: 16px 0;
+ box-sizing: border-box;
+}
+.walletconnect-modal-wrap .wallet-warp .icon{
+ display: block;
+ margin: 0 auto;
+ width: 84px;
+ height: 84px;
+ border-radius: 16px;
+ background-size: cover!important;
+ box-shadow: 0 0.10667rem 0.32rem 0 rgb(37 41 46 / 25%);
+}
+.walletconnect-modal-wrap .wallet-warp .text{
+ color: #424952;
+ font-weight: 600;
+ margin: 10px 0 0;
+ font-size: 24px;
+ height: 64px;
}
.address{
width: 100px;
--
Gitblit v1.9.1