fix: requested improvements

components/common/Modal.vue

@@ -121,7 +121,7 @@ const afterLeave = () => {
     @apply fixed inset-0 z-10 overflow-y-auto;
   }
   .modal-card-container {
-    @apply flex h-full items-end justify-center p-3 pb-0 text-center sm:items-center sm:p-[72px];
+    @apply flex h-full items-end justify-center text-center sm:items-center sm:p-[72px];
 
     .modal-card {
       @apply relative max-h-[600px] w-full max-w-[600px] transform overflow-hidden rounded-3xl rounded-b-none bg-neutral-50 p-block-padding-1/2 text-left shadow-xl transition-all dark:bg-neutral-900 sm:rounded-b-3xl sm:p-block-padding;

components/common/SmallInput.vue

@@ -94,7 +94,7 @@ const inputted = computed({
     }
   }
   .small-input-field {
-    @apply mx-2 w-full truncate border-none bg-transparent outline-none placeholder:text-gray-secondary dark:placeholder:text-neutral-400;
+    @apply mx-2 w-full truncate rounded-none border-none bg-transparent outline-none placeholder:text-gray-secondary dark:placeholder:text-neutral-400;
   }
   .small-input-clear-button {
     @apply block aspect-square h-6 w-6 self-end rounded-full bg-gray-300 p-1 transition-all dark:bg-neutral-800;

components/common/input/ErrorMessage.vue

@@ -8,6 +8,6 @@
 
 <style lang="scss" scoped>
 .input-error-message {
-  @apply -mb-6 mt-1 text-sm text-error-300 transition;
+  @apply -mb-6 mt-1 text-sm text-error-300;
 }
 </style>

components/common/input/InputLine.vue

@@ -28,7 +28,7 @@ const inputted = computed({
 
 <style lang="scss" scoped>
 .input-line {
-  @apply block w-full overflow-hidden border-b-2 bg-transparent leading-snug outline-none transition placeholder:text-neutral-300 dark:placeholder:text-neutral-700;
+  @apply block w-full overflow-hidden rounded-none border-b-2 bg-transparent leading-snug outline-none transition placeholder:text-neutral-300 dark:placeholder:text-neutral-700;
   @apply border-neutral-200 hover:border-neutral-300 focus:border-neutral-950;
   @apply dark:border-neutral-800 dark:hover:border-neutral-600 dark:focus:border-white;
   &.has-error {

components/common/input/Search.vue

@@ -82,7 +82,7 @@ const inputted = computed({
     @apply h-6 w-6 flex-shrink-0;
   }
   .search-input-field {
-    @apply w-full truncate border-none bg-transparent text-neutral-950 outline-none placeholder:text-neutral-700 dark:text-white dark:placeholder:text-neutral-400;
+    @apply w-full truncate rounded-none border-none bg-transparent text-neutral-950 outline-none placeholder:text-neutral-700 dark:text-white dark:placeholder:text-neutral-400;
   }
   .search-input-clear-button {
     @apply block aspect-square h-6 w-6 self-end rounded-full p-1 transition-all hover:text-neutral-950 hover:dark:text-white;

components/common/input/TransactionAddress.vue

@@ -5,7 +5,7 @@
         <div class="font-bold">{{ label }}</div>
         <slot name="dropdown" />
       </div>
-      <div v-if="defaultLabel" class="ml-auto text-right">
+      <div v-if="defaultLabel && isConnected" class="ml-auto text-right">
         <span class="font-bold">{{ inputVisible ? "To another account" : defaultLabel }}</span>
         <CommonButtonLabel variant="light" class="ml-1" @click="toggleCustomValue()">
           {{ inputVisible ? "Use my account" : "Change" }}
@@ -66,6 +66,7 @@ import { isAddress } from "viem";
 
 import useEns from "@/composables/useEnsName";
 
+import { useOnboardStore } from "@/store/onboard";
 import { usePreferencesStore } from "@/store/preferences";
 
 const props = defineProps({
@@ -92,6 +93,8 @@ const inputted = computed({
   set: (value: string) => emit("update:modelValue", value),
 });
 
+const { isConnected } = storeToRefs(useOnboardStore());
+
 const usingCustomValue = ref(false);
 const toggleCustomValue = () => {
   usingCustomValue.value = !usingCustomValue.value;

components/common/input/TransactionAmount.vue

@@ -33,26 +33,57 @@
           </template>
         </transition>
       </div>
-      <div class="mt-4 flex items-center gap-2">
-        <CommonInputLine
-          :has-error="!!amountError"
-          id="transaction-amount-input"
-          class="text-[40px]"
-          v-model.trim="inputted"
-          placeholder="0"
-          type="text"
-          maxlength="25"
-          spellcheck="false"
-          autocomplete="off"
-          autofocus
-        />
+      <div class="mt-4 flex gap-2">
+        <div class="w-full">
+          <CommonInputLine
+            :has-error="!!amountError"
+            id="transaction-amount-input"
+            class="text-[40px]"
+            v-model.trim="inputted"
+            placeholder="0"
+            type="text"
+            maxlength="25"
+            spellcheck="false"
+            autocomplete="off"
+            autofocus
+          />
+          <transition v-bind="TransitionOpacity()" mode="default">
+            <CommonInputErrorMessage v-if="amountError">
+              <template v-if="amountError === 'insufficient_balance' || maxDecimalAmount === '0'">
+                Insufficient balance
+              </template>
+              <template v-else-if="amountError === 'exceeds_balance' && !maxAmount">Amount exceeds balance</template>
+              <template v-else-if="amountError === 'exceeds_max_amount' || amountError === 'exceeds_balance'">
+                Max amount is
+                <button
+                  type="button"
+                  class="cursor-pointer font-medium underline underline-offset-2"
+                  @click.prevent="setMaxAmount()"
+                >
+                  {{ maxDecimalAmount }}
+                </button>
+              </template>
+              <template v-else-if="amountError === 'exceeds_decimals'">
+                Max decimal length for {{ selectedToken?.symbol }} is {{ selectedToken?.decimals }}
+              </template>
+            </CommonInputErrorMessage>
+            <CommonButtonLabel v-else-if="inputted" as="div" variant="light" class="-mb-6 mt-1 text-right text-sm">
+              {{ totalAmountPrice }}
+            </CommonButtonLabel>
+          </transition>
+        </div>
 
         <transition v-bind="TransitionOpacity(300)">
           <div v-if="approveRequired" v-tooltip="'Allowance approval required'">
-            <LockClosedIcon class="h-6 w-6 text-warning-400" aria-hidden="true" />
+            <LockClosedIcon class="mt-4 h-6 w-6 text-warning-400" aria-hidden="true" />
           </div>
         </transition>
-        <CommonButtonDropdown :toggled="selectTokenModalOpened" variant="light" @click="selectTokenModalOpened = true">
+        <CommonButtonDropdown
+          class="h-max"
+          :toggled="selectTokenModalOpened"
+          variant="light"
+          @click="selectTokenModalOpened = true"
+        >
           <template #left-icon>
             <CommonContentLoader v-if="loading" class="block h-full w-full rounded-full" />
             <TokenImage v-else-if="selectedToken" v-bind="selectedToken" />
@@ -61,29 +92,6 @@
           <span v-else-if="selectedToken">{{ selectedToken.symbol }}</span>
         </CommonButtonDropdown>
       </div>
-      <CommonInputErrorMessage>
-        <transition v-bind="TransitionOpacity()">
-          <span v-if="amountError">
-            <template v-if="amountError === 'insufficient_balance' || maxDecimalAmount === '0'">
-              Insufficient balance
-            </template>
-            <template v-else-if="amountError === 'exceeds_balance' && !maxAmount">Amount exceeds balance</template>
-            <template v-else-if="amountError === 'exceeds_max_amount' || amountError === 'exceeds_balance'">
-              Max amount is
-              <button
-                type="button"
-                class="cursor-pointer font-medium underline underline-offset-2"
-                @click.prevent="setMaxAmount()"
-              >
-                {{ maxDecimalAmount }}
-              </button>
-            </template>
-            <template v-else-if="amountError === 'exceeds_decimals'">
-              Max decimal length for {{ selectedToken?.symbol }} is {{ selectedToken?.decimals }}
-            </template>
-          </span>
-        </transition>
-      </CommonInputErrorMessage>
     </CommonContentBlock>
   </div>
 </template>
@@ -98,7 +106,7 @@ import type { Token, TokenAmount } from "@/types";
 import type { BigNumberish } from "ethers";
 import type { PropType } from "vue";
 
-import { decimalToBigNumber, parseTokenAmount, removeSmallAmountPretty } from "@/utils/formatters";
+import { decimalToBigNumber, formatTokenPrice, parseTokenAmount, removeSmallAmountPretty } from "@/utils/formatters";
 
 const props = defineProps({
   modelValue: {
@@ -174,12 +182,12 @@ const totalComputeAmount = computed(() => {
     return BigNumber.from("0");
   }
 });
-/* const totalAmountPrice = computed(() => {
+const totalAmountPrice = computed(() => {
   if (!selectedToken.value || !selectedToken.value.price) {
     return "";
   }
   return formatTokenPrice(totalComputeAmount.value, selectedToken.value.decimals, selectedToken.value.price);
-}); */
+});
 const maxDecimalAmount = computed(() => {
   // Full decimal amount
   if (!props.maxAmount || !selectedToken.value) {

components/header/Header.vue

@@ -40,7 +40,8 @@
         </div>
       </template>
       <CommonButton class="color-mode-button" @click="switchColorMode()">
-        <SunIcon class="h-6 w-6" aria-hidden="true" />
+        <SunIcon v-if="selectedColorMode === 'dark'" class="h-6 w-6" aria-hidden="true" />
+        <MoonIcon v-else class="h-6 w-6" aria-hidden="true" />
       </CommonButton>
       <CommonButton class="hamburger-icon" @click="mobileMainNavigationOpened = true">
         <Bars3Icon class="h-6 w-6" aria-hidden="true" />
@@ -52,7 +53,14 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 
-import { ArrowsRightLeftIcon, ArrowsUpDownIcon, Bars3Icon, SunIcon, WalletIcon } from "@heroicons/vue/24/outline";
+import {
+  ArrowsRightLeftIcon,
+  ArrowsUpDownIcon,
+  Bars3Icon,
+  MoonIcon,
+  SunIcon,
+  WalletIcon,
+} from "@heroicons/vue/24/outline";
 import { storeToRefs } from "pinia";
 
 import useColorMode from "@/composables/useColorMode";
@@ -68,7 +76,7 @@ const { isConnected } = storeToRefs(onboardStore);
 const mobileMainNavigationOpened = ref(false);
 const mobileAccountNavigationOpened = ref(false);
 
-const { switchColorMode } = useColorMode();
+const { selectedColorMode, switchColorMode } = useColorMode();
 </script>
 
 <style lang="scss" scoped>

components/header/MobileMainNavigation.vue

@@ -52,7 +52,8 @@
           >
             <template #image>
               <DestinationIconContainer>
-                <SunIcon aria-hidden="true" />
+                <SunIcon v-if="selectedColorMode === 'dark'" aria-hidden="true" />
+                <MoonIcon v-else aria-hidden="true" />
               </DestinationIconContainer>
             </template>
           </DestinationItem>
@@ -92,6 +93,7 @@ import {
   ArrowsUpDownIcon,
   CheckIcon,
   ChevronRightIcon,
+  MoonIcon,
   SunIcon,
   WalletIcon,
 } from "@heroicons/vue/24/outline";

components/transaction/TransactionProgress.vue

@@ -65,9 +65,9 @@
       class="mx-auto mt-block-gap w-max"
     >
       Explorer
-      <ArrowTopRightOnSquareIcon class="ml-2 h-6 w-6" aria-hidden="true" />
+      <ArrowTopRightOnSquareIcon class="-mr-1 ml-2 h-6 w-6" aria-hidden="true" />
     </CommonButton>
-    <div class="mt-block-padding-1/2 flex items-center justify-center">
+    <div class="mt-block-padding flex items-center justify-center">
       <span class="text-neutral-400">Value:</span>
       <span class="ml-1 flex items-center">
         {{ parseTokenAmount(token.amount, token.decimals) }}
@@ -126,7 +126,7 @@ const isSameAddressDifferentDestination = computed(
 
 <style lang="scss" scoped>
 .transaction-progress {
-  @apply grid grid-cols-[1fr_1.5fr_1fr] items-center gap-x-4 text-center;
+  @apply grid grid-cols-3 items-center gap-x-4 text-center;
   grid-template-areas: "info-col-left divider info-col-right";
 
   .info-column {

data/meta.ts

@@ -1,5 +1,5 @@
 export const portal = {
-  title: "zkSync Portal - view balances, transfer and bridge tokens",
+  title: "zkSync Portal | View balances, transfer and bridge tokens",
   description:
     "zkSync Portal allows you to view your balances, transfer tokens and bridge assets between zkSync and Ethereum",
   previewImg: {

layouts/default.vue

@@ -29,7 +29,7 @@ const { isConnectingWallet } = storeToRefs(useOnboardStore());
   grid-template-rows: auto 1fr;
 
   .app-layout-main {
-    @apply flex min-h-0 w-full min-w-0 max-w-[640px] flex-col justify-self-center p-2 md:px-0 md:py-4;
+    @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;
   }
 }
 </style>

package.json

@@ -3,7 +3,6 @@
   "description": "zkSync Portal provides Wallet and Bridge functionality for interacting with zkSync",
   "private": true,
   "scripts": {
-    "build": "nuxt build",
     "dev": "nuxt dev",
     "dev:node:memory": "cross-env NODE_TYPE=memory npm run dev",
     "dev:node:docker": "cross-env NODE_TYPE=dockerized npm run dev",

views/transactions/Deposit.vue

@@ -14,11 +14,13 @@
 
     <NetworkSelectModal
       v-model:opened="fromNetworkModalOpened"
+      title="From"
       :network-key="destinations.ethereum.key"
       @update:network-key="fromNetworkSelected($event)"
     />
     <NetworkSelectModal
       v-model:opened="toNetworkModalOpened"
+      title="To"
       :network-key="destination.key"
       @update:network-key="toNetworkSelected($event)"
     />

views/transactions/Transfer.vue

@@ -14,11 +14,13 @@
 
     <NetworkSelectModal
       v-model:opened="fromNetworkModalOpened"
+      title="From"
       :network-key="destinations.era.key"
       @update:network-key="fromNetworkSelected($event)"
     />
     <NetworkSelectModal
       v-model:opened="toNetworkModalOpened"
+      title="To"
       :network-key="destination.key"
       @update:network-key="toNetworkSelected($event)"
     />
@@ -93,9 +95,7 @@
         >
           <p>
             You will receive funds only after a 24-hour withdrawal delay.
-            <CommonButtonLabel variant="light" as="a" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">
-              Learn more
-            </CommonButtonLabel>
+            <a class="underline underline-offset-2" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">Learn more</a>
           </p>
         </CommonAlert>
 
@@ -138,9 +138,8 @@
         </CommonHeightTransition>
         <p v-else class="mb-block-gap text-center">
           Your funds will be available on <span class="font-medium">{{ destination.label }}</span> after the
-          <CommonButtonLabel variant="light" as="a" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">
-            24-hour delay </CommonButtonLabel
-          >. During this time, the transaction will be processed and finalized. You are free to close this page.
+          <a class="underline underline-offset-2" :href="ZKSYNC_WITHDRAWAL_DELAY" target="_blank">24-hour delay</a>.
+          During this time, the transaction will be processed and finalized. You are free to close this page.
         </p>
         <TransactionProgress
           :from-address="transaction!.from.address"