Specify non-PORTX bridge fees in source token instead of IRON (#263)

* Specify non-PORTX bridge fees in source token instead of IRON * Normalize amount
iron-fish · Oct 2, 2024 · c904e37 · c904e37
1 parent 139b342
commit c904e37
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/renderer/components/BridgeAssetsForm/BridgeConfirmationModal/BridgeConfirmationModal.tsx b/renderer/components/BridgeAssetsForm/BridgeConfirmationModal/BridgeConfirmationModal.tsx
@@ -19,6 +19,7 @@ import { trpcReact, TRPCRouterOutputs } from "@/providers/TRPCProvider";
 import { PillButton } from "@/ui/PillButton/PillButton";
 import { CurrencyUtils } from "@/utils/currency";
 import { formatOre } from "@/utils/ironUtils";
+import { IRON_ID, IRON_SYMBOL } from "@shared/constants";
 
 import { StepIdle } from "./StepIdle";
 import { AssetOptionType } from "../../AssetAmountInput/utils";
@@ -95,7 +96,9 @@ export function BridgeConfirmationModal({
   const [convertedAmount, convertedAmountError] = CurrencyUtils.tryMajorToMinor(
     formData.amount,
     selectedAsset.asset.id,
-    selectedAsset.asset.verification,
+    {
+      decimals: chainportToken.decimals,
+    },
   );
 
   if (convertedAmountError) {
@@ -155,6 +158,14 @@ export function BridgeConfirmationModal({
       },
     );
 
+  const amountToSend = useMemo(() => {
+    const amount = CurrencyUtils.formatCurrency(
+      convertedAmount,
+      chainportToken.decimals,
+    );
+    return `${amount} ${selectedAsset.assetName}`;
+  }, [selectedAsset.assetName, convertedAmount, chainportToken.decimals]);
+
   const amountToReceive = useMemo(() => {
     if (isTransactionDetailsLoading || !txDetails) {
       return <Skeleton>PLACEHOLDER</Skeleton>;
@@ -169,12 +180,17 @@ export function BridgeConfirmationModal({
       chainportToken.decimals,
     );
 
-    return convertedAmount + " " + chainportToken.symbol;
+    return `${convertedAmount} ${
+      chainportToken.web3_address === IRON_ID
+        ? IRON_SYMBOL
+        : chainportToken.symbol
+    }`;
   }, [
     isTransactionDetailsLoading,
     txDetails,
     chainportToken.decimals,
     chainportToken.symbol,
+    chainportToken.web3_address,
   ]);
 
   const chainportGasFee = useMemo(() => {
@@ -198,10 +214,16 @@ export function BridgeConfirmationModal({
       return `${fee} PORTX`;
     }
 
-    return `${formatOre(
-      txDetails.bridge_fee.source_token_fee_amount ?? 0,
-    )} $IRON`;
-  }, [isTransactionDetailsLoading, txDetails]);
+    return `${CurrencyUtils.formatCurrency(
+      txDetails.bridge_fee.source_token_fee_amount,
+      chainportToken.decimals,
+    )} ${selectedAsset.assetName}`;
+  }, [
+    isTransactionDetailsLoading,
+    txDetails,
+    chainportToken.decimals,
+    selectedAsset.assetName,
+  ]);
 
   const handleClose = useCallback(() => {
     reset();
@@ -249,8 +271,7 @@ export function BridgeConfirmationModal({
               fromAccount={formData.fromAccount}
               targetNetwork={targetNetwork.label}
               targetNetworkIcon={targetNetwork.network_icon}
-              amount={formData.amount}
-              assetName={selectedAsset.assetName}
+              amountSending={amountToSend}
               amountReceiving={amountToReceive}
               targetAddress={formData.targetAddress}
               chainportGasFee={chainportGasFee}

diff --git a/renderer/components/BridgeAssetsForm/BridgeConfirmationModal/StepIdle.tsx b/renderer/components/BridgeAssetsForm/BridgeConfirmationModal/StepIdle.tsx
@@ -77,8 +77,7 @@ type Props = {
   fromAccount: string;
   targetNetwork: string;
   targetNetworkIcon: string;
-  amount: string;
-  assetName: string;
+  amountSending: ReactNode;
   amountReceiving: ReactNode;
   targetAddress: string;
   chainportGasFee: ReactNode;
@@ -93,8 +92,7 @@ export function StepIdle({
   fromAccount,
   targetNetwork,
   targetNetworkIcon,
-  amount,
-  assetName,
+  amountSending,
   amountReceiving,
   targetAddress,
   chainportGasFee,
@@ -180,7 +178,7 @@ export function StepIdle({
           <GridItem>
             <LineItem
               label={formatMessage(messages.sendingLabel)}
-              content={`${amount} ${assetName}`}
+              content={amountSending}
               icon={ironfishIcon}
             />
           </GridItem>