🧹 General clean-up (#44)

marekkirejczyk · web-flow · commit 8b8fb819b1cf · 2021-02-24T11:36:02.000+01:00
diff --git a/.changeset/brave-pigs-admire.md b/.changeset/brave-pigs-admire.md
@@ -0,0 +1,12 @@
+---
+"@usedapp/core": patch
+"@usedapp/example": patch
+---
+
+🧹 General clean-up
+
+* Introduce EthersProvider and activateBrowserWallet 
+* Introduce Config, ConfigProvider and useConfig
+* Fix Goerli name 
+* Add missing MULTICALL_ADDRESSES
+* Update docs structure and README
diff --git a/docs/source/core.rst b/docs/source/core.rst
@@ -8,14 +8,35 @@ Providers
 
 Provides basic DApp services for hooks ...
 
-Combines following components: ``<Web3ReactProvider>``, <BlockNumberProvider>``, ``<ChainStateProvider>``, ``<ReadOnlyProviderActivator>``
+It combines following components: ``<ConfigProvider>``, ``<EthersProvider>``, ``<BlockNumberProvider>``, ``<ChainStateProvider>`` and ``<ReadOnlyProviderActivator>``
+
+**<ConfigProvider>**
+
+**<EthersProvider>**
 
 **<BlockNumberProvider>**
 
 **<ChainStateProvider>**
 
 **<ReadOnlyProviderActivator>**
 
+
+Configuration
+-------------
+
+**readOnlyChain**
+
+chainId of a chain to connect in read-only mode
+
+**readOnlyUrls**
+
+**multicallAddresses**
+
+**supportedChains**
+
+**pollingInterval**
+New block checking polling interval 
+
 Hooks
 -----
 
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -50,17 +50,19 @@ ReactDOM.render(
 )
 
 export function App() {
-  const { activate, account } = useEthers()
+  const { activateBrowserWallet, account } = useEthers()
   return (
       <div>
-        <button onClick={() => activate(injected)}>Connect</button>
+        <button onClick={() => activateBrowserWallet()}>Connect</button>
       </div>
       {account && <p>Account: {account}</p>}
     </div>
   )
 }
 ```
 
+Example application is available [here](https://app.netlify.com/sites/usedapp-example/overview).
+
 
 ## Documentation
 For detailed feature walkthrough checkout [documentation](https://usedapp.readthedocs.io/en/latest/).
diff --git a/packages/core/src/constants/chainId.ts b/packages/core/src/constants/chainId.ts
@@ -2,7 +2,7 @@ export enum ChainId {
   Mainnet = 1,
   Ropsten = 3,
   Rinkeby = 4,
-  Gorli = 5,
+  Goerli = 5,
   Kovan = 42,
   xDai = 100,
 }
@@ -12,7 +12,7 @@ export const SUPPORTED_CHAINS = [
   ChainId.Ropsten,
   ChainId.Kovan,
   ChainId.Rinkeby,
-  ChainId.Gorli,
+  ChainId.Goerli,
   ChainId.Kovan,
   ChainId.xDai,
 ]
@@ -21,7 +21,7 @@ export const MULTICALL_ADDRESSES = {
   [ChainId.Mainnet]: '0xeefba1e63905ef1d7acba5a8513c70307c1ce441',
   [ChainId.Ropsten]: '0x53c43764255c17bd724f74c4ef150724ac50a3ed',
   [ChainId.Rinkeby]: '0x42ad527de7d4e9d9d011ac45b31d8551f8fe9821',
-  // [ChainId.Goerli]: '0x77dca2c955b15e9de4dbbcf1246b4b85b651e50e',
+  [ChainId.Goerli]: '0x77dca2c955b15e9de4dbbcf1246b4b85b651e50e',
   [ChainId.Kovan]: '0x2cc8688c5f75e365aaeeb4ea8d6a480405a48d2a',
-  // [ChainId.XDAI]: '0xb5b692a88bdfc81ca69dcb1d924f59f0413a602a',
+  [ChainId.xDai]: '0xb5b692a88bdfc81ca69dcb1d924f59f0413a602a',
 }
diff --git a/packages/core/src/hooks/useEthers.ts b/packages/core/src/hooks/useEthers.ts
@@ -1,9 +1,22 @@
 import { useWeb3React } from '@web3-react/core'
 import { Web3Provider } from '@ethersproject/providers'
 import { ChainId } from '../constants'
+import { useMemo } from 'react'
+import { useConfig } from '../providers/config/context'
+import { InjectedConnector } from '@web3-react/injected-connector'
 
-export type Web3Ethers = ReturnType<typeof useWeb3React> & { library?: Web3Provider; chainId?: ChainId }
+export type Web3Ethers = ReturnType<typeof useWeb3React> & {
+  library?: Web3Provider
+  chainId?: ChainId
+  activateBrowserWallet: () => void
+}
 
 export function useEthers(): Web3Ethers {
-  return useWeb3React<Web3Provider>()
+  const result = useWeb3React<Web3Provider>()
+  const { supportedChains } = useConfig()
+  const activateBrowserWallet = useMemo(() => {
+    const injected = new InjectedConnector({ supportedChainIds: supportedChains })
+    return () => result.activate(injected)
+  }, [supportedChains])
+  return { ...result, activateBrowserWallet }
 }
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,3 +1,4 @@
 export * from './constants'
 export * from './providers'
 export * from './hooks'
+export * from './model'
diff --git a/packages/core/src/model/Config.ts b/packages/core/src/model/Config.ts
diff --git a/packages/core/src/model/config/Config.ts b/packages/core/src/model/config/Config.ts
@@ -0,0 +1,19 @@
+import { ChainId } from '../../constants'
+
+export type NodeUrls = {
+  [chainId: number]: string
+}
+
+export type MulticallAddresses = {
+  [chainId: number]: string
+}
+
+export type FullConfig = {
+  readOnlyChainId?: ChainId
+  readOnlyUrls?: NodeUrls
+  multicallAddresses?: MulticallAddresses
+  supportedChains: number[]
+  pollingInterval?: number
+}
+
+export type Config = Partial<FullConfig>
diff --git a/packages/core/src/model/config/default.ts b/packages/core/src/model/config/default.ts
@@ -0,0 +1,7 @@
+import { ChainId } from '../../constants'
+import { FullConfig } from './Config'
+
+export const DEFAULT_CONFIG: FullConfig = {
+  pollingInterval: 15000,
+  supportedChains: [ChainId.Mainnet, ChainId.Goerli, ChainId.Kovan, ChainId.Rinkeby, ChainId.Ropsten, ChainId.xDai],
+}
diff --git a/packages/core/src/model/index.ts b/packages/core/src/model/index.ts
@@ -1 +1,2 @@
 export * from './Currency'
+export * from './config/Config'
diff --git a/packages/core/src/providers/DAppProvider.tsx b/packages/core/src/providers/DAppProvider.tsx
@@ -1,10 +1,11 @@
-import { Web3Provider } from '@ethersproject/providers'
-import { Web3ReactProvider } from '@web3-react/core'
 import { ReactNode } from 'react'
 import { MULTICALL_ADDRESSES } from '../constants'
-import { Config } from '../model/Config'
+import { Config } from '../model/config/Config'
+import { ConfigProvider } from '../providers/config/provider'
 import { BlockNumberProvider } from './blockNumber/provider'
 import { ChainStateProvider } from './chainState'
+import { useConfig } from './config/context'
+import { EthersProvider } from './EthersProvider'
 import { ReadOnlyProviderActivator } from './ReadOnlyProviderActivator'
 
 interface DAppProviderProps {
@@ -13,22 +14,28 @@ interface DAppProviderProps {
 }
 
 export function DAppProvider({ config, children }: DAppProviderProps) {
-  const multicallAddresses = { ...MULTICALL_ADDRESSES, ...config.multicallAddresses }
+  return (
+    <ConfigProvider config={config}>
+      <DAppProviderWithConfig>{children}</DAppProviderWithConfig>
+    </ConfigProvider>
+  )
+}
+
+interface WithConfigProps {
+  children: ReactNode
+}
 
+function DAppProviderWithConfig({ children }: WithConfigProps) {
+  const { multicallAddresses, readOnlyChainId, readOnlyUrls } = useConfig()
+  const multicallAddressesMerged = { ...MULTICALL_ADDRESSES, ...multicallAddresses }
   return (
-    <Web3ReactProvider getLibrary={getLibrary}>
+    <EthersProvider>
       <BlockNumberProvider>
-        {config.readOnlyChain && config.readOnlyUrls && (
-          <ReadOnlyProviderActivator chainId={config.readOnlyChain} nodeUrls={config.readOnlyUrls} />
+        {readOnlyChainId && readOnlyUrls && (
+          <ReadOnlyProviderActivator readOnlyChainId={readOnlyChainId} readOnlyUrls={readOnlyUrls} />
         )}
-        <ChainStateProvider multicallAddresses={multicallAddresses}>{children}</ChainStateProvider>
+        <ChainStateProvider multicallAddresses={multicallAddressesMerged}>{children}</ChainStateProvider>
       </BlockNumberProvider>
-    </Web3ReactProvider>
+    </EthersProvider>
   )
 }
-
-function getLibrary(provider: any): Web3Provider {
-  const library = new Web3Provider(provider, 'any')
-  library.pollingInterval = 15000
-  return library
-}
diff --git a/packages/core/src/providers/EthersProvider.tsx b/packages/core/src/providers/EthersProvider.tsx
@@ -0,0 +1,19 @@
+import { Web3Provider } from '@ethersproject/providers'
+import { Web3ReactProvider } from '@web3-react/core'
+import { ReactNode } from 'react'
+
+const DEFAULT_POLLING_INTERVAL = 15000
+
+interface EthersProviderProps {
+  children: ReactNode
+  pollingInterval?: number
+}
+
+export function EthersProvider({ children, pollingInterval }: EthersProviderProps) {
+  function getLibrary(provider: any): Web3Provider {
+    const library = new Web3Provider(provider, 'any')
+    library.pollingInterval = pollingInterval || DEFAULT_POLLING_INTERVAL
+    return library
+  }
+  return <Web3ReactProvider getLibrary={getLibrary}>{children}</Web3ReactProvider>
+}
diff --git a/packages/core/src/providers/ReadOnlyProviderActivator.tsx b/packages/core/src/providers/ReadOnlyProviderActivator.tsx
@@ -1,22 +1,21 @@
-import { useEffect } from 'react'
 import { NetworkConnector } from '@web3-react/network-connector'
+import { useEffect } from 'react'
 import { ChainId } from '../constants'
 import { useEthers } from '../hooks'
-import { NodeUrls } from '../model/Config'
+import { NodeUrls } from '../model'
 
 interface ReadOnlyProviderActivatorProps {
-  chainId: ChainId
-  nodeUrls: NodeUrls
+  readOnlyChainId: ChainId
+  readOnlyUrls: NodeUrls
 }
 
-export function ReadOnlyProviderActivator({ chainId, nodeUrls }: ReadOnlyProviderActivatorProps) {
+export function ReadOnlyProviderActivator({ readOnlyChainId, readOnlyUrls }: ReadOnlyProviderActivatorProps) {
   const { activate, account, chainId: connectedChainId, active, connector } = useEthers()
-
   useEffect(() => {
-    if (!active || (connector instanceof NetworkConnector && connectedChainId !== chainId)) {
-      activate(new NetworkConnector({ defaultChainId: chainId, urls: nodeUrls }))
+    if (!active || (connector instanceof NetworkConnector && connectedChainId !== readOnlyChainId)) {
+      activate(new NetworkConnector({ defaultChainId: readOnlyChainId, urls: readOnlyUrls || [] }))
     }
-  }, [chainId, active, account, connectedChainId, connector])
+  }, [readOnlyChainId, readOnlyUrls, active, account, connectedChainId, connector])
 
   return null
 }
diff --git a/packages/core/src/providers/config/context.ts b/packages/core/src/providers/config/context.ts
@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react'
+import { FullConfig } from '../../model/config/Config'
+import { DEFAULT_CONFIG } from '../../model/config/default'
+
+export const ConfigContext = createContext<FullConfig>(DEFAULT_CONFIG)
+
+export function useConfig() {
+  return useContext(ConfigContext)
+}
diff --git a/packages/core/src/providers/config/provider.tsx b/packages/core/src/providers/config/provider.tsx
@@ -0,0 +1,13 @@
+import { ReactNode } from 'react'
+import { Config } from '../../model/config/Config'
+import { DEFAULT_CONFIG } from '../../model/config/default'
+import { ConfigContext } from './context'
+
+interface ConfigProviderProps {
+  children: ReactNode
+  config: Config
+}
+
+export function ConfigProvider({ config, children }: ConfigProviderProps) {
+  return <ConfigContext.Provider value={{ ...DEFAULT_CONFIG, ...config }} children={children} />
+}
diff --git a/packages/example/README.md b/packages/example/README.md
@@ -1,6 +1,6 @@
 # New Project
 
-> ✨ Bootstrapped with Create Snowpack App (CSA).
+> ✨ Example useDApp application.
 
 ## Available Scripts
 
diff --git a/packages/example/src/App.tsx b/packages/example/src/App.tsx
@@ -1,12 +1,9 @@
+import { useBlockMeta, useBlockNumber, useEthers } from '@usedapp/core'
 import React from 'react'
-import { useBlockNumber, useBlockMeta, useEthers } from '@usedapp/core'
-import { InjectedConnector } from '@web3-react/injected-connector'
-
-const injected = new InjectedConnector({ supportedChainIds: [1, 3, 4, 42] })
 
 export function App() {
   const blockNumber = useBlockNumber()
-  const { chainId, activate, deactivate, account } = useEthers()
+  const { chainId, activateBrowserWallet, deactivate, account } = useEthers()
   const { timestamp, difficulty } = useBlockMeta()
 
   return (
@@ -16,7 +13,7 @@ export function App() {
       {difficulty && <p>Current difficulty: {difficulty.toString()}</p>}
       {timestamp && <p>Current block timestamp: {timestamp.toLocaleString()}</p>}
       <div>
-        <button onClick={() => activate(injected)}>Connect</button>
+        <button onClick={() => activateBrowserWallet()}>Connect</button>
         <button onClick={() => deactivate()}>Disconnect</button>
       </div>
       {account && <p>Account: {account}</p>}
diff --git a/packages/example/src/index.html b/packages/example/src/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Web site created using create-snowpack-app" />
-    <title>Snowpack App</title>
+    <title>useDApp example</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/packages/example/src/index.tsx b/packages/example/src/index.tsx
@@ -2,10 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { ChainId, DAppProvider } from '@usedapp/core'
 import { App } from './App'
-import type { Config } from '@usedapp/core/dist/src/model/Config'
 
-const config: Config = {
-  readOnlyChain: ChainId.Mainnet,
+const config = {
+  readOnlyChainId: ChainId.Mainnet,
   readOnlyUrls: {
     [ChainId.Mainnet]: 'https://mainnet.infura.io/v3/62687d1a985d4508b2b7a24827551934',
   },

Original file line number	Diff line number	Diff line change
`@@ -50,17 +50,19 @@ ReactDOM.render(`
`50`	`50`	`)`
`51`	`51`
`52`	`52`	`export function App() {`
`53`		`- const { activate, account } = useEthers()`
	`53`	`+ const { activateBrowserWallet, account } = useEthers()`
`54`	`54`	`return (`
`55`	`55`	`<div>`
`56`		`- <button onClick={() => activate(injected)}>Connect</button>`
	`56`	`+ <button onClick={() => activateBrowserWallet()}>Connect</button>`
`57`	`57`	`</div>`
`58`	`58`	`{account && <p>Account: {account}</p>}`
`59`	`59`	`</div>`
`60`	`60`	`)`
`61`	`61`	`}`
`62`	`62`	```
`63`	`63`
	`64`	`+Example application is available [here](https://app.netlify.com/sites/usedapp-example/overview).`
	`65`	`+`
`64`	`66`
`65`	`67`	`## Documentation`
`66`	`68`	`For detailed feature walkthrough checkout [documentation](https://usedapp.readthedocs.io/en/latest/).`
Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export * from './Currency'`
	`2`	`+export * from './config/Config'`