Skip to content

Commit f37b37b

Browse files
itsacoyoteitsacoyote
authored
feat: native token transfer and gateway (#261)
1 parent c672421 commit f37b37b

16 files changed

Lines changed: 1145 additions & 48 deletions

File tree

‎components/header/MobileMainNavigation.vue‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,25 @@
8787
</div>
8888
<CommonCardWithLineButtons>
8989
<DestinationItem
90-
v-for="item in chainList.filter((e) => !e.hidden)"
90+
v-for="item in mainnetList.filter((e) => !e.hidden)"
91+
:key="item.key"
92+
:label="item.name"
93+
:icon="isNetworkSelected(item) ? CheckIcon : undefined"
94+
size="sm"
95+
@click="buttonClicked(item)"
96+
>
97+
<template #image>
98+
<DestinationIconContainer>
99+
<IconsEra aria-hidden="true" />
100+
</DestinationIconContainer>
101+
</template>
102+
</DestinationItem>
103+
<template v-if="testnetList.length > 0">
104+
<hr class="border-neutral-200 dark:border-neutral-800" />
105+
<p class="mt-2 pl-3 text-xs font-bold text-neutral-600">Testnets</p>
106+
</template>
107+
<DestinationItem
108+
v-for="item in testnetList.filter((e) => !e.hidden)"
91109
:key="item.key"
92110
:label="item.name"
93111
:icon="isNetworkSelected(item) ? CheckIcon : undefined"
@@ -122,6 +140,9 @@ import { chainList } from "@/data/networks";
122140
123141
import type { ZkSyncNetwork } from "@/data/networks";
124142
143+
const mainnetList = computed(() => chainList.filter((e) => e.displaySettings && !e.displaySettings.isTestnet));
144+
const testnetList = computed(() => chainList.filter((e) => e.displaySettings && e.displaySettings.isTestnet));
145+
125146
const props = defineProps({
126147
opened: {
127148
type: Boolean,

‎components/header/NetworkDropdown.vue‎

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,48 @@
1111

1212
<transition v-bind="TransitionAlertScaleInOutTransition">
1313
<MenuItems class="network-options-container">
14-
<MenuItem v-for="item in chainList.filter((e) => !e.hidden)" :key="item.key" v-slot="{ active }" as="template">
15-
<CommonButtonDropdown
16-
size="sm"
17-
no-chevron
18-
:active="{ active }"
19-
class="options-item"
20-
@click="buttonClicked(item)"
21-
>
22-
<template #left-icon>
23-
<IconsEra />
24-
</template>
25-
<span>{{ item.name }}</span>
26-
<template #right-icon>
27-
<CheckIcon v-if="isNetworkSelected(item)" aria-hidden="true" />
28-
</template>
29-
</CommonButtonDropdown>
30-
</MenuItem>
14+
<div v-for="item in mainnetList.filter((e) => !e.hidden)" :key="item.key">
15+
<MenuItem v-slot="{ active }" as="template">
16+
<CommonButtonDropdown
17+
size="sm"
18+
no-chevron
19+
:active="{ active }"
20+
class="options-item"
21+
@click="buttonClicked(item)"
22+
>
23+
<template #left-icon>
24+
<IconsEra />
25+
</template>
26+
<span>{{ item.name }}</span>
27+
<template #right-icon>
28+
<CheckIcon v-if="isNetworkSelected(item)" aria-hidden="true" />
29+
</template>
30+
</CommonButtonDropdown>
31+
</MenuItem>
32+
</div>
33+
<template v-if="testnetList.length > 0">
34+
<hr class="border-neutral-200 dark:border-neutral-800" />
35+
<p class="mt-2 pl-3 text-xs font-bold text-neutral-600">Testnets</p>
36+
</template>
37+
<div v-for="item in testnetList.filter((e) => !e.hidden)" :key="item.key">
38+
<MenuItem v-slot="{ active }" as="template">
39+
<CommonButtonDropdown
40+
size="sm"
41+
no-chevron
42+
:active="{ active }"
43+
class="options-item"
44+
@click="buttonClicked(item)"
45+
>
46+
<template #left-icon>
47+
<IconsEra />
48+
</template>
49+
<span>{{ item.name }}</span>
50+
<template #right-icon>
51+
<CheckIcon v-if="isNetworkSelected(item)" aria-hidden="true" />
52+
</template>
53+
</CommonButtonDropdown>
54+
</MenuItem>
55+
</div>
3156
</MenuItems>
3257
</transition>
3358
</Menu>
@@ -41,6 +66,9 @@ import { chainList } from "@/data/networks";
4166
4267
import type { ZkSyncNetwork } from "@/data/networks";
4368
69+
const mainnetList = computed(() => chainList.filter((e) => e.displaySettings && !e.displaySettings.isTestnet));
70+
const testnetList = computed(() => chainList.filter((e) => e.displaySettings && e.displaySettings.isTestnet));
71+
4472
const route = useRoute();
4573
4674
const { selectedNetwork } = storeToRefs(useNetworkStore());

‎components/transaction/AllowancePanel.vue‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<template>
2+
<CommonCardWithLineButtons class="mt-4">
3+
<DestinationItem
4+
v-if="enoughAllowance && setAllowanceReceipts?.length"
5+
as="div"
6+
:description="`You can now proceed to deposit`"
7+
>
8+
<template #label>
9+
{{ selectedToken?.symbol }} allowance approved
10+
<template v-for="allowanceReceipt in setAllowanceReceipts" :key="allowanceReceipt.transactionHash">
11+
<a
12+
v-if="blockExplorerUrl"
13+
:href="`${blockExplorerUrl}/tx/${allowanceReceipt.transactionHash}`"
14+
target="_blank"
15+
class="inline-flex items-center gap-1 underline underline-offset-2"
16+
>
17+
View on Explorer
18+
<ArrowTopRightOnSquareIcon class="h-6 w-6" aria-hidden="true" />
19+
</a>
20+
</template>
21+
</template>
22+
<template #image>
23+
<div class="aspect-square h-full w-full rounded-full bg-success-400 p-3 text-black">
24+
<CheckIcon aria-hidden="true" />
25+
</div>
26+
</template>
27+
</DestinationItem>
28+
<DestinationItem v-else as="div">
29+
<template #label>
30+
Approve {{ selectedToken?.symbol }} allowance
31+
<template v-for="allowanceTransactionHash in setAllowanceTransactionHashes" :key="allowanceTransactionHash">
32+
<a
33+
v-if="blockExplorerUrl && allowanceTransactionHash"
34+
:href="`${blockExplorerUrl}/tx/${allowanceTransactionHash}`"
35+
target="_blank"
36+
class="inline-flex items-center gap-1 underline underline-offset-2"
37+
>
38+
View on Explorer
39+
<ArrowTopRightOnSquareIcon class="h-6 w-6" aria-hidden="true" />
40+
</a>
41+
</template>
42+
</template>
43+
<template #underline>
44+
Before depositing you need to give our bridge permission to spend specified amount of
45+
{{ selectedToken?.symbol }}.
46+
<span v-if="allowance && allowance !== 0n"
47+
>You can deposit up to
48+
<CommonButtonLabel variant="light" @click="setAmountToCurrentAllowance()">
49+
{{ parseTokenAmount(allowance!, selectedToken!.decimals) }}
50+
</CommonButtonLabel>
51+
{{ selectedToken!.symbol }} without approving a new allowance.
52+
</span>
53+
<CommonButtonLabel variant="light" as="a" :href="TOKEN_ALLOWANCE" target="_blank">
54+
Learn more
55+
</CommonButtonLabel>
56+
</template>
57+
<template #image>
58+
<div class="aspect-square h-full w-full rounded-full bg-warning-400 p-3 text-black">
59+
<LockClosedIcon aria-hidden="true" />
60+
</div>
61+
</template>
62+
</DestinationItem>
63+
</CommonCardWithLineButtons>
64+
</template>
65+
66+
<script lang="ts" setup>
67+
import { LockClosedIcon, ArrowTopRightOnSquareIcon, CheckIcon } from "@heroicons/vue/24/outline";
68+
69+
import type { Token } from "@/types";
70+
import type { Hash } from "viem";
71+
72+
const props = defineProps<{
73+
tokenAddress: string;
74+
assetId: string;
75+
selectedToken: Token;
76+
enoughAllowance: boolean;
77+
blockExplorerUrl: string | undefined;
78+
allowance: bigint;
79+
setAllowanceReceipts: { transactionHash: Hash }[] | undefined;
80+
setAllowanceTransactionHashes: (Hash | undefined)[];
81+
}>();
82+
83+
const emit = defineEmits<{
84+
(e: "setAmount", amount: bigint): void;
85+
}>();
86+
87+
const setAmountToCurrentAllowance = () => {
88+
if (!props.allowance) {
89+
return;
90+
}
91+
emit("setAmount", props.allowance);
92+
};
93+
</script>

‎components/transaction/NativeBridge.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div>
3+
<CommonAlert variant="warning" size="sm" :icon="ExclamationTriangleIcon" class="mb-block-gap">
4+
<p>
5+
Only {{ eraNetwork.nativeCurrency!.symbol }} is allowed for bridging {{ type === "withdraw" ? "from" : "to" }}
6+
{{ eraNetwork.name }}.
7+
</p>
8+
</CommonAlert>
9+
</div>
10+
</template>
11+
12+
<script lang="ts" setup>
13+
import { ExclamationTriangleIcon } from "@heroicons/vue/24/outline";
14+
15+
import type { ZkSyncNetwork } from "@/data/networks"; // Adjust the import path as needed
16+
17+
defineProps<{
18+
eraNetwork: ZkSyncNetwork;
19+
type: "withdraw" | "deposit";
20+
}>();
21+
</script>

0 commit comments

Comments
 (0)