forked from matter-labs/dapp-portal
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: improve modals for zksync lite transfer and withdraw
- Loading branch information
1 parent
53bb402
commit 9b6ecb2
Showing
8 changed files
with
271 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
components/transaction/zksync/lite/TransferSuccessfulModal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| <template> | ||
| <CommonModal v-bind="$attrs" :closable="false" class="transaction-successful-modal" title=""> | ||
| <template #animation> | ||
| <Vue3Lottie v-if="inProgress" class="w-72" :animation-data="ProgressPlane" loop /> | ||
| <Vue3Lottie v-else class="w-72" :animation-data="SuccessConfetti" :loop="false" /> | ||
| </template> | ||
|
|
||
| <div class="flex h-full flex-col overflow-auto"> | ||
| <div class="h2 text-center sm:h1"> | ||
| {{ inProgress ? "Transaction submitted" : "Transaction completed" }} | ||
| </div> | ||
| <CommonCardWithLineButtons v-if="transactionsRequestInProgress"> | ||
| <TokenBalanceLoader v-for="index in transactionHashes.length" :key="index" /> | ||
| </CommonCardWithLineButtons> | ||
| <CommonCardWithLineButtons v-else-if="transactionsRequestError"> | ||
| <CommonErrorBlock class="m-2" @try-again="fetch"> | ||
| {{ transactionsRequestError!.message }} | ||
| </CommonErrorBlock> | ||
| </CommonCardWithLineButtons> | ||
| <template v-else> | ||
| <CommonCardWithLineButtons> | ||
| <ZkSyncLiteTransactionLineItem v-for="(item, index) in transactions" :key="index" :transaction="item" /> | ||
| </CommonCardWithLineButtons> | ||
| </template> | ||
|
|
||
| <CommonAlert v-if="inProgress" class="mt-3" variant="neutral" :icon="InformationCircleIcon"> | ||
| <p> | ||
| Your funds will be available at the | ||
| <a | ||
| :href="`${blockExplorerUrl}/address/${mainTransaction?.to}`" | ||
| target="_blank" | ||
| class="font-medium underline underline-offset-2" | ||
| >destination address</a | ||
| > | ||
| after the transaction is committed on the <span class="font-medium">{{ destinations.zkSyncLite.label }}</span | ||
| >. You are free to close this page. | ||
| </p> | ||
| <a :href="`${blockExplorerUrl}/tx/${mainTransaction?.txHash}`" target="_blank" class="alert-link"> | ||
| Track status | ||
| <ArrowUpRightIcon class="ml-1 h-3 w-3" /> | ||
| </a> | ||
| </CommonAlert> | ||
| <CommonAlert v-else class="mt-3" variant="success" :icon="InformationCircleIcon"> | ||
| <p> | ||
| Your funds should now be available at the | ||
| <a | ||
| :href="`${blockExplorerUrl}/address/${mainTransaction?.to}`" | ||
| target="_blank" | ||
| class="font-medium underline underline-offset-2" | ||
| >destination address</a | ||
| >. | ||
| </p> | ||
| </CommonAlert> | ||
|
|
||
| <div class="sticky bottom-0 z-[1] mt-auto flex w-full flex-col items-center"> | ||
| <NuxtLink :to="{ name: 'transaction-zksync-lite' }" class="link mb-2 mt-8 text-sm underline-offset-2"> | ||
| Make another transaction | ||
| </NuxtLink> | ||
| <CommonButton as="RouterLink" :to="{ name: 'index' }" class="mx-auto" variant="primary-solid"> | ||
| Go to Home page | ||
| </CommonButton> | ||
| </div> | ||
| </div> | ||
| </CommonModal> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { computed, watch } from "vue"; | ||
| import { Vue3Lottie } from "vue3-lottie"; | ||
| import { ArrowUpRightIcon, InformationCircleIcon } from "@heroicons/vue/24/outline"; | ||
| import { storeToRefs } from "pinia"; | ||
| import ZkSyncLiteTransactionLineItem from "@/components/transaction/zksync/lite/ZkSyncLiteTransactionLineItem.vue"; | ||
| import useTransactionsReceipt from "@/composables/zksync/lite/useTransactionsReceipts"; | ||
| import ProgressPlane from "@/assets/lottie/progress-plane.json"; | ||
| import SuccessConfetti from "@/assets/lottie/success-confetti.json"; | ||
| import type { PropType } from "vue"; | ||
| import { useDestinationsStore } from "@/store/destinations"; | ||
| import { useLiteProviderStore } from "@/store/zksync/lite/provider"; | ||
| import { useLiteTokensStore } from "@/store/zksync/lite/tokens"; | ||
| const props = defineProps({ | ||
| transactionHashes: { | ||
| type: Array as PropType<string[]>, | ||
| required: true, | ||
| }, | ||
| inProgress: { | ||
| type: Boolean, | ||
| default: true, | ||
| }, | ||
| }); | ||
| const { destinations } = storeToRefs(useDestinationsStore()); | ||
| const { blockExplorerUrl } = storeToRefs(useLiteProviderStore()); | ||
| const liteProviderStore = useLiteProviderStore(); | ||
| const liteTokensStore = useLiteTokensStore(); | ||
| const { tokens } = storeToRefs(liteTokensStore); | ||
| const { transactions, transactionsRequestInProgress, transactionsRequestError, requestTransactions } = | ||
| useTransactionsReceipt(liteProviderStore.requestProvider, () => | ||
| liteTokensStore.requestTokens().then(() => (tokens.value ? Object.values(tokens.value) : [])) | ||
| ); | ||
| const mainTransaction = computed(() => transactions.value?.find((e) => e.type === "Transfer")); | ||
| const fetch = () => { | ||
| requestTransactions(props.transactionHashes); | ||
| }; | ||
| watch( | ||
| () => props.transactionHashes, | ||
| () => { | ||
| fetch(); | ||
| }, | ||
| { immediate: true } | ||
| ); | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| .transaction-successful-modal .modal-card { | ||
| @apply grid h-full grid-rows-[0_max-content_1fr]; | ||
| } | ||
| </style> |
98 changes: 98 additions & 0 deletions
98
components/transaction/zksync/lite/WithdrawSuccessfulModal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <template> | ||
| <CommonModal v-bind="$attrs" :closable="false" class="transaction-successful-modal" title=""> | ||
| <template #animation> | ||
| <Vue3Lottie class="w-72" :animation-data="ProgressPlane" loop /> | ||
| </template> | ||
|
|
||
| <div class="flex h-full flex-col overflow-auto"> | ||
| <div class="h2 text-center sm:h1">Transaction submitted</div> | ||
| <CommonCardWithLineButtons v-if="transactionsRequestInProgress"> | ||
| <TokenBalanceLoader v-for="index in transactionHashes.length" :key="index" /> | ||
| </CommonCardWithLineButtons> | ||
| <CommonCardWithLineButtons v-else-if="transactionsRequestError"> | ||
| <CommonErrorBlock class="m-2" @try-again="fetch"> | ||
| {{ transactionsRequestError!.message }} | ||
| </CommonErrorBlock> | ||
| </CommonCardWithLineButtons> | ||
| <template v-else> | ||
| <CommonCardWithLineButtons> | ||
| <ZkSyncLiteTransactionLineItem v-for="(item, index) in transactions" :key="index" :transaction="item" /> | ||
| </CommonCardWithLineButtons> | ||
| </template> | ||
|
|
||
| <CommonAlert class="mt-3" variant="neutral" :icon="InformationCircleIcon"> | ||
| <p> | ||
| It can take <span class="font-medium">up to 7 hours</span> until funds arrive on | ||
| <span class="font-medium">{{ destinations.ethereum.label }}</span> (L1) | ||
| </p> | ||
| <a href="https://docs.zksync.io/userdocs/faq/#how-long-are-withdrawal-times" target="_blank" class="alert-link"> | ||
| Learn more | ||
| <ArrowUpRightIcon class="ml-1 h-3 w-3" /> | ||
| </a> | ||
| </CommonAlert> | ||
|
|
||
| <div class="sticky bottom-0 z-[1] mt-auto flex w-full flex-col items-center"> | ||
| <NuxtLink :to="{ name: 'transaction-zksync-lite' }" class="link mb-2 mt-8 text-sm underline-offset-2"> | ||
| Make another transaction | ||
| </NuxtLink> | ||
| <CommonButton as="RouterLink" :to="{ name: 'index' }" class="mx-auto" variant="primary-solid"> | ||
| Go to Home page | ||
| </CommonButton> | ||
| </div> | ||
| </div> | ||
| </CommonModal> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { watch } from "vue"; | ||
| import { Vue3Lottie } from "vue3-lottie"; | ||
| import { ArrowUpRightIcon, InformationCircleIcon } from "@heroicons/vue/24/outline"; | ||
| import { storeToRefs } from "pinia"; | ||
| import ZkSyncLiteTransactionLineItem from "@/components/transaction/zksync/lite/ZkSyncLiteTransactionLineItem.vue"; | ||
| import useTransactionsReceipt from "@/composables/zksync/lite/useTransactionsReceipts"; | ||
| import ProgressPlane from "@/assets/lottie/progress-plane.json"; | ||
| import type { PropType } from "vue"; | ||
| import { useDestinationsStore } from "@/store/destinations"; | ||
| import { useLiteProviderStore } from "@/store/zksync/lite/provider"; | ||
| import { useLiteTokensStore } from "@/store/zksync/lite/tokens"; | ||
| const props = defineProps({ | ||
| transactionHashes: { | ||
| type: Array as PropType<string[]>, | ||
| required: true, | ||
| }, | ||
| }); | ||
| const { destinations } = storeToRefs(useDestinationsStore()); | ||
| const liteProviderStore = useLiteProviderStore(); | ||
| const liteTokensStore = useLiteTokensStore(); | ||
| const { tokens } = storeToRefs(liteTokensStore); | ||
| const { transactions, transactionsRequestInProgress, transactionsRequestError, requestTransactions } = | ||
| useTransactionsReceipt(liteProviderStore.requestProvider, () => | ||
| liteTokensStore.requestTokens().then(() => (tokens.value ? Object.values(tokens.value) : [])) | ||
| ); | ||
| const fetch = () => { | ||
| requestTransactions(props.transactionHashes); | ||
| }; | ||
| watch( | ||
| () => props.transactionHashes, | ||
| () => { | ||
| fetch(); | ||
| }, | ||
| { immediate: true } | ||
| ); | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| .transaction-successful-modal .modal-card { | ||
| @apply grid h-full grid-rows-[0_max-content_1fr]; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters