forked from JackHamer09/zksync-plus
-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
310f6de
commit 0f74e18
Showing
18 changed files
with
282 additions
and
268 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,246 @@ | ||
| <template> | ||
| <div> | ||
| <PageTitle>Assets</PageTitle> | ||
|
|
||
| <template v-if="!isConnected"> | ||
| <ConnectWalletBlock>Connect wallet to view your balances on {{ eraNetwork.name }}</ConnectWalletBlock> | ||
| </template> | ||
| <template v-else> | ||
| <EcosystemBlock | ||
| v-if="eraNetwork.displaySettings?.showPartnerLinks && ecosystemBannerVisible" | ||
| show-close-button | ||
| class="mb-block-padding-1/2 sm:mb-block-gap" | ||
| /> | ||
| <CommonContentBlock class="mb-block-gap"> | ||
| <div class="flex flex-col flex-wrap gap-block-gap sm:flex-row sm:items-center sm:justify-between"> | ||
| <CommonTotalBalance :balance="balance" :loading="loading" :error="balanceError" /> | ||
| <CommonButtonGroup v-if="!noBalances"> | ||
| <CommonButton | ||
| variant="primary" | ||
| as="RouterLink" | ||
| :to="{ | ||
| name: eraNetwork.l1Network ? 'receive-methods' : 'receive', | ||
| }" | ||
| > | ||
| <template #icon> | ||
| <ArrowDownLeftIcon aria-hidden="true" /> | ||
| </template> | ||
| <template #default>Receive</template> | ||
| </CommonButton> | ||
| <CommonButton | ||
| variant="primary" | ||
| as="RouterLink" | ||
| :to="{ name: eraNetwork.l1Network ? 'send-methods' : 'send' }" | ||
| > | ||
| <template #icon> | ||
| <ArrowUpRightIcon aria-hidden="true" /> | ||
| </template> | ||
| <template #default>Send</template> | ||
| </CommonButton> | ||
| </CommonButtonGroup> | ||
| </div> | ||
| </CommonContentBlock> | ||
|
|
||
| <template v-if="!noBalances"> | ||
| <TypographyCategoryLabel> | ||
| <span>Balance</span> | ||
| <template #right> | ||
| <CommonButtonLabel as="RouterLink" variant="light" :to="{ name: 'balances' }">View all</CommonButtonLabel> | ||
| </template> | ||
| </TypographyCategoryLabel> | ||
| <CommonCardWithLineButtons> | ||
| <template v-if="loading"> | ||
| <TokenBalanceLoader v-for="index in 2" :key="index" send-route-name /> | ||
| </template> | ||
| <div v-else-if="balanceError" class="m-3 -mt-1 mb-2.5"> | ||
| <CommonErrorBlock @try-again="fetch"> | ||
| {{ balanceError.message }} | ||
| </CommonErrorBlock> | ||
| </div> | ||
| <template v-else-if="displayedBalances.length"> | ||
| <TokenBalance | ||
| v-for="item in displayedBalances" | ||
| as="div" | ||
| :key="item.address" | ||
| show-name-link | ||
| :send-route-name="eraNetwork.l1Network ? 'send-methods' : 'send'" | ||
| v-bind="item" | ||
| /> | ||
| </template> | ||
| <template v-else> | ||
| <CommonEmptyBlock class="mx-3 mb-3 mt-1"> | ||
| <div class="wrap-balance"> | ||
| You don't have any balances on | ||
| <span class="font-medium">{{ destinations.era.label }}</span> | ||
| </div> | ||
| <span v-if="eraNetwork.l1Network" class="mt-1.5 inline-block"> | ||
| Proceed to | ||
| <NuxtLink class="link" :to="{ name: 'receive-methods' }">Add funds</NuxtLink> page to add balance to | ||
| your account | ||
| </span> | ||
| </CommonEmptyBlock> | ||
| </template> | ||
| </CommonCardWithLineButtons> | ||
| </template> | ||
|
|
||
| <template v-if="noBalances"> | ||
| <TypographyCategoryLabel> | ||
| To start using zkSync ecosystem, deposit tokens in any convenient way | ||
| </TypographyCategoryLabel> | ||
|
|
||
| <div class="flex flex-col gap-block-gap"> | ||
| <BridgeFromEthereumButton v-if="eraNetwork.l1Network" /> | ||
|
|
||
| <CommonCardWithLineButtons v-for="(item, index) in depositMethods" :key="index"> | ||
| <DestinationItem v-bind="item.props"> | ||
| <template #image v-if="item.icon"> | ||
| <DestinationIconContainer> | ||
| <component :is="item.icon" aria-hidden="true" /> | ||
| </DestinationIconContainer> | ||
| </template> | ||
| </DestinationItem> | ||
| </CommonCardWithLineButtons> | ||
| </div> | ||
| </template> | ||
| <template v-else> | ||
| <TypographyCategoryLabel>Deposit more tokens to zkSync</TypographyCategoryLabel> | ||
|
|
||
| <CommonCardWithLineButtons> | ||
| <DestinationItem v-for="(item, index) in depositMethods" :key="index" v-bind="item.props"> | ||
| <template #image v-if="item.icon"> | ||
| <DestinationIconContainer> | ||
| <component :is="item.icon" aria-hidden="true" /> | ||
| </DestinationIconContainer> | ||
| </template> | ||
| </DestinationItem> | ||
| </CommonCardWithLineButtons> | ||
| </template> | ||
| </template> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { computed, onBeforeUnmount } from "vue"; | ||
| import { | ||
| ArrowDownLeftIcon, | ||
| ArrowsUpDownIcon, | ||
| ArrowTopRightOnSquareIcon, | ||
| ArrowUpRightIcon, | ||
| BanknotesIcon, | ||
| QrCodeIcon, | ||
| } from "@heroicons/vue/24/outline"; | ||
| import { storeToRefs } from "pinia"; | ||
| import useInterval from "@/composables/useInterval"; | ||
| import useSingleLoading from "@/composables/useSingleLoading"; | ||
| import useEcosystemBanner from "@/composables/zksync/deposit/useEcosystemBanner"; | ||
| import type { FunctionalComponent } from "vue"; | ||
| import { useDestinationsStore } from "@/store/destinations"; | ||
| import { useOnboardStore } from "@/store/onboard"; | ||
| import { useZkSyncProviderStore } from "@/store/zksync/provider"; | ||
| import { useZkSyncWalletStore } from "@/store/zksync/wallet"; | ||
| import { parseTokenAmount, removeSmallAmount } from "@/utils/formatters"; | ||
| import { isOnlyZeroes } from "@/utils/helpers"; | ||
| const onboardStore = useOnboardStore(); | ||
| const walletEraStore = useZkSyncWalletStore(); | ||
| const { isConnected } = storeToRefs(onboardStore); | ||
| const { balance, balanceInProgress, balanceError } = storeToRefs(walletEraStore); | ||
| const { destinations } = storeToRefs(useDestinationsStore()); | ||
| const { eraNetwork } = storeToRefs(useZkSyncProviderStore()); | ||
| const { ecosystemBannerVisible } = useEcosystemBanner(); | ||
| const { loading, reset: resetSingleLoading } = useSingleLoading(computed(() => balanceInProgress.value)); | ||
| const displayedBalances = computed(() => { | ||
| return balance.value.filter(({ amount, decimals, price }) => { | ||
| const decimalAmount = price ? removeSmallAmount(amount, decimals, price) : parseTokenAmount(amount, decimals); | ||
| if (!isOnlyZeroes(decimalAmount)) { | ||
| return true; | ||
| } | ||
| return false; | ||
| }); | ||
| }); | ||
| const noBalances = computed(() => !loading.value && !balanceError.value && !displayedBalances.value.length); | ||
| const depositMethods = computed(() => { | ||
| const methods: { props: Record<string, unknown>; icon?: FunctionalComponent }[] = []; | ||
| if (eraNetwork.value.l1Network && !noBalances.value) { | ||
| methods.push({ | ||
| props: { | ||
| iconUrl: destinations.value.ethereum.iconUrl, | ||
| label: `Bridge from ${eraNetwork.value.l1Network?.name}`, | ||
| description: `Receive tokens from your ${eraNetwork.value.l1Network?.name} account`, | ||
| as: "RouterLink", | ||
| to: { | ||
| name: "index", | ||
| }, | ||
| }, | ||
| }); | ||
| } | ||
| methods.push({ | ||
| props: { | ||
| label: "View your address", | ||
| description: `Receive tokens from another ${eraNetwork.value.name} account`, | ||
| as: "RouterLink", | ||
| to: { | ||
| name: "receive", | ||
| }, | ||
| }, | ||
| icon: QrCodeIcon, | ||
| }); | ||
| if (eraNetwork.value.displaySettings?.showPartnerLinks) { | ||
| methods.push({ | ||
| props: { | ||
| label: "Top-up with cash", | ||
| description: "Buy tokens using a card or another method for fiat", | ||
| as: "a", | ||
| href: "https://zksync.dappradar.com/ecosystem?category-de=gateways", | ||
| target: "_blank", | ||
| icon: ArrowTopRightOnSquareIcon, | ||
| }, | ||
| icon: BanknotesIcon, | ||
| }); | ||
| methods.push({ | ||
| props: { | ||
| label: "Bridge from other networks", | ||
| description: "Explore ecosystem of third party bridges", | ||
| as: "a", | ||
| href: "https://zksync.dappradar.com/ecosystem?category-de=bridges", | ||
| target: "_blank", | ||
| icon: ArrowTopRightOnSquareIcon, | ||
| }, | ||
| icon: ArrowsUpDownIcon, | ||
| }); | ||
| } | ||
| return methods; | ||
| }); | ||
| const fetch = () => { | ||
| if (!isConnected.value) return; | ||
| walletEraStore.requestBalance(); | ||
| }; | ||
| fetch(); | ||
| const { reset: resetAutoUpdate, stop: stopAutoUpdate } = useInterval(() => { | ||
| fetch(); | ||
| }, 60000); | ||
| const unsubscribe = onboardStore.subscribeOnAccountChange((newAddress) => { | ||
| if (!newAddress) return; | ||
| resetSingleLoading(); | ||
| resetAutoUpdate(); | ||
| fetch(); | ||
| }); | ||
| onBeforeUnmount(() => { | ||
| stopAutoUpdate(); | ||
| unsubscribe(); | ||
| }); | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped></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 was deleted.
Oops, something went wrong.
Oops, something went wrong.