feat: remove shared config dependency (#185)

* chore: housekeeping to use the new endpoint from the indexer to get domain metadata

* chore: using new endpoint to get metadata info and misc changes

* chore: type adjustment

* chore: bitcoin and layer edge logos

* chore: better bitcoin logo

* chore: change url for indexer one

* chore: rename of hooks

* chore: rename function

src/components/ExplorerTable/ExplorerTable.tsx

@@ -2,22 +2,19 @@ import React from "react"
 import { Table, TableHead, TableCell, TableBody, TableRow, CircularProgress } from "@mui/material"
 import clsx from "clsx"
 import { Link } from "react-router-dom"
-import { EvmBridgeConfig, ExplorerContextState, ResourceTypes, SharedConfigDomain, Transfer } from "../../types"
+import { EnvironmentMetadata, EvmBridgeConfig, ExplorerContextState, ResourceTypes, SharedConfigDomain, Transfer } from "../../types"
+import { renderNetworkIcon, renderStatusIcon } from "../../utils/renderUtils"
 import {
-  getDisplayedStatuses,
-  shortenAddress,
-  renderNetworkIcon,
-  renderStatusIcon,
-  getDomainData,
-  getNetworkNames,
+  filterTransfers,
+  formatAmountDecimals,
   formatDistanceDate,
-  getFormatedFee,
   formatTransferType,
-  formatAmountDecimals,
+  displayStatus,
+  getFormatedFee,
   renderAmountValue,
   renderFormatedConvertedAmount,
-  filterTransfers,
-} from "../../utils/Helpers"
+  shortenAddress,
+} from "../../utils/transferHelpers"
 import { useStyles } from "./styles"
 
 type ExplorerTable = {
@@ -26,9 +23,10 @@ type ExplorerTable = {
   chains: Array<EvmBridgeConfig>
   state: ExplorerContextState
   sharedConfig: SharedConfigDomain[] | []
+  domainMetadata: EnvironmentMetadata | {}
 }
 
-const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: ExplorerTable) => {
+const ExplorerTable: React.FC<ExplorerTable> = ({ state, domainMetadata }: ExplorerTable) => {
   const { classes } = useStyles()
   const NATIVE_RESOURCE_ID = "0x1000000000000000000000000000000000000000000000000000000000000000"
 
@@ -38,8 +36,9 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
 
       const { type } = resource
 
-      const fromDomainInfo = getDomainData(fromDomainId, sharedConfig)
-      const toDomainInfo = getDomainData(toDomainId, sharedConfig)
+      const fromDomainInfo = (domainMetadata as EnvironmentMetadata)[Number(fromDomainId)]
+
+      const toDomainInfo = (domainMetadata as EnvironmentMetadata)[Number(toDomainId)]
 
       const formatedFee = getFormatedFee(fee)
 
@@ -53,8 +52,8 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
         txHash = deposit?.txHash
       }
 
-      const fromDomainName = getNetworkNames(fromDomainInfo?.chainId!)
-      const toDomainName = getNetworkNames(toDomainInfo?.chainId!)
+      const fromDomainName = fromDomainInfo.renderName
+      const toDomainName = toDomainInfo.renderName
 
       const dateFormated = formatDistanceDate(deposit?.timestamp!)
 
@@ -78,21 +77,21 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
           <TableCell className={clsx(classes.row, classes.dataRow)}>
             <div className={classes.accountAddress}>
               <span className={classes.statusPill}>
-                {renderStatusIcon(status, classes)} {getDisplayedStatuses(status)}
+                {renderStatusIcon(status, classes)} {displayStatus(status)}
               </span>
             </div>
           </TableCell>
           <TableCell className={clsx(classes.row, classes.dataRow)}>
             <div style={{ width: "100%" }}>
               <span style={{ display: "flex" }}>
-                {renderNetworkIcon(fromDomainInfo?.chainId!, classes)} {fromDomainName}
+                {renderNetworkIcon(fromDomainInfo?.caipId, classes)} {fromDomainName}
               </span>
             </div>
           </TableCell>
           <TableCell className={clsx(classes.row, classes.dataRow)}>
             <div style={{ width: "100%" }}>
               <span style={{ display: "flex" }}>
-                {renderNetworkIcon(toDomainInfo?.chainId!, classes)} {toDomainName}
+                {renderNetworkIcon(toDomainInfo?.caipId, classes)} {toDomainName}
               </span>
             </div>
           </TableCell>
@@ -116,7 +115,7 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
           <TableCell className={clsx(classes.row, classes.dataRow)}>
             <span className={classes.amountInfo}>
               <div className={classes.amountContainer}>
-                <span>{renderAmountValue(type as ResourceTypes, amountWithFormatedDecimals, resourceID, fromDomainInfo)}</span>
+                <span>{renderAmountValue(type as ResourceTypes, amountWithFormatedDecimals, resourceID, state.resourcesPerPage)}</span>
                 {renderFormatedConvertedAmount(type as ResourceTypes, usdValue)}
               </div>
             </span>
@@ -148,7 +147,7 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
           <TableCell sx={{ borderTopRightRadius: "12px !important" }}>Value</TableCell>
         </TableRow>
       </TableHead>
-      {state.isLoading === "done" && <TableBody>{renderTransferList(filterTransfers(state.transfers, sharedConfig))}</TableBody>}
+      {state.isLoading === "done" && <TableBody>{renderTransferList(filterTransfers(state.transfers, domainMetadata))}</TableBody>}
       {state.isLoading === "loading" && (
         <TableBody>
           <TableRow>

src/components/Header/Header.tsx

@@ -1,11 +1,12 @@
-import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material";
-import TopBarNetworkConnect from "../TopBarNetworkComponent";
-import { useStyles } from "./styles";
-import { useExplorer } from "../../context";
+import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material"
+import TopBarNetworkConnect from "../TopBarNetworkComponent"
+import { useExplorer } from "../../context"
+import { useStyles } from "./styles"
 
 export default function Header() {
-  const { classes } = useStyles();
-  const explorerContext = useExplorer();
+  const { classes } = useStyles()
+  const explorerContext = useExplorer()
+  const { explorerContextState } = explorerContext
   return (
     <AppBar position="static" color="transparent" className={classes.root}>
       <Container maxWidth="xl" className={classes.mainAppBar}>
@@ -35,12 +36,11 @@ export default function Header() {
             getChainId={explorerContext.getChainId}
             chainId={explorerContext.chainId}
             account={explorerContext.account}
-            explorerContextDispatcher={
-              explorerContext.explorerContextDispatcher
-            }
+            explorerContextDispatcher={explorerContext.explorerContextDispatcher}
+            explorerContextState={explorerContextState}
           />
         </div>
       </Container>
     </AppBar>
-  );
+  )
 }

src/components/TopBarNetworkComponent/TopBarNetworkConnect.tsx

@@ -1,92 +1,74 @@
-import { Button, Typography } from "@mui/material";
-import React, { useEffect } from "react";
-import LogoutIcon from "@mui/icons-material/Logout";
-import {
-  Actions,
-  BridgeConfig,
-  ExplorerContext,
-} from "../../types";
-import { getIconNamePerChainId, shortenAddress } from "../../utils/Helpers";
+import { Button, Typography } from "@mui/material"
+import React, { useEffect } from "react"
+import LogoutIcon from "@mui/icons-material/Logout"
+import { Actions, BridgeConfig, ExplorerContext, ExplorerContextState } from "../../types"
 
-import { useStyles } from "./styles";
+import { getIconNamePerChainId, shortenAddress } from "../../utils/transferHelpers"
+import { useStyles } from "./styles"
 
 type TopBarNetworkConnectProps = {
-  walletConnecting: boolean;
-  homeConfig: BridgeConfig | undefined;
-  address: string | undefined;
-  getAccount: ExplorerContext["getAccount"];
-  getChainId: ExplorerContext["getChainId"];
-  chainId: ExplorerContext["chainId"];
-  account: ExplorerContext["account"];
-  explorerContextDispatcher: React.Dispatch<Actions>;
-};
+  walletConnecting: boolean
+  homeConfig: BridgeConfig | undefined
+  address: string | undefined
+  getAccount: ExplorerContext["getAccount"]
+  getChainId: ExplorerContext["getChainId"]
+  chainId: ExplorerContext["chainId"]
+  account: ExplorerContext["account"]
+  explorerContextDispatcher: React.Dispatch<Actions>
+  explorerContextState?: ExplorerContextState
+}
 
-export default function TopBarNetworkConnect({
-  getAccount,
-  getChainId,
-  chainId,
-  account,
-  explorerContextDispatcher,
-}: TopBarNetworkConnectProps) {
-  const { classes } = useStyles();
-  const [localAddress, setLocalAddress] = React.useState<string | undefined>(
-    "",
-  );
-  const [isReady, setIsReady] = React.useState(false);
-  const [currentChainId, setCurrentChainId] = React.useState<
-    number | undefined
-  >(undefined);
+export default function TopBarNetworkConnect({ getAccount, getChainId, chainId, account, explorerContextDispatcher }: TopBarNetworkConnectProps) {
+  const { classes } = useStyles()
+  const [localAddress, setLocalAddress] = React.useState<string | undefined>("")
+  const [isReady, setIsReady] = React.useState(false)
+  const [currentChainId, setCurrentChainId] = React.useState<number | undefined>(undefined)
 
   const handleClickOpen = async () => {
-    const account = await getAccount();
-    const chainId = Number(await getChainId());
+    const account = await getAccount()
+    const chainId = Number(await getChainId())
 
-    setCurrentChainId(chainId);
+    setCurrentChainId(chainId)
 
-    setLocalAddress(account);
+    setLocalAddress(account)
 
     explorerContextDispatcher({
       type: "set_my_address",
       payload: account,
-    });
+    })
 
-    setIsReady(true);
-  };
+    setIsReady(true)
+  }
 
   const handleDisconnect = () => {
-    setCurrentChainId(undefined);
+    setCurrentChainId(undefined)
 
-    setLocalAddress("");
+    setLocalAddress("")
 
     explorerContextDispatcher({
       type: "set_my_address",
       payload: undefined,
-    });
+    })
 
-    setIsReady(false);
-  };
+    setIsReady(false)
+  }
 
   useEffect(() => {
     if (chainId !== undefined && chainId !== currentChainId) {
-      setCurrentChainId(chainId);
+      setCurrentChainId(chainId)
     }
 
     if (account !== undefined && account !== localAddress) {
-      setLocalAddress(account);
+      setLocalAddress(account)
     }
-  }, [chainId, account]);
+  }, [chainId, account])
 
   return (
     <>
       <section className={classes.state}>
         {window.ethereum !== undefined &&
           (!isReady ? (
-            <Button
-              fullWidth
-              variant="contained"
-              onClick={handleClickOpen}
-              sx={{ px: 3, fontSize: 18 }}
-            >
+            <Button fullWidth variant="contained" onClick={handleClickOpen} sx={{ px: 3, fontSize: 18 }}>
               Connect Wallet
             </Button>
           ) : (
@@ -102,24 +84,15 @@ export default function TopBarNetworkConnect({
               >
                 <Typography variant="h6" className={classes.address}>
                   {currentChainId !== undefined && (
-                    <img
-                      src={`/assets/icons/${getIconNamePerChainId(
-                        currentChainId,
-                      )}`}
-                      alt={"native token icon"}
-                      className={classes.indicator}
-                    />
+                    <img src={`/assets/icons/${getIconNamePerChainId(currentChainId)}`} alt={"native token icon"} className={classes.indicator} />
                   )}
                 </Typography>
                 <div className={classes.accountInfo}>
                   <Typography variant="h6" className={classes.address}>
                     {shortenAddress(localAddress!)}
                   </Typography>
                   <div className={classes.logoutContainer}>
-                    <div
-                      className={classes.logoutIconContainer}
-                      onClick={handleDisconnect}
-                    >
+                    <div className={classes.logoutIconContainer} onClick={handleDisconnect}>
                       <LogoutIcon />
                     </div>
                   </div>
@@ -129,5 +102,5 @@ export default function TopBarNetworkConnect({
           ))}
       </section>
     </>
-  );
+  )
 }

src/context/ExplorerContext.tsx

@@ -6,7 +6,7 @@ import { getAccount, getChainId } from "./connection"
 import { routes } from "./data"
 import { reducer } from "./reducer"
 import { useGetTransferData } from "./useGetTransferData"
-import { useGetSharedConfig } from "./useGetSharedConfig"
+import { useGetResorceInfoPerDomain, useGetDomainMetadata } from "./useGetDomainMetadata"
 
 const ExplorerCtx = React.createContext<ExplorerContextType | undefined>(undefined)
 
@@ -24,6 +24,9 @@ const ExplorerProvider = ({ children }: { children: React.ReactNode | React.Reac
     pillColorStatus: undefined,
     account: undefined,
     sharedConfig: [],
+    domainMetadata: {},
+    resourcesPerPage: [],
+    sourceDomainsIds: [],
   }
 
   const [explorerContextState, explorerContextDispatcher] = React.useReducer(reducer, explorerPageContextState)
@@ -36,10 +39,12 @@ const ExplorerProvider = ({ children }: { children: React.ReactNode | React.Reac
   const urlParams = new URLSearchParams(search)
   const page = urlParams.get("page")
 
-  useGetSharedConfig(explorerContextDispatcher)
+  useGetDomainMetadata(explorerContextDispatcher)
 
   useGetTransferData(routes(), explorerContextDispatcher, explorerContextState, Number(page))
 
+  useGetResorceInfoPerDomain(explorerContextDispatcher, explorerContextState.sourceDomainsIds)
+
   useEffect(() => {
     if (window.ethereum !== undefined) {
       window.ethereum.on("chainChanged", (chainId: unknown) => {

src/context/reducer.ts

@@ -38,6 +38,24 @@ export function reducer(state: ExplorerContextState, action: Actions): ExplorerC
         ...state,
         sharedConfig: action.payload,
       }
+    case "fetch_domain_metadata": {
+      return {
+        ...state,
+        domainMetadata: action.payload,
+      }
+    }
+    case "set_resources_per_page": {
+      return {
+        ...state,
+        resourcesPerPage: action.payload,
+      }
+    }
+    case "set_source_domains_ids": {
+      return {
+        ...state,
+        sourceDomainsIds: action.payload,
+      }
+    }
     default:
       return state
   }