<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>{{ $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>
|
</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="hideApproveModal">
|
<div class="wrapper" @click.stop>
|
<div class="block">
|
<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>
|
</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">
|
<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()">
|
<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">
|
<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>
|
</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();
|
const 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)
|
// });
|
}
|
onMounted(() => {
|
initWalletConnect()
|
})
|
return {
|
local: ref('zh'),
|
languague: [
|
{ text: '简体中文', value: 'zh' },
|
{ text: 'English', value: 'en' }
|
],
|
provider,
|
initWalletConnect,
|
isShowApproveModal: ref(false),
|
isShowAccreditModal: ref(false),
|
isShowWalletModal: ref(false),
|
changeLanguage
|
};
|
},
|
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>
|
|
<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;
|
}
|
.block {
|
background-color: #fff;
|
border-radius: 20px;
|
padding: 24px 34px 32px;
|
position: fixed;
|
top: 30%;
|
left: 24px;
|
right: 24px;
|
}
|
.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: 0px;
|
width: 50px;
|
height: 50px;
|
color: #fff;
|
}
|
.accredit-box{
|
padding: 54px 30px;
|
}
|
.accredit-box .item{
|
width: 45%;
|
border: 1px solid #E9E9E9;
|
border-radius: 20px;
|
padding: 35px;
|
box-sizing: border-box;
|
}
|
.accredit-box .item img{
|
width: 84px;
|
height: 84px;
|
}
|
.accredit-box .item p{
|
margin: 10px 0 0;
|
font-size: 24px;
|
color: #999999;
|
}
|
.accredit-box .item .title{
|
font-size: 32px;
|
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;
|
}
|
|
</style>
|
