fix: fixing fee render logic

src/components/ExplorerTable/ExplorerTable.tsx

@@ -43,7 +43,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
 

src/pages/DetailView/DetailView.tsx

@@ -205,7 +205,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>
       </Container>
     )

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

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")
     })

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).toString()} ${tokenSymbol.toUpperCase()}`
   }
 
   return formatedFee