diff --git a/packages/widget-v2/src/hooks/useGetAssetDetails.tsx b/packages/widget-v2/src/hooks/useGetAssetDetails.tsx index a746621d..ae25529a 100644 --- a/packages/widget-v2/src/hooks/useGetAssetDetails.tsx +++ b/packages/widget-v2/src/hooks/useGetAssetDetails.tsx @@ -16,6 +16,7 @@ export type AssetDetailsProps = { chainImage?: string; amount?: string; tokenAmount?: string; + decimals?: number; }; /** @@ -72,6 +73,7 @@ export const useGetAssetDetails = ({ }); const chainName = chain?.prettyName ?? chain?.chainName; const chainImage = chain?.logoURI; + const decimals = asset?.decimals; if (!chainId) { return { @@ -95,5 +97,6 @@ export const useGetAssetDetails = ({ symbol, amount, tokenAmount, + decimals }; }; diff --git a/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx b/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx index 45729bb2..acfd2510 100644 --- a/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx +++ b/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimpleRow.tsx @@ -16,6 +16,9 @@ import { useGetAccount } from "@/hooks/useGetAccount"; import { getTruncatedAddress } from "@/utils/crypto"; import { formatUSD } from "@/utils/intl"; import { copyToClipboard } from "@/utils/misc"; +import { + limitDecimalsDisplayed, +} from "@/utils/number"; export type SwapExecutionPageRouteSimpleRowProps = { denom: ClientOperation["denomIn"] | ClientOperation["denomOut"]; @@ -92,7 +95,7 @@ export const SwapExecutionPageRouteSimpleRow = ({ )} - {assetDetails.amount} {assetDetails?.symbol} + {limitDecimalsDisplayed(assetDetails.amount)} {assetDetails?.symbol} {usdValue && ( diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx index 50a82f50..bbd8708b 100644 --- a/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx +++ b/packages/widget-v2/src/pages/SwapPage/SwapPage.tsx @@ -35,6 +35,7 @@ import { useGetAccount } from "@/hooks/useGetAccount"; import { ConnectedWalletModal } from "@/modals/ConnectedWalletModal/ConnectedWalletModal"; import { useAccount } from "wagmi"; import { calculatePercentageChange } from "@/utils/number"; +import { transactionHistoryAtom } from "@/state/history"; export const SwapPage = () => { const [container, setContainer] = useState(); @@ -68,6 +69,7 @@ export const SwapPage = () => { useFetchAllBalances(); const getAccount = useGetAccount(); const sourceAccount = getAccount(sourceAsset?.chainID); + const txHistory = useAtomValue(transactionHistoryAtom); const { chainId: evmChainId, connector } = useAccount(); const evmAddress = evmChainId ? getAccount(String(evmChainId))?.address : undefined; @@ -293,7 +295,8 @@ export const SwapPage = () => { }} > setCurrentPage(Routes.TransactionHistoryPage), diff --git a/packages/widget-v2/src/pages/SwapPage/SwapPageAssetChainInput.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPageAssetChainInput.tsx index b6a58374..c19e50d7 100644 --- a/packages/widget-v2/src/pages/SwapPage/SwapPageAssetChainInput.tsx +++ b/packages/widget-v2/src/pages/SwapPage/SwapPageAssetChainInput.tsx @@ -40,10 +40,8 @@ export const SwapPageAssetChainInput = ({ isWaitingToUpdateInputValue, badPriceWarning, }: AssetChainInputProps) => { - const theme = useTheme(); - const [_showPriceChangePercentage, setShowPriceChangePercentage] = - useState(false); + const [_showPriceChangePercentage, setShowPriceChangePercentage] = useState(false); const showPriceChangePercentage = _showPriceChangePercentage || badPriceWarning; const assetDetails = useGetAssetDetails({ @@ -62,8 +60,7 @@ export const SwapPageAssetChainInput = ({ latest = latest.replace(/[.]{2,}/g, "."); // Remove multiple decimals latest = latest.replace(/[,]{2,}/g, ","); // Remove multiple commas - - onChangeValue?.(limitDecimalsDisplayed(formatNumberWithoutCommas(latest))); + onChangeValue?.(limitDecimalsDisplayed(formatNumberWithoutCommas(latest), assetDetails?.decimals)) }; const handleKeyDown = (event: React.KeyboardEvent) => { @@ -73,19 +70,14 @@ export const SwapPageAssetChainInput = ({ switch (event.key) { case "Escape": - if ( - event.currentTarget.selectionStart === - event.currentTarget.selectionEnd - ) { + if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd) { event.currentTarget.select(); } return; case "ArrowUp": event.preventDefault(); - value = new BigNumber( - formatNumberWithoutCommas(event.currentTarget.value) || "0" - ); + value = new BigNumber(formatNumberWithoutCommas(event.currentTarget.value) || "0"); if (event.shiftKey) { value = value.plus(10); @@ -104,9 +96,7 @@ export const SwapPageAssetChainInput = ({ case "ArrowDown": event.preventDefault(); - value = new BigNumber( - formatNumberWithoutCommas(event.currentTarget.value) || "0" - ); + value = new BigNumber(formatNumberWithoutCommas(event.currentTarget.value) || "0"); if (event.shiftKey) { value = value.minus(10); @@ -143,21 +133,20 @@ export const SwapPageAssetChainInput = ({ theme.success.text, ]); + const displayedValue = formatNumberWithCommas(value || ""); + return ( - +