From 723978c58a9255a007f7a0415cfb39b3993260be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Riquelme=20Guzm=C3=A1n?=
 <nrriquelme@gmail.com>
Date: Wed, 28 Feb 2024 19:49:56 -0300
Subject: [PATCH] fix: fixing fee render logic (#147)

* fix: fixing fee render logic

* fix: render fee logic using data from Fee object

* chore: ternary condition if decimals is 0
---
 .../ExplorerTable/ExplorerTable.tsx           |  2 +-
 src/pages/DetailView/DetailView.tsx           |  2 +-
 src/types/explorer.ts                         | 12 +++++-
 src/utils/Helpers.test.ts                     | 41 ++++++++-----------
 src/utils/Helpers.tsx                         | 16 ++++----
 5 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/components/ExplorerTable/ExplorerTable.tsx b/src/components/ExplorerTable/ExplorerTable.tsx
index 1568d5e..c610ff7 100644
--- a/src/components/ExplorerTable/ExplorerTable.tsx
+++ b/src/components/ExplorerTable/ExplorerTable.tsx
@@ -40,7 +40,7 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
       const fromDomainInfo = getDomainData(fromDomainId, sharedConfig)
       const toDomainInfo = getDomainData(toDomainId, sharedConfig)
 
-      const formatedFee = getFormatedFee(fee, fromDomainInfo!)
+      const formatedFee = getFormatedFee(fee)
 
       const fromDomainType = fromDomainInfo?.type
 
diff --git a/src/pages/DetailView/DetailView.tsx b/src/pages/DetailView/DetailView.tsx
index 3f20eda..1b7e831 100644
--- a/src/pages/DetailView/DetailView.tsx
+++ b/src/pages/DetailView/DetailView.tsx
@@ -211,7 +211,7 @@ export default function DetailView() {
         </div>
         <div className={classes.detailsContainer}>
           <span className={classes.detailsInnerContentTitle}>Fees:</span>
-          <span className={classes.detailsInnerContent}>{getFormatedFee(transfer?.fee!, fromDomainInfo!)}</span>
+          <span className={classes.detailsInnerContent}>{getFormatedFee(transfer?.fee!)}</span>
         </div>
         {Array.isArray(state.transferDetails) && <br />}
       </Container>
diff --git a/src/types/explorer.ts b/src/types/explorer.ts
index cd51431..49dedf3 100644
--- a/src/types/explorer.ts
+++ b/src/types/explorer.ts
@@ -86,6 +86,16 @@ export type Execution = {
   timestamp: string
 }
 
+export type Fee = {
+  amount: string
+  id: string
+  resource: { decimals: number; id: string; type: string }
+  resourceID: string
+  tokenAddress: string
+  tokenSymbol: string
+  transferId: string
+}
+
 export type Transfer = {
   id: string
   depositNonce: number
@@ -101,7 +111,7 @@ export type Transfer = {
   status: TransferStatus
   deposit?: Deposit
   execution?: Execution
-  fee: { amount: string; tokenAddress: string; tokenSymbol: string }
+  fee: Fee
   resourceID: string
   usdValue: number
   accountId: string
diff --git a/src/utils/Helpers.test.ts b/src/utils/Helpers.test.ts
index 6cbc86a..5cfd29a 100644
--- a/src/utils/Helpers.test.ts
+++ b/src/utils/Helpers.test.ts
@@ -1,37 +1,32 @@
 import { describe, it, expect } from "vitest"
 import { formatDistanceStrict, sub } from "date-fns"
-import { SharedConfigDomain } from "../types"
 import { formatDistanceDate, getFormatedFee } from "./Helpers"
 
 describe("Helpers", () => {
   describe("getFormatedFee", () => {
     it("parses ERC20 fee and returns fee with native token", () => {
-      const formatedFee = getFormatedFee(
-        {
-          amount: "1000000000000000",
-          tokenAddress: "0x0000000000000000000000000000000000000000",
-          tokenSymbol: "eth",
-        },
-        {
-          nativeTokenDecimals: 18,
-          nativeTokenSymbol: "eth",
-        } as SharedConfigDomain,
-      )
+      const formatedFee = getFormatedFee({
+        amount: "1000000000000000",
+        tokenAddress: "0x0000000000000000000000000000000000000000",
+        tokenSymbol: "eth",
+        transferId: "0x",
+        resource: { decimals: 18, id: "0x", type: "fungible" },
+        resourceID: "0x",
+        id: "0x",
+      })
 
       expect(formatedFee).toEqual("0.001 ETH")
     })
     it("parses PHA transfer fee and return fee with native token", () => {
-      const formatedFee = getFormatedFee(
-        {
-          amount: "100000000000",
-          tokenAddress: '{"Concrete":{"parents":"0","interior":"Here"}}',
-          tokenSymbol: "PHA",
-        },
-        {
-          nativeTokenDecimals: 12,
-          nativeTokenSymbol: "PHA",
-        } as SharedConfigDomain,
-      )
+      const formatedFee = getFormatedFee({
+        amount: "100000000000",
+        tokenAddress: '{"Concrete":{"parents":"0","interior":"Here"}}',
+        tokenSymbol: "PHA",
+        transferId: "0x",
+        resource: { decimals: 6, id: "0x", type: "fungible" },
+        resourceID: "0x",
+        id: "0x",
+      })
 
       expect(formatedFee).toEqual("0.1 PHA")
     })
diff --git a/src/utils/Helpers.tsx b/src/utils/Helpers.tsx
index 20c53d9..b153078 100644
--- a/src/utils/Helpers.tsx
+++ b/src/utils/Helpers.tsx
@@ -176,17 +176,15 @@ export const formatDistanceDate = (timestamp: string): string => {
   }
 }
 
-export const getFormatedFee = (fee: Transfer["fee"] | string, domain: SharedConfigDomain): string => {
+export const getFormatedFee = (fee: Transfer["fee"]): string => {
   let formatedFee = "No fee"
-  const { type } = domain
 
-  if (type === DomainTypes.SUBSTRATE) {
-    formatedFee = "50 PHA"
-  }
-
-  if (typeof fee !== "string" && domain) {
-    const { nativeTokenDecimals, nativeTokenSymbol } = domain
-    formatedFee = `${ethers.formatUnits(fee.amount, nativeTokenDecimals).toString()} ${nativeTokenSymbol.toUpperCase()}`
+  if (fee && Object.keys(fee).length) {
+    const {
+      resource: { decimals },
+      tokenSymbol,
+    } = fee
+    formatedFee = `${ethers.formatUnits(fee.amount, decimals !== 0 ? decimals : 18).toString()} ${tokenSymbol.toUpperCase()}`
   }
 
   return formatedFee