Skip to content

Commit 15f0e62

Browse files
jillztomjillztom
committed
UI tweaks + Exchange ticker
1 parent eb38749 commit 15f0e62

File tree

4 files changed

+248
-28
lines changed

4 files changed

+248
-28
lines changed

‎dist/popup/popup.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/popup/popup.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/popup/popup.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/popup/App.vue‎

Lines changed: 243 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,91 @@
11
<template>
22
<div class="container" v-if="nav && currencies">
3+
<div class="edit-button">
4+
<i class="fa fa-gear" v-if="!edit" @click="edit=true"></i>
5+
</div>
6+
<div class="portfolio-total">
7+
<p> My Total Asset Value in Exchange </p>
8+
<h2 class="portfolio">{{ Number(exchangeTotal).toLocaleString('en-US', { style: 'currency', currency: base}) }}</h2>
9+
<p> 24hr Change </p>
10+
<h3 :class="{'up': (exchangeInfo.percent_change_24h > 0), 'down': (exchangeInfo.percent_change_24h < 0)}">
11+
{{ exchangeInfo.percent_change_24h }}%
12+
<i class="fa fa-arrow-up" v-if="exchangeInfo.percent_change_24h > 0"></i>
13+
<i class="fa fa-arrow-down" v-if="exchangeInfo.percent_change_24h < 0"></i>
14+
</h3>
15+
</div>
316

4-
<div class="field-area">
5-
<div class="area">
6-
<h2 class="nav">{{ nav }}</h2>
7-
<h4>Nav Price</h4>
17+
<div class="asset-table value">
18+
<div>
19+
<h3>Tokens</h3>
20+
<h4>{{ c20 }}</h4>
21+
</div>
22+
<div>
23+
<h3>NAV Price</h3>
24+
<h4>{{ nav }}</h4>
25+
</div>
26+
<div>
27+
<h3>Exchange</h3>
28+
<h4>{{ exchangeRate }}</h4>
29+
</div>
30+
<div>
31+
<h3>Asset Value</h3>
32+
<h4>{{ Number(total).toLocaleString('en-US', { style: 'currency', currency: base}) }}</h4>
833
</div>
9-
<div class="area">
10-
<h2 class="nav">
34+
</div>
35+
36+
<div v-if="edit">
37+
<div class="edit-area">
38+
<div class="element">
39+
<label>Your C20 Tokens</label>
1140
<input type="text" v-model="c20">
12-
</h2>
13-
<h4>Tokens</h4>
41+
</div>
42+
<div class="element">
43+
<label>Portfolio Currency</label>
44+
<select v-model="base" v-if="currencies">
45+
<option v-for="(item, index) in currencies">{{ index }}</option>
46+
</select>
47+
</div>
1448
</div>
15-
<div class="area">
16-
<h2 class="portfolio">{{ Number(total).toLocaleString('en-US', { style: 'currency', currency: base}) }}</h2>
17-
<h4>Portfolio</h4>
49+
<div class="button-area">
50+
<button type="button" @click.prevent="saveToken()">Save Changes </button>
51+
<button type="button" @click.prevent="getC20()">Refresh Stats </button>
1852
</div>
1953
</div>
54+
55+
56+
57+
<!--
58+
<div class="field-area">
59+
<div class="area">
60+
<h2 class="nav">{{ nav }}</h2>
61+
<h4>Nav Price</h4>
62+
</div>
63+
<div class="area">
64+
<h2 class="portfolio">{{ exchangeRate }}</h2>
65+
<h4>Exchange Price</h4>
66+
</div>
67+
</div>
68+
<div class="field-area">
69+
<div class="area">
70+
<h2 class="nav">
71+
<input type="text" v-model="c20">
72+
</h2>
73+
<h4>Tokens</h4>
74+
</div>
75+
<div class="area">
76+
<h2 class="portfolio">{{ Number(total).toLocaleString('en-US', { style: 'currency', currency: base}) }}</h2>
77+
<h4>Portfolio</h4>
78+
</div>
79+
80+
<div class="area">
81+
<h2 class="portfolio">{{ Number(exchangeTotal).toLocaleString('en-US', { style: 'currency', currency: base}) }}</h2>
82+
<h4>Exchange Value</h4>
83+
</div>
84+
</div>
85+
-->
86+
87+
88+
<!--
2089
<hr>
2190
<div class="movements">
2291
<div class="items" v-for="(item, index) in movements">
@@ -30,15 +99,14 @@
3099
</div>
31100
<hr>
32101
<div class="footer-area">
33-
<p>{{ (nav / .95).toFixed(2) * 100 }}% increase from ICO</p>
34102
<div
35103
<button type="button" @click.prevent="saveToken()"><i class="fa fa-floppy-o"></i> </button>
36104
<button type="button" @click.prevent="getC20()"><i class="fa fa-refresh"></i> </button>
37105
<select v-model="base" v-if="currencies">
38106
<option v-for="(item, index) in currencies">{{ index }}</option>
39107
</select>
40108
</div>
41-
</div>
109+
</div> -->
42110
</div>
43111
</template>
44112

@@ -50,12 +118,16 @@
50118
c20: 1500,
51119
currencies: null,
52120
movements: null,
121+
exchangeRate: 0,
122+
exchangeInfo: null,
53123
base: 'USD',
124+
edit : false
54125
}
55126
},
56127
mounted(){
57128
this.getRates();
58129
this.getC20();
130+
this.getExchangeRate();
59131
},
60132
61133
watch: {
@@ -67,6 +139,9 @@
67139
computed:{
68140
total(){
69141
return (this.nav * this.c20 * this.currencies[this.base]).toFixed(2);
142+
},
143+
exchangeTotal(){
144+
return (this.exchangeRate * this.c20 * this.currencies[this.base]).toFixed(2);
70145
}
71146
},
72147
@@ -78,6 +153,13 @@
78153
})
79154
},
80155
156+
getExchangeRate(){
157+
axios.get('https://api.coinmarketcap.com/v1/ticker/c20/').then((res)=>{
158+
this.exchangeInfo = res.data[0];
159+
this.exchangeRate = res.data[0].price_usd;
160+
})
161+
},
162+
81163
getC20(){
82164
if(localStorage.getItem('c20Token')){
83165
this.c20 = localStorage.getItem('c20Token');
@@ -97,13 +179,13 @@
97179
98180
saveToken(){
99181
localStorage.setItem('c20Token', this.c20);
182+
this.edit = false;
100183
},
101184
},
102185
}
103186
</script>
104187

105188
<style lang="scss" scoped>
106-
107189
.movements{
108190
display: flex;
109191
width: 100%;
@@ -141,11 +223,6 @@
141223
p {
142224
font-size: 16px;
143225
}
144-
.container{
145-
// width: 250px;
146-
padding: 10px;
147-
background: #f9f9f9;
148-
}
149226
.field-area{
150227
display: flex;
151228
justify-content: space-between;
@@ -158,10 +235,6 @@
158235
}
159236
h2.nav{
160237
font-size: 20px;
161-
color: #2595ff;
162-
}
163-
h2.portfolio{
164-
color: #6cb305;
165238
}
166239
h4{
167240
text-transform: uppercase;
@@ -190,4 +263,151 @@
190263
border-bottom: 1px dashed #ccc;
191264
background: #fff;
192265
}
266+
.container{
267+
background: #38414d;
268+
color: white;
269+
padding: 30px;
270+
min-width: 250px;
271+
display: flex;
272+
flex-direction: column;
273+
align-items: center;
274+
}
275+
276+
277+
278+
.portfolio-total{
279+
text-align: center;
280+
margin-bottom: 20px;
281+
}
282+
.portfolio-total h2{
283+
font-size: 22px;
284+
font-weight: 600;
285+
letter-spacing: 1px;
286+
}
287+
.portfolio-total h3{
288+
padding: 0;
289+
margin: 3px 0;
290+
font-size: 12px;
291+
font-weight: 400;
292+
}
293+
.portfolio-total h3.down{
294+
background: #ff7200;
295+
border-radius: 32px;
296+
display: inline-block;
297+
padding: 1px 8px;
298+
}
299+
.portfolio-total h3.up{
300+
background: #b3e804;
301+
border-radius: 32px;
302+
display: inline-block;
303+
padding: 1px 8px;
304+
}
305+
.portfolio-total p{
306+
font-size: 12px;
307+
padding: 0;
308+
margin: 5px;
309+
color: #dadada54;
310+
}
311+
312+
313+
314+
.asset-table{
315+
display: flex;
316+
width: 100%;
317+
justify-content: space-between;
318+
padding: 10px 20px;
319+
border-radius: 5px;
320+
margin: 0 20px;
321+
width: 100%;
322+
}
323+
.asset-table h3{
324+
opacity: 1;
325+
text-transform: none;
326+
margin: 2px 0;
327+
font-size: 11px;
328+
color: #629bd6;
329+
}
330+
331+
.asset-table.value h4{
332+
font-size: 14px;
333+
opacity: 1;
334+
}
335+
336+
337+
.edit-button{
338+
position: absolute;
339+
right: 15px;
340+
top: 15px;
341+
}
342+
.edit-button i{
343+
font-size: 16px;
344+
opacity: 0.3;
345+
cursor: pointer;
346+
transition: 0.3s all;
347+
}
348+
.edit-button i:hover{
349+
opacity: 1;
350+
}
351+
352+
.edit-area{
353+
width: 100%;
354+
padding: 10px;
355+
display: flex;
356+
border-top: 1px dashed #cccccc3b;
357+
padding-top: 20px;
358+
margin-top: 10px;
359+
}
360+
.edit-area input{
361+
width: 80%;
362+
background: transparent;
363+
border: none;
364+
font-size: 16px;
365+
color: white;
366+
border-bottom: 1px dashed #ffffff1f;
367+
padding: 2px 0;
368+
outline: none;
369+
}
370+
.edit-area label{
371+
margin-bottom: 4px;
372+
display: block;
373+
opacity: 0.3;
374+
}
375+
376+
.edit-area .element{
377+
margin-bottom: 15px;
378+
}
379+
.edit-area .element:first-child{
380+
margin-right: 10px;
381+
}
382+
select{
383+
background: none;
384+
border: none;
385+
padding: 0;
386+
margin: 0 -7px;
387+
color: white;
388+
width: 100%;
389+
font-size: 16px;
390+
}
391+
392+
393+
394+
.button-area{
395+
display: flex;
396+
width: 100%;
397+
}
398+
button{
399+
background: #5e9bd6;
400+
border-radius: 3px;
401+
padding: 10px;
402+
color: white;
403+
border: none;
404+
outline: none;
405+
width: 100%;
406+
margin: 0 2px;
407+
cursor: pointer;
408+
transition: 0.3s all;
409+
}
410+
button:hover{
411+
background: #55acee;
412+
}
193413
</style>

0 commit comments

Comments
 (0)