+
diff --git a/components/token/TokenBalance.vue b/components/token/TokenBalance.vue
index a15676206..ae86696ac 100644
--- a/components/token/TokenBalance.vue
+++ b/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;
});
diff --git a/components/token/TokenLine.vue b/components/token/TokenLine.vue
index 0b226ec9d..166416ab4 100644
--- a/components/token/TokenLine.vue
+++ b/components/token/TokenLine.vue
@@ -10,7 +10,7 @@
-
+
{{ group.title || "Your assets" }}
-
+
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);
});
diff --git a/composables/zksync/deposit/useFee.ts b/composables/zksync/deposit/useFee.ts
index 2ee6758fa..e5ad18035 100644
--- a/composables/zksync/deposit/useFee.ts
+++ b/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();
- const recommendedBalance = ref();
+ const recommendedBalance = ref();
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;
}
}
diff --git a/data/meta.ts b/data/meta.ts
index 4564f5165..53af48710 100644
--- a/data/meta.ts
+++ b/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: {
diff --git a/pages/balances.vue b/pages/balances.vue
index 1bfcc7b44..25ca5b750 100644
--- a/pages/balances.vue
+++ b/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"
/>
diff --git a/pages/index.vue b/pages/index.vue
index 6a6eca22d..39651efed 100644
--- a/pages/index.vue
+++ b/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;
}
diff --git a/utils/formatters.ts b/utils/formatters.ts
index aa63477b5..95432b494 100644
--- a/utils/formatters.ts
+++ b/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);
}
diff --git a/views/transactions/Deposit.vue b/views/transactions/Deposit.vue
index 6eec32da0..349904b97 100644
--- a/views/transactions/Deposit.vue
+++ b/views/transactions/Deposit.vue
@@ -155,8 +155,15 @@
Insufficient {{ feeToken?.symbol }} balance on
{{ destinations.ethereum.label }} to cover the fee. We recommend having at least
- {{ recommendedBalance }} {{ feeToken?.symbol }} on
- {{ eraNetwork.l1Network?.name ?? "L1" }} for deposit.
+ {{
+ feeToken?.price
+ ? removeSmallAmountPretty(recommendedBalance, feeToken?.decimals, feeToken?.price)
+ : parseTokenAmount(recommendedBalance, ETH_TOKEN.decimals)
+ }}
+ {{ feeToken?.symbol }}
+ on {{ eraNetwork.l1Network?.name ?? "L1" }} for deposit.