fix: update all packages, change routes and some styles

.eslintignore

@@ -0,0 +1,10 @@
+node_modules
+*.log*
+.idea
+.nuxt
+.nitro
+.cache
+.output
+dist
+tests
+tailwind.config.js

.eslintrc.cjs

@@ -1,3 +1,24 @@
 module.exports = {
-  extends: ["@matterlabs/eslint-config-vue"],
+  root: true,
+  extends: ["@nuxtjs/eslint-config-typescript", "@vue/eslint-config-prettier"],
+  rules: {
+    semi: ["error", "always"], // Require semicolons
+    quotes: ["error", "double"], // Require double quotes
+
+    "import/order": [
+      "error",
+      {
+        groups: [["builtin", "external"], ["internal"], ["sibling", "parent"], "index", "object", "type"],
+        "newlines-between": "always",
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+
+    "vue/multi-word-component-names": "off", // Allow multi-word component names
+    "vue/require-default-prop": "off", // Allow props without default values
+    "vue/no-multiple-template-root": "off", // Allow multiple root elements in templates
+  },
 };

.github/workflows/feature.yml

@@ -40,11 +40,6 @@ jobs:
         run: |
           npm run generate
 
-      - name: Reorganize Files
-        run: |
-          mkdir -p dist/bridge
-          mv dist/_nuxt dist/bridge/_nuxt
-
       - name: Deploy
         uses: matter-labs/action-hosting-deploy@main
         id: deploy

.github/workflows/production.yml

@@ -41,11 +41,6 @@ jobs:
       - name: Build
         run: |
           npm run generate
-
-      - name: Reorganize Files
-        run: |
-          mkdir -p dist/bridge
-          mv dist/_nuxt dist/bridge/_nuxt
 
       - name: Deploy to Production
         uses: matter-labs/action-hosting-deploy@main

.github/workflows/release.yml

@@ -73,11 +73,6 @@ jobs:
         run: |
           npm run generate
 
-      - name: Reorganize Files
-        run: |
-          mkdir -p dist/bridge
-          mv dist/_nuxt dist/bridge/_nuxt
-
       - name: Deploy
         uses: matter-labs/action-hosting-deploy@main
         id: deploy

README.md

@@ -13,7 +13,6 @@
 ## 🎉 Try it out!
 
 - 🌐 Dive in now at [portal.zksync.io](https://portal.zksync.io/).
-- 🌉 Also, explore the zkSync Era Bridge at [bridge.zksync.io](https://bridge.zksync.io).
 
 ---
 

app.vue

@@ -5,12 +5,6 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
-import { useRoute } from "vue-router";
-
-import { useZkSyncWithdrawalsStore } from "@/store/zksync/withdrawals";
-import { trackPage } from "@/utils/analytics";
-
 useZkSyncWithdrawalsStore().updateWithdrawalsIfPossible(); // init store to update withdrawals
 
 const route = useRoute();

components/BridgeFromEthereumButton.vue

@@ -7,17 +7,17 @@
     <DestinationItem
       :icon-url="destinations.ethereum.iconUrl"
       as="RouterLink"
-      :to="{ name: 'index' }"
+      :to="{ name: 'bridge' }"
       variant="primary"
     >
       <template #label>
         <span class="text-white">Bridge from {{ eraNetwork.l1Network?.name }}</span>
       </template>
       <template #underline>
-        <span class="text-white" v-if="!displayTotalTokens || !balance">
+        <span v-if="!displayTotalTokens || !balance" class="text-white">
           Receive tokens from your {{ eraNetwork.l1Network?.name }} account
         </span>
-        <span class="text-white" v-else>
+        <span v-else class="text-white">
           You have {{ balance.length }} token{{ balance.length > 1 ? "s" : "" }} worth
           {{ formatPricePretty(totalTokenBalance) }} that you can receive from {{ eraNetwork.l1Network?.name }}
         </span>
@@ -27,16 +27,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted } from "vue";
-
-import { storeToRefs } from "pinia";
-
-import { useDestinationsStore } from "@/store/destinations";
-import { useZkSyncEthereumBalanceStore } from "@/store/zksync/ethereumBalance";
-import { useZkSyncProviderStore } from "@/store/zksync/provider";
-import { formatPricePretty } from "@/utils/formatters";
-import { calculateTotalTokensPrice } from "@/utils/helpers";
-
 const zkSyncEthereumBalanceStore = useZkSyncEthereumBalanceStore();
 const { destinations } = storeToRefs(useDestinationsStore());
 const { eraNetwork } = storeToRefs(useZkSyncProviderStore());

components/ConnectWalletBlock.vue

@@ -10,7 +10,5 @@
 </template>
 
 <script lang="ts" setup>
-import { useOnboardStore } from "@/store/onboard";
-
 const onboardStore = useOnboardStore();
 </script>

components/address/AddressCard.vue

@@ -9,21 +9,19 @@
     </template>
     <template #default>
       <CommonButtonLineBodyInfo class="text-left">
-        <template #label v-if="name">{{ name }}</template>
+        <template v-if="name" #label>{{ name }}</template>
         <template #underline>
           <span class="block break-all" :title="address">{{ address }}</span>
         </template>
       </CommonButtonLineBodyInfo>
     </template>
-    <template #right v-if="$slots.right">
+    <template v-if="$slots.right" #right>
       <slot name="right" />
     </template>
   </CommonButtonLineWithImg>
 </template>
 
 <script lang="ts" setup>
-import type { Component, PropType } from "vue";
-
 defineProps({
   as: {
     type: [String, Object] as PropType<string | Component>,

components/animations/TransactionProgress.vue

@@ -33,8 +33,6 @@
 <script lang="ts" setup>
 import { CheckIcon, XMarkIcon } from "@heroicons/vue/24/outline";
 
-import type { PropType } from "vue";
-
 export type AnimationState = "playing" | "stopped-in-the-end" | "failed" | "completed";
 
 defineProps({

components/common/Alert.vue

@@ -10,9 +10,6 @@
 </template>
 
 <script lang="ts" setup>
-import type { Component } from "vue";
-import type { PropType } from "vue";
-
 defineProps({
   variant: {
     type: String as PropType<"info" | "neutral" | "success" | "warning" | "error">,

components/common/CardWithLineButtons.vue

@@ -1,8 +1,8 @@
 <template>
   <CommonContentBlock>
-    <div class="-mx-block-padding-1/4 -my-block-padding-1/2 sm:-mx-block-padding-1/2">
+    <CommonLineButtonsGroup>
       <slot />
-    </div>
+    </CommonLineButtonsGroup>
   </CommonContentBlock>
 </template>
 

components/common/Checkbox.vue

@@ -5,7 +5,7 @@
     @keyup.enter="checked = !checked"
   >
     <div class="relative">
-      <input type="checkbox" v-model="checked" class="sr-only" tabindex="-1" />
+      <input v-model="checked" type="checkbox" class="sr-only" tabindex="-1" />
       <div
         class="flex h-6 w-6 items-center justify-center rounded-md border-2"
         :class="checked ? 'border-primary-400 bg-primary-400' : 'border-neutral-300 bg-white'"
@@ -26,8 +26,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-
 const props = defineProps({
   modelValue: {
     type: Boolean,

components/common/CheckboxWithText.vue

@@ -1,7 +1,7 @@
 <template>
   <label class="checkbox-with-text" tabindex="0" @keyup.enter="checked = !checked">
     <div class="relative">
-      <input type="checkbox" v-model="checked" class="sr-only" tabindex="-1" />
+      <input v-model="checked" type="checkbox" class="sr-only" tabindex="-1" />
       <div class="checkbox-input" :class="{ checked }">
         <svg v-if="checked" class="checkbox-icon" viewBox="0 0 20 20" fill="currentColor">
           <path
@@ -19,8 +19,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-
 const props = defineProps({
   modelValue: {
     type: Boolean,

components/common/CircleLoader.vue

@@ -15,8 +15,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, watchEffect } from "vue";
-
 const props = defineProps({
   duration: {
     type: Number,

components/common/ContentBlock.vue

@@ -1,12 +1,10 @@
 <template>
-  <component class="content-block-container" :class="`variant-${variant}`" :is="as">
+  <component :is="as" class="content-block-container" :class="`variant-${variant}`">
     <slot />
   </component>
 </template>
 
 <script lang="ts" setup>
-import type { Component, PropType } from "vue";
-
 defineProps({
   as: {
     type: [String, Object] as PropType<string | Component>,

components/common/ImageLoader.vue

@@ -16,8 +16,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-
 import { useImage } from "@vueuse/core";
 
 const props = defineProps({

components/common/LineButtonsGroup.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="line-buttons-group" :class="{ 'has-margin-x': marginX, 'has-margin-y': marginY, 'has-gap': gap }">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  marginX: {
+    type: Boolean,
+    default: true,
+  },
+  marginY: {
+    type: Boolean,
+    default: true,
+  },
+  gap: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.line-buttons-group {
+  &.has-margin-x {
+    @apply -mx-block-padding-1/4 sm:-mx-block-padding-1/2;
+  }
+  &.has-margin-y {
+    @apply -my-block-padding-1/2;
+  }
+  &.has-gap {
+    @apply space-y-block-padding-1/2;
+  }
+}
+</style>

components/common/Modal.vue

@@ -36,7 +36,7 @@
             >
               <div class="modal-header" :class="{ 'mb-4': title }">
                 <DialogTitle v-if="title" as="div" class="modal-title">{{ title }}</DialogTitle>
-                <button v-if="closable" @click="closeModal" data-testid="close-button">
+                <button v-if="closable" data-testid="close-button" @click="closeModal">
                   <XMarkIcon class="modal-close-icon" aria-hidden="true" />
                 </button>
               </div>
@@ -50,8 +50,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-
 import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from "@headlessui/vue";
 import { XMarkIcon } from "@heroicons/vue/24/outline";
 

components/common/QrAddressInput.vue

@@ -16,12 +16,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
-
 import { isAddress } from "ethers/lib/utils";
 
-import { checksumAddress } from "@/utils/formatters";
-
 defineProps({
   id: {
     type: String,

components/common/SmallInput.vue

@@ -22,16 +22,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
-
 import { XMarkIcon } from "@heroicons/vue/24/outline";
 import { useFocus } from "@vueuse/core";
 
-import type { Component, PropType } from "vue";
-
-import { isMobile } from "@/utils/helpers";
-import { TransitionOpacity } from "@/utils/transitions";
-
 const props = defineProps({
   as: {
     type: [String, Object] as PropType<string | Component>,

components/common/Spinner.vue

@@ -19,8 +19,6 @@
 </template>
 
 <script lang="ts" setup>
-import type { PropType } from "vue";
-
 defineProps({
   variant: String as PropType<"default" | "text-color" | "dark">,
 });

components/common/Timer.vue

@@ -5,8 +5,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from "vue";
-
 const props = defineProps({
   futureDate: {
     type: String,
@@ -35,7 +33,7 @@ watch(
   { immediate: true }
 );
 
-let intervalId: ReturnType<typeof setInterval> | undefined = undefined;
+let intervalId: ReturnType<typeof setInterval> | undefined;
 
 const formatTimeDiff = (diff: number): string => {
   const hours = Math.floor(diff / (1000 * 60 * 60));
@@ -64,7 +62,6 @@ const updateTimer = () => {
 
   if (diff.value === 0) {
     clearInterval(intervalId);
-    return;
   }
 };
 

components/common/TotalBalance.vue

@@ -10,12 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
-
 import type { TokenAmount } from "@/types";
-import type { PropType } from "vue";
-
-import { calculateTotalTokensPrice } from "@/utils/helpers";
 
 const props = defineProps({
   balance: {