feat: Multicall lib integration for widgets

package.json

@@ -17,9 +17,6 @@
     "@graphql-codegen/typescript": "1.22.3",
     "@graphql-codegen/typescript-operations": "^1.18.2",
     "@graphql-codegen/typescript-rtk-query": "^1.1.1",
-    "@lingui/cli": "^3.9.0",
-    "@lingui/macro": "^3.9.0",
-    "@lingui/react": "^3.9.0",
     "@metamask/jazzicon": "^2.0.0",
     "@popperjs/core": "^2.4.4",
     "@reach/dialog": "^0.10.3",
@@ -161,10 +158,12 @@
   },
   "license": "GPL-3.0-or-later",
   "dependencies": {
+    "@lingui/cli": "^3.9.0",
     "@lingui/core": "^3.9.0",
     "@lingui/macro": "^3.9.0",
     "@lingui/react": "^3.9.0",
     "@popperjs/core": "^2.4.4",
+    "@uniswap/redux-multicall": "^1.0.0",
     "immer": "^9.0.6",
     "jotai": "^1.3.7",
     "lodash": "^4.17.21",
@@ -181,10 +180,11 @@
     "styled-components": "^5.3.0",
     "wcag-contrast": "^3.0.0",
     "wicg-inert": "^3.1.1",
-    "widgets-web3-react/core": "npm:@web3-react/core@8.0.10-alpha.0",
-    "widgets-web3-react/metamask": "npm:@web3-react/metamask@8.0.10-alpha.0",
-    "widgets-web3-react/network": "npm:@web3-react/network@8.0.10-alpha.0",
-    "widgets-web3-react/types": "npm:@web3-react/types@8.0.10-alpha.0",
+    "widgets-web3-react/core": "npm:@web3-react/core@8.0.12-alpha.0",
+    "widgets-web3-react/eip1193": "npm:@web3-react/eip1193@8.0.12-alpha.0",
+    "widgets-web3-react/metamask": "npm:@web3-react/metamask@8.0.12-alpha.0",
+    "widgets-web3-react/network": "npm:@web3-react/network@8.0.12-alpha.0",
+    "widgets-web3-react/types": "npm:@web3-react/types@8.0.12-alpha.0",
     "zustand": "^3.6.5"
   }
 }

src/lib/components/Widget.tsx

@@ -1,10 +1,11 @@
-import { Provider as EthProvider } from '@ethersproject/abstract-provider'
 import { DEFAULT_LOCALE, SupportedLocale } from 'constants/locales'
 import { Provider as AtomProvider, useAtom } from 'jotai'
+import EIP1193Connector from 'lib/connectors/EIP1193'
 import { Provider as I18nProvider } from 'lib/i18n'
-import { providerAtom } from 'lib/state'
+import { connectorAtom } from 'lib/state'
 import styled, { Provider as ThemeProvider, Theme } from 'lib/theme'
 import { ReactNode, useEffect, useState } from 'react'
+import { Provider as EthProvider } from 'widgets-web3-react/types'
 
 import { Provider as DialogProvider } from './Dialog'
 
@@ -30,13 +31,16 @@ export interface WidgetProps {
   theme?: Partial<Theme>
   locale?: SupportedLocale
   provider?: EthProvider
+  jsonRpcEndpoint?: string
 }
 
-export default function Widget({ children, theme, locale = DEFAULT_LOCALE, provider }: WidgetProps) {
-  const [, setProvider] = useAtom(providerAtom)
+export default function Widget({ children, theme, locale = DEFAULT_LOCALE, provider, jsonRpcEndpoint }: WidgetProps) {
+  const [, setConnector] = useAtom(connectorAtom)
   useEffect(() => {
-    setProvider(provider)
-  }, [setProvider, provider])
+    const connector = new EIP1193Connector({ provider, jsonRpcEndpoint })
+    setConnector(connector)
+  }, [setConnector, provider, jsonRpcEndpoint])
+
   const [dialog, setDialog] = useState<HTMLDivElement | null>(null)
   return (
     <AtomProvider>

src/lib/connectors/EIP1193.ts

@@ -0,0 +1,32 @@
+import { Eip1193Bridge } from '@ethersproject/experimental'
+import { JsonRpcProvider } from '@ethersproject/providers'
+import { ZERO_ADDRESS } from 'constants/misc'
+import { VoidSigner } from 'ethers'
+import { initializeConnector, Web3ReactHooks } from 'widgets-web3-react/core'
+import { EIP1193 } from 'widgets-web3-react/eip1193'
+import { Provider } from 'widgets-web3-react/types'
+
+interface EIP1193ConnectorConstructorArgs {
+  provider?: Provider
+  jsonRpcEndpoint?: string
+}
+
+export default class EIP1193Connector {
+  connector: EIP1193
+  hooks: Web3ReactHooks
+  constructor({ provider, jsonRpcEndpoint }: EIP1193ConnectorConstructorArgs) {
+    if (provider) {
+      const [connector, hooks] = initializeConnector<EIP1193>((actions) => new EIP1193(actions, provider))
+      this.connector = connector
+      this.hooks = hooks
+    } else if (jsonRpcEndpoint) {
+      const ethersProvider = new JsonRpcProvider(jsonRpcEndpoint)
+      const provider = new Eip1193Bridge(new VoidSigner(ZERO_ADDRESS, ethersProvider), ethersProvider)
+      const [connector, hooks] = initializeConnector<EIP1193>((actions) => new EIP1193(actions, provider))
+      this.connector = connector
+      this.hooks = hooks
+    } else {
+      throw new Error('A provider or rpc url must be provided.')
+    }
+  }
+}

src/lib/cosmos.decorator.tsx

@@ -1,11 +1,11 @@
-import { Provider } from '@ethersproject/abstract-provider'
 import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from 'constants/locales'
 import { atom } from 'jotai'
 import { useAtomValue } from 'jotai/utils'
 import styled, { getDefaultTheme } from 'lib/theme'
 import { ReactNode } from 'react'
 import { useSelect, useValue } from 'react-cosmos/fixture'
 import { createGlobalStyle } from 'styled-components'
+import { Provider } from 'widgets-web3-react/types'
 
 import Widget from './components/Widget'
 import Connectors from './cosmos/components/Connectors'

src/lib/cosmos/components/Connectors.tsx

@@ -2,7 +2,7 @@ import { BigNumber } from '@ethersproject/bignumber'
 import { formatEther } from '@ethersproject/units'
 import { SupportedChainId } from 'constants/chains'
 import { useAtom } from 'jotai'
-import { providerAtom } from 'lib/state'
+import { providerAtom } from 'lib/cosmos.decorator'
 import styled from 'lib/theme'
 import { useEffect, useState } from 'react'
 import { Web3ReactHooks } from 'widgets-web3-react/core'

src/lib/hooks/multicall.ts

@@ -0,0 +1,8 @@
+import { multicall } from 'lib/state'
+
+export const {
+  useMultipleContractSingleData,
+  useSingleContractMultipleData,
+  useSingleContractWithCallData,
+  useSingleCallResult,
+} = multicall.hooks

src/lib/state/index.ts

@@ -1,4 +1,11 @@
-import { Provider as EthProvider } from '@ethersproject/abstract-provider'
+import { createMulticall } from '@uniswap/redux-multicall'
 import { atom } from 'jotai'
+import { atomWithStore } from 'jotai/redux'
+import EIP1193Connector from 'lib/connectors/EIP1193'
+import { createStore } from 'redux'
 
-export const providerAtom = atom<EthProvider | undefined>(undefined)
+export const connectorAtom = atom<EIP1193Connector | undefined>(undefined)
+
+export const multicall = createMulticall()
+const multicallStore = createStore(multicall.reducer)
+export const multicallStoreAtom = atomWithStore(multicallStore)

yarn.lock

@@ -5241,23 +5241,23 @@
     "@web3-react/types" "^6.0.7"
     tiny-invariant "^1.0.6"
 
-"@web3-react/store@^8.0.10-alpha.0":
-  version "8.0.10-alpha.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/store/-/store-8.0.10-alpha.0.tgz#2f0e2df275c635419d8bd48d62140cb1fb138dda"
-  integrity sha512-TlBlNZnZK52K8VlVAGLM2eWvocr57fr5vH2wKbmrO5toRh9I8KryLK7oKXrPVBRwGiyLCgR0eQ5Cuk4qz2Hqfw==
+"@web3-react/store@^8.0.12-alpha.0":
+  version "8.0.12-alpha.0"
+  resolved "https://registry.yarnpkg.com/@web3-react/store/-/store-8.0.12-alpha.0.tgz#ef52932ca9f8e5d26dbdc504f34edac9a7f92b98"
+  integrity sha512-0okr9MXEXjfaUJBSDmdzgRzvb1d7aiKJO6jYHRSkfTHLNpx5mK+5OMXEWQB7sifU4x+JxElMyeMZ3lLZ4NimLQ==
   dependencies:
     "@ethersproject/address" "^5.4.0"
-    "@web3-react/types" "^8.0.10-alpha.0"
+    "@web3-react/types" "^8.0.12-alpha.0"
 
 "@web3-react/types@^6.0.7":
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/@web3-react/types/-/types-6.0.7.tgz#34a6204224467eedc6123abaf55fbb6baeb2809f"
   integrity sha512-ofGmfDhxmNT1/P/MgVa8IKSkCStFiyvXe+U5tyZurKdrtTDFU+wJ/LxClPDtFerWpczNFPUSrKcuhfPX1sI6+A==
 
-"@web3-react/types@^8.0.10-alpha.0", "widgets-web3-react/types@npm:@web3-react/types@8.0.10-alpha.0":
-  version "8.0.10-alpha.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/types/-/types-8.0.10-alpha.0.tgz#15d05fe8d85a3681b6b2fba43d6d4c57a9d540cb"
-  integrity sha512-IluDls61C5O89vGgkAkAlDk67zgRMeSc5LkTCX9WQpjpRvQVqRSNpCtg3jLEzahoAFrcIj6n88oTLqXdvpmY/A==
+"@web3-react/types@^8.0.12-alpha.0", "widgets-web3-react/types@npm:@web3-react/types@8.0.12-alpha.0":
+  version "8.0.12-alpha.0"
+  resolved "https://registry.yarnpkg.com/@web3-react/types/-/types-8.0.12-alpha.0.tgz#ae0ee6bd9548c82f516d7895917cf6dccb0f2e87"
+  integrity sha512-Gd5HjoTBjMSpi7Xj/lpHD42rxu779Z0K3Dq0P24MT/PjjpakA/Euwh2g53UT4wRywqPJa7MH5cD20aul5NwpTQ==
 
 "@web3-react/walletconnect-connector@^7.0.2-alpha.0":
   version "7.0.2-alpha.0"
@@ -21188,30 +21188,37 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
 
-"widgets-web3-react/core@npm:@web3-react/core@8.0.10-alpha.0":
-  version "8.0.10-alpha.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/core/-/core-8.0.10-alpha.0.tgz#03396440c8a8c05f74e4e8b0a437f9892f0872a0"
-  integrity sha512-Rvoo/u8sDLT8o5ubcSOwoqD68Kuxpb95XYeq8IzQVj5FX/1FMu84WpZr3pxkRbV4ix4OX3CPjcRd3r8/BOqNAg==
+"widgets-web3-react/core@npm:@web3-react/core@8.0.12-alpha.0":
+  version "8.0.12-alpha.0"
+  resolved "https://registry.yarnpkg.com/@web3-react/core/-/core-8.0.12-alpha.0.tgz#f4c72740c8d240597b889cec24e066d09c6fbbac"
+  integrity sha512-kjgTL4R3Xn5HGDGZLYZtVvIznFM+hoymLYyJ+9sCNENPPKlyER3ErN9YA0Bp0i6+IQBlDwS08dIGVJ1Y1rYUGw==
   dependencies:
-    "@web3-react/store" "^8.0.10-alpha.0"
-    "@web3-react/types" "^8.0.10-alpha.0"
+    "@web3-react/store" "^8.0.12-alpha.0"
+    "@web3-react/types" "^8.0.12-alpha.0"
 
-"widgets-web3-react/metamask@npm:@web3-react/metamask@8.0.10-alpha.0":
-  version "8.0.10-alpha.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/metamask/-/metamask-8.0.10-alpha.0.tgz#2ffc6c6e7d866c90d7ae230f9fc680ab50dcbffd"
-  integrity sha512-z4kFt1kzPUxB0n6Y33bKHrRXDsqkL0YZGWthUWg3YC9pNl4iC1nQwsk1GUTM1SYseFM5CIgI5xBq+7po4BIndg==
+"widgets-web3-react/eip1193@npm:@web3-react/eip1193@8.0.12-alpha.0":
+  version "8.0.12-alpha.0"
+  resolved "https://registry.yarnpkg.com/@web3-react/eip1193/-/eip1193-8.0.12-alpha.0.tgz#33ac0073669d919e7a25eeefa9458fb0c06f20ce"
+  integrity sha512-HbY6cWjziR6VQvRb6Hxzw4iaGxJ9eMB07GwI+PzuM5T+5TDD0uHb+Rg9iieAofYTQcVDQ6RDF8MD35GUWLHIjA==
+  dependencies:
+    "@web3-react/types" "^8.0.12-alpha.0"
+
+"widgets-web3-react/metamask@npm:@web3-react/metamask@8.0.12-alpha.0":
+  version "8.0.12-alpha.0"
+  resolved "https://registry.yarnpkg.com/@web3-react/metamask/-/metamask-8.0.12-alpha.0.tgz#466b6b44fa6644018fb62a9f32f217e606e05ed9"
+  integrity sha512-72YvMzAojig1ZKASxK6FydrzSo5QdqKI6TSxXjR1tuX/4RMF7bESIzjR5o+le+berRJvnUgObHm2PXZYsuqp7g==
   dependencies:
     "@metamask/detect-provider" "^1.2.0"
-    "@web3-react/types" "^8.0.10-alpha.0"
+    "@web3-react/types" "^8.0.12-alpha.0"
 
-"widgets-web3-react/network@npm:@web3-react/network@8.0.10-alpha.0":
-  version "8.0.10-alpha.0"
-  resolved "https://registry.yarnpkg.com/@web3-react/network/-/network-8.0.10-alpha.0.tgz#d59b0b1884e02851e6132592f6f07d674fbc5068"
-  integrity sha512-LZWIMufuCkepcnJlhQQMQItrjtLNNsQpVmJqWczWqRhOkDvWqSEnszNWxLxLJhKWf+Ll3aCwiQpIAkuvXxs6mA==
+"widgets-web3-react/network@npm:@web3-react/network@8.0.12-alpha.0":
+  version "8.0.12-alpha.0"
+  resolved "https://registry.yarnpkg.com/@web3-react/network/-/network-8.0.12-alpha.0.tgz#4136f551ebee2a51e0a1d29de1442923a93de045"
+  integrity sha512-rZW3yhe40DQNE+HaFXIKDepltXmIrj+LCouEreaxyfTPWcN90fJJ1MoE8YFu8icLlIQnoNlHDR8I5NsvSyu7tQ==
   dependencies:
     "@ethersproject/experimental" "^5.4.0"
     "@ethersproject/providers" "^5.4.5"
-    "@web3-react/types" "^8.0.10-alpha.0"
+    "@web3-react/types" "^8.0.12-alpha.0"
 
 word-wrap@^1.2.3, word-wrap@~1.2.3:
   version "1.2.3"