diff --git a/src/features/bridge/context/Bridge.Context.tsx b/src/features/bridge/context/Bridge.Context.tsx index 5066669d2..022ce034b 100644 --- a/src/features/bridge/context/Bridge.Context.tsx +++ b/src/features/bridge/context/Bridge.Context.tsx @@ -221,6 +221,18 @@ export const BridgeContext = () => { return selectedTokenPairs ? selectedTokenPairs[1] : DEFAULT_TOKEN_TO; }, [selectedTokenPairs]); + const decimals = useMemo( + () => + fromData.value.id === 'amb' + ? selectedTokenDestination.decimals + : selectedTokenFrom.decimals, + [ + fromData.value.id, + selectedTokenDestination.decimals, + selectedTokenFrom.decimals + ] + ); + const processBridge = useCallback( async (getOnlyGasFee: boolean, bridgeFee: FeeData) => { try { @@ -229,10 +241,7 @@ export const BridgeContext = () => { tokenFrom: selectedTokenFrom, tokenTo: selectedTokenDestination, selectedAccount: wallet, - amountTokens: formatUnits( - bridgeFee.amount, - selectedTokenFrom.decimals - ), + amountTokens: formatUnits(bridgeFee.amount, decimals), feeData: bridgeFee, gasFee: getOnlyGasFee }; @@ -257,6 +266,7 @@ export const BridgeContext = () => { [ bridgeConfig, bridgeErrorHandler, + decimals, fromData.value.id, selectedTokenDestination, selectedTokenFrom, diff --git a/src/features/bridge/templates/BottomSheetBridgePreview/components/PreviewDataTemplate/components/PreviewDataItem.tsx b/src/features/bridge/templates/BottomSheetBridgePreview/components/PreviewDataTemplate/components/PreviewDataItem.tsx index c919910cf..2786519a5 100644 --- a/src/features/bridge/templates/BottomSheetBridgePreview/components/PreviewDataTemplate/components/PreviewDataItem.tsx +++ b/src/features/bridge/templates/BottomSheetBridgePreview/components/PreviewDataTemplate/components/PreviewDataItem.tsx @@ -1,26 +1,33 @@ -import { NumberUtils } from '@utils/number'; -import { formatUnits } from 'ethers/lib/utils'; +import React from 'react'; import { View } from 'react-native'; import { Row, Spacer, Text } from '@components/base'; import { TokenLogo } from '@components/modular'; import { COLORS } from '@constants/colors'; import { scale } from '@utils/scaling'; -import React from 'react'; import { DataToPreviewModel } from '@models/Bridge'; +import { NumberUtils } from '@utils/number'; +import { formatUnits } from 'ethers/lib/utils'; -export const PreviewDataItem = ({ - item -}: { +interface PreviewDataItemProps { item: { name?: string; index: number; item: DataToPreviewModel; }; -}) => { - const { item: renderItem, index } = item; +} + +export const PreviewDataItem = ({ item }: PreviewDataItemProps) => { + const { + index, + item: { + name, + symbol, + crypto: { amount, decimals } + } + } = item; const amountToRender = NumberUtils.limitDecimalCount( - formatUnits(renderItem.crypto.amount, renderItem.crypto.decimals), + formatUnits(amount, decimals), 5 ); @@ -34,13 +41,13 @@ export const PreviewDataItem = ({ justifyContent: 'space-between' }} > - {renderItem.name} + {name} - {isFirst && } + {isFirst && } {`${amountToRender} ${renderItem.symbol}`} + >{`${amountToRender} ${symbol}`} diff --git a/src/features/bridge/templates/BridgeForm/BridgeForm.tsx b/src/features/bridge/templates/BridgeForm/BridgeForm.tsx index fb5b79c15..633dc7164 100644 --- a/src/features/bridge/templates/BridgeForm/BridgeForm.tsx +++ b/src/features/bridge/templates/BridgeForm/BridgeForm.tsx @@ -114,6 +114,19 @@ export const BridgeForm = () => { setSelectedTokenPairs(tokenPair); tokenSelectRef?.current?.dismiss(); }; + + const decimals = useMemo( + () => + fromData.value.id === 'amb' + ? selectedTokenDestination.decimals + : selectedTokenFrom.decimals, + [ + fromData.value.id, + selectedTokenDestination.decimals, + selectedTokenFrom.decimals + ] + ); + const parseBridgePreviewData = useCallback( (feeData: FeeData, gasFee: BigNumberish) => { return [ @@ -121,7 +134,7 @@ export const BridgeForm = () => { name: t('bridge.preview.receive'), crypto: { amount: feeData?.amount ?? BigNumber.from(0), - decimals: selectedTokenFrom.decimals + decimals }, symbol: selectedTokenFrom.symbol }, @@ -152,9 +165,9 @@ export const BridgeForm = () => { ]; }, [ + decimals, networkNativeToken?.decimals, networkNativeToken.symbol, - selectedTokenFrom.decimals, selectedTokenFrom.symbol, t ]