fix: use a void signer for ethers providers (#3327)

package.json

@@ -15,7 +15,6 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@ethersproject/experimental": "^5.4.0",
     "@gnosis.pm/safe-apps-web3-react": "^0.6.0",
     "@graphql-codegen/cli": "1.21.5",
     "@graphql-codegen/typescript": "1.22.3",
@@ -173,11 +172,13 @@
     "@babel/runtime": "^7.17.0",
     "@ethersproject/abi": "^5.4.1",
     "@ethersproject/abstract-provider": "^5.4.1",
+    "@ethersproject/abstract-signer": "^5.4.1",
     "@ethersproject/address": "^5.4.0",
     "@ethersproject/bignumber": "^5.4.2",
     "@ethersproject/bytes": "^5.4.0",
     "@ethersproject/constants": "^5.4.0",
     "@ethersproject/contracts": "^5.4.1",
+    "@ethersproject/experimental": "^5.4.0",
     "@ethersproject/hash": "^5.4.0",
     "@ethersproject/providers": "5.4.0",
     "@ethersproject/solidity": "^5.4.0",

src/lib/components/Widget.tsx

 import { Provider as EthersProvider } from '@ethersproject/abstract-provider'
 import { Signer as EthersSigner } from '@ethersproject/abstract-signer'
-import { Eip1193Bridge } from '@ethersproject/experimental'
-import { ExternalProvider } from '@ethersproject/providers'
-import { JsonRpcProvider } from '@ethersproject/providers'
 import { Provider as Eip1193Provider } from '@web3-react/types'
 import { DEFAULT_LOCALE, SupportedLocale } from 'constants/locales'
 import { Provider as AtomProvider } from 'jotai'
 import { TransactionsUpdater } from 'lib/hooks/transactions'
 import { BlockUpdater } from 'lib/hooks/useBlockNumber'
+import useEip1193Provider from 'lib/hooks/useEip1193Provider'
 import { UNMOUNTING } from 'lib/hooks/useUnmount'
 import { Provider as I18nProvider } from 'lib/i18n'
 import { MulticallUpdater, store as multicallStore } from 'lib/state/multicall'
@@ -96,7 +94,7 @@ function Updaters() {
 export type WidgetProps = {
   theme?: Theme
   locale?: SupportedLocale
-  provider?: Eip1193Provider | ExternalProvider | JsonRpcProvider | { provider: EthersProvider; signer: EthersSigner }
+  provider?: Eip1193Provider | EthersProvider | { provider: EthersProvider; signer: EthersSigner }
   jsonRpcEndpoint?: string
   width?: string | number
   dialog?: HTMLElement | null
@@ -116,16 +114,7 @@ export default function Widget(props: PropsWithChildren<WidgetProps>) {
     className,
     onError,
   } = props
-
-  let eip1193: Eip1193Provider | undefined
-  if (provider && 'provider' in provider && 'signer' in provider) {
-    eip1193 = new Eip1193Bridge(provider.signer, provider.provider)
-  } else if (provider instanceof JsonRpcProvider) {
-    eip1193 = new Eip1193Bridge(provider.getSigner(), provider)
-  } else if (provider) {
-    eip1193 = provider as Eip1193Provider
-  }
-
+  const eip1193 = useEip1193Provider(provider)
   const [dialog, setDialog] = useState<HTMLDivElement | null>(null)
   return (
     <StrictMode>

src/lib/hooks/useEip1193Provider.ts

+import { Provider as EthersProvider } from '@ethersproject/abstract-provider'
+import { Signer as EthersSigner } from '@ethersproject/abstract-signer'
+import { VoidSigner } from '@ethersproject/abstract-signer'
+import { Eip1193Bridge } from '@ethersproject/experimental'
+import { JsonRpcProvider } from '@ethersproject/providers'
+import { Provider as Eip1193Provider } from '@web3-react/types'
+import { ZERO_ADDRESS } from 'constants/misc'
+import { useMemo } from 'react'
+
+const voidSigner = new VoidSigner(ZERO_ADDRESS)
+
+export default function useEip1193Provider(
+  provider?: Eip1193Provider | EthersProvider | JsonRpcProvider | { provider: EthersProvider; signer: EthersSigner }
+): Eip1193Provider | undefined {
+  return useMemo(() => {
+    if (provider) {
+      if (provider instanceof EthersProvider) {
+        // A JsonRpcProvider includes its own Signer, otherwise use a VoidSigner.
+        const signer = 'getSigner' in provider ? provider.getSigner() : null ?? voidSigner
+        return new Eip1193Bridge(signer, provider)
+      }
+
+      if ('provider' in provider && 'signer' in provider) {
+        return new Eip1193Bridge(provider.signer, provider.provider)
+      }
+
+      // See https://github.com/ethereum/EIPs/blob/master/EIPS/eip-1193.md.
+      if ('request' in provider && 'on' in provider && 'removeListener' in provider) {
+        return provider
+      }
+    }
+    return
+  }, [provider])
+}

yarn.lock

@@ -1553,7 +1553,7 @@
     "@ethersproject/logger" "^5.4.0"
     "@ethersproject/properties" "^5.4.0"
 
-"@ethersproject/abstract-signer@^5.4.0", "@ethersproject/abstract-signer@^5.5.0":
+"@ethersproject/abstract-signer@^5.4.0", "@ethersproject/abstract-signer@^5.4.1", "@ethersproject/abstract-signer@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/abstract-signer/-/abstract-signer-5.5.0.tgz#590ff6693370c60ae376bf1c7ada59eb2a8dd08d"
   integrity sha512-lj//7r250MXVLKI7sVarXAbZXbv9P50lgmJQGr2/is82EwEb8r7HrxsmMqAjTsztMYy7ohrIhGMIml+Gx4D3mA==