Skip to content

Commit

Permalink
devop: remove usd, keep info icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@gamalielhere
gamalielhere committed Jul 18, 2024
1 parent d1fa519 commit 96900a7
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 115 deletions.
21 changes: 17 additions & 4 deletions src/components/OrderForm/BuyForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
</div>
<div class="d-flex mt-2">
<v-text-field
style="max-width: 196px"
class="no-right-border"
@input="fiatToCrypto"
type="number"
Expand Down Expand Up @@ -522,11 +521,25 @@ const priceOb = computed(() => {
: simplexData[form.cryptoSelected].prices[form.fiatSelected];
});
const networkPrice = computed(() => {
return isValidData(moonpayData)
? moonpayData[props.networkSelected.currencyName].prices[form.fiatSelected]
: simplexData[props.networkSelected.currencyName].prices[form.fiatSelected];
const moonpayPrice = isValidData(moonpayData)
? moonpayData[form.cryptoSelected]?.prices[form.fiatSelected]
: undefined;
const simplexPrice = isValidData(simplexData)
? simplexData[form.cryptoSelected]?.prices[form.fiatSelected]
: undefined;
const topperPrice = isValidData(topperData)
? topperData[form.cryptoSelected]?.prices[form.fiatSelected]
: undefined;
return moonpayPrice
? moonpayPrice
: simplexPrice
? simplexPrice
: topperPrice
? topperPrice
: "0";
});
const networkFeeToFiat = computed(() => {
console.log(networkFeeWei.value, networkPrice.value);
return fromWei(
toBN(networkFeeWei.value).muln(parseFloat(networkPrice.value))
);
Expand Down
191 changes: 99 additions & 92 deletions src/components/OrderForm/BuyProviders.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
</v-icon>
<div class="mew-heading-2">Select provider</div>
</div>

<div class="mew-heading-4">
Spending <b>{{ topperQuote.plusFeeF }}</b>
</div>
<div v-if="!processingBuy">
<!-- ============================================================== -->
<!-- Moonpay -->
Expand All @@ -26,43 +28,37 @@
:class="hideMoonpay ? 'text-red' : ''"
>
{{ moonpayQuote.cryptoToFiat }}
<span
class="mew-heading-3 pl-1"
:class="hideMoonpay ? 'text-red' : ''"
>{{ selectedCryptoName }}</span
>
</div>
</div>
<div class="d-flex align-center">
<div v-if="!hideMoonpay" class="mr-1 textDark--text">
≈ {{ moonpayQuote.plusFeeF }}
</div>
<div v-else class="mr-1 text-red">
{{ moonpayQuote.plusFeeF }}
</div>
<v-tooltip v-if="!hideMoonpay" location="bottom">
<template #activator="{ props }">
<v-icon
v-bind="props"
color="grey-lighten-1"
size="x-small"
class="cursor-pointer"
<div class="d-flex align-center">
<span
class="mew-heading-3 pl-1 mr-1"
:class="hideMoonpay ? 'text-red' : ''"
>{{ selectedCryptoName }}</span
>
mdi-information
</v-icon>
</template>
<div class="elevated-box pa-3">
{{ moonpayQuote.includesFeeText }}
<br />
<br />
{{ moonpayQuote.networkFeeText }}
<br />
<br />
{{ moonpayQuote.dailyLimit }}
<br />
{{ moonpayQuote.monthlyLimit }}
<v-tooltip v-if="!hideMoonpay" location="bottom">
<template #activator="{ props }">
<v-icon
v-bind="props"
color="grey-lighten-1"
size="x-small"
class="cursor-pointer"
>
mdi-information
</v-icon>
</template>
<div class="elevated-box pa-3">
{{ moonpayQuote.includesFeeText }}
<br />
<br />
{{ moonpayQuote.networkFeeText }}
<br />
<br />
{{ moonpayQuote.dailyLimit }}
<br />
{{ moonpayQuote.monthlyLimit }}
</div>
</v-tooltip>
</div>
</v-tooltip>
</div>
</div>
</div>

Expand Down Expand Up @@ -92,39 +88,40 @@
<!-- ============================================================== -->
<!-- Simplex -->
<!-- ============================================================== -->
<div class="section-block pa-5">
<div class="section-block pa-5 mb-6">
<div v-if="!loading" class="mb-3">
<div class="d-flex mb-1 align-center justify-space-between">
<div class="d-flex mew-heading-3">
{{ simplexQuote.cryptoToFiat }}
<span class="mew-heading-3 pl-1">{{ selectedCryptoName }}</span>
</div>
</div>
<div class="d-flex align-center">
<div class="mr-1">≈ {{ simplexQuote.plusFeeF }}</div>
<v-tooltip location="bottom">
<template #activator="{ props }">
<v-icon
v-bind="props"
color="grey-lighten-1"
size="x-small"
class="cursor-pointer"
>
mdi-information
</v-icon>
</template>
<div class="elevated-box pa-3">
{{ simplexQuote.includesFeeText }}
<br />
<br />
{{ simplexQuote.networkFeeText }}
<br />
<br />
{{ simplexQuote.dailyLimit }}
<br />
{{ simplexQuote.monthlyLimit }}
<div class="d-flex align-center">
<span class="mew-heading-3 pl-1 mr-1">{{
selectedCryptoName
}}</span>
<v-tooltip location="bottom">
<template #activator="{ props }">
<v-icon
v-bind="props"
color="grey-lighten-1"
size="x-small"
class="cursor-pointer"
>
mdi-information
</v-icon>
</template>
<div class="elevated-box pa-3">
{{ simplexQuote.includesFeeText }}
<br />
<br />
{{ simplexQuote.networkFeeText }}
<br />
<br />
{{ simplexQuote.dailyLimit }}
<br />
{{ simplexQuote.monthlyLimit }}
</div>
</v-tooltip>
</div>
</v-tooltip>
</div>
</div>
</div>

Expand Down Expand Up @@ -167,34 +164,35 @@
<div class="d-flex mb-1 align-center justify-space-between">
<div class="d-flex mew-heading-3">
{{ topperQuote.cryptoToFiat }}
<span class="mew-heading-3 pl-1">{{ selectedCryptoName }}</span>
</div>
</div>
<div class="d-flex align-center">
<div class="mr-1">≈ {{ topperQuote.plusFeeF }}</div>
<v-tooltip location="bottom">
<template #activator="{ props }">
<v-icon
v-bind="props"
color="grey-lighten-1"
size="x-small"
class="cursor-pointer"
>
mdi-information
</v-icon>
</template>
<div class="elevated-box pa-3">
{{ topperQuote.includesFeeText }}
<br />
<br />
{{ topperQuote.networkFeeText }}
<br />
<br />
{{ topperQuote.dailyLimit }}
<br />
{{ topperQuote.monthlyLimit }}
<div class="d-flex align-center">
<span class="mew-heading-3 pl-1 mr-1">{{
selectedCryptoName
}}</span>
<v-tooltip location="bottom">
<template #activator="{ props }">
<v-icon
v-bind="props"
color="grey-lighten-1"
size="x-small"
class="cursor-pointer"
>
mdi-information
</v-icon>
</template>
<div class="elevated-box pa-3">
{{ topperQuote.includesFeeText }}
<br />
<br />
{{ topperQuote.networkFeeText }}
<br />
<br />
{{ topperQuote.dailyLimit }}
<br />
{{ topperQuote.monthlyLimit }}
</div>
</v-tooltip>
</div>
</v-tooltip>
</div>
</div>
</div>

Expand Down Expand Up @@ -239,6 +237,11 @@
>
</div>
</div>

<div class="pt-2 text-center mew-label">
Fees, availability, and purchase limits vary between providers, you can
check their quotes and select on that works for you.
</div>
</div>
<div v-else class="text-center py-5">
<v-progress-circular
Expand Down Expand Up @@ -305,6 +308,10 @@ export default defineComponent({
type: String,
default: "",
},
fiatAmount: {
type: String,
default: "0",
},
},
setup() {
const amplitude: any = inject("$amplitude");
Expand Down Expand Up @@ -416,7 +423,7 @@ export default defineComponent({
this.actualAddress
)
.then((data) => {
window.open(data.url, "_blank");
window.open(data.url);
this.amplitude.track(`CCBuySellBuyWithTopperSuccess`);
this.reset();
this.close();
Expand Down
1 change: 1 addition & 0 deletions src/components/OrderForm/OrderForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
<BuyProviders
v-if="step === 2"
:selected-fiat="selectedFiat"
:fiat-amount="fiatAmount"
:selected-currency="selectedCurrency"
:only-simplex="onlySimplex"
:moonpay-quote="moonpayQuote"
Expand Down
9 changes: 7 additions & 2 deletions src/components/OrderForm/SellForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
class="no-left-border custom-btn"
@click="openTokenSelect"
append-icon="mdi-menu-down"
style="max-width: 130px"
:disabled="loading.data"
>
<template #prepend>
Expand All @@ -46,7 +47,7 @@
/>
</template>
<span>
{{ form.cryptoSelected }}
{{ concatenate(form.cryptoSelected) }}
</span>
<template v-slot:append>
<v-icon color="grey-2" size="large"></v-icon>
Expand Down Expand Up @@ -74,7 +75,7 @@
class="no-right-border"
></v-text-field>
<v-select
style="max-width: 120px"
style="max-width: 130px"
class="rounded-right no-left-border"
v-model="form.fiatSelected"
:items="filteredFiatItems"
Expand Down Expand Up @@ -807,6 +808,10 @@ const getTokenBalance = async (tokenName: string) => {
form.balanceWei = bal.toString();
form.balance = fromBase(form.balanceWei, tokensInfo[tokenName].decimals);
};
const concatenate = (value: string) => {
return value.length > 3 ? `${value.slice(0, 3)}...` : value;
};
</script>

<style lang="scss" scoped>
Expand Down
32 changes: 15 additions & 17 deletions src/layouts/LandingPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,22 +89,20 @@ if (!isEthVm && !isEnkrypt) {
.background-image {
background-color: rgb(var(--v-theme-background-fill));
@media (min-width: 768px) {
background-image: radial-gradient(
at top 0px right 200px,
rgb(var(--v-theme-background-gradient)),
transparent 900px
),
radial-gradient(
at bottom 200px left 200px,
rgba(var(--v-theme-background-gradient)),
transparent 500px
),
radial-gradient(
circle at bottom right,
rgba(var(--v-theme-background-gradient)),
transparent 300px
);
}
background-image: radial-gradient(
at top 0px right 200px,
rgb(var(--v-theme-background-gradient)),
transparent 900px
),
radial-gradient(
at bottom 200px left 200px,
rgba(var(--v-theme-background-gradient)),
transparent 500px
),
radial-gradient(
circle at bottom right,
rgba(var(--v-theme-background-gradient)),
transparent 300px
);
}
</style>

0 comments on commit 96900a7

Please sign in to comment.