Skip to content

Commit f330fe1

Browse files
JackHamer09JackHamer09
authored
fix: onramp style fixes (#232)
1 parent 25425b3 commit f330fe1

10 files changed

Lines changed: 71 additions & 95 deletions

File tree

‎components/header/MobileMainNavigation.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,14 @@
1919
</CommonCardWithLineButtons>
2020

2121
<TypographyCategoryLabel size="sm">Portal</TypographyCategoryLabel>
22-
<CommonCardWithLineButtons v-if="selectedNetwork.displaySettings?.onramp">
23-
<DestinationItem label="On Ramp" as="RouterLink" :to="{ name: 'on-ramp' }" size="sm">
22+
<CommonCardWithLineButtons>
23+
<DestinationItem
24+
v-if="selectedNetwork.displaySettings?.onramp"
25+
label="On Ramp"
26+
as="RouterLink"
27+
:to="{ name: 'on-ramp' }"
28+
size="sm"
29+
>
2430
<template #image>
2531
<DestinationIconContainer>
2632
<BanknotesIcon aria-hidden="true" />

‎pages/on-ramp/index.vue‎

Lines changed: 22 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<template>
22
<PageTitle>Buy crypto</PageTitle>
3-
<Transition v-bind="TransitionOpacity()" class="relative" as="div">
4-
<ActiveTransactionsAlert v-if="step === 'buy'" class="absolute" />
5-
</Transition>
6-
<Transition tag="div" class="relative mt-5 flex flex-wrap items-center justify-center">
3+
<CommonHeightTransition :opened="step === 'buy' || step === 'quotes'">
4+
<ActiveTransactionsAlert class="mb-5" />
5+
</CommonHeightTransition>
6+
<Transition tag="div" class="relative flex flex-wrap items-center justify-center">
77
<CompletedView v-if="step === 'complete'" />
88
<TransactionsView v-else-if="step === 'transactions'" />
99
<div v-else-if="step === 'buy' || step === 'quotes' || step === 'processing'" class="isolate">
@@ -40,66 +40,52 @@ import TransactionsView from "@/views/on-ramp/TransactionsView.vue";
4040
import type { Address } from "viem";
4141
import type { ConfigResponse } from "zksync-easy-onramp";
4242
43-
const middlePanelView = ref("initial");
43+
const DEFAULT_FIAT_AMOUNT = "100";
4444
45-
const { step, middlePanelHeight } = storeToRefs(useOnRampStore());
45+
const { step } = storeToRefs(useOnRampStore());
4646
const { reset } = useOnRampStore();
4747
const { account, isConnected } = storeToRefs(useOnboardStore());
4848
const { reset: resetQuotes } = useQuotesStore();
4949
onMounted(() => {
5050
reset();
5151
resetQuotes();
5252
});
53+
54+
const middlePanelView = ref("initial");
55+
watch(isConnected, (connected) => {
56+
if (!connected) {
57+
middlePanelView.value = "connect";
58+
}
59+
});
60+
5361
watch(step, () => {
5462
if (step.value === "buy") {
55-
fiatAmount.value = "";
63+
fiatAmount.value = DEFAULT_FIAT_AMOUNT;
5664
resetQuotes();
5765
middlePanelView.value = "initial";
58-
middlePanelHeight.value = 0;
66+
fetch();
5967
}
6068
});
6169
62-
const fiatAmount = ref("");
70+
const fiatAmount = ref(DEFAULT_FIAT_AMOUNT);
6371
const token = ref<ConfigResponse["tokens"][0] | null>(null);
6472
6573
const selectTokenUpdate = (selectedToken: ConfigResponse["tokens"][0]) => {
6674
token.value = selectedToken;
6775
};
6876
6977
watchDebounced(
70-
fiatAmount,
71-
(value) => {
72-
if (!isConnected.value) {
73-
middlePanelView.value = "connect";
74-
return;
75-
}
76-
77-
if (value && token.value) {
78-
fetch();
79-
}
78+
[fiatAmount, token, computed(() => account.value.address)],
79+
() => {
80+
fetch();
8081
},
81-
{ debounce: 750, maxWait: 5000 }
82+
{ debounce: 750, maxWait: 5000, immediate: true }
8283
);
83-
watchDebounced(token, (value) => {
84-
if (!isConnected.value) {
85-
middlePanelView.value = "connect";
86-
return;
87-
}
88-
89-
if (fiatAmount.value && value) {
90-
fetch();
91-
}
92-
});
93-
94-
watch(isConnected, () => {
95-
if (isConnected.value && !!fiatAmount.value && +fiatAmount.value > 0 && token.value) {
96-
fetch();
97-
}
98-
});
9984
10085
const { fetchQuotes } = useOnRampStore();
10186
const { onRampChainId } = useOnRampStore();
10287
const fetch = () => {
88+
if (!isConnected.value || !token.value || !fiatAmount.value || +fiatAmount.value <= 0) return;
10389
fetchQuotes({
10490
fiatAmount: +fiatAmount.value,
10591
toToken: token.value!.address as Address,

‎views/on-ramp/FormView.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,11 @@
1616
</div>
1717
</template>
1818
<template v-if="step === 'buy' || step === 'quotes'">
19-
<input v-model="fiatAmount" placeholder="50.00" class="grow rounded-3xl p-4 text-3xl dark:bg-neutral-800" />
19+
<input
20+
v-model="fiatAmount"
21+
placeholder="100"
22+
class="w-full grow rounded-3xl p-4 text-3xl dark:bg-neutral-800"
23+
/>
2024
<div class="rounded-3xl bg-gray-300 p-4 py-5 dark:bg-neutral-950">
2125
<span class="inline-block align-middle text-lg leading-6 text-gray-700 dark:text-white">USD</span>
2226
</div>

‎views/on-ramp/MiddlePanel.vue‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@
1414
<div v-if="view === 'error'" class="m-4 text-center">An error has occurred. Please try again.</div>
1515
<QuotesList v-if="view === 'quotes'" />
1616
<div v-if="view === 'connect'" class="flex flex-col items-center p-4">
17-
<CommonButton variant="primary" @click="openModal">
18-
Connect your wallet to continue on-ramping.
19-
</CommonButton>
17+
<CommonButton variant="primary" @click="openModal">Connect wallet to continue</CommonButton>
2018
</div>
2119
</div>
2220
</TransitionGroup>
@@ -66,9 +64,3 @@ watchEffect(() => {
6664
}
6765
});
6866
</script>
69-
70-
<style lang="scss" scoped>
71-
#middle-panel {
72-
transition: height 0.25s ease-out;
73-
}
74-
</style>

‎views/on-ramp/ProcessingView.vue‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
11
<template>
22
<div class="-mt-5 max-h-[280px] overflow-y-auto rounded-b-2xl bg-white px-6 py-4 pt-8 dark:bg-neutral-950">
33
<div>
4-
<svg
5-
class="-ml-1 mr-3 inline-block size-5 animate-spin text-black dark:text-white"
6-
xmlns="http://www.w3.org/2000/svg"
7-
fill="none"
8-
viewBox="0 0 24 24"
9-
>
10-
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
11-
<path
12-
class="opacity-75"
13-
fill="currentColor"
14-
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
15-
></path>
16-
</svg>
17-
<span class="font-bold">Purchasing</span>
4+
<div class="flex items-center">
5+
<CommonSpinner class="-ml-1 mr-3 size-5" variant="text-color" />
6+
<span class="font-bold">Purchasing</span>
7+
</div>
188
<div v-if="order" class="mt-6">
199
<div v-for="step in order.steps" :key="step.id" class="m-auto flex w-[80%] flex-col">
2010
<div v-for="process in step.execution?.process" :key="process.type" class="mb-4 flex gap-2">
2111
<div class="w-[24px] shrink-0 text-center">
2212
<ProcessStatusIcon :status="process.status" />
2313
</div>
24-
<div class="flex items-center text-xs">{{ process.message }}</div>
14+
<div class="flex items-center text-sm">{{ process.message }}</div>
2515
</div>
2616
</div>
2717
</div>

‎views/on-ramp/QuotePreview.vue‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,40 @@
55
>
66
<div class="flex gap-2 p-3">
77
<div class="basis-2/3">
8+
<div class="mb-1 text-sm text-gray-600 dark:text-gray-400">via {{ quote.provider.name }}</div>
89
<div>
9-
<div :title="balance[1]" class="font-bold">{{ balance[0] }} {{ quote.receive.token.symbol }}</div>
10-
<div class="text-sm text-gray-600 dark:text-gray-300">
11-
Fee: {{ formatFiat(quote.pay.totalFeeFiat, quote.pay.currency) }}
10+
<div>
11+
<span class="font-bold" :title="balance[1]">{{ balance[0] }} {{ quote.receive.token.symbol }}</span>
12+
<span class="text-xs text-gray-600 dark:text-gray-400">
13+
&nbsp;~{{ formatFiat(quote.receive.amountFiat, quote.pay.currency) }}
14+
</span>
1215
</div>
1316
<button
1417
type="button"
15-
class="p-0.5 text-sm text-neutral-500 underline hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-400"
18+
class="p-0 text-sm text-neutral-500 underline hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-400"
1619
@click="toggleDetails"
1720
>
18-
Details
21+
{{ toggleOpen ? "Hide details" : "View details" }}
1922
</button>
2023
</div>
2124
</div>
22-
<div class="flex basis-1/3 items-center justify-end">
25+
<div class="hidden basis-1/3 items-center justify-end sm:flex">
2326
<!-- <div class="inline-block p-2">
2427
<img :src="quote.provider.iconUrl" class="h-8 w-8" />
2528
</div> -->
2629
<div class="inline-block">
27-
<div>{{ quote.provider.name }}</div>
28-
<div class="text-sm text-gray-600 dark:text-gray-300">{{ providerType }}</div>
30+
<div>via {{ quote.provider.name }}</div>
31+
<!-- <div class="text-sm text-gray-600 dark:text-gray-300">{{ providerType }}</div> -->
2932
</div>
3033
</div>
3134
</div>
32-
<Transition v-bind="TransitionOpacity(250, 150)">
33-
<div v-if="toggleOpen" ref="quotePreview">
35+
<div v-if="toggleOpen" ref="quotePreview" class="flex flex-col gap-1 px-3 pb-3">
36+
<div class="text-sm">Fee: {{ formatFiat(quote.pay.totalFeeFiat, quote.pay.currency) }}</div>
37+
<div class="text-sm">Steps:</div>
38+
<div class="mt-0.5 flex flex-col gap-3">
3439
<StepDetail v-for="(step, index) in quote.steps" :key="index" :step="step" />
3540
</div>
36-
</Transition>
41+
</div>
3742
</div>
3843
</template>
3944

@@ -51,7 +56,7 @@ const balance = computed(() => {
5156
return formatTokenBalance(props.quote.receive.amountUnits, props.quote.receive.token.decimals);
5257
});
5358
54-
const providerType = computed(() => {
59+
/* const providerType = computed(() => {
5560
switch (props.quote.provider.type) {
5661
case "onramp":
5762
return "Fiat on-ramp";
@@ -60,7 +65,7 @@ const providerType = computed(() => {
6065
default:
6166
return "Provider";
6267
}
63-
});
68+
}); */
6469
6570
const toggleOpen = ref(false);
6671
function toggleDetails(e: Event) {

‎views/on-ramp/QuotesList.vue‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div id="list" class="-mt-5 max-h-[280px] overflow-y-auto rounded-b-2xl bg-white px-6 py-4 pt-7 dark:bg-neutral-950">
2+
<div id="list" class="-mt-5 max-h-[280px] overflow-y-auto rounded-b-2xl bg-white px-6 pb-10 pt-7 dark:bg-neutral-950">
33
<div class="mb-2 text-lg font-bold">Choose on-ramp</div>
44
<div class="flex flex-col gap-2">
55
<template v-if="quotes && quotes.length > 0">
@@ -22,14 +22,7 @@ const { quotes } = storeToRefs(useQuotesStore());
2222
#list {
2323
&::after {
2424
content: "";
25-
@apply absolute bottom-0 left-0 h-[1.25rem] w-full bg-gradient-to-t from-[#f7f9fc] to-transparent;
26-
}
27-
}
28-
29-
.dark #list {
30-
&::after {
31-
content: "";
32-
@apply absolute bottom-0 left-0 h-[1.25rem] w-full bg-gradient-to-t from-black to-transparent;
25+
@apply absolute bottom-0 left-0 h-[1.25rem] w-full bg-gradient-to-t from-[#f7f9fc] to-transparent dark:from-black;
3326
}
3427
}
3528
</style>

‎views/on-ramp/SelectTokenModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
:icon-url="selectedToken.iconUrl"
2020
class="h-11 w-11"
2121
/>
22-
<div class="ml-2 flex flex-col gap-2 text-left text-gray-700 dark:text-gray-300">
22+
<div class="ml-2 flex flex-col text-left text-gray-700 dark:text-gray-300">
2323
<template v-if="configInProgress">
2424
<CommonContentLoader class="h-3" :length="12" />
2525
<CommonContentLoader class="h-3" :length="4" />

‎views/on-ramp/StepDetail.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<div class="mb-4 flex flex-col px-3 text-xs">
2+
<div class="flex flex-col text-xs">
33
<div v-if="step.type === 'onramp_via_link'" class="flex items-center space-x-2">
44
<span class="h-4 w-4 rounded-full border bg-gray-500">&nbsp;</span>
55
<span>Purchase via onramp link</span>
66
</div>
7-
<div v-if="step.type.includes('lifi')" class="flex items-center space-x-2">
7+
<div v-if="step.type === 'lifi_token_swap'" class="flex items-center space-x-2">
88
<img :src="step.swapQuote!.toolDetails.logoURI" class="h-4 w-4" />
9-
<span>{{ step.swapQuote!.toolDetails.name }} via LI.FI</span>
9+
<span>Swap via {{ step.swapQuote!.toolDetails.name }}</span>
1010
</div>
1111
</div>
1212
</template>

‎views/on-ramp/TransactionsView.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="flex items-center gap-2">
2+
<div class="mb-2 flex items-center gap-2">
33
<CommonButtonLabel as="button" variant="light" @click="setStep('buy')">
44
<div
55
class="flex items-center rounded-2xl bg-neutral-200 p-3 hover:bg-neutral-300 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-500"
@@ -10,9 +10,9 @@
1010
<h3 class="grow text-lg">Transactions</h3>
1111
</div>
1212
<template v-if="routes">
13-
<div v-for="route in routes" :key="route.id" class="my-2">
13+
<div v-for="route in routes" :key="route.id" class="my-1.5">
1414
<div
15-
class="flex cursor-pointer items-center gap-2 rounded-2xl bg-neutral-200 p-2 hover:border-gray-500 hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700/80"
15+
class="flex cursor-pointer items-center gap-4 rounded-2xl bg-neutral-200 px-2 py-4 hover:border-gray-500 hover:bg-neutral-300 dark:bg-neutral-900 dark:hover:bg-neutral-700/80"
1616
@click="selectRoute(route)"
1717
>
1818
<div>
@@ -26,14 +26,14 @@
2626
<div class="flex grow flex-col">
2727
<div class="flex items-center gap-2">
2828
<div class="flex items-center">
29-
<span class="text-xl">{{ payAmount(route) }}</span>
29+
<span class="text-base">{{ payAmount(route) }}</span>
3030
<span class="px-1"><ArrowRightIcon class="h-4 w-4" /></span>
31-
<span class="text-xl" :title="receiveAmount(route)[1]"
31+
<span class="text-base" :title="receiveAmount(route)[1]"
3232
>{{ receiveAmount(route)[0] }} {{ route.receive.token.symbol }}</span
3333
>
3434
</div>
3535
</div>
36-
<div class="text-pretty text-neutral-600 dark:text-neutral-400">
36+
<div class="text-pretty text-sm text-neutral-600 dark:text-neutral-400">
3737
{{ lastMessage(route) }}
3838
</div>
3939
</div>

0 commit comments

Comments
 (0)