Skip to content

Commit

Permalink
🥶 Bump web3-react to 8.0.0-beta, add Web3Modal to example (#479)
Browse files Browse the repository at this point in the history
  • Loading branch information
vanruch authored Jan 18, 2022
1 parent b6fe5e1 commit a399846
Show file tree
Hide file tree
Showing 31 changed files with 1,238 additions and 246 deletions.
6 changes: 5 additions & 1 deletion packages/core/.mocharc.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
{
"spec": "test/**/*.test.{ts,tsx}",
"require": "ts-node/register",
"node-option": [
"experimental-specifier-resolution=node",
"loader=ts-node/esm"
],
"require": "ts-node/register/transpile-only",
"watchExtensions": "ts",
"extension": "ts",
"timeout": 3000,
Expand Down
19 changes: 10 additions & 9 deletions packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"author": "Ethworks",
"license": "MIT",
"sideEffects": false,
"type": "module",
"publishConfig": {
"access": "public"
},
Expand All @@ -17,29 +18,29 @@
"@types/chai-as-promised": "^7.1.3",
"@types/lodash": "^4.14.170",
"@types/lodash.merge": "^4.6.6",
"@types/mocha": "^8.2.0",
"@types/mocha": "^9.0.0",
"@typescript-eslint/eslint-plugin": "^4.10.0",
"@typescript-eslint/parser": "^4.10.0",
"@web3-react/abstract-connector": "^6.0.7",
"@web3-react/types": "^6.0.7",
"@web3-react/types": "^8.0.0-beta.0",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"eslint": "7.19.0",
"ethereum-waffle": "^3.2.2",
"jsdom": "^16.4.0",
"jsdom-global": "^3.0.2",
"mocha": "^8.2.1",
"mocha": "^9.1.3",
"mock-local-storage": "^1.1.17",
"prettier": "^2.1.2",
"ts-node": "^9.1.1",
"prettier": "^2.5.1",
"ts-node": "^10.4.0",
"typescript": "^4.1.3"
},
"dependencies": {
"@types/react": "17.0.1",
"@uniswap/token-lists": "^1.0.0-beta.27",
"@web3-react/core": "6.1.1",
"@web3-react/injected-connector": "6.0.7",
"@web3-react/network-connector": "6.1.5",
"@web3-react/core": "^8.0.1-beta.0",
"@web3-react/eip1193": "^8.0.0-beta.0",
"@web3-react/metamask": "8.0.0-beta.0",
"@web3-react/network": "8.0.0-beta.0",
"ethers": "5.5.1",
"lodash.merge": "^4.6.2",
"nanoid": "3.1.22"
Expand Down
File renamed without changes.
4 changes: 4 additions & 0 deletions packages/core/src/constants/type/Config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { ChainId, Chain } from '../../constants'
import { initializeConnector } from '@web3-react/core'

export type ConnectorTuple = ReturnType<typeof initializeConnector>

export type NodeUrls = {
[chainId: number]: string
Expand All @@ -23,6 +26,7 @@ export type FullConfig = {
transactionPath: string
}
autoConnect: boolean
defaultConnectors: ConnectorTuple[]
}

export type Config = Partial<FullConfig>
60 changes: 34 additions & 26 deletions packages/core/src/hooks/useEthers.ts
Original file line number Diff line number Diff line change
@@ -1,31 +1,39 @@
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { ChainId } from '../constants'
import { ChainId, ConnectorTuple } from '../constants'
import { useConfig, useConnectors } from '../providers'
import { MetaMask } from '@web3-react/metamask'
import { useCallback } from 'react'
import { useConfig } from '../providers/config/context'
import { InjectedConnector } from '@web3-react/injected-connector'

type ActivateBrowserWallet = (onError?: (error: Error) => void, throwErrors?: boolean) => void

export type Web3Ethers = ReturnType<typeof useWeb3React> & {
library?: Web3Provider
chainId?: ChainId
activateBrowserWallet: ActivateBrowserWallet
function findActiveConnector(connectors: ConnectorTuple[]) {
return connectors.find(([, , store]) => !!store.getState().accounts)
}

export function useEthers(): Web3Ethers {
const result = useWeb3React<Web3Provider>()
const { networks } = useConfig()
const activateBrowserWallet = useCallback<ActivateBrowserWallet>(
async (onError, throwErrors) => {
const injected = new InjectedConnector({ supportedChainIds: networks?.map((network) => network.chainId) })
if (onError instanceof Function) {
await result.activate(injected, onError, throwErrors)
} else {
await result.activate(injected, undefined, throwErrors)
}
},
[networks]
)
return { ...result, activateBrowserWallet }
export function useEthers() {
const { activeConnector, setConnectors, connectors, setActiveConnector } = useConnectors()
const { defaultConnectors } = useConfig()
const [connector, hooks, store] = activeConnector ?? findActiveConnector(connectors) ?? connectors[0]
const result = hooks.useWeb3React(hooks.useProvider())

const deactivate = useCallback(() => {
setConnectors(defaultConnectors)
setActiveConnector(undefined)
return connector.deactivate?.()
}, [connector, defaultConnectors])

const activate = useCallback(() => {
setActiveConnector([connector, hooks, store])
return connector.activate()
}, [connector, hooks, store])

const activateBrowserWallet = useCallback(() => {
const metamask = connectors.find(([connector]) => connector instanceof MetaMask)
if (metamask) {
setActiveConnector(metamask)
return metamask[0].activate()
} else {
setActiveConnector([connector, hooks, store])
return connector.activate()
}
}, [connectors])

return { ...result, chainId: result.chainId as ChainId, activate, deactivate, activateBrowserWallet }
}
1 change: 1 addition & 0 deletions packages/core/src/model/config/default.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,5 @@ export const DEFAULT_CONFIG: FullConfig = {
transactionPath: 'transactions',
},
autoConnect: true,
defaultConnectors: [],
}
15 changes: 7 additions & 8 deletions packages/core/src/providers/DAppProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { ReactNode, useMemo } from 'react'
import { Config, Chain } from '../constants'
import { ConfigProvider } from '../providers/config/provider'
import { Chain, Config } from '../constants'
import { ConfigProvider, useConfig } from './config'
import { BlockNumberProvider } from './blockNumber/provider'
import { ChainStateProvider } from './chainState'
import { useConfig } from './config/context'
import { EthersProvider } from './EthersProvider'
import { NotificationsProvider } from './notifications/provider'
import { NetworkActivator } from './NetworkActivator'
import { TransactionProvider } from './transactions/provider'
import { LocalMulticallProvider } from './LocalMulticallProvider'
import { ConnectorsProvider } from './connectors'
import { NetworkActivator } from './NetworkActivator'

interface DAppProviderProps {
children: ReactNode
Expand All @@ -34,12 +33,12 @@ const getMulticallAddresses = (networks: Chain[] | undefined) => {
}

function DAppProviderWithConfig({ children }: WithConfigProps) {
const { multicallAddresses, networks } = useConfig()
const { multicallAddresses, networks, defaultConnectors } = useConfig()
const defaultAddresses = useMemo(() => getMulticallAddresses(networks), [networks])
const multicallAddressesMerged = { ...defaultAddresses, ...multicallAddresses }

return (
<EthersProvider>
<ConnectorsProvider defaultConnectors={defaultConnectors}>
<BlockNumberProvider>
<NetworkActivator />
<LocalMulticallProvider>
Expand All @@ -50,6 +49,6 @@ function DAppProviderWithConfig({ children }: WithConfigProps) {
</ChainStateProvider>
</LocalMulticallProvider>
</BlockNumberProvider>
</EthersProvider>
</ConnectorsProvider>
)
}
19 changes: 0 additions & 19 deletions packages/core/src/providers/EthersProvider.tsx

This file was deleted.

24 changes: 3 additions & 21 deletions packages/core/src/providers/NetworkActivator.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,14 @@
import { NetworkConnector } from '@web3-react/network-connector'
import { useEffect } from 'react'
import { useEthers } from '../hooks'
import { InjectedConnector } from '@web3-react/injected-connector'
import { useConfig } from './config/context'

export function NetworkActivator() {
const { activate, account, chainId: connectedChainId, active, connector } = useEthers()
const { networks, readOnlyChainId, readOnlyUrls, autoConnect } = useConfig()
const { activateBrowserWallet } = useEthers()
const { autoConnect } = useConfig()

useEffect(() => {
const eagerConnect = async () => {
const injected = new InjectedConnector({
supportedChainIds: networks?.map((network) => network?.chainId) || [],
})
if (await injected.isAuthorized()) {
activate(injected)
}
}
autoConnect && eagerConnect()
autoConnect && activateBrowserWallet()
}, [])

useEffect(() => {
if (readOnlyChainId && readOnlyUrls) {
if (!active || (connector instanceof NetworkConnector && connectedChainId !== readOnlyChainId)) {
activate(new NetworkConnector({ defaultChainId: readOnlyChainId, urls: readOnlyUrls || [] }))
}
}
}, [readOnlyChainId, readOnlyUrls, active, account, connectedChainId, connector])

return null
}
11 changes: 11 additions & 0 deletions packages/core/src/providers/config/context.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import { createContext, useContext } from 'react'
import { FullConfig, Config, Chain } from '../../constants'
import { DEFAULT_CONFIG } from '../../model/config/default'
import { getChainById } from '../../helpers/chain'
import { initializeConnector } from '@web3-react/core'
import { Network } from '@web3-react/network'
import { MetaMask } from '@web3-react/metamask'

export const ConfigContext = createContext<{ config: FullConfig; updateConfig: (config: Config) => void }>({
config: DEFAULT_CONFIG,
Expand All @@ -28,6 +31,14 @@ export function useConfig() {
})
}

config.defaultConnectors = config.defaultConnectors ?? [
initializeConnector<Network>(
(actions) => new Network(actions, config.readOnlyUrls ?? []),
config.networks?.map(({ chainId }) => Number(chainId))
),
initializeConnector<MetaMask>((actions) => new MetaMask(actions)),
]

return validConfigs(config)
}

Expand Down
22 changes: 22 additions & 0 deletions packages/core/src/providers/connectors/context.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { createContext, useContext } from 'react'
import { Provider } from '@ethersproject/providers'
import { ConnectorTuple } from '../../constants'

type ConnectorContextProps = {
connectors: ConnectorTuple[]
activeConnector?: ConnectorTuple
setConnectors: (connectors: ConnectorTuple[]) => void
setActiveConnector: (connectors: ConnectorTuple | undefined) => void
setProvider: (provider: Provider) => void
}
export const ConnectorsContext = createContext<ConnectorContextProps>({
connectors: [],
activeConnector: undefined,
setConnectors: () => undefined,
setActiveConnector: () => undefined,
setProvider: () => undefined,
})

export function useConnectors() {
return useContext(ConnectorsContext)
}
2 changes: 2 additions & 0 deletions packages/core/src/providers/connectors/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './context'
export * from './provider'
40 changes: 40 additions & 0 deletions packages/core/src/providers/connectors/provider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { ReactNode, useCallback, useState } from 'react'
import { ConnectorsContext } from './context'
import { initializeConnector } from '@web3-react/core'
import { EIP1193 } from '@web3-react/eip1193'
import { Provider } from '@ethersproject/providers'
import { ConnectorTuple } from '../../constants'

interface ConnectorsProviderProps {
children: ReactNode
defaultConnectors: ConnectorTuple[]
}

export function ConnectorsProvider({ defaultConnectors, children }: ConnectorsProviderProps) {
const [connectors, setConnectors] = useState(defaultConnectors)
const [activeConnector, setActiveConnector] = useState<ConnectorTuple | undefined>(defaultConnectors[0])

const updateConnectors = useCallback(
(_connectors: ConnectorTuple[]) => {
setConnectors(_connectors)
setActiveConnector(_connectors[0])
},
[setConnectors, setActiveConnector]
)

const setProvider = useCallback(
(provider: Provider) => {
const _connectors = [initializeConnector<EIP1193>((actions) => new EIP1193(actions, provider as any))]
setConnectors(_connectors)
setActiveConnector(_connectors[0])
},
[setConnectors, setActiveConnector]
)

return (
<ConnectorsContext.Provider
value={{ connectors, setConnectors: updateConnectors, activeConnector, setActiveConnector, setProvider }}
children={children}
/>
)
}
1 change: 1 addition & 0 deletions packages/core/src/providers/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export * from './DAppProvider'
export * from './blockNumber'
export * from './chainState'
export * from './config'
export * from './connectors'
export { useTransactionsContext } from './transactions/context'
export { useNotificationsContext } from './notifications/context'
export * from './transactions/model'
Expand Down
7 changes: 5 additions & 2 deletions packages/core/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "dist",
"module": "commonjs",
"lib": ["es2020", "dom"],
"module": "es2020",
"target": "es6",
"composite": true,
"declaration": true,
"sourceMap": true,
"declarationMap": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"moduleResolution": "node"
"moduleResolution": "node",
"esModuleInterop": true
},
"include": [
"src",
Expand Down
6 changes: 5 additions & 1 deletion packages/example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,16 @@
"@types/styled-components": "^5.1.7",
"@usedapp/coingecko": "^0.4.1",
"@usedapp/core": "^0.9.0",
"@walletconnect/web3-provider": "^1.7.1",
"@web3-react/core": "^8.0.0-beta.0",
"@web3-react/eip1193": "^8.0.0-beta.0",
"file-loader": "^6.2.0",
"framer-motion": "^4.1.5",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-router-dom": "^5.2.0",
"styled-components": "^5.2.1"
"styled-components": "^5.2.1",
"web3modal": "^1.9.5"
},
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
Expand Down
2 changes: 2 additions & 0 deletions packages/example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Tokens } from './pages/Tokens'
import { Transactions } from './pages/Transactions'
import { SendEtherPage } from './pages/SendEtherPage'
import { NotificationsList } from './components/Transactions/History'
import { Web3Modal } from './pages/Web3Modal'

export function App() {
return (
Expand All @@ -25,6 +26,7 @@ export function App() {
<Route exact path="/tokens" component={Tokens} />
<Route exact path="/send" component={SendEtherPage} />
<Route exact path="/transactions" component={Transactions} />
<Route exact path="/web3modal" component={Web3Modal} />
<Redirect exact from="/" to="/balance" />
</Switch>
</BrowserRouter>
Expand Down
Loading

0 comments on commit a399846

Please sign in to comment.