fix: bump dependencies version (#133)

.github/workflows/feature.yml

@@ -17,12 +17,11 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'npm'
 
       - name: Install dependencies
         run: |
-          npm set-script prepare ""
           npm ci --force
 
       - name: Lint

.github/workflows/release.yml

@@ -20,12 +20,11 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: '18'
           cache: 'npm'
 
       - name: Install dependencies
         run: |
-          npm set-script prepare ""
           npm ci --force
 
       - name: Lint

components/bridge/AccountButton.vue

@@ -93,7 +93,7 @@ const logout = () => {
 
 <style lang="scss" scoped>
 .account-button {
-  @apply flex w-full items-center rounded-3xl bg-transparent bg-gray py-1 px-2 transition-colors hover:bg-gray-200 dark:bg-neutral-900 dark:hover:bg-neutral-800;
+  @apply flex w-full items-center rounded-3xl bg-gray bg-transparent px-2 py-1 transition-colors hover:bg-gray-200 dark:bg-neutral-900 dark:hover:bg-neutral-800;
 
   .account-icon {
     @apply -ml-1 aspect-square h-8 w-8;

components/common/Checkbox.vue

@@ -7,8 +7,8 @@
     <div class="relative">
       <input type="checkbox" v-model="checked" class="sr-only" tabindex="-1" />
       <div
-        class="flex h-6 w-6 items-center justify-center rounded-md border-2 border-gray-300 bg-white"
-        v-bind:class="{ 'bg-primary-600 border-primary-600': checked }"
+        class="flex h-6 w-6 items-center justify-center rounded-md border-2"
+        :class="checked ? 'border-primary-600 bg-primary-600' : 'border-gray-300 bg-white'"
       >
         <svg v-if="checked" class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor">
           <path

components/common/CircleLoader.vue

@@ -98,7 +98,7 @@ onBeforeUnmount(() => {
     }
   }
   .inset {
-    @apply absolute top-1/2 left-1/2 aspect-square w-9/12 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray dark:bg-neutral-900;
+    @apply absolute left-1/2 top-1/2 aspect-square w-9/12 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray dark:bg-neutral-900;
   }
 
   @keyframes animateCircle {

components/common/EmptyBlock.vue

@@ -8,6 +8,6 @@
 
 <style lang="scss" scoped>
 .empty-block {
-  @apply break-words rounded-3xl border border-dashed py-4 px-3.5 text-center leading-normal text-gray-500 wrap-balance dark:border-neutral-500 dark:text-neutral-300;
+  @apply break-words rounded-3xl border border-dashed px-3.5 py-4 text-center leading-normal text-gray-500 wrap-balance dark:border-neutral-500 dark:text-neutral-300;
 }
 </style>

components/common/ErrorBlock.vue

@@ -31,7 +31,7 @@ const emit = defineEmits<{
     @apply mr-3 block h-7 w-7;
   }
   .error-block-text-container {
-    @apply whitespace-pre-line break-words line-clamp-6;
+    @apply line-clamp-6 whitespace-pre-line break-words;
     word-break: break-word;
   }
 }

components/common/SmallInput.vue

@@ -76,7 +76,7 @@ const inputted = computed({
 
 <style lang="scss">
 .small-input-container {
-  @apply flex h-12 w-full items-center rounded-3xl bg-gray-input py-3 px-4 transition-colors dark:bg-neutral-900;
+  @apply flex h-12 w-full items-center rounded-3xl bg-gray-input px-4 py-3 transition-colors dark:bg-neutral-900;
   &.focused,
   &:hover {
     @apply bg-gray-input-focus dark:bg-neutral-800;

components/common/Tabs.vue

@@ -80,38 +80,38 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .badge-tabs-container {
   @apply relative isolate w-full;
 
   &.active-tab-bg-inited {
-    .badge-tab.active :slotted(*) {
+    .badge-tab.active > * {
       @apply bg-transparent;
     }
     .active-tab-bg {
       @apply bg-white transition-all dark:bg-neutral-800;
     }
   }
   &:not(.active-tab-bg-inited) {
-    .badge-tab.active :slotted(*) {
+    .badge-tab.active > * {
       @apply bg-white dark:bg-neutral-800;
     }
   }
 
   .badge-tabs-list {
     @apply grid w-full grid-flow-col-dense grid-cols-[max-content] gap-2;
   }
-  .badge-tab :slotted(*),
+  .badge-tab > *,
   .active-tab-bg {
     @apply rounded-2xl;
   }
   .badge-tab {
     @apply w-max;
-    :slotted(*) {
-      @apply block w-max cursor-pointer whitespace-nowrap py-1 px-4 font-medium leading-loose text-gray-secondary transition-colors dark:text-neutral-400;
+    & > * {
+      @apply block w-max cursor-pointer whitespace-nowrap px-4 py-1 font-medium leading-loose text-gray-secondary transition-colors dark:text-neutral-400;
     }
-    :slotted(*):hover,
-    &.active :slotted(*) {
+    & > * :hover,
+    &.active > * {
       @apply text-black dark:text-white;
     }
   }

components/common/button/LineWithImg.vue

@@ -45,7 +45,7 @@ defineProps({
     @apply w-max;
   }
   .line-button-with-img-icon {
-    @apply mr-2 ml-1 h-5 w-5 flex-none text-gray-secondary dark:text-neutral-400;
+    @apply ml-1 mr-2 h-5 w-5 flex-none text-gray-secondary dark:text-neutral-400;
   }
   .line-button-with-img-icon-loading {
     @apply mx-1 h-7 w-7 flex-none rounded-full;

components/header/DropdownPopover.vue

@@ -53,7 +53,7 @@ function toggleMenu(isOpened: boolean, open: boolean) {
     @apply text-base outline-none ring-0;
   }
   .popover-panel {
-    @apply absolute top-[4.5rem] left-1/2 z-20 w-[700px] -translate-x-1/2 transform cursor-default rounded-lg bg-gray/10 text-left shadow-lg backdrop-blur-xl dark:bg-neutral-950/60;
+    @apply absolute left-1/2 top-[4.5rem] z-20 w-[700px] -translate-x-1/2 transform cursor-default rounded-lg bg-gray/10 text-left shadow-lg backdrop-blur-xl dark:bg-neutral-950/60;
 
     > * {
       @apply block px-6 py-4 text-base;

components/sidebar/AccountAvatarName.vue

@@ -43,7 +43,7 @@ const { copy, copied } = useCopy(accountAddress, 700);
 
 <style lang="scss" scoped>
 .account-button {
-  @apply flex w-full items-center rounded-xl bg-transparent py-3 px-3;
+  @apply flex w-full items-center rounded-xl bg-transparent px-3 py-3;
   &.is-button {
     .copy-button {
       @apply hidden;

components/sidebar/AccountButton.vue

@@ -27,7 +27,7 @@
               </div>
               <div class="flex items-center justify-between">
                 <span>{{ selectedNetwork.shortName }}</span>
-                <ChevronDownIcon class="mr-1 ml-2 h-4 w-4 transition-transform" aria-hidden="true" />
+                <ChevronDownIcon class="ml-2 mr-1 h-4 w-4 transition-transform" aria-hidden="true" />
               </div>
             </button>
           </MenuItem>
@@ -99,7 +99,7 @@ const viewOnExplorerModalOpened = ref(false);
     @apply transition-colors hover:bg-gray-200 dark:hover:bg-neutral-900;
   }
   .menu-panel {
-    @apply absolute left-0 bottom-0 z-10 grid h-max w-56 rounded-lg bg-white shadow-lg ring-1 ring-gray-900/5 focus:outline-none dark:bg-neutral-900 md:-left-px md:-top-px md:p-px;
+    @apply absolute bottom-0 left-0 z-10 grid h-max w-56 rounded-lg bg-white shadow-lg ring-1 ring-gray-900/5 focus:outline-none dark:bg-neutral-900 md:-left-px md:-top-px md:p-px;
     grid-template-areas:
       "menu-options"
       "account-button";

components/sidebar/Sidebar.vue

@@ -74,7 +74,7 @@ const networkChangeModalOpened = ref(false);
   grid-area: menu / menu / menu / menu;
 
   @media screen and (min-width: 720px) {
-    @apply top-0 bottom-auto max-h-[calc(100vh_-_72px)] px-4 py-8 lg:max-h-[calc(100vh_-_72px_-_12px)];
+    @apply bottom-auto top-0 max-h-[calc(100vh_-_72px)] px-4 py-8 lg:max-h-[calc(100vh_-_72px_-_12px)];
   }
   @media screen and (min-width: 1024px) {
     @apply px-6;
@@ -87,7 +87,7 @@ const networkChangeModalOpened = ref(false);
       @apply flex justify-around space-y-1 pr-3 md:mt-6 md:flex-col md:pr-0;
     }
     .navbar-link {
-      @apply flex items-center rounded-2xl bg-transparent text-gray-secondary no-underline transition-colors md:w-full md:py-3 md:px-4 md:hover:bg-gray-200/60 dark:md:hover:bg-neutral-800;
+      @apply flex items-center rounded-2xl bg-transparent text-gray-secondary no-underline transition-colors md:w-full md:px-4 md:py-3 md:hover:bg-gray-200/60 dark:md:hover:bg-neutral-800;
       @apply dark:text-white;
       &.router-link-exact-active {
         @apply bg-white text-primary-400 dark:bg-neutral-900 dark:text-white;
@@ -100,7 +100,7 @@ const networkChangeModalOpened = ref(false);
         @apply h-6 w-6 text-inherit;
       }
       .navbar-link-label {
-        @apply mr-auto ml-4 hidden text-left font-medium leading-4 tracking-[-0.1px] xl:block;
+        @apply ml-4 mr-auto hidden text-left font-medium leading-4 tracking-[-0.1px] xl:block;
       }
     }
     .navbar-bottom {

components/transaction/AllowanceModal.vue

@@ -77,7 +77,7 @@
         <TransactionLineItem
           :icon="LockOpenIcon"
           :explorer-url="l1BlockExplorerUrl"
-          :transaction-hash="transactionHash"
+          :transaction-hash="(transactionHash as string)"
         >
           <template #top-left>Allowance</template>
           <template #top-right>
@@ -127,7 +127,7 @@ import { ArrowUpRightIcon, InformationCircleIcon, LockOpenIcon } from "@heroicon
 import { getPublicClient } from "@wagmi/core";
 import { storeToRefs } from "pinia";
 
-import TokenAmount from "@/components/transaction/transactionLineItem/TokenAmount.vue";
+import TokenAmount from "@/components/transaction/lineItem/TokenAmount.vue";
 
 import usePromise from "@/composables/usePromise";
 

components/transaction/FeeDetails.vue

@@ -97,6 +97,6 @@ const totalPrice = computed(() => {
 
 <style lang="scss" scoped>
 .fee-details-container {
-  @apply flex items-center justify-between rounded-lg py-1.5 px-4 text-sm text-gray-secondary dark:text-neutral-400;
+  @apply flex items-center justify-between rounded-lg px-4 py-1.5 text-sm text-gray-secondary dark:text-neutral-400;
 }
 </style>

components/transaction/TransactionItemIcon.vue

@@ -22,7 +22,7 @@ defineProps({
   @apply pointer-events-none relative z-10 -my-2.5 h-max w-full;
 
   .transaction-item-icon-bg {
-    @apply absolute inset-0 -z-[1] my-auto mx-auto h-4 w-12 bg-white dark:bg-neutral-900;
+    @apply absolute inset-0 -z-[1] mx-auto my-auto h-4 w-12 bg-white dark:bg-neutral-900;
   }
   .transaction-item-icon {
     @apply mx-auto h-9 w-9 rounded-lg bg-gray p-2 dark:bg-neutral-800 dark:shadow-[0_0_8px_1px_rgba(0,0,0,0.2)];

components/transaction/zksync/era/EraTransferLineItem.vue

@@ -28,8 +28,8 @@ import {
 import { BigNumber } from "ethers";
 import { storeToRefs } from "pinia";
 
-import TokenAmount from "@/components/transaction/transactionLineItem/TokenAmount.vue";
-import TotalPrice from "@/components/transaction/transactionLineItem/TotalPrice.vue";
+import TokenAmount from "@/components/transaction/lineItem/TokenAmount.vue";
+import TotalPrice from "@/components/transaction/lineItem/TotalPrice.vue";
 
 import type { EraTransfer } from "@/utils/zksync/era/mappers";
 import type { Component, PropType } from "vue";

components/transaction/zksync/era/deposit/ConfirmTransactionModal.vue

@@ -81,7 +81,7 @@
         <TransactionLineItem
           :icon="transactionReceiptIcon"
           :explorer-url="l1BlockExplorerUrl"
-          :transaction-hash="ethTransactionHash"
+          :transaction-hash="(ethTransactionHash as string)"
         >
           <template #top-left>Deposit</template>
           <template #top-right>
@@ -169,8 +169,8 @@ import { BigNumber } from "ethers";
 import { Logger } from "ethers/lib/utils";
 import { storeToRefs } from "pinia";
 
-import TokenAmount from "@/components/transaction/transactionLineItem/TokenAmount.vue";
-import TotalPrice from "@/components/transaction/transactionLineItem/TotalPrice.vue";
+import TokenAmount from "@/components/transaction/lineItem/TokenAmount.vue";
+import TotalPrice from "@/components/transaction/lineItem/TotalPrice.vue";
 
 import useNetworks from "@/composables/useNetworks";
 import useTransaction from "@/composables/zksync/era/deposit/useTransaction";

components/transaction/zksync/lite/ConfirmTransactionModal.vue

@@ -63,7 +63,7 @@
           </div>
           <a
             v-if="destination.key === 'ethereum'"
-            class="link mx-auto mt-2 -mb-1 flex items-center justify-center text-center text-sm"
+            class="link mx-auto -mb-1 mt-2 flex items-center justify-center text-center text-sm"
             :href="LITE_WITHDRAWAL_TIMES"
             target="_blank"
           >

components/transaction/zksync/lite/TransactionSuccessfulModal.vue

@@ -1,6 +1,6 @@
 <template>
   <CommonModal v-bind="$attrs" :closable="false" class="transaction-successful-modal" title="">
-    <Vue3Lottie class="mx-auto -mt-14 -mb-16 w-72" :animation-data="SuccessConfetti" :loop="false" />
+    <Vue3Lottie class="mx-auto -mb-16 -mt-14 w-72" :animation-data="SuccessConfetti" :loop="false" />
 
     <div class="flex h-full flex-col overflow-auto">
       <div class="h2 text-center sm:h1">Transaction completed</div>

components/transaction/zksync/lite/ZkSyncLiteTransactionLineItem.vue

@@ -49,9 +49,9 @@ import {
 import { BigNumber } from "ethers";
 import { storeToRefs } from "pinia";
 
-import TokenAmount from "@/components/transaction/transactionLineItem/TokenAmount.vue";
-import TokenNft from "@/components/transaction/transactionLineItem/TokenNft.vue";
-import TotalPrice from "@/components/transaction/transactionLineItem/TotalPrice.vue";
+import TokenAmount from "@/components/transaction/lineItem/TokenAmount.vue";
+import TokenNft from "@/components/transaction/lineItem/TokenNft.vue";
+import TotalPrice from "@/components/transaction/lineItem/TotalPrice.vue";
 
 import type { ZkSyncLiteTransaction } from "@/utils/zksync/lite/mappers";
 import type { Component, PropType } from "vue";

components/transaction/zksync/lite/deposit/ConfirmTransactionModal.vue

@@ -77,7 +77,7 @@
         <TransactionLineItem
           :icon="transactionReceiptIcon"
           :explorer-url="l1BlockExplorerUrl"
-          :transaction-hash="ethTransactionHash"
+          :transaction-hash="(ethTransactionHash as string)"
         >
           <template #top-left>Deposit</template>
           <template #top-right>
@@ -140,8 +140,8 @@ import { BigNumber } from "ethers";
 import { Logger } from "ethers/lib/utils";
 import { storeToRefs } from "pinia";
 
-import TokenAmount from "@/components/transaction/transactionLineItem/TokenAmount.vue";
-import TotalPrice from "@/components/transaction/transactionLineItem/TotalPrice.vue";
+import TokenAmount from "@/components/transaction/lineItem/TokenAmount.vue";
+import TotalPrice from "@/components/transaction/lineItem/TotalPrice.vue";
 
 import useTransaction from "@/composables/zksync/lite/deposit/useTransaction";
 

composables/zksync/era/useFaucet.ts

@@ -1,7 +1,7 @@
 import { computed, ref } from "vue";
 
 import { useStorage } from "@vueuse/core";
-import { $fetch, FetchError } from "ohmyfetch";
+import { $fetch, FetchError } from "ofetch";
 
 import type { EraNetwork } from "@/data/networks";
 import type { ComputedRef } from "vue";