fix(chain): override apollo ID matching for chain

If the chains query returns different chain with same id eg
```
[
                {
                    "id": "1",
                    "enabled": true,
                    "network": "aptos",
                    "__typename": "Chain"
                },
                {
                    "id": "1",
                    "enabled": true,
                    "network": "evm",
                    "__typename": "Chain"
                }
]
```

The default apollo client behaviour is to assume ID is always unique, but it is not the case here so things start to become confused like in the screen shot where both “1” show up for APTOS even though the UI correctly filters it.

The fix is to tell apollo client how to handle the uniqueness of the chain object.

JIRA: https://smartcontract-it.atlassian.net/browse/DPA-1384

.changeset/eighty-apricots-rest.md

@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': patch
+---
+
+fix: override unique handling logic of apollo client for chains

src/apollo.ts

@@ -1,4 +1,9 @@
-import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client'
+import {
+  ApolloClient,
+  defaultDataIdFromObject,
+  HttpLink,
+  InMemoryCache,
+} from '@apollo/client'
 import generatedIntrospection from 'src/types/generated/possibleTypes'
 
 const baseURL = process.env.CHAINLINK_BASEURL ?? location.origin
@@ -11,6 +16,23 @@ const httpLink = new HttpLink({
 export const client = new ApolloClient({
   cache: new InMemoryCache({
     possibleTypes: generatedIntrospection.possibleTypes,
+    // we need to explicitly handle the uniqueness of chain object because
+    // ID is not unique across as different network can have the same ID
+    // which confuses the caching of apollo client.
+    // the code below is to override the handling of uniqueness for Chain type.
+    dataIdFromObject(responseObject) {
+      switch (responseObject.__typename) {
+        case 'Chain':
+          if (!responseObject.network) {
+            throw new Error(
+              'Due to Chain ID not being unique across chain, ensure network is fetched too',
+            )
+          }
+          return `Chain:${responseObject.network}:${responseObject.id}`
+        default:
+          return defaultDataIdFromObject(responseObject)
+      }
+    },
   }),
   link: httpLink,
 })

src/components/Form/ChainConfigurationForm.test.tsx

@@ -23,6 +23,7 @@ describe('ChainConfigurationForm', () => {
             address: '0x1111',
             chain: {
               id: '1111',
+              network: 'evm',
             },
             createdAt: '2021-10-06T00:00:00Z',
             isDisabled: false,
@@ -428,6 +429,7 @@ function renderChainConfigurationForm(
           address: '0x1111',
           chain: {
             id: '1111',
+            network: 'evm',
           },
           createdAt: '2021-10-06T00:00:00Z',
           isDisabled: false,

src/hooks/queries/useEVMAccountsQuery.ts

@@ -5,6 +5,7 @@ export const ETH_KEYS_PAYLOAD__RESULTS_FIELDS = gql`
     address
     chain {
       id
+      network
     }
     createdAt
     ethBalance

src/screens/Dashboard/AccountBalanceCard.tsx

@@ -15,6 +15,7 @@ export const ACCOUNT_BALANCES_PAYLOAD__RESULTS_FIELDS = gql`
     address
     chain {
       id
+      network
     }
     ethBalance
     isDisabled

src/screens/Node/NodeView.tsx

@@ -14,6 +14,7 @@ export const NODE_PAYLOAD_FIELDS = gql`
     name
     chain {
       id
+      network
     }
     httpURL
     wsURL

src/screens/Nodes/NodesView.tsx

@@ -22,6 +22,7 @@ export const NODES_PAYLOAD__RESULTS_FIELDS = gql`
     id
     chain {
       id
+      network
     }
     name
     state

src/screens/Transaction/TransactionView.tsx

@@ -12,6 +12,7 @@ export const ETH_TRANSACTION_PAYLOAD_FIELDS = gql`
   fragment EthTransactionPayloadFields on EthTransaction {
     chain {
       id
+      network
     }
     data
     from

src/screens/Transactions/TransactionsView.tsx

@@ -21,6 +21,7 @@ export const ETH_TRANSACTIONS_PAYLOAD__RESULTS_FIELDS = gql`
   fragment EthTransactionsPayload_ResultsFields on EthTransaction {
     chain {
       id
+      network
     }
     from
     hash

support/factories/gql/fetchAccountBalances.ts

@@ -8,6 +8,7 @@ export function buildETHKey(
     chain: {
       __typename: 'Chain',
       id: '42',
+      network: 'evm',
     },
     ethBalance: '0.100000000000000000',
     isDisabled: false,

support/factories/gql/fetchETHKeys.ts

@@ -11,6 +11,7 @@ export function buildETHKey(
     address: '0x0000000000000000000000000000000000000001',
     chain: {
       id: '42',
+      network: 'evm',
     },
     createdAt: minuteAgo,
     ethBalance: '0.100000000000000000',

support/factories/gql/fetchEthTransaction.ts

@@ -6,6 +6,7 @@ export function buildEthTx(
     __typename: 'EthTransaction',
     chain: {
       id: '42',
+      network: 'evm',
     },
     data: '0x',
     from: '0x0000000000000000000000000000000000000001',

support/factories/gql/fetchEthTransactions.ts

@@ -6,6 +6,7 @@ export function buildEthTx(
     __typename: 'EthTransaction',
     chain: {
       id: '42',
+      network: 'evm',
     },
     from: '0x0000000000000000000000000000000000000001',
     hash: '0x1111111111111111',

support/factories/gql/fetchNode.ts

@@ -10,6 +10,7 @@ export function buildNodePayloadFields(
     wsURL: 'wss://node1.com',
     chain: {
       id: '42',
+      network: 'evm',
     },
     state: '',
     sendOnly: false,

support/factories/gql/fetchNodes.ts

@@ -8,6 +8,7 @@ export function buildNode(
     name: 'node1',
     chain: {
       id: '42',
+      network: 'evm',
     },
     state: '',
     sendOnly: false,
@@ -23,6 +24,7 @@ export function buildNodes(): ReadonlyArray<NodesPayload_ResultsFields> {
       name: 'node1',
       chain: {
         id: '42',
+        network: 'evm',
       },
       order: 32,
     }),
@@ -31,6 +33,7 @@ export function buildNodes(): ReadonlyArray<NodesPayload_ResultsFields> {
       name: 'node2',
       chain: {
         id: '5',
+        network: 'evm',
       },
     }),
   ]