增加wallet页面更新代币数量的功能
This commit is contained in:
cebgcontract
parent
b68c00840f
commit
232c0f0f93
@ -121,18 +121,19 @@ export default class ChainManager {
|
||||
}
|
||||
|
||||
public async getInstance(address: string, chainId: number) {
|
||||
// 由于不同网络上的contract的address不会相同, 所以可以直接以address作为key来缓存
|
||||
if (!this.instanceMap.has(address)) {
|
||||
const key = `${chainId}_${address}`
|
||||
if (!this.instanceMap.has(key)) {
|
||||
const chain = new Chain(this.chainMap.get(chainId)!.rpc)
|
||||
const coinInstance = await chain.getCoinInstance(address)
|
||||
this.instanceMap.set(address, coinInstance)
|
||||
this.instanceMap.set(key, coinInstance)
|
||||
}
|
||||
return this.instanceMap.get(address)
|
||||
return this.instanceMap.get(key)
|
||||
}
|
||||
|
||||
public async getBalance(address: string, chainId: number) {
|
||||
const coinInstance = await this.getInstance(address, chainId)
|
||||
const banlace = await coinInstance.methods.balanceOf(AppModule.accountId).call()
|
||||
console.log('balance: ', banlace)
|
||||
const balance = await coinInstance.methods.balanceOf(AppModule.accountId).call()
|
||||
console.log('balance: ', balance)
|
||||
return balance
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<div class="content">
|
||||
<div class="top">
|
||||
<div class="topLeft">
|
||||
<div class="name"><span>{{coinData.name}}({{coinData.symbol}})</span></div>
|
||||
<div class="coin">{{coinData.amount}} {{coinData.symbol}}</div>
|
||||
<div class="subCoin">{{coinData.price}} USD</div>
|
||||
<div class="name"><span>{{coinData.name}}({{coinData.symbol.toUpperCase()}})</span></div>
|
||||
<div class="coin">{{coinData.amount}} {{coinData.symbol.toUpperCase()}}</div>
|
||||
<div class="subCoin" v-if="false">{{coinData.price}} USD</div>
|
||||
</div>
|
||||
<img draggable="false"
|
||||
:src="coinData.icon"
|
||||
@ -25,7 +25,7 @@ import { AppModule, DeviceType } from '@/store/modules/app'
|
||||
export interface ICoinData{
|
||||
name: string
|
||||
symbol: string
|
||||
amount: number
|
||||
amount: number | string
|
||||
icon: any
|
||||
price: string|number
|
||||
btnName: string
|
||||
|
||||
@ -3,21 +3,22 @@
|
||||
<div class="content">
|
||||
<div class="name"><span>Other Currencies</span></div>
|
||||
<template v-for="d in currencies">
|
||||
<div class="coin" :key="d.name+'1'">{{d.amount}} {{d.name}}</div>
|
||||
<div class="subCoin space" :key="d.name+'2'">{{d.price}} USD</div>
|
||||
<div class="coin" :key="d.chain+'1'">{{d.amount}} {{d.name}}</div>
|
||||
<div class="subCoin space" v-if="false" :key="d.chain+'2'">{{d.price}} USD</div>
|
||||
</template>
|
||||
<div class="wrongNetwork hide"><span>Wrong network</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { AppModule, DeviceType } from '@/store/modules/app'
|
||||
|
||||
export interface ICurrentData{
|
||||
name: string
|
||||
amount: number
|
||||
price: number
|
||||
amount: number | string
|
||||
price: number | string
|
||||
chain: number
|
||||
}
|
||||
|
||||
@Component({
|
||||
@ -26,18 +27,7 @@ export interface ICurrentData{
|
||||
}
|
||||
})
|
||||
export default class TotalBalance extends Vue {
|
||||
private currencies: ICurrentData[] = [
|
||||
{
|
||||
name: 'WBNB',
|
||||
amount: 1000,
|
||||
price: 10000
|
||||
},
|
||||
{
|
||||
name: 'WKCS',
|
||||
amount: 1000,
|
||||
price: 10000
|
||||
}
|
||||
]
|
||||
@Prop() private currencies: ICurrentData[]
|
||||
|
||||
get mobile() {
|
||||
return AppModule.device === DeviceType.Mobile
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="wallet">
|
||||
<total-balance></total-balance>
|
||||
<total-balance :currencies="currencies"></total-balance>
|
||||
<coin-card v-for="d in coinList" :coin-data="d" :key="d.symbol"></coin-card>
|
||||
</div>
|
||||
<div class="header ingame"><span class="label">Ingame Currency</span>
|
||||
@ -37,13 +37,15 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import TotalBalance from '@/components/market/wallet/TotalBalance.vue'
|
||||
import { Component, Vue, Watch } from 'vue-property-decorator'
|
||||
import TotalBalance, { ICurrentData } from '@/components/market/wallet/TotalBalance.vue'
|
||||
import CoinCard, { ICoinData } from '@/components/market/wallet/CoinCard.vue'
|
||||
import GameCoinCard from '@/components/market/wallet/GameCoinCard.vue'
|
||||
import { AppModule } from '@/store/modules/app'
|
||||
import PlaceholderPanel from '@/components/market/wallet/PlaceholderPanel.vue'
|
||||
import ChainManager from '@/chain/ChainManager'
|
||||
import { CONTRACT_ADDRESS } from '@/configs/config_chain'
|
||||
import { formatPrice } from '@/utils/chain.util'
|
||||
|
||||
@Component({
|
||||
name: 'WalletPanel',
|
||||
@ -55,7 +57,7 @@ import ChainManager from '@/chain/ChainManager'
|
||||
}
|
||||
})
|
||||
export default class WalletPanel extends Vue {
|
||||
private currentNet = this.nets[0].id
|
||||
private currentNet: number = this.nets[0].id
|
||||
chainManager = new ChainManager()
|
||||
|
||||
get nets() {
|
||||
@ -66,22 +68,30 @@ export default class WalletPanel extends Vue {
|
||||
return this.chainManager.isLogined
|
||||
}
|
||||
|
||||
@Watch('logined')
|
||||
private accountChange() {
|
||||
this.updateBalanceSet()
|
||||
this.updateCurrencies()
|
||||
}
|
||||
|
||||
private currencies: ICurrentData[] = []
|
||||
|
||||
private coinList: ICoinData[] = [
|
||||
{
|
||||
name: 'CEBG Coin',
|
||||
symbol: 'CEC',
|
||||
amount: 100,
|
||||
symbol: 'cec',
|
||||
amount: '-',
|
||||
icon: require('@/assets/market/cec.png'),
|
||||
price: 100,
|
||||
price: '-',
|
||||
btnName: 'Deposit',
|
||||
btnDisable: true
|
||||
},
|
||||
{
|
||||
name: 'CEBG Gem',
|
||||
symbol: 'CEG',
|
||||
amount: 100,
|
||||
symbol: 'ceg',
|
||||
amount: '-',
|
||||
icon: require('@/assets/market/ceg.png'),
|
||||
price: 100,
|
||||
price: '-',
|
||||
btnName: 'Deposit',
|
||||
btnDisable: true
|
||||
}
|
||||
@ -91,23 +101,40 @@ export default class WalletPanel extends Vue {
|
||||
{
|
||||
name: 'CEBG Coin',
|
||||
symbol: 'gCEC',
|
||||
amount: 100,
|
||||
amount: '-',
|
||||
icon: require('@/assets/market/cec.png'),
|
||||
price: 100,
|
||||
price: '-',
|
||||
btnName: 'Claim',
|
||||
btnDisable: true
|
||||
},
|
||||
{
|
||||
name: 'CEBG Gem',
|
||||
symbol: 'gCEG',
|
||||
amount: 100,
|
||||
amount: '-',
|
||||
icon: require('@/assets/market/ceg.png'),
|
||||
price: 100,
|
||||
price: '-',
|
||||
btnName: 'Claim',
|
||||
btnDisable: true
|
||||
}
|
||||
]
|
||||
|
||||
created() {
|
||||
for (const net of this.nets) {
|
||||
this.currencies.push({
|
||||
name: `W${net.symbol.toUpperCase()}`,
|
||||
amount: '-',
|
||||
price: '-',
|
||||
chain: net.id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
updateDefaultData(data: ICoinData) {
|
||||
data.amount = '-'
|
||||
data.price = '-'
|
||||
data.btnDisable = true
|
||||
}
|
||||
|
||||
get showAccount() {
|
||||
return AppModule.accountShow
|
||||
}
|
||||
@ -134,6 +161,39 @@ export default class WalletPanel extends Vue {
|
||||
|
||||
changeNet(net: number) {
|
||||
this.currentNet = net
|
||||
for (let i = 0, l = this.coinList.length; i < l; i++) {
|
||||
this.updateDefaultData(this.coinList[i])
|
||||
this.$set(this.coinList, i, this.coinList[i])
|
||||
}
|
||||
this.updateBalanceSet()
|
||||
}
|
||||
|
||||
async updateCurrencies() {
|
||||
for (let i = 0, l = this.currencies.length; i < l; i++) {
|
||||
const data = this.currencies[i]
|
||||
const currentData = CONTRACT_ADDRESS[data.chain]
|
||||
const eth = await this.chainManager.getBalance(currentData.eth, data.chain)
|
||||
data.amount = eth
|
||||
this.$set(this.currencies, i, data)
|
||||
}
|
||||
}
|
||||
|
||||
async updateBalanceSet() {
|
||||
const currentData = CONTRACT_ADDRESS[this.currentNet]
|
||||
if (currentData) {
|
||||
const cec = await this.chainManager.getBalance(currentData.cec, this.currentNet)
|
||||
const ceg = await this.chainManager.getBalance(currentData.ceg, this.currentNet)
|
||||
console.log(formatPrice(cec, 18), formatPrice(ceg, 18))
|
||||
const cecData = this.coinList[0]
|
||||
cecData.amount = formatPrice(cec, 18)
|
||||
cecData.btnDisable = cec === 0
|
||||
this.$set(this.coinList, 0, cecData)
|
||||
|
||||
const cegData = this.coinList[1]
|
||||
cegData.amount = formatPrice(ceg, 18)
|
||||
cegData.btnDisable = ceg === 0
|
||||
this.$set(this.coinList, 1, cegData)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -72,7 +72,7 @@ export const AllChains = [
|
||||
explorerurl: 'https://telos.net/'
|
||||
},
|
||||
{
|
||||
name: 'Binance Smart Chain Mainnet RPC',
|
||||
name: 'Binance Smart Chain',
|
||||
type: 'Mainnet',
|
||||
rpc: 'https://rpc.ankr.com/bsc',
|
||||
logo: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojMDA5M0REO30KCS5zdDF7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGc+Cgk8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIvPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTEzLjUsMTZsNS4yLDUuM0wyMiwxOGMwLjYtMC42LDEuNS0wLjYsMiwwYzAsMCwwLDAsMCwwYzAuNiwwLjYsMC42LDEuNiwwLDIuMmwtNC4zLDQuNAoJCWMtMC42LDAuNi0xLjUsMC42LTIuMSwwYzAsMCwwLDAsMCwwbC02LjItNi40VjIyYzAsMC44LTAuNywxLjUtMS41LDEuNWMtMC44LDAtMS41LTAuNy0xLjUtMS41VjEwYzAtMC44LDAuNy0xLjUsMS41LTEuNQoJCWMwLjgsMCwxLjUsMC43LDEuNSwxLjV2My44bDYuMi02LjRjMC42LTAuNiwxLjUtMC42LDIuMSwwYzAsMCwwLDAsMCwwbDQuMyw0LjRjMC42LDAuNiwwLjYsMS42LDAsMi4yYy0wLjYsMC42LTEuNSwwLjYtMiwwCgkJYzAsMCwwLDAsMCwwbC0zLjMtMy40TDEzLjUsMTZ6IE0xOC43LDE0LjVjMC44LDAsMS41LDAuNywxLjUsMS41cy0wLjcsMS41LTEuNSwxLjVzLTEuNS0wLjctMS41LTEuNQoJCUMxNy4yLDE1LjIsMTcuOSwxNC41LDE4LjcsMTQuNXoiLz4KPC9nPgo8L3N2Zz4K',
|
||||
@ -154,7 +154,7 @@ export const AllChains = [
|
||||
explorerurl: 'https://testnet.hecoinfo.com/'
|
||||
},
|
||||
{
|
||||
name: 'KCC Mainnet RPC',
|
||||
name: 'KCC Mainnet',
|
||||
type: 'Mainnet',
|
||||
rpc: 'https://rpc-mainnet.kcc.network',
|
||||
id: 321,
|
||||
@ -163,7 +163,7 @@ export const AllChains = [
|
||||
explorerurl: 'https://scan.kcc.network'
|
||||
},
|
||||
{
|
||||
name: 'KCC Testnet RPC',
|
||||
name: 'KCC Testnet',
|
||||
type: 'Testnet',
|
||||
logo: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojMDA5M0REO30KCS5zdDF7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGc+Cgk8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIvPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTEzLjUsMTZsNS4yLDUuM0wyMiwxOGMwLjYtMC42LDEuNS0wLjYsMiwwYzAsMCwwLDAsMCwwYzAuNiwwLjYsMC42LDEuNiwwLDIuMmwtNC4zLDQuNAoJCWMtMC42LDAuNi0xLjUsMC42LTIuMSwwYzAsMCwwLDAsMCwwbC02LjItNi40VjIyYzAsMC44LTAuNywxLjUtMS41LDEuNWMtMC44LDAtMS41LTAuNy0xLjUtMS41VjEwYzAtMC44LDAuNy0xLjUsMS41LTEuNQoJCWMwLjgsMCwxLjUsMC43LDEuNSwxLjV2My44bDYuMi02LjRjMC42LTAuNiwxLjUtMC42LDIuMSwwYzAsMCwwLDAsMCwwbDQuMyw0LjRjMC42LDAuNiwwLjYsMS42LDAsMi4yYy0wLjYsMC42LTEuNSwwLjYtMiwwCgkJYzAsMCwwLDAsMCwwbC0zLjMtMy40TDEzLjUsMTZ6IE0xOC43LDE0LjVjMC44LDAsMS41LDAuNywxLjUsMS41cy0wLjcsMS41LTEuNSwxLjVzLTEuNS0wLjctMS41LTEuNQoJCUMxNy4yLDE1LjIsMTcuOSwxNC41LDE4LjcsMTQuNXoiLz4KPC9nPgo8L3N2Zz4K',
|
||||
rpc: 'https://rpc-testnet.kcc.network',
|
||||
|
||||
@ -14,17 +14,17 @@ export const AVAILABLE_CHAINS = env === 'development' ? [322, 97] : [321, 32]
|
||||
|
||||
export const MALL_ADDRESS = '0xF278ff771F9E24968083B0bA54Cb42eb4B23C2d7'
|
||||
|
||||
export const CONTRACT_ADDRESS = {
|
||||
export const CONTRACT_ADDRESS:{[key: number]: any} = {
|
||||
322: {
|
||||
cec: '0xfeFc3aab779863c1624eE008aba485c53805dCeb',
|
||||
ceg: '0xE388e872e63aadF5a4F1521E4d96C10A28091457',
|
||||
eth: '0xb296bab2ed122a85977423b602ddf3527582a3da',
|
||||
mall: '0xF278ff771F9E24968083B0bA54Cb42eb4B23C2d7'
|
||||
},
|
||||
92: {
|
||||
cec: '0xfeFc3aab779863c1624eE008aba485c53805dCeb',
|
||||
ceg: '0xE388e872e63aadF5a4F1521E4d96C10A28091457',
|
||||
eth: '0xb296bab2ed122a85977423b602ddf3527582a3da',
|
||||
97: {
|
||||
cec: '0xFAA03824c38Ed5102F9F901987FA7cd9d193449B',
|
||||
ceg: '0xA70beE785B92d4F662F870Cf4f3EBE774234d795',
|
||||
eth: '0xae13d989daC2f0dEbFf460aC112a837C89BAa7cd',
|
||||
mall: '0xF278ff771F9E24968083B0bA54Cb42eb4B23C2d7'
|
||||
},
|
||||
321: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user