Skip to content

Commit d7fd0c3

Browse files
bradleySuirabradleySuira
authored
Merge pull request #22 from liquality/feature-swap-screens
Feature ui fixes and swap screens
2 parents 9b8e07e + 858d0f8 commit d7fd0c3

25 files changed

+295
-131
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "liquality-wallet",
3-
"version": "0.10.2",
3+
"version": "0.10.3",
44
"private": true,
55
"license": "MIT",
66
"author": "Liquality <info@liquality.io>",

‎src/assets/scss/style.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -500,4 +500,9 @@ svg.qr-icon {
500500

501501
.btn-footer {
502502
width: 9.5rem;
503+
}
504+
505+
.selectors-asset {
506+
width: 40px;
507+
font-weight: bold;
503508
}

‎src/build.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default {
22
defaultAssets: {
3-
mainnet: ['BTC', 'ETH', 'DAI', 'USDC', 'USDT', 'WBTC', 'UNI'],
4-
testnet: ['BTC', 'ETH', 'DAI']
3+
mainnet: ['BTC', 'ETH', 'DAI', 'USDC', 'USDT', 'WBTC', 'UNI', 'RBTC'],
4+
testnet: ['BTC', 'ETH', 'DAI', 'RBTC']
55
},
66
agentEndpoints: {
77
testnet: ['https://liquality.io/swap-testnet-dev/agent'],

‎src/components/AssetList.vue‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<template>
2+
<div class="dropdown asset-list-search">
3+
<button class="btn btn-icon dropdown-toggle"
4+
@click="toogle">
5+
<div class="form">
6+
<div class="input-group">
7+
<img
8+
:src="getAssetIcon(selectedAsset)"
9+
class="asset-icon"
10+
/>
11+
<span class="input-group-text">
12+
{{ selectedAsset }}
13+
</span>
14+
</div>
15+
</div>
16+
</button>
17+
<ul class="dropdown-menu" :class="{ show: dropdownOpen }">
18+
<li>
19+
<div class="form dropdown-header">
20+
<div class="input-group">
21+
<SearchIcon/>
22+
<input
23+
type="text"
24+
class="form-control form-control-sm"
25+
v-model="search"
26+
placeholder="Search"
27+
autocomplete="off"
28+
/>
29+
</div>
30+
</div>
31+
</li>
32+
<li v-for="asset in filteredItems" :key="asset">
33+
<a class="dropdown-item"
34+
href="#"
35+
@click="selectItem(asset)">
36+
<div class="dropdown-item-asset-item">
37+
<img
38+
:src="getAssetIcon(asset)"
39+
class="asset-icon"
40+
/>
41+
{{ asset }}
42+
</div>
43+
</a>
44+
</li>
45+
</ul>
46+
</div>
47+
</template>
48+
49+
<script>
50+
import {
51+
getAssetColorStyle,
52+
getAssetIcon
53+
} from '@/utils/asset'
54+
import SearchIcon from '@/assets/icons/search.svg'
55+
56+
export default {
57+
components: {
58+
SearchIcon
59+
},
60+
props: ['assets', 'initialSelected'],
61+
data () {
62+
return {
63+
selectedAsset: this.initialSelected,
64+
dropdownOpen: false,
65+
search: '',
66+
filteredItems: []
67+
}
68+
},
69+
computed: {
70+
items () {
71+
return this.assets.filter(a => a !== this.selectedAsset)
72+
}
73+
},
74+
watch: {
75+
serach: function (newSearch, oldSearch) {
76+
if (newSearch && newSearch !== oldSearch) {
77+
this.filteredItems = this.items.filter(
78+
a => a.toUpperCase().includes(newSearch.toUpperCase())
79+
)
80+
} else {
81+
this.filteredItems = [...this.items]
82+
}
83+
}
84+
},
85+
methods: {
86+
getAssetColorStyle,
87+
getAssetIcon,
88+
selectItem (asset) {
89+
this.selectedAsset = asset
90+
this.$emit('asset-changed', asset)
91+
this.dropdownOpen = false
92+
},
93+
toogle () {
94+
console.log('on toogle', this.items)
95+
this.dropdownOpen = !this.dropdownOpen
96+
}
97+
},
98+
created () {
99+
this.filteredItems = [...this.items]
100+
}
101+
}
102+
</script>
103+
104+
<style lang="scss">
105+
.asset-list-search {
106+
.dropdown-menu {
107+
width: 215px;
108+
border-radius: 0;
109+
padding: 10px 0;
110+
margin: 0;
111+
112+
.dropdown-header {
113+
padding-left: 15px;
114+
padding-right: 15px;
115+
116+
.input-group {
117+
align-items: center;
118+
svg {
119+
position: absolute;
120+
left: 0;
121+
top: 5px;
122+
width: 16px;
123+
margin-right: 8px;
124+
}
125+
}
126+
}
127+
128+
.dropdown-item {
129+
padding: 0.25rem 0;
130+
border-bottom: 1px solid $hr-border-color;
131+
132+
.dropdown-item-asset-item {
133+
padding: 0 15px;
134+
img {
135+
margin-right: 5px;
136+
}
137+
}
138+
}
139+
}
140+
}
141+
</style>

‎src/components/FeeSelector.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<label class="btn btn-option btn-option-lg"
44
v-for="name in ['slow', 'average', 'fast']" :key="name"
55
:class="{ active: (name === value)}"
6-
v-tooltip="{ content: getTooltip(name)} "
6+
v-tooltip="{ content: getTooltip(name) }"
77
v-on:click="$emit('input', name)">
88
<input type="radio" name="fee" autocomplete="off" :checked="name === value"> {{name}}
99
</label>
@@ -31,6 +31,8 @@ export default {
3131
const totalFiat = prettyFiatBalance(total, this.fiatRates[this.asset])
3232
content += `${total} ${this.asset}`
3333
content += `<br />${totalFiat} USD`
34+
} else {
35+
content += `${this.fees[name].fee} gwei`
3436
}
3537
3638
return `${content}</div>`

‎src/components/ListItem.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,15 @@ export default {
9292
width: 28px;
9393
height: 28px;
9494
margin-right: 8px;
95+
display: flex;
96+
align-items: center;
9597
}
9698
9799
.list-item-detail-icon {
98100
width: 28px;
99101
height: 28px;
102+
display: flex;
103+
align-items: center;
100104
margin-right: 12px;
101105
margin-left: 12px;
102106
}

‎src/components/TransactionList.vue‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
v-for="item in transactions"
55
:key="item.id"
66
:to="getDetailsUrl(item)"
7+
:itemClass="{ 'text-danger': item.error }"
78
>
89
<template #icon>
910
<img :src="getTypeIcon(item.type)" />
@@ -16,7 +17,9 @@
1617
{{ getDetail(item) }}
1718
</template>
1819
<template #detail-sub>
19-
<span v-if="getUIStatus(item) === 'COMPLETED'"> ${{ item.fromUsdValue }} </span>
20+
<span v-if="getUIStatus(item) === 'COMPLETED'">
21+
${{ getCompletedAmount(item) }}
22+
</span>
2023
<span v-else> {{ getDetailSub(item) }} </span>
2124
</template>
2225
<template #detail-icon>
@@ -36,23 +39,29 @@ import TransactionStatus from '@/components/TransactionStatus'
3639
import {
3740
getItemIcon,
3841
getStep,
39-
ACTIVITY_FILTER_STATUSES,
42+
ACTIVITY_STATUSES,
4043
ACTIVITY_FILTER_TYPES,
4144
SEND_STATUS_FILTER_MAP,
4245
SWAP_STATUS_FILTER_MAP
4346
} from '@/utils/history'
44-
import { prettyBalance } from '@/utils/coinFormatter'
47+
import { prettyBalance, prettyFiatBalance } from '@/utils/coinFormatter'
4548
import moment from '@/utils/moment'
49+
import { mapState } from 'vuex'
50+
import { getChainFromAsset } from '@/utils/asset'
4651
4752
export default {
4853
components: {
4954
ListItem,
5055
TransactionStatus
5156
},
5257
props: ['transactions'],
58+
computed: {
59+
...mapState(['fiatRates'])
60+
},
5361
methods: {
5462
getItemIcon,
5563
prettyBalance,
64+
prettyFiatBalance,
5665
getTitle (item) {
5766
switch (item.type) {
5867
case 'SWAP':
@@ -76,7 +85,7 @@ export default {
7685
const status = this.getUIStatus(item)
7786
7887
if (status) {
79-
const filterStatus = ACTIVITY_FILTER_STATUSES[status]
88+
const filterStatus = ACTIVITY_STATUSES[status]
8089
if (filterStatus) {
8190
return filterStatus.label
8291
}
@@ -92,8 +101,8 @@ export default {
92101
},
93102
getDetailsUrl (item) {
94103
return {
95-
SEND: `/details/${item.id}/transaction`,
96-
SWAP: `/details/${item.id}/swap`
104+
SEND: `/details/transaction/${item.id}`,
105+
SWAP: `/details/swap/${item.id}`
97106
}[item.type]
98107
},
99108
getTypeIcon (type) {
@@ -112,6 +121,11 @@ export default {
112121
default:
113122
return 0
114123
}
124+
},
125+
getCompletedAmount (item) {
126+
const amount = item.type === 'SWAP' ? item.fromAmount : item.amount
127+
const assetChain = getChainFromAsset(item.from)
128+
return prettyFiatBalance(prettyBalance(amount, item.from), this.fiatRates[assetChain])
115129
}
116130
}
117131
}

‎src/components/TransactionStatus.vue‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<template>
22
<div class="transaction-status">
33
<div class="transaction-confirming" v-if="error || status === 'NEEDS_ATTENTION'">
4-
<NeedsAttentionIcon />
4+
<SpinnerIcon />
55
<span class="transaction-steps" v-if="totalSteps > 2">
66
{{ step }} / {{ totalSteps }}
77
</span>
8+
<span class="error-indicator"></span>
89
</div>
910
<CompletedIcon v-else-if="status === 'COMPLETED'" />
1011
<RefundedIcon v-else-if="status === 'REFUNDED'" />
@@ -21,15 +22,13 @@
2122
2223
import CompletedIcon from '@/assets/icons/completed.svg'
2324
import SpinnerIcon from '@/assets/icons/spinner.svg'
24-
import NeedsAttentionIcon from '@/assets/icons/needs_attention.svg'
2525
import RefundedIcon from '@/assets/icons/refunded.svg'
2626
import CanceledIcon from '@/assets/icons/canceled.svg'
2727
2828
export default {
2929
components: {
3030
CompletedIcon,
3131
SpinnerIcon,
32-
NeedsAttentionIcon,
3332
RefundedIcon,
3433
CanceledIcon
3534
},
@@ -39,18 +38,31 @@ export default {
3938

4039
<style lang="scss">
4140
.transaction-status {
42-
grid-area: status;
43-
justify-self: center;
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
4444
4545
svg {
4646
width: 30px;
4747
height: 30px;
48+
vertical-align: middle;
4849
}
4950
5051
.transaction-confirming {
52+
display: flex;
53+
align-items: center;
54+
justify-content: center;
5155
position: relative;
5256
}
5357
58+
.error-indicator {
59+
position: absolute;
60+
top: 13px;
61+
left: 27px;
62+
border: solid 3px #F41973;
63+
border-radius: 100%;
64+
}
65+
5466
.transaction-steps {
5567
position: absolute;
5668
display: flex;

‎src/manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"manifest_version": 2,
3-
"version": "0.10.2",
3+
"version": "0.10.3",
44
"name": "Liquality Wallet",
55
"description": "Secure multi-crypto wallet with built-in Atomic Swaps!",
66
"homepage_url": "https://liquality.io",

0 commit comments

Comments
 (0)