fix: requested fixes

assets/css/style.scss

@@ -19,4 +19,5 @@ body {
       }
     }
   }
-}
+}
+button, a { -webkit-tap-highlight-color: transparent; }

components/common/Modal.vue

@@ -108,7 +108,7 @@ const afterLeave = () => {
 <style lang="scss">
 .modal-container {
   // can not apply styles to this block in scoped style
-  @apply relative z-[1000];
+  @apply relative z-[60];
 }
 </style>
 

components/common/input/TransactionAmount.vue

@@ -98,7 +98,7 @@ import type { Token, TokenAmount } from "@/types";
 import type { BigNumberish } from "ethers";
 import type { PropType } from "vue";
 
-import { decimalToBigNumber, parseTokenAmount, removeSmallAmount } from "@/utils/formatters";
+import { decimalToBigNumber, parseTokenAmount, removeSmallAmountPretty } from "@/utils/formatters";
 
 const props = defineProps({
   modelValue: {
@@ -192,7 +192,7 @@ const displayedMaxAmount = computed(() => {
   if (!maxDecimalAmount.value || !selectedToken.value?.price) {
     return maxDecimalAmount.value;
   }
-  return removeSmallAmount(props.maxAmount!, selectedToken.value.decimals, selectedToken.value.price);
+  return removeSmallAmountPretty(props.maxAmount!, selectedToken.value.decimals, selectedToken.value.price);
 });
 const isMaxAmountSet = computed(() => {
   if (!props.maxAmount) {

components/header/MobileAccountNavigation.vue

@@ -41,7 +41,7 @@
           </DestinationItem>
         </CommonCardWithLineButtons>
         <CommonCardWithLineButtons class="mt-block-padding-1/2">
-          <DestinationItem label="Logout" size="sm" @click="onboardStore.disconnect()">
+          <DestinationItem label="Logout" size="sm" @click="logout()">
             <template #image>
               <DestinationIconContainer>
                 <PowerIcon aria-hidden="true" />
@@ -161,9 +161,21 @@ watch(
     }
   }
 );
+const logout = () => {
+  modalOpened.value = false;
+  onboardStore.disconnect();
+};
 
 const onboardStore = useOnboardStore();
-const { account } = storeToRefs(onboardStore);
+const { account, isConnected } = storeToRefs(onboardStore);
+watch(
+  () => isConnected,
+  (connected) => {
+    if (!connected) {
+      modalOpened.value = false;
+    }
+  }
+);
 const { copy, copied } = useCopy(computed(() => account.value.address!));
 const { selectedNetwork } = storeToRefs(useNetworkStore());
 </script>

components/loaders/Connecting.vue

@@ -44,6 +44,6 @@ const title = computed(() => {
 
 <style lang="scss" scoped>
 .connecting-container {
-  @apply absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center bg-gray dark:bg-neutral-950;
+  @apply absolute inset-0 z-[70] flex h-full w-full flex-col items-center justify-center bg-gray dark:bg-neutral-950;
 }
 </style>

components/network/NetworkSelectModal.vue

@@ -4,7 +4,7 @@
       <CommonInputSearch
         v-model.trim="search"
         class="mb-block-padding-1/4"
-        placeholder="Symbol or address"
+        placeholder="Network name"
         autofocus="desktop"
       >
         <template #icon>
@@ -16,13 +16,13 @@
           <TypographyCategoryLabel size="sm" variant="darker" class="group-category-label">
             {{ group.title }}
           </TypographyCategoryLabel>
-          <div class="-mx-block-padding-1/2">
+          <div class="-mx-block-padding-1/4 sm:-mx-block-padding-1/2">
             <DestinationItem
               v-for="(item, itemIndex) in group.destinations"
               v-bind="item"
               :key="itemIndex"
               :icon="item.key === selectedNetworkKey ? CheckIcon : undefined"
-              size="sm"
+              variant="light"
               @click="selectedNetworkKey = item.key!"
             />
           </div>

components/token/TokenBalance.vue

@@ -40,8 +40,7 @@ import type { TokenPrice } from "@/types";
 import type { BigNumberish } from "ethers";
 import type { Component, PropType } from "vue";
 
-import { formatTokenPrice, parseTokenAmount, removeSmallAmount } from "@/utils/formatters";
-import { isOnlyZeroes } from "@/utils/helpers";
+import { formatTokenPrice, parseTokenAmount, removeSmallAmountPretty } from "@/utils/formatters";
 
 const props = defineProps({
   as: {
@@ -89,13 +88,7 @@ const displayedAmount = computed(() => {
     return fullAmount.value;
   }
   if (props.amountDisplay === "remove-small") {
-    const withoutSmallAmount = removeSmallAmount(props.amount, props.decimals, props.price);
-    if (isZeroAmount.value) {
-      return "0";
-    } else if (!isOnlyZeroes(withoutSmallAmount)) {
-      return withoutSmallAmount;
-    }
-    return `<${withoutSmallAmount.slice(0, -1)}1`;
+    return removeSmallAmountPretty(props.amount, props.decimals, props.price);
   }
   return fullAmount.value;
 });

components/token/TokenLine.vue

@@ -10,7 +10,7 @@
         </template>
         <template v-if="name" #underline>
           <CommonButtonLabel
-            v-if="eraNetwork.blockExplorerUrl"
+            v-if="showNameLink && eraNetwork.blockExplorerUrl"
             as="a"
             variant="light"
             :href="`${eraNetwork.blockExplorerUrl}/address/${address}`"
@@ -51,6 +51,10 @@ defineProps({
   name: {
     type: String,
   },
+  showNameLink: {
+    type: Boolean,
+    default: false,
+  },
   address: {
     type: String,
     required: true,

components/token/TokenSelectModal.vue

@@ -24,7 +24,7 @@
           </CommonErrorBlock>
         </template>
         <template v-else-if="!hasBalances">
-          <div class="category -mx-block-padding-1/2">
+          <div class="category -mx-block-padding-1/4 sm:-mx-block-padding-1/2">
             <TokenLine
               v-for="item in displayedTokens"
               class="token-line"
@@ -39,7 +39,7 @@
             <TypographyCategoryLabel size="sm" variant="darker" class="group-category-label">
               {{ group.title || "Your assets" }}
             </TypographyCategoryLabel>
-            <div class="-mx-block-padding-1/2">
+            <div class="-mx-block-padding-1/4 sm:-mx-block-padding-1/2">
               <TokenBalance
                 v-for="item in group.balances"
                 v-bind="item"

components/transaction/lineItem/TokenAmount.vue

@@ -17,13 +17,12 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-import { BigNumber, type BigNumberish } from "ethers";
+import { type BigNumberish } from "ethers";
 
 import type { Token } from "@/types";
 import type { PropType } from "vue";
 
-import { parseTokenAmount, removeSmallAmount } from "@/utils/formatters";
-import { isOnlyZeroes } from "@/utils/helpers";
+import { parseTokenAmount, removeSmallAmountPretty } from "@/utils/formatters";
 
 const props = defineProps({
   token: {
@@ -42,18 +41,11 @@ const props = defineProps({
 const fullAmount = computed(() => {
   return parseTokenAmount(props.amount, props.token.decimals);
 });
-const isZeroAmount = computed(() => BigNumber.from(props.amount).isZero());
 
 const displayedAmount = computed(() => {
-  if (typeof props.token.price !== "number") {
+  if (!props.token.price) {
     return fullAmount.value;
   }
-  const withoutSmallAmount = removeSmallAmount(props.amount, props.token.decimals, props.token.price);
-  if (isZeroAmount.value) {
-    return "0";
-  } else if (!isOnlyZeroes(withoutSmallAmount)) {
-    return withoutSmallAmount;
-  }
-  return `<${withoutSmallAmount.slice(0, -1)}1`;
+  return removeSmallAmountPretty(props.amount, props.token.decimals, props.token.price);
 });
 </script>

composables/zksync/deposit/useFee.ts

@@ -1,12 +1,14 @@
 import { computed, ref } from "vue";
 
 import { BigNumber } from "ethers";
+import { parseEther } from "ethers/lib/utils";
 import { L1_RECOMMENDED_MIN_ERC20_DEPOSIT_GAS_LIMIT } from "zksync-web3/build/src/utils";
 
 import useTimedCache from "@/composables/useTimedCache";
 
 import type { Token, TokenAmount } from "@/types";
 import type { PublicClient } from "@wagmi/core";
+import type { BigNumberish } from "ethers";
 import type { Ref } from "vue";
 import type { L1Signer } from "zksync-web3";
 
@@ -34,7 +36,7 @@ export default (
   };
 
   const fee = ref<DepositFeeValues | undefined>();
-  const recommendedBalance = ref<string | undefined>();
+  const recommendedBalance = ref<BigNumberish | undefined>();
 
   const totalFee = computed(() => {
     if (!fee.value) return undefined;
@@ -80,7 +82,7 @@ export default (
           const match = err.message.match(/([\d\\.]+) ETH/);
           if (feeToken.value && match?.length) {
             const ethAmount = match[1].split(" ")?.[0];
-            recommendedBalance.value = ethAmount;
+            recommendedBalance.value = parseEther(ethAmount);
             return;
           }
         }

data/meta.ts

@@ -1,5 +1,5 @@
 export const portal = {
-  title: "zkSync Portal | Wallet, Bridge and Faucet",
+  title: "zkSync Portal | Wallet and Bridge for zkSync",
   description:
     "zkSync Portal provides all the required tools for working with Era and Lite networks such as Wallet, Bridge & Faucet functionality.",
   previewImg: {

pages/balances.vue

@@ -24,6 +24,7 @@
               v-for="item in group.balances"
               as="div"
               :key="item.address"
+              show-name-link
               :send-route-name="eraNetwork.l1Network ? 'send-methods' : 'send'"
               v-bind="item"
             />

pages/index.vue

@@ -62,6 +62,7 @@
               v-for="item in displayedBalances"
               as="div"
               :key="item.address"
+              show-name-link
               :send-route-name="eraNetwork.l1Network ? 'send-methods' : 'send'"
               v-bind="item"
             />
@@ -157,8 +158,7 @@ const { loading, reset: resetSingleLoading } = useSingleLoading(computed(() => b
 
 const displayedBalances = computed(() => {
   return balance.value.filter(({ amount, decimals, price }) => {
-    const decimalAmount =
-      typeof price === "number" ? removeSmallAmount(amount, decimals, price) : parseTokenAmount(amount, decimals);
+    const decimalAmount = price ? removeSmallAmount(amount, decimals, price) : parseTokenAmount(amount, decimals);
     if (!isOnlyZeroes(decimalAmount)) {
       return true;
     }

utils/formatters.ts

@@ -34,6 +34,7 @@ export function formatTokenPrice(amount: BigNumberish, decimals: number, price:
   return formatPricePretty(formatRawTokenPrice(amount, decimals, price));
 }
 
+/* Might return value like "0.0000" */
 export function removeSmallAmount(
   amount: BigNumberish,
   decimals: number,
@@ -69,6 +70,21 @@ export function removeSmallAmount(
   return acc;
 }
 
+/* Fixes value like "0.0000" with "<0.0001" */
+export function removeSmallAmountPretty(
+  amount: BigNumberish,
+  decimals: number,
+  price: number,
+  minTokenValue?: number,
+  maxChars?: number
+): string {
+  const withoutSmallAmount = removeSmallAmount(amount, decimals, price, minTokenValue, maxChars);
+  if (isOnlyZeroes(withoutSmallAmount)) {
+    return `<${withoutSmallAmount.slice(0, -1)}1`;
+  }
+  return withoutSmallAmount;
+}
+
 export function checksumAddress(address: string) {
   return getAddress(address);
 }

views/transactions/Deposit.vue

@@ -155,8 +155,15 @@
             <p>
               Insufficient <span class="font-medium">{{ feeToken?.symbol }}</span> balance on
               {{ destinations.ethereum.label }} to cover the fee. We recommend having at least
-              <span class="font-medium">{{ recommendedBalance }} {{ feeToken?.symbol }}</span> on
-              {{ eraNetwork.l1Network?.name ?? "L1" }} for deposit.
+              <span class="font-medium"
+                >{{
+                  feeToken?.price
+                    ? removeSmallAmountPretty(recommendedBalance, feeToken?.decimals, feeToken?.price)
+                    : parseTokenAmount(recommendedBalance, ETH_TOKEN.decimals)
+                }}
+                {{ feeToken?.symbol }}</span
+              >
+              on {{ eraNetwork.l1Network?.name ?? "L1" }} for deposit.
             </p>
           </CommonAlert>
         </transition>