"TypeError: Unsupported chain" calling useContractFunction

[goneale]

Hi Team

Great framework. Can't seem to get past this one, no matter how I try. Fairly new to dApp design, but pretty sure I have everything setup right.

As soon as I call this,

const { state: buyTx, send: buyTest } = useContractFunction(contract, 'test', { transactionName: 'Buy test' });
buyTest();

I receive this via the:

useEffect(() => {
    console.log(buyTx);
  }, [buyTx]);

You can clearly see the chainId=5 in the screenshot, this is Goerli and I can connect to my wallet OK to get this far.

I should also state, if I change my contract function to buy1 for example,. it crashes stating Unhandled Rejection (TypeError): contractWithSigner[functionName] is not a function so I know it's communicating to the very simple buy method I have settup in Solidity (currently returning 123 as a uint256).

Thanks in advance

[goneale]

After further inspection by console.logging in the code, it appears this destructure would never work, as chainId is never included in the object?

[goneale]

Hi team, can anybody help me with this please? :)

[kalanyuz]

Experiencing the same problem here. It seems like
await transactionPromise in usePromiseTransaction has already resolved and is returning the result instead of the expected StoredTransacton object. Not sure if this happens only on local chain or not.

[kalanyuz]

@goneale I just use ethers + useState directly as a workaround instead for the time being.
https://docs.ethers.io/v5/getting-started/#getting-started--contracts

Also willing to submit a PR if someone can point me where to look.

[leclercb]

Same problem here too.

[osengaa10]

I too am having this issue (on Goerli Testnet). Everything is working as it should on the blockchain and contract layer, but the UI crashes.

[ayushsharma-eth]

Just got this same error on Ropsten. In my case, it likely has to due with Metamask using EIP-1559 type transactions. Yesterday, it was using Legacy type transactions and working fine.

[AlexBrandes]

I've been having the same issue since yesterday as well. Here's a workaround that seems to fix the issue. Basically, all we need to do is add the chainId to the result of the contract function.

import { useCallback, useState } from 'react'
import { usePromiseTransaction } from '@usedapp/core/dist/esm/src/hooks/usePromiseTransaction'
import { Contract } from '@ethersproject/contracts'

export const useContractFunction = (
  contract: Contract,
  functionName: string,
  chainId: number | undefined,
  options?: { transactionName?: string }
) => {
  const [events, setEvents] = useState<Record<string, any> | undefined>(
    undefined
  )

  const { promiseTransaction, state } = usePromiseTransaction(chainId, options)

  const send = useCallback(
    async (...args: any[]) => {
      const sendPromise = contract[functionName](...args).then(
        (result: any): Promise<any> => {
          // Need to add chainId here to prevent "TypeError: Unsupported Chain" error message
          result.chainId = chainId
          return result
        }
      )

      const receipt = await promiseTransaction(sendPromise)

      if (receipt) {
        if (receipt.logs && receipt.logs.length > 0) {
          setEvents(receipt.logs.map((log) => contract.interface.parseLog(log)))
        } else {
          setEvents([])
        }
      }
    },
    [contract, functionName, options]
  )

  return { send, state, events }
}

[mortimr]

Hey Alex, thanks a lot for your workaround !

It wasn't working at first on my end because the contract instance wasn't connect to a signer, had to make some tweaks (also removed chainId as parameter and got it directly from useEthers)

import { useCallback, useState } from 'react'
import { usePromiseTransaction } from '@usedapp/core/dist/esm/src/hooks/usePromiseTransaction'
import { Contract } from '@usedapp/core/node_modules/ethers';
import { Web3Provider } from '@usedapp/core/node_modules/@ethersproject/providers';
import { TransactionOptions, useEthers } from '@usedapp/core';
import { Signer } from 'ethers';

export function connectContractToSigner(contract: Contract, options?: TransactionOptions, library?: Web3Provider) {
  if (contract.signer) {
    return contract
  }

  if (options?.signer) {
    return contract.connect(options.signer as Signer)
  }

  if (library?.getSigner()) {
    return contract.connect(library.getSigner())
  }

  throw new TypeError('No signer available in contract, options or library')
}

export const useContractFunction__fix = (
  contract: Contract,
  functionName: string,
  options?: TransactionOptions
) => {
  const { library, chainId } = useEthers()
  const [events, setEvents] = useState<Record<string, any> | undefined>(
    undefined
  )

  const { promiseTransaction, state } = usePromiseTransaction(chainId, options)

  const send = useCallback(
    async (...args: any[]) => {
      const contractWithSigner = connectContractToSigner(contract, options, library)
      const sendPromise = contractWithSigner[functionName](...args).then(
        (result: any): Promise<any> => {
          // Need to add chainId here to prevent "TypeError: Unsupported Chain" error message
          result.chainId = chainId
          return result
        }
      )

      const receipt: any = await promiseTransaction(sendPromise)

      if (receipt) {
        if (receipt.logs && receipt.logs.length > 0) {
          setEvents(receipt.logs.map((log) => contract.interface.parseLog(log)))
        } else {
          setEvents([])
        }
      }
    },
    [contract, functionName, chainId, promiseTransaction, library, options]
  )

  return { send, state, events }
}

[mortimr]

Also if anyone needs useSendTransaction

import { TransactionRequest } from '@ethersproject/abstract-provider'
import { TransactionOptions, useEthers } from '@usedapp/core';
import { usePromiseTransaction } from '@usedapp/core/dist/esm/src/hooks/usePromiseTransaction';

export function useSendTransaction__fix(options?: TransactionOptions) {
  const { library, chainId } = useEthers()
  const { promiseTransaction, state } = usePromiseTransaction(chainId, options)

  const sendTransaction = async (transactionRequest: TransactionRequest) => {
    const signer = options?.signer || library?.getSigner()
    if (signer) {
      await promiseTransaction(
        signer.sendTransaction(transactionRequest)
          .then(
            (tx: any) => {
              tx.chainId = chainId
              return tx;
            }
          )
      )
    }
  }

  return { sendTransaction, state }
}

[quagliero]

Thanks for these @mortimr @AlexBrandes, was wondering why in last 24hours the app randomly started crashing. Hopefully useDapp can get a fix released asap.

Reply with your address, I'd like to send you an Eth beer. 🍻

[derekbar90]

This is due to an update of Metamask to start doing type 2 transactions (EIP1559 transactions)

[derekbar90]

Ethers pushed support but it seems useDapp is using a pinned older version of ethers

https://github.com/ethers-io/ethers.js/blob/master/CHANGELOG.md#ethersv540-2021-06-26-0150

https://github.com/EthWorks/useDApp/blob/master/packages/core/package.json#L41

[quagliero]

@derekbar90 I wonder if using a resolution in your app’s package.json using the latest ethers version would fix this temporarily while useDapp fixes.

[nezouse]

Hi, i fixed the issue with chainId being equal 0, it's up in version 0.4.5

[drewspanning]

This still seems to be an issue for Avalanche Fuji contract calls

Currently getting this call stack:

Unhandled Runtime Error
TypeError: Unsupported chain

Call Stack
transactionReducer
node_modules/@usedapp/core/dist/esm/src/providers/transactions/reducer.js (14:0)
updateReducer
node_modules/react-dom/cjs/react-dom.development.js (15318:0)
Object.useReducer
node_modules/react-dom/cjs/react-dom.development.js (16425:0)
useReducer
node_modules/react/cjs/react.development.js (1512:0)
TransactionProvider
node_modules/@usedapp/core/dist/esm/src/providers/transactions/provider.js (15:48)
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js (14985:0)
updateFunctionComponent
node_modules/react-dom/cjs/react-dom.development.js (17356:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (19063:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (3945:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (3994:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4056:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (23964:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (22776:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (22707:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (22670:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (22293:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (11327:0)
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js (468:0)
runWithPriority$1
node_modules/react-dom/cjs/react-dom.development.js (11276:0)
flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js (11322:0)
flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js (11309:0)
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js (21893:0)
dispatchAction
node_modules/react-dom/cjs/react-dom.development.js (16139:0)
eval
node_modules/@usedapp/core/dist/esm/src/providers/transactions/provider.js (21:0)
eval
node_modules/@usedapp/core/dist/esm/src/hooks/usePromiseTransaction.js (21:0)
async eval
node_modules/@usedapp/core/dist/esm/src/hooks/useContractFunction.js (23:0)