From bf7d1da17205416f52f61f71eec2ead329fb87d0 Mon Sep 17 00:00:00 2001
From: kien-ngo <26052673+kien-ngo@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:00:34 +0000
Subject: [PATCH] Fix Engine UI crash when `chain` is undefined | DASH-42
 (#2654)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- start pr-codex -->

## PR-Codex overview
This PR ensures optional chaining is used to access properties in various components, preventing errors when properties are undefined.

### Detailed summary
- Added optional chaining to access `chain` properties in multiple components
- Ensured safe access to `chain.explorers` and `chain.icon` properties

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../contract-subscription/contract-subscriptions-table.tsx    | 2 +-
 src/components/engine/overview/backend-wallets-table.tsx      | 2 +-
 src/components/engine/relayer/relayers-table.tsx              | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/engine/contract-subscription/contract-subscriptions-table.tsx b/src/components/engine/contract-subscription/contract-subscriptions-table.tsx
index 1f354172fb..9866ab0025 100644
--- a/src/components/engine/contract-subscription/contract-subscriptions-table.tsx
+++ b/src/components/engine/contract-subscription/contract-subscriptions-table.tsx
@@ -290,7 +290,7 @@ const RemoveModal = ({
               <FormControl>
                 <FormLabel>Chain</FormLabel>
                 <Flex align="center" gap={2}>
-                  <ChainIcon size={12} ipfsSrc={chain.icon?.url} />
+                  <ChainIcon size={12} ipfsSrc={chain?.icon?.url} />
                   <Text>{chain.name}</Text>
                 </Flex>
               </FormControl>
diff --git a/src/components/engine/overview/backend-wallets-table.tsx b/src/components/engine/overview/backend-wallets-table.tsx
index 321148b3ea..73fd7f786b 100644
--- a/src/components/engine/overview/backend-wallets-table.tsx
+++ b/src/components/engine/overview/backend-wallets-table.tsx
@@ -141,7 +141,7 @@ const BackendWalletBalanceCell: React.FC<BackendWalletBalanceCellProps> = ({
     </Text>
   );
 
-  const explorer = chain.explorers?.[0];
+  const explorer = chain?.explorers?.[0];
   if (!explorer) {
     return balanceComponent;
   }
diff --git a/src/components/engine/relayer/relayers-table.tsx b/src/components/engine/relayer/relayers-table.tsx
index a47755c255..1dc2451a8a 100644
--- a/src/components/engine/relayer/relayers-table.tsx
+++ b/src/components/engine/relayer/relayers-table.tsx
@@ -71,7 +71,7 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
         const chain = chainIdToChainRecord[parseInt(cell.getValue())];
         return (
           <Flex align="center" gap={2}>
-            <ChainIcon size={12} ipfsSrc={chain.icon?.url} />
+            <ChainIcon size={12} ipfsSrc={chain?.icon?.url} />
             <Text>{chain.name}</Text>
           </Flex>
         );
@@ -83,7 +83,7 @@ export const RelayersTable: React.FC<RelayersTableProps> = ({
         const { chainId, backendWalletAddress } = cell.row.original;
         const chain = chainIdToChainRecord[parseInt(chainId)];
 
-        const explorer = chain.explorers?.[0];
+        const explorer = chain?.explorers?.[0];
         if (!explorer) {
           return backendWalletAddress;
         }