fix: misc fixes

.eslintrc.js

@@ -1,5 +1,5 @@
 require("@rushstack/eslint-patch/modern-module-resolution");
 
 module.exports = {
-    extends: "@chainsafe",
+    extends: "@chainsafe" 
 }

.github/workflows/cf-deploy-test.yml

@@ -20,7 +20,7 @@ jobs:
         env:
           VITE_INDEXER_URL: "https://api.test.buildwithsygma.com"
           VITE_SHARED_CONFIG_URL: "https://chainbridge-assets-stage.s3.us-east-2.amazonaws.com/shared-config-test.json"
-          VITE_EXPLORER_URLS: '[{ "id": 1, "url": "https://goerli.etherscan.io" }, { "id": 2, "url": "https://sepolia.etherscan.io" }]'
+          VITE_EXPLORER_URLS: '[{ "id": 1, "url": "https://goerli.etherscan.io" }, { "id": 2, "url": "https://sepolia.etherscan.io" }, { "id": 4, "url": "https://base-goerli.blockscout.com" }, { "id": 5,  "url": "https://explorer.cronos.org/testnet" }]'
       - name: Publish to Cloudflare Pages
         uses: cloudflare/pages-action@1
         with:

package.json

@@ -49,17 +49,19 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-only-warn": "^1.0.3",
     "eslint-plugin-prettier": "^4.0.0",
+    "jsdom": "^22.1.0",
     "prettier": "^2.5.0",
     "pretty-quick": "3.0.2",
     "vite": "^4.2.1",
     "vite-plugin-svgr": "^2.4.0",
-    "vite-tsconfig-paths": "^4.1.0"
+    "vite-tsconfig-paths": "^4.1.0",
+    "vitest": "^0.34.6"
   },
   "scripts": {
     "start": "vite",
     "build": "tsc && vite build",
     "serve": "vite preview",
-    "test": "react-scripts test",
+    "test": "vitest --config ./vite.config.ts",
     "lint": "yarn run lint:style --fix && yarn run lint:types",
     "lint:style": "eslint --color --ext .ts src/",
     "lint:types": "tsc --noEmit --pretty"

src/components/ExplorerTable/ExplorerTable.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import { Table, TableHead, TableCell, TableBody, TableRow } from "@mui/material"
 import clsx from "clsx"
 import { Link } from "react-router-dom"
-import { EvmBridgeConfig, SharedConfigDomain, Transfer } from "../../types"
+import { EvmBridgeConfig, ResourceTypes, SharedConfigDomain, SharedConfigResource, Transfer } from "../../types"
 import {
   getDisplayedStatuses,
   shortenAddress,
@@ -14,6 +14,7 @@ import {
   formatDistanceDate,
   getFormatedFee,
   formatConvertedAmount,
+  formatTransferType,
 } from "../../utils/Helpers"
 import { useStyles } from "./styles"
 
@@ -36,14 +37,19 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
     return transferData.map((transfer: Transfer) => {
       const { deposit, status, amount, resource, fromDomainId, toDomainId, id, resourceID, timestamp, fee, usdValue } = transfer
 
-      const formatedFee = getFormatedFee(fee)
+      const { type } = resource
 
       const fromDomainInfo = getDomainData(fromDomainId, sharedConfig)
       const toDomainInfo = getDomainData(toDomainId, sharedConfig)
 
+      const { resources } = fromDomainInfo!
+
+      const foundResource = resources.find((resource: SharedConfigResource) => resource.resourceId === resourceID)
+
+      const formatedFee = getFormatedFee(fee, foundResource!)
+
       const fromDomainType = fromDomainInfo?.type
 
-      const { type } = resource
       let txHash: string | undefined
 
       if (fromDomainType === "evm" && deposit) {
@@ -97,7 +103,7 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
           </TableCell>
           <TableCell className={clsx(classes.row, classes.dataRow)}>
             <span className={classes.amountInfo}>
-              <span>{type !== undefined ? type : "-"}</span>
+              <span>{type !== undefined ? formatTransferType(type as ResourceTypes) : "-"}</span>
             </span>
           </TableCell>
           <TableCell className={clsx(classes.row, classes.dataRow)}>
@@ -107,7 +113,6 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
           </TableCell>
           <TableCell className={clsx(classes.row, classes.dataRow)}>
             <span className={classes.amountInfo}>
-              {/* NOTE: hardcoded in the meantime */}
               <span>{formatedFee}</span>
             </span>
           </TableCell>