fix(react): out-of-sync persisted contract results

packages/react/src/hooks/contracts/useContractRead.ts

@@ -10,7 +10,7 @@ import { useQueryClient } from 'react-query'
 
 import { QueryConfig, QueryFunctionArgs } from '../../types'
 import { useBlockNumber } from '../network-status'
-import { useChainId, useQuery } from '../utils'
+import { parseContractResult, useChainId, useQuery } from '../utils'
 
 type UseContractReadArgs = Partial<ReadContractConfig> & {
   /** If set to `true`, the cache will depend on the block number */
@@ -127,7 +127,7 @@ export function useContractRead(
     watch,
   ])
 
-  return useQuery(queryKey_, queryFn, {
+  const contractReadQuery = useQuery(queryKey_, queryFn, {
     cacheTime,
     enabled,
     staleTime,
@@ -136,4 +136,19 @@ export function useContractRead(
     onSettled,
     onSuccess,
   })
+
+  const data = React.useMemo(
+    () =>
+      parseContractResult({
+        contractInterface: contractConfig.contractInterface,
+        data: contractReadQuery.data,
+        functionName,
+      }),
+    [contractReadQuery.data],
+  )
+
+  return {
+    ...contractReadQuery,
+    data,
+  }
 }

packages/react/src/hooks/utils/index.ts

@@ -1,3 +1,4 @@
+export { parseContractResult } from './parseContractResult'
 export { useChainId } from './useChainId'
 export { useForceUpdate } from './useForceUpdate'
 export { useQuery } from './useQuery'

packages/react/src/hooks/utils/parseContractResult.test.ts

@@ -0,0 +1,47 @@
+import { BigNumber } from 'ethers'
+
+import { parseContractResult } from './parseContractResult'
+
+const contractInterface = [
+  {
+    inputs: [
+      {
+        internalType: 'uint256',
+        name: '',
+        type: 'uint256',
+      },
+    ],
+    name: 'gms',
+    outputs: [
+      {
+        internalType: 'uint256',
+        name: 'timestamp',
+        type: 'uint256',
+      },
+      {
+        internalType: 'address',
+        name: 'sender',
+        type: 'address',
+      },
+    ],
+    stateMutability: 'view',
+    type: 'function',
+  },
+]
+
+describe('parseContractResult', () => {
+  it('should parse the data to an ethers Result if there are no named keys', () => {
+    const data = [
+      BigNumber.from(1654322661),
+      '0xa5cc3c03994DB5b0d9A5eEdD10CabaB0813678AC',
+    ]
+    expect(
+      parseContractResult({
+        contractInterface,
+        data,
+
+        functionName: 'gms',
+      }),
+    ).toEqual(Object.assign(data, { timestamp: data[0], sender: data[1] }))
+  })
+})

packages/react/src/hooks/utils/parseContractResult.ts

@@ -0,0 +1,28 @@
+import { Contract, ContractInterface } from 'ethers/lib/ethers'
+import { FunctionFragment, Result } from 'ethers/lib/utils'
+
+export function parseContractResult({
+  contractInterface,
+  data,
+  functionName,
+}: {
+  contractInterface: ContractInterface
+  data: Result | undefined
+  functionName: string
+}) {
+  if (data && Array.isArray(data) && Object.keys(data).length === data.length) {
+    const { fragments } = Contract.getInterface(contractInterface)
+    const functionFragment = FunctionFragment.from(
+      fragments.find((fragment) => fragment.name === functionName) || {},
+    )
+    const dataObject = functionFragment.outputs?.reduce(
+      (dataObject, output, i) => ({
+        ...dataObject,
+        [output.name]: data[i],
+      }),
+      {},
+    )
+    return Object.assign(data, dataObject)
+  }
+  return data
+}