Skip to content

Commit eb94f5f

Browse files
0x100cc0x100cc
authored
Certified Tokens (#26)
* get certified tokens from api * hide webList Co-authored-by: Haynar216
1 parent a90b1b0 commit eb94f5f

File tree

16 files changed

+163
-71
lines changed

16 files changed

+163
-71
lines changed

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,18 @@
3636
},
3737
"dependencies": {
3838
"@babel/runtime": "^7.4.4",
39+
"base-58": "0.0.1",
40+
"bignumber.js": "^7.2.1",
3941
"bootstrap": "^4.3.1",
4042
"bootstrap-vue": "^2.0.0-rc.28",
4143
"jdenticon": "^2.2.0",
4244
"jr-qrcode": "^1.1.1",
4345
"js-v-sdk": "./src/js-v-sdk",
4446
"vue": "^2.6.10",
47+
"vue-m-validator": "^1.0.5",
48+
"vue-resource": "^1.5.1",
4549
"vue-router": "^3.0.1",
4650
"vuex": "^3.0.1",
47-
"vuex-persist": "^1.4.3",
48-
"vue-m-validator": "^1.0.5",
49-
"base-58": "0.0.1",
50-
"bignumber.js": "^7.2.1"
51+
"vuex-persist": "^1.4.3"
5152
}
5253
}

‎src/background/background.js‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,32 @@ function getData() {
5959
return data
6060
}
6161

62-
function addToken(tokenId, tokenSymbol, networkByte) {
62+
function checkLocalTokens() {
63+
const { networkByte, mainnetTokenRecords, testnetTokenRecords } = getData()
64+
let isTestnet = String.fromCharCode(networkByte) === 'T'
65+
let tmpTokenRecords = isTestnet ? testnetTokenRecords : mainnetTokenRecords
66+
for (let tokenId in tmpTokenRecords) {
67+
if (!(tmpTokenRecords[tokenId] instanceof Object)) {
68+
tmpTokenRecords[tokenId] = { name: tmpTokenRecords[tokenId], contractType:'Unknown' }
69+
}
70+
}
71+
let storage = JSON.parse(window.localStorage.getItem("vuex"))
72+
if (isTestnet) {
73+
storage.account.testnetTokenRecords = tmpTokenRecords
74+
} else {
75+
storage.account.mainnetTokenRecords = tmpTokenRecords
76+
}
77+
window.localStorage.setItem("vuex", JSON.stringify(storage))
78+
}
79+
80+
checkLocalTokens()
81+
82+
function addToken(tokenId, tokenSymbol, contractType, networkByte) {
6383
let storage = JSON.parse(window.localStorage.getItem("vuex"))
6484
if (String.fromCharCode(networkByte) === 'T') {
65-
storage.account.testnetTokenRecords[tokenId] = tokenSymbol
85+
storage.account.testnetTokenRecords[tokenId] = { name: tokenSymbol, contractType: contractType }
6686
} else if (String.fromCharCode(networkByte) === 'M') {
67-
storage.account.mainnetTokenRecords[tokenId] = tokenSymbol
87+
storage.account.mainnetTokenRecords[tokenId] = { name: tokenSymbol, contractType: contractType }
6888
}
6989
window.localStorage.setItem("vuex", JSON.stringify(storage))
7090
}
@@ -221,15 +241,8 @@ async function resolveRequset(request, webListData) {
221241
for (let tokenId in tokenRecords) {
222242
let token = {
223243
tokenId: tokenId,
224-
contractId: common.tokenIDToContractID(tokenId)
225-
}
226-
try {
227-
//TODO: save ContractInfo in local storage when add token in watch list
228-
let response = await chain.getContractInfo(token.contractId)
229-
token.contractType = response.type
230-
} catch (respError) {
231-
token.contractType = "Unknown"
232-
console.log(respError)
244+
contractId: common.tokenIDToContractID(tokenId),
245+
contractType: tokenRecords[tokenId].contractType
233246
}
234247
tokens.push(token)
235248
}
@@ -261,7 +274,7 @@ async function resolveRequset(request, webListData) {
261274
}
262275
tokenRecords = String.fromCharCode(networkByte) === 'T' ? testnetTokenRecords : mainnetTokenRecords
263276
for (let tokenId in tokenRecords) {
264-
if (tokenRecords[tokenId] === tokenSymbol) {
277+
if (tokenRecords[tokenId].name === tokenSymbol) {
265278
res.result = false
266279
res.message = "Token symbol already exists"
267280
return res
@@ -279,13 +292,14 @@ async function resolveRequset(request, webListData) {
279292
res.message = 'Invalid token!'
280293
} else {
281294
let tokenType = 'Token '
282-
if (response.type === 'NonFungibleContract') {
295+
let contractType = response.type
296+
if (contractType === 'NonFungibleContract') {
283297
tokenType = 'NFT '
284-
} else if (response.type === 'TokenContractWithSplit') {
298+
} else if (contractType === 'TokenContractWithSplit') {
285299
tokenType = 'Splittable Token '
286300
}
287301
if (confirm("Add " + tokenType + tokenId + " to your extension wallet?")) {
288-
addToken(tokenId, tokenSymbol, networkByte)
302+
addToken(tokenId, tokenSymbol, contractType, networkByte)
289303
} else {
290304
res.message = 'User denied to add token'
291305
res.result = false

‎src/components/AddToken.vue‎

Lines changed: 63 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,23 @@
1313
<div><span>Verified Token</span></div>
1414
</template>
1515
<div class="content">
16+
<div v-if="showDisable"
17+
style="text-align: center;margin-top: 120px;">
18+
<img height="70"
19+
width="70"
20+
src="../../static/icons/ic_wait.svg">
21+
</div>
1622
<div class="accounts-part">
1723
<div class="scroll"
18-
:style="{height: '264px'}">
24+
:style="{height: showDisable ? '94px': '264px' }">
1925
<div v-for="(certifiedToken, tokenId) in certifiedTokens"
2026
:key="tokenId">
2127
<b-btn class="token-unit"
22-
@click="addVerifiedToken(tokenId, certifiedToken)">
28+
@click="addVerifiedToken(tokenId, certifiedToken.name)">
2329
<div class="token-svg"><img width="56px"
2430
height="56px"
25-
:src="certifiedTokenSvg(certifiedToken)"></div>
26-
<div class="cer-name"><span>{{certifiedToken}}</span></div>
31+
:src="certifiedToken.iconUrl"></div>
32+
<div class="cer-name"><span>{{certifiedToken.name}}</span></div>
2733
<div class="notice" v-if="isExistedToken(tokenId)">Already added!</div>
2834
</b-btn>
2935
</div>
@@ -124,6 +130,8 @@
124130
import Vue from 'vue'
125131
import { mapState } from 'vuex'
126132
import certify from '../utils/certify.js'
133+
import { CERTIFIED_TOKENS, CERTIFIED_TEST_TOKENS } from '../store/network.js'
134+
import common from 'src/js-v-sdk/src/utils/common'
127135
export default {
128136
name: "AddToken",
129137
data: function() {
@@ -134,7 +142,8 @@ export default {
134142
certifiedTokens: {},
135143
selectedVerifiedToken: '',
136144
selectedVerifiedSymbol: '',
137-
responseErr: false
145+
responseErr: false,
146+
showDisable: false
138147
}
139148
},
140149
created() {
@@ -168,13 +177,30 @@ export default {
168177
},
169178
methods: {
170179
getCertifiedTokens() {
171-
if (String.fromCharCode(this.networkByte) === 'T') {
172-
this.certifiedTokens = certify.certifiedTokensList['Testnet']
173-
} else if (String.fromCharCode(this.networkByte) === 'M') {
174-
this.certifiedTokens = certify.certifiedTokensList['Mainnet']
175-
} else {
176-
this.certifiedTokens = {}
177-
}
180+
let isTestnet = String.fromCharCode(this.networkByte) === 'T'
181+
let url = isTestnet ? CERTIFIED_TEST_TOKENS : CERTIFIED_TOKENS
182+
let localCertifiedTokens = isTestnet ? certify.certifiedTokensList['Testnet'] : certify.certifiedTokensList['Mainnet']
183+
let iconUrl = url.slice(0, url.length - 11)
184+
this.showDisable = true
185+
this.$http.get(url).then(res => {
186+
try {
187+
let data = res.body.data.list
188+
let tmpTokens = {}
189+
let tmpToken = {}
190+
for (let index in data) {
191+
tmpToken = data[index]
192+
tmpTokens[tmpToken.Id] = { 'name': tmpToken.Name, 'iconUrl': iconUrl + tmpToken.IconUrl }
193+
}
194+
this.certifiedTokens = tmpTokens
195+
} catch (err) {
196+
this.certifiedTokens = localCertifiedTokens
197+
}
198+
this.showDisable = false
199+
},err => {
200+
console.log(err)
201+
this.certifiedTokens = localCertifiedTokens
202+
this.showDisable = false
203+
})
178204
},
179205
tokenTabChange(tabIndex) {
180206
if (tabIndex === 0) {
@@ -187,6 +213,10 @@ export default {
187213
let tmp = this.tokenRecords
188214
let tokenId = this.activeTab === 'custom' ? this.tokenId : this.selectedVerifiedToken
189215
let tokenSymbol = this.activeTab === 'custom' ? this.tokenSymbol : this.selectedVerifiedSymbol
216+
let iconUrl = ''
217+
if (tokenId in this.certifiedTokens) {
218+
iconUrl = this.certifiedTokens[tokenId].iconUrl
219+
}
190220
if (tokenId in tmp) {
191221
this.$emit('changePage', 'home')
192222
}
@@ -197,11 +227,26 @@ export default {
197227
this.responseErr = true
198228
return
199229
}
200-
Vue.set(tmp, tokenId, tokenSymbol)
201-
const updateInfo = { 'networkByte': this.networkByte, 'tokens': tmp}
202-
this.$store.commit('account/updateToken', updateInfo)
203-
this.$store.commit('account/updateSelectedToken', tokenId)
204-
this.$emit('changePage', 'home')
230+
let contractID = common.tokenIDToContractID(tokenId)
231+
this.chain.getContractInfo(contractID).then(res => {
232+
if (res.hasOwnProperty('error')) {
233+
this.responseErr = true
234+
return
235+
}
236+
if (res.type !== 'NonFungibleContract' && res.type !== 'TokenContract' && res.type !== 'TokenContractWithSplit') {
237+
this.responseErr = true
238+
return
239+
}
240+
let contractType = res.type
241+
let tokenInfo = { 'name': tokenSymbol, 'contractType': contractType,'iconUrl': iconUrl }
242+
Vue.set(tmp, tokenId, tokenInfo)
243+
const updateInfo = { 'networkByte': this.networkByte, 'tokens': tmp}
244+
this.$store.commit('account/updateToken', updateInfo)
245+
this.$store.commit('account/updateSelectedToken', tokenId)
246+
this.$emit('changePage', 'home')
247+
}, err => {
248+
this.responseErr = true
249+
})
205250
}, respError => {
206251
this.responseErr = true
207252
})
@@ -214,9 +259,6 @@ export default {
214259
this.selectedVerifiedToken = tokenId
215260
this.selectedVerifiedSymbol = verifiedSymbol
216261
},
217-
certifiedTokenSvg(name) {
218-
return "../../static/icons/token/" + name + ".svg"
219-
},
220262
isExistedToken(tokenId) {
221263
return tokenId in this.tokenRecords
222264
},
@@ -229,7 +271,7 @@ export default {
229271
}
230272
let tmp = this.tokenRecords
231273
for (let tokenId in tmp) {
232-
if (tmp[tokenId] === symbol) {
274+
if (tmp[tokenId].name === symbol) {
233275
return false
234276
}
235277
}

‎src/components/Home.vue‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -126,17 +126,30 @@ export default {
126126
if (this.selectedToken === 'VSYS') {
127127
return 'VSYS'
128128
} else {
129-
return this.tokenRecords[this.selectedToken]
129+
return this.tokenRecords[this.selectedToken].name
130130
}
131131
},
132132
tokenSvg() {
133133
let name = this.tokenName
134-
if (name === 'VSYS'){
135-
return "../../static/icons/token/" + name + ".png"
136-
} else if (name === 'DLL' || name === 'DM' || name === 'IPX' || name === 'VTEST') {
137-
return "../../static/icons/token/" + name + ".svg"
138-
} else {
139-
return "../../static/icons/token/other.svg"
134+
switch (name) {
135+
case "VSYS":
136+
return "../../static/icons/token/VSYS.png"
137+
case "BlockDesk":
138+
return "../../static/icons/token/BlockDesk.png"
139+
case "DLL":
140+
return "../../static/icons/token/Dll.svg"
141+
case "DM":
142+
return "../../static/icons/token/DM.svg"
143+
case "GoldZip":
144+
return "../../static/icons/token/GoldZip.jpg"
145+
case "IPX":
146+
return "../../static/icons/token/IPX.svg"
147+
case "OCT":
148+
return "../../static/icons/token/OCT.jpg"
149+
case "VTest":
150+
return "../../static/icons/token/VTest.svg"
151+
default:
152+
return this.tokenRecords[this.selectedToken].iconUrl || "../../static/icons/token/other.svg"
140153
}
141154
},
142155
accountBalance() {

‎src/components/NavBar.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
<b-dropdown-item v-b-modal.addAccount href="#" class="drop-down"> <img class="icon" src="../../static/icons/ic_add_account.png"><span class="text">Add Account</span></b-dropdown-item>
8686
<b-dropdown-item v-b-modal.about href="#" class="drop-down"><img class="icon" src="../../static/icons/ic_about.png"><span class="text">About</span></b-dropdown-item>
8787
<b-dropdown-item v-b-modal.settings href="#" class="drop-down"><img class="icon" src="../../static/icons/ic_setting.png"><span class="text">Settings</span></b-dropdown-item>
88-
<b-dropdown-item v-b-modal.webList href="#" class="drop-down"><img class="icon" src="../../static/icons/web.png"><span class="text">Trusted List</span></b-dropdown-item>
88+
<b-dropdown-item v-show="isWebListExisted" v-b-modal.webList href="#" class="drop-down"><img class="icon" src="../../static/icons/web.png"><span class="text">Trusted List</span></b-dropdown-item>
8989
<b-dropdown-item @click="logout" class="drop-down"><img class="icon" src="../../static/icons/ic_logout.png"><span class="text">Log Out</span></b-dropdown-item>
9090
</b-nav-item-dropdown>
9191
</b-navbar-nav>
@@ -95,7 +95,7 @@
9595
:selected-account="selectedAccount"
9696
:account-name="accountNames[selectedAccount]"></Details>
9797
<Settings></Settings>
98-
<WebList></WebList>
98+
<WebList @checkWebList="checkWebList"></WebList>
9999
<About></About>
100100
</div>
101101
</template>
@@ -117,13 +117,15 @@ export default {
117117
name: "NavBar",
118118
created() {
119119
this.getAccountBalances()
120+
this.checkWebList()
120121
},
121122
mounted() {
122123
jdenticon()
123124
},
124125
data() {
125126
return {
126127
pop: false,
128+
isWebListExisted: true,
127129
accountBalances: {}
128130
}
129131
},
@@ -174,6 +176,10 @@ export default {
174176
WebList
175177
},
176178
methods: {
179+
checkWebList() {
180+
let storage = JSON.parse(window.localStorage.getItem("vuex"))
181+
this.isWebListExisted = storage.wallet.webList && storage.wallet.webList.length > 0
182+
},
177183
getAccountBalances() {
178184
if (this.selectedToken === 'VSYS') {
179185
for (const addr in this.addresses) {

‎src/components/TokenRecord.vue‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,28 @@ export default {
9292
window.open(TOKEN_EXPLORER + this.tokenId)
9393
}
9494
},
95-
tokenSvg(name) {
96-
if (name === 'VSYS'){
97-
return "../../static/icons/token/" + name + ".png"
98-
} else if (name === 'DLL' || name === 'DM' || name === 'IPX' || name === 'VTEST') {
99-
return "../../static/icons/token/" + name + ".svg"
100-
} else {
101-
return "../../static/icons/token/other.svg"
102-
}
103-
},
95+
tokenSvg(name) {
96+
switch (name) {
97+
case "VSYS":
98+
return "../../static/icons/token/VSYS.png"
99+
case "BlockDesk":
100+
return "../../static/icons/token/BlockDesk.png"
101+
case "DLL":
102+
return "../../static/icons/token/Dll.svg"
103+
case "DM":
104+
return "../../static/icons/token/DM.svg"
105+
case "GoldZip":
106+
return "../../static/icons/token/GoldZip.jpg"
107+
case "IPX":
108+
return "../../static/icons/token/IPX.svg"
109+
case "OCT":
110+
return "../../static/icons/token/OCT.jpg"
111+
case "VTest":
112+
return "../../static/icons/token/VTest.svg"
113+
default:
114+
return this.tokenRecords[this.tokenId].iconUrl || "../../static/icons/token/other.svg"
115+
}
116+
},
104117
addConfirm() {
105118
this.$store.commit('account/updateSelectedToken', this.tokenId)
106119
this.$emit('selectSucceed')

‎src/components/TokenSelect.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
:balance="tokenBalances[tokenId].value"
5858
:token-id="tokenId"
5959
:token-records="tokenRecords"
60-
:token-symbol="tokenRecords[tokenId]"
60+
:token-symbol="tokenRecords[tokenId].name"
6161
@selectSucceed="selectSucceed"></TokenRecord>
6262
</div>
6363
</div>
@@ -157,9 +157,6 @@ export default {
157157
},
158158
selectSucceed() {
159159
this.$emit('selectSucceed')
160-
},
161-
avatarDataHex(address) {
162-
return converters.stringToHexString(address).split('').reverse().slice(1, 21).join('')
163160
}
164161
},
165162
computed: {

0 commit comments

Comments
 (0)