Skip to content

Commit 96900a7

Browse files
gamalielheregamalielhere
committed
devop: remove usd, keep info icons
1 parent d1fa519 commit 96900a7

File tree

5 files changed

+139
-115
lines changed

5 files changed

+139
-115
lines changed

‎src/components/OrderForm/BuyForm.vue‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
</div>
2121
<div class="d-flex mt-2">
2222
<v-text-field
23-
style="max-width: 196px"
2423
class="no-right-border"
2524
@input="fiatToCrypto"
2625
type="number"
@@ -522,11 +521,25 @@ const priceOb = computed(() => {
522521
: simplexData[form.cryptoSelected].prices[form.fiatSelected];
523522
});
524523
const networkPrice = computed(() => {
525-
return isValidData(moonpayData)
526-
? moonpayData[props.networkSelected.currencyName].prices[form.fiatSelected]
527-
: simplexData[props.networkSelected.currencyName].prices[form.fiatSelected];
524+
const moonpayPrice = isValidData(moonpayData)
525+
? moonpayData[form.cryptoSelected]?.prices[form.fiatSelected]
526+
: undefined;
527+
const simplexPrice = isValidData(simplexData)
528+
? simplexData[form.cryptoSelected]?.prices[form.fiatSelected]
529+
: undefined;
530+
const topperPrice = isValidData(topperData)
531+
? topperData[form.cryptoSelected]?.prices[form.fiatSelected]
532+
: undefined;
533+
return moonpayPrice
534+
? moonpayPrice
535+
: simplexPrice
536+
? simplexPrice
537+
: topperPrice
538+
? topperPrice
539+
: "0";
528540
});
529541
const networkFeeToFiat = computed(() => {
542+
console.log(networkFeeWei.value, networkPrice.value);
530543
return fromWei(
531544
toBN(networkFeeWei.value).muln(parseFloat(networkPrice.value))
532545
);

‎src/components/OrderForm/BuyProviders.vue‎

Lines changed: 99 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
</v-icon>
88
<div class="mew-heading-2">Select provider</div>
99
</div>
10-
10+
<div class="mew-heading-4">
11+
Spending <b>{{ topperQuote.plusFeeF }}</b>
12+
</div>
1113
<div v-if="!processingBuy">
1214
<!-- ============================================================== -->
1315
<!-- Moonpay -->
@@ -26,43 +28,37 @@
2628
:class="hideMoonpay ? 'text-red' : ''"
2729
>
2830
{{ moonpayQuote.cryptoToFiat }}
29-
<span
30-
class="mew-heading-3 pl-1"
31-
:class="hideMoonpay ? 'text-red' : ''"
32-
>{{ selectedCryptoName }}</span
33-
>
34-
</div>
35-
</div>
36-
<div class="d-flex align-center">
37-
<div v-if="!hideMoonpay" class="mr-1 textDark--text">
38-
≈ {{ moonpayQuote.plusFeeF }}
39-
</div>
40-
<div v-else class="mr-1 text-red">
41-
{{ moonpayQuote.plusFeeF }}
42-
</div>
43-
<v-tooltip v-if="!hideMoonpay" location="bottom">
44-
<template #activator="{ props }">
45-
<v-icon
46-
v-bind="props"
47-
color="grey-lighten-1"
48-
size="x-small"
49-
class="cursor-pointer"
31+
<div class="d-flex align-center">
32+
<span
33+
class="mew-heading-3 pl-1 mr-1"
34+
:class="hideMoonpay ? 'text-red' : ''"
35+
>{{ selectedCryptoName }}</span
5036
>
51-
mdi-information
52-
</v-icon>
53-
</template>
54-
<div class="elevated-box pa-3">
55-
{{ moonpayQuote.includesFeeText }}
56-
<br />
57-
<br />
58-
{{ moonpayQuote.networkFeeText }}
59-
<br />
60-
<br />
61-
{{ moonpayQuote.dailyLimit }}
62-
<br />
63-
{{ moonpayQuote.monthlyLimit }}
37+
<v-tooltip v-if="!hideMoonpay" location="bottom">
38+
<template #activator="{ props }">
39+
<v-icon
40+
v-bind="props"
41+
color="grey-lighten-1"
42+
size="x-small"
43+
class="cursor-pointer"
44+
>
45+
mdi-information
46+
</v-icon>
47+
</template>
48+
<div class="elevated-box pa-3">
49+
{{ moonpayQuote.includesFeeText }}
50+
<br />
51+
<br />
52+
{{ moonpayQuote.networkFeeText }}
53+
<br />
54+
<br />
55+
{{ moonpayQuote.dailyLimit }}
56+
<br />
57+
{{ moonpayQuote.monthlyLimit }}
58+
</div>
59+
</v-tooltip>
6460
</div>
65-
</v-tooltip>
61+
</div>
6662
</div>
6763
</div>
6864

@@ -92,39 +88,40 @@
9288
<!-- ============================================================== -->
9389
<!-- Simplex -->
9490
<!-- ============================================================== -->
95-
<div class="section-block pa-5">
91+
<div class="section-block pa-5 mb-6">
9692
<div v-if="!loading" class="mb-3">
9793
<div class="d-flex mb-1 align-center justify-space-between">
9894
<div class="d-flex mew-heading-3">
9995
{{ simplexQuote.cryptoToFiat }}
100-
<span class="mew-heading-3 pl-1">{{ selectedCryptoName }}</span>
101-
</div>
102-
</div>
103-
<div class="d-flex align-center">
104-
<div class="mr-1">≈ {{ simplexQuote.plusFeeF }}</div>
105-
<v-tooltip location="bottom">
106-
<template #activator="{ props }">
107-
<v-icon
108-
v-bind="props"
109-
color="grey-lighten-1"
110-
size="x-small"
111-
class="cursor-pointer"
112-
>
113-
mdi-information
114-
</v-icon>
115-
</template>
116-
<div class="elevated-box pa-3">
117-
{{ simplexQuote.includesFeeText }}
118-
<br />
119-
<br />
120-
{{ simplexQuote.networkFeeText }}
121-
<br />
122-
<br />
123-
{{ simplexQuote.dailyLimit }}
124-
<br />
125-
{{ simplexQuote.monthlyLimit }}
96+
<div class="d-flex align-center">
97+
<span class="mew-heading-3 pl-1 mr-1">{{
98+
selectedCryptoName
99+
}}</span>
100+
<v-tooltip location="bottom">
101+
<template #activator="{ props }">
102+
<v-icon
103+
v-bind="props"
104+
color="grey-lighten-1"
105+
size="x-small"
106+
class="cursor-pointer"
107+
>
108+
mdi-information
109+
</v-icon>
110+
</template>
111+
<div class="elevated-box pa-3">
112+
{{ simplexQuote.includesFeeText }}
113+
<br />
114+
<br />
115+
{{ simplexQuote.networkFeeText }}
116+
<br />
117+
<br />
118+
{{ simplexQuote.dailyLimit }}
119+
<br />
120+
{{ simplexQuote.monthlyLimit }}
121+
</div>
122+
</v-tooltip>
126123
</div>
127-
</v-tooltip>
124+
</div>
128125
</div>
129126
</div>
130127

@@ -167,34 +164,35 @@
167164
<div class="d-flex mb-1 align-center justify-space-between">
168165
<div class="d-flex mew-heading-3">
169166
{{ topperQuote.cryptoToFiat }}
170-
<span class="mew-heading-3 pl-1">{{ selectedCryptoName }}</span>
171-
</div>
172-
</div>
173-
<div class="d-flex align-center">
174-
<div class="mr-1">≈ {{ topperQuote.plusFeeF }}</div>
175-
<v-tooltip location="bottom">
176-
<template #activator="{ props }">
177-
<v-icon
178-
v-bind="props"
179-
color="grey-lighten-1"
180-
size="x-small"
181-
class="cursor-pointer"
182-
>
183-
mdi-information
184-
</v-icon>
185-
</template>
186-
<div class="elevated-box pa-3">
187-
{{ topperQuote.includesFeeText }}
188-
<br />
189-
<br />
190-
{{ topperQuote.networkFeeText }}
191-
<br />
192-
<br />
193-
{{ topperQuote.dailyLimit }}
194-
<br />
195-
{{ topperQuote.monthlyLimit }}
167+
<div class="d-flex align-center">
168+
<span class="mew-heading-3 pl-1 mr-1">{{
169+
selectedCryptoName
170+
}}</span>
171+
<v-tooltip location="bottom">
172+
<template #activator="{ props }">
173+
<v-icon
174+
v-bind="props"
175+
color="grey-lighten-1"
176+
size="x-small"
177+
class="cursor-pointer"
178+
>
179+
mdi-information
180+
</v-icon>
181+
</template>
182+
<div class="elevated-box pa-3">
183+
{{ topperQuote.includesFeeText }}
184+
<br />
185+
<br />
186+
{{ topperQuote.networkFeeText }}
187+
<br />
188+
<br />
189+
{{ topperQuote.dailyLimit }}
190+
<br />
191+
{{ topperQuote.monthlyLimit }}
192+
</div>
193+
</v-tooltip>
196194
</div>
197-
</v-tooltip>
195+
</div>
198196
</div>
199197
</div>
200198

@@ -239,6 +237,11 @@
239237
>
240238
</div>
241239
</div>
240+
241+
<div class="pt-2 text-center mew-label">
242+
Fees, availability, and purchase limits vary between providers, you can
243+
check their quotes and select on that works for you.
244+
</div>
242245
</div>
243246
<div v-else class="text-center py-5">
244247
<v-progress-circular
@@ -305,6 +308,10 @@ export default defineComponent({
305308
type: String,
306309
default: "",
307310
},
311+
fiatAmount: {
312+
type: String,
313+
default: "0",
314+
},
308315
},
309316
setup() {
310317
const amplitude: any = inject("$amplitude");
@@ -416,7 +423,7 @@ export default defineComponent({
416423
this.actualAddress
417424
)
418425
.then((data) => {
419-
window.open(data.url, "_blank");
426+
window.open(data.url);
420427
this.amplitude.track(`CCBuySellBuyWithTopperSuccess`);
421428
this.reset();
422429
this.close();

‎src/components/OrderForm/OrderForm.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
<BuyProviders
5757
v-if="step === 2"
5858
:selected-fiat="selectedFiat"
59+
:fiat-amount="fiatAmount"
5960
:selected-currency="selectedCurrency"
6061
:only-simplex="onlySimplex"
6162
:moonpay-quote="moonpayQuote"

‎src/components/OrderForm/SellForm.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
class="no-left-border custom-btn"
3535
@click="openTokenSelect"
3636
append-icon="mdi-menu-down"
37+
style="max-width: 130px"
3738
:disabled="loading.data"
3839
>
3940
<template #prepend>
@@ -46,7 +47,7 @@
4647
/>
4748
</template>
4849
<span>
49-
{{ form.cryptoSelected }}
50+
{{ concatenate(form.cryptoSelected) }}
5051
</span>
5152
<template v-slot:append>
5253
<v-icon color="grey-2" size="large"></v-icon>
@@ -74,7 +75,7 @@
7475
class="no-right-border"
7576
></v-text-field>
7677
<v-select
77-
style="max-width: 120px"
78+
style="max-width: 130px"
7879
class="rounded-right no-left-border"
7980
v-model="form.fiatSelected"
8081
:items="filteredFiatItems"
@@ -807,6 +808,10 @@ const getTokenBalance = async (tokenName: string) => {
807808
form.balanceWei = bal.toString();
808809
form.balance = fromBase(form.balanceWei, tokensInfo[tokenName].decimals);
809810
};
811+
812+
const concatenate = (value: string) => {
813+
return value.length > 3 ? `${value.slice(0, 3)}...` : value;
814+
};
810815
</script>
811816

812817
<style lang="scss" scoped>

‎src/layouts/LandingPage.vue‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -89,22 +89,20 @@ if (!isEthVm && !isEnkrypt) {
8989
9090
.background-image {
9191
background-color: rgb(var(--v-theme-background-fill));
92-
@media (min-width: 768px) {
93-
background-image: radial-gradient(
94-
at top 0px right 200px,
95-
rgb(var(--v-theme-background-gradient)),
96-
transparent 900px
97-
),
98-
radial-gradient(
99-
at bottom 200px left 200px,
100-
rgba(var(--v-theme-background-gradient)),
101-
transparent 500px
102-
),
103-
radial-gradient(
104-
circle at bottom right,
105-
rgba(var(--v-theme-background-gradient)),
106-
transparent 300px
107-
);
108-
}
92+
background-image: radial-gradient(
93+
at top 0px right 200px,
94+
rgb(var(--v-theme-background-gradient)),
95+
transparent 900px
96+
),
97+
radial-gradient(
98+
at bottom 200px left 200px,
99+
rgba(var(--v-theme-background-gradient)),
100+
transparent 500px
101+
),
102+
radial-gradient(
103+
circle at bottom right,
104+
rgba(var(--v-theme-background-gradient)),
105+
transparent 300px
106+
);
109107
}
110108
</style>

0 commit comments

Comments
 (0)