diff --git a/packages/profile/src/components/inventory/token/helper.ts b/packages/profile/src/components/inventory/token/helper.ts new file mode 100644 index 000000000..ce71e58ce --- /dev/null +++ b/packages/profile/src/components/inventory/token/helper.ts @@ -0,0 +1,11 @@ +export const formatBalance = (balance: string) => { + // Catch prefix until number + let prefix = ""; + for (const char of balance) { + if (!isNaN(parseInt(char))) { + break; + } + prefix += char; + } + return `${prefix}${parseFloat(balance.replace(prefix, "")).toLocaleString()}`; +}; diff --git a/packages/profile/src/components/inventory/token/send.tsx b/packages/profile/src/components/inventory/token/send.tsx index 7b983bbeb..7b208f05e 100644 --- a/packages/profile/src/components/inventory/token/send.tsx +++ b/packages/profile/src/components/inventory/token/send.tsx @@ -27,6 +27,7 @@ import { useForm } from "react-hook-form"; import { Link, useNavigate, useParams } from "react-router-dom"; import { Call, constants, uint256 } from "starknet"; import { z } from "zod"; +import { formatBalance } from "./helper"; export function SendToken() { const { address: tokenAddress } = useParams<{ address: string }>(); @@ -112,21 +113,6 @@ export function SendToken() { { enabled: t && ["ETH", "STRK"].includes(t.meta.symbol) && !!amount }, ); - const countervalueFormatted = useMemo(() => { - if (!countervalue) return undefined; - // Catch prefix until number - let prefix = ""; - for (const char of countervalue.formatted) { - if (!isNaN(parseInt(char))) { - break; - } - prefix += char; - } - return `${prefix}${parseFloat( - countervalue.formatted.replace(prefix, ""), - ).toLocaleString()}`; - }, [countervalue]); - if (!t) { return null; } @@ -186,8 +172,7 @@ export function SendToken() { ) } > - {parseFloat(t.balance.formatted).toLocaleString()}{" "} - {t.meta.symbol} + {formatBalance(t.balance.formatted)} {t.meta.symbol} @@ -202,7 +187,7 @@ export function SendToken() { /> {countervalue && ( - {countervalueFormatted} + {formatBalance(countervalue.formatted)} )} diff --git a/packages/profile/src/components/inventory/token/token.tsx b/packages/profile/src/components/inventory/token/token.tsx index f2d850815..4af310531 100644 --- a/packages/profile/src/components/inventory/token/token.tsx +++ b/packages/profile/src/components/inventory/token/token.tsx @@ -32,6 +32,7 @@ import { useToken } from "@/hooks/token"; import { TokenPair } from "@cartridge/utils/api/cartridge"; import { useMemo } from "react"; import { compare } from "compare-versions"; +import { formatBalance } from "./helper"; export function Token() { const { address } = useParams<{ address: string }>(); @@ -106,21 +107,6 @@ function ERC20() { { enabled: t && ["ETH", "STRK"].includes(t.meta.symbol) }, ); - const countervalueFormatted = useMemo(() => { - if (!countervalue) return undefined; - // Catch prefix until number - let prefix = ""; - for (const char of countervalue.formatted) { - if (!isNaN(parseInt(char))) { - break; - } - prefix += char; - } - return `${prefix}${parseFloat( - countervalue.formatted.replace(prefix, ""), - ).toLocaleString()}`; - }, [countervalue]); - const compatibility = useMemo(() => { if (!version) return false; return compare(version, "0.4.0", ">="); @@ -145,10 +131,12 @@ function ERC20() { t.balance === undefined ? ( ) : ( - parseFloat(t.balance.formatted).toLocaleString() + formatBalance(t.balance.formatted) ) } ${t.meta.symbol}`} - description={countervalueFormatted && `$${countervalueFormatted} (USD)`} + description={ + countervalue && `${formatBalance(countervalue.formatted)} (USD)` + } icon={ { - if (!countervalue) return undefined; - // Catch prefix until number - let prefix = ""; - for (const char of countervalue.formatted) { - if (!isNaN(parseInt(char))) { - break; - } - prefix += char; - } - return `${prefix}${parseFloat( - countervalue.formatted.replace(prefix, ""), - ).toLocaleString()}`; - }, [countervalue]); - return (
-

{parseFloat(token.balance.formatted).toLocaleString()}

+

{formatBalance(token.balance.formatted)}

{token.meta.symbol}
- {countervalueFormatted && ( - {countervalueFormatted} + {countervalue && ( + + {formatBalance(countervalue.formatted)} + )}