/
BalancesList.vue
102 lines (95 loc) · 2.64 KB
/
BalancesList.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<template>
<div>
<div v-show="!loaded" class="loader">
<pacman-loader :loading="!loaded" :color="color"></pacman-loader>
</div>
<ul>
<li
v-for="(balance, index) in balances"
:key="balance.address"
class="balances-list mt-3 mt-md-0"
v-bind:class="{ active: balance.address == walletAddress }"
>
<div class="address">
<span class="d-none d-lg-block">{{ balance.address }}</span
><span class="d-block d-lg-none">{{ balance.address | tx }}</span>
</div>
<div class="balance">
{{ balance.balance }} <img class="img-fc" src="../../assets/fc.png" />
</div>
<input
type="number"
ref="balanceTransfer"
v-model="balance.value"
placeholder="Quantity"
:disabled="balance.address == walletAddress"
/>
<button @click="transfer(balance.address, balance.value, index)">
Transfer
</button>
<div></div>
</li>
</ul>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { mapState } from 'vuex';
import PacmanLoader from 'vue-spinner/src/PacmanLoader.vue';
export default Vue.extend({
name: 'BalancesList',
props: {
balances: Array,
},
data() {
return {
color: '#c0fdff',
loaded: false,
};
},
components: {
PacmanLoader,
},
watch: {
balances: function () {
this.loaded = !!this.balances;
},
},
methods: {
async transfer(address: string, qty: string) {
if (!qty) {
return;
}
if (!this.balances[this.userIdx]) {
this.$toasted.error(
'Your balance is not enough to transfer tokens. Please mint some FC first.',
{ duration: 3000 }
);
this.$refs['balanceTransfer'].value = '';
return;
}
this.$toasted.show('Processing...');
// ~~ Call `transfer` method ~~
const tx = null;
// ~~ Mine a block ~~
// ~~ Set new balances list by calling `currentState` method
let newResult = null;
if (newResult) {
this.$toasted.clear();
this.$toasted.global.success('Processed!');
this.$toasted.global.close(
`<div>Interaction id: <a href="https://sonar.warp.cc/#/app/interaction/${tx}" target="_blank">${tx}</a></div>`
);
}
this.$parent.updateBalances(newResult);
},
},
computed: {
userIdx() {
return this.balances.findIndex((b) => b.address == this.walletAddress);
},
...mapState(['state', 'contract', 'arweave', 'walletAddress']),
},
});
</script>
<style lang="scss" src="./BalancesList.scss" scoped></style>