feat: add footer, faucet, and other changes

components/footer/Footer.vue

@@ -0,0 +1,43 @@
+<template>
+  <footer class="footer">
+    <div>
+      <CommonButtonLabel v-if="!isCorrectNetworkSet && connectorName !== 'WalletConnect'" @click="addNetworkToWallet()">
+        Add {{ eraNetwork.name }} to your wallet
+      </CommonButtonLabel>
+    </div>
+    <div class="links-container">
+      <CommonButtonLabel as="a" href="https://zksync.io/terms" target="_blank" class="footer-link">
+        Terms of Service
+      </CommonButtonLabel>
+      <CommonButtonLabel as="a" href="https://zksync.io/privacy" target="_blank" class="footer-link">
+        Privacy Policy
+      </CommonButtonLabel>
+    </div>
+  </footer>
+</template>
+
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+
+import { useOnboardStore } from "@/store/onboard";
+import { useZkSyncProviderStore } from "@/store/zksync/provider";
+import { useZkSyncWalletStore } from "@/store/zksync/wallet";
+
+const eraWalletStore = useZkSyncWalletStore();
+const { isCorrectNetworkSet } = storeToRefs(eraWalletStore);
+const { connectorName } = storeToRefs(useOnboardStore());
+const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
+const addNetworkToWallet = async () => {
+  await eraWalletStore.setCorrectNetwork();
+};
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  @apply flex flex-col items-center justify-between gap-x-8 gap-y-4 px-4 py-8 sm:flex-row;
+
+  .links-container {
+    @apply flex w-max flex-wrap items-center justify-center gap-x-8 gap-y-4 whitespace-nowrap;
+  }
+}
+</style>

layouts/default.vue

@@ -11,6 +11,7 @@
     <main class="app-layout-main">
       <NuxtPage />
     </main>
+    <Footer />
   </div>
 </template>
 
@@ -27,7 +28,7 @@ const { isConnectingWallet } = storeToRefs(useOnboardStore());
   @apply grid;
   min-height: 100vh;
   min-height: 100dvh;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto 1fr max-content;
 
   .app-layout-main {
     @apply flex min-h-0 w-full min-w-0 max-w-[700px] flex-col justify-self-center p-2 md:px-0 md:py-4;

pages/assets.vue

@@ -182,6 +182,22 @@ const depositMethods = computed(() => {
       },
     });
   }
+
+  const isMainnet = eraNetwork.value.l1Network?.id === 1;
+  const isTestnet = eraNetwork.value.l1Network && eraNetwork.value.l1Network.id !== 1;
+  if (isTestnet && eraNetwork.value.displaySettings?.showPartnerLinks) {
+    methods.push({
+      props: {
+        iconUrl: "/img/faucet.svg",
+        label: "Faucet",
+        description: "Receive testnet funds",
+        as: "a",
+        href: "https://docs.zksync.io/build/tooling/network-faucets.html",
+        target: "_blank",
+        icon: ArrowTopRightOnSquareIcon,
+      },
+    });
+  }
   methods.push({
     props: {
       label: "View your address",
@@ -193,7 +209,7 @@ const depositMethods = computed(() => {
     },
     icon: QrCodeIcon,
   });
-  if (eraNetwork.value.displaySettings?.showPartnerLinks) {
+  if (isMainnet && eraNetwork.value.displaySettings?.showPartnerLinks) {
     methods.push({
       props: {
         label: "Top-up with cash",

pages/receive-methods.vue

@@ -25,7 +25,18 @@
           :to="{ name: 'index', query: $route.query }"
         />
       </CommonCardWithLineButtons>
-      <CommonCardWithLineButtons v-if="eraNetwork.displaySettings?.showPartnerLinks">
+      <CommonCardWithLineButtons v-if="isTestnet">
+        <DestinationItem
+          label="Faucet"
+          description="Receive testnet funds"
+          icon-url="/img/faucet.svg"
+          as="a"
+          href="https://docs.zksync.io/build/tooling/network-faucets.html"
+          target="_blank"
+          :icon="ArrowTopRightOnSquareIcon"
+        />
+      </CommonCardWithLineButtons>
+      <CommonCardWithLineButtons v-if="isMainnet && eraNetwork.displaySettings?.showPartnerLinks">
         <DestinationItem
           label="Top-up with cash"
           description="Buy tokens using a card or another method for fiat"
@@ -41,7 +52,7 @@
           </template>
         </DestinationItem>
       </CommonCardWithLineButtons>
-      <CommonCardWithLineButtons v-if="eraNetwork.displaySettings?.showPartnerLinks">
+      <CommonCardWithLineButtons v-if="isMainnet && eraNetwork.displaySettings?.showPartnerLinks">
         <DestinationItem
           label="Bridge from other networks"
           description="Explore ecosystem of third party bridges"
@@ -62,6 +73,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import { ArrowsUpDownIcon, ArrowTopRightOnSquareIcon, BanknotesIcon, QrCodeIcon } from "@heroicons/vue/24/outline";
 import { storeToRefs } from "pinia";
 
@@ -70,6 +83,8 @@ import { useZkSyncProviderStore } from "@/store/zksync/provider";
 
 const { destinations } = storeToRefs(useDestinationsStore());
 const { eraNetwork } = storeToRefs(useZkSyncProviderStore());
+const isMainnet = computed(() => eraNetwork.value.l1Network?.id === 1);
+const isTestnet = computed(() => eraNetwork.value.l1Network && eraNetwork.value.l1Network.id !== 1);
 </script>
 
 <style lang="scss" scoped></style>

store/onboard.ts

@@ -170,7 +170,7 @@ export const useOnboardStore = defineStore("onboard", () => {
   });
   const switchNetworkById = async (chainId: number, networkName?: string) => {
     try {
-      await switchWalletNetwork({ chainId });
+      return await switchWalletNetwork({ chainId });
     } catch (err) {
       if (err instanceof Error && err.message.includes("does not support programmatic chain switching")) {
         throw new Error(`Please switch network manually to "${networkName}" in your ${walletName.value} wallet`);
@@ -185,12 +185,12 @@ export const useOnboardStore = defineStore("onboard", () => {
   } = usePromise(
     async () => {
       if (!l1Network.value) throw new Error(`L1 network is not available on ${selectedNetwork.value.name}`);
-      await switchNetworkById(l1Network.value.id);
+      return await switchNetworkById(l1Network.value.id);
     },
     { cache: false }
   );
   const setCorrectNetwork = async () => {
-    await switchNetwork().catch(() => undefined);
+    return await switchNetwork().catch(() => undefined);
   };
 
   const { subscribe: subscribeOnAccountChange, notify: notifyOnAccountChange } = useObservable<string | undefined>();

store/zksync/wallet.ts

@@ -156,12 +156,12 @@ export const useZkSyncWalletStore = defineStore("zkSyncWallet", () => {
     execute: switchNetwork,
   } = usePromise(
     async () => {
-      await onboardStore.switchNetworkById(eraNetwork.value.id, eraNetwork.value.name);
+      return await onboardStore.switchNetworkById(eraNetwork.value.id, eraNetwork.value.name);
     },
     { cache: false }
   );
   const setCorrectNetwork = async () => {
-    await switchNetwork().catch(() => undefined);
+    return await switchNetwork().catch(() => undefined);
   };
 
   const { execute: walletAddressValidate, reload: reloadWalletAddressValidation } = usePromise(async () => {

views/transactions/Deposit.vue

@@ -129,6 +129,7 @@
               Insufficient <span class="font-medium">{{ feeToken?.symbol }}</span> balance on
               <span class="font-medium">{{ destinations.ethereum.label }}</span> to cover the fee
             </p>
+            <NuxtLink :to="{ name: 'receive-methods' }" class="alert-link">Receive funds</NuxtLink>
           </CommonAlert>
         </transition>
         <transition v-bind="TransitionAlertScaleInOutTransition">
@@ -151,6 +152,7 @@
               >
               on {{ eraNetwork.l1Network?.name ?? "L1" }} for deposit.
             </p>
+            <NuxtLink :to="{ name: 'receive-methods' }" class="alert-link">Receive funds</NuxtLink>
           </CommonAlert>
         </transition>
         <CommonErrorBlock v-if="allowanceRequestError" class="mt-2" @try-again="requestAllowance">

views/transactions/Transfer.vue

@@ -156,6 +156,7 @@
               Insufficient <span class="font-medium">{{ feeToken?.symbol }}</span> balance on
               {{ destinations.era.label }} to cover the fee
             </p>
+            <NuxtLink :to="{ name: 'receive-methods' }" class="alert-link">Receive funds</NuxtLink>
           </CommonAlert>
         </transition>
 

views/transactions/TransferSubmitted.vue

@@ -35,6 +35,7 @@
       :transaction-hash="transaction.transactionHash"
       :token="transaction.token"
       :completed="transaction.info.completed"
+      :expected-complete-timestamp="transaction.info.expectedCompleteTimestamp"
     />
 
     <CommonButton as="RouterLink" :to="{ name: 'assets' }" class="mt-block-gap" variant="primary">