👛 Add wallet-connect example (#562)

.changeset/shiny-planes-sin.md

@@ -0,0 +1,6 @@
+---
+'@usedapp/core': minor
+'@usedapp/example': patch
+---
+
+Add support for wallet-connect provider

packages/core/src/hooks/useEthers.ts

@@ -1,13 +1,14 @@
 import { useCallback } from 'react'
-import { JsonRpcProvider } from '@ethersproject/providers'
+import { ExternalProvider, JsonRpcProvider } from '@ethersproject/providers'
 import { useInjectedNetwork, useNetwork } from '../providers'
-import { EventEmitter } from 'events'
 import { useLocalStorage } from './useLocalStorage'
 
+type MaybePromise<T> = Promise<T> | any
+
 type SupportedProviders =
   | JsonRpcProvider
-  | EventEmitter
-  | { getProvider: () => JsonRpcProvider | EventEmitter; activate: () => Promise<void> }
+  | ExternalProvider
+  | { getProvider: () => MaybePromise<JsonRpcProvider | ExternalProvider>; activate: () => Promise<any> }
 
 export type Web3Ethers = {
   activate: (provider: SupportedProviders) => Promise<void>

packages/core/src/providers/network/context.ts

@@ -7,7 +7,7 @@ import { EventEmitter } from 'events'
 export const NetworkContext = createContext<{
   update: (network: Partial<Network>) => void
   reportError: (error: Error) => void
-  activate: (provider: JsonRpcProvider | (EventEmitter & ExternalProvider)) => Promise<void>
+  activate: (provider: JsonRpcProvider | ExternalProvider) => Promise<void>
   deactivate: () => void
   network: Network
 }>({

packages/core/src/providers/network/provider.tsx

@@ -3,7 +3,6 @@ import { NetworkContext } from './context'
 import { defaultNetworkState, networksReducer } from './reducer'
 import { Network } from './model'
 import { JsonRpcProvider, Web3Provider, ExternalProvider, Provider } from '@ethersproject/providers'
-import { EventEmitter } from 'events'
 import { subscribeToProviderEvents } from '../../helpers/eip1193'
 
 interface NetworkProviderProps {
@@ -50,7 +49,7 @@ export function NetworkProvider({ children }: NetworkProviderProps) {
   }, [])
 
   const activate = useCallback(
-    async (provider: JsonRpcProvider | (EventEmitter & ExternalProvider)) => {
+    async (provider: JsonRpcProvider | ExternalProvider) => {
       const wrappedProvider = Provider.isProvider(provider) ? provider : new Web3Provider(provider)
       try {
         const account = await tryToGetAccount(wrappedProvider)

packages/example/src/App.tsx

@@ -13,6 +13,7 @@ import { SendEtherPage } from './pages/SendEtherPage'
 import { NotificationsList } from './components/Transactions/History'
 import { Web3Modal } from './pages/Web3Modal'
 import { Web3ReactConnector } from './pages/Web3ReactConnector'
+import { WalletConnect } from './pages/WalletConnect'
 
 export function App() {
   return (
@@ -29,6 +30,7 @@ export function App() {
           <Route exact path="/transactions" component={Transactions} />
           <Route exact path="/web3modal" component={Web3Modal} />
           <Route exact path="/web3react" component={Web3ReactConnector} />
+          <Route exact path="/wallet-connect" component={WalletConnect} />
           <Redirect exact from="/" to="/balance" />
         </Switch>
       </BrowserRouter>

packages/example/src/components/TopBar.tsx

@@ -48,6 +48,10 @@ export function TopBar() {
               {' '}
               Web3React Connector example{' '}
             </HeaderLink>
+            <HeaderLink activeClassName="active-page" to="/wallet-connect">
+              {' '}
+              WalletConnect example{' '}
+            </HeaderLink>
           </HeaderNavLinks>
         </HeaderNav>
       </HeaderContainer>

packages/example/src/pages/WalletConnect.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { formatEther } from '@ethersproject/units'
+import { useEtherBalance, useEthers } from '@usedapp/core'
+import { Container, ContentBlock, ContentRow, MainContent, Section, SectionRow } from '../components/base/base'
+import { Label } from '../typography/Label'
+import { TextInline } from '../typography/Text'
+import { Title } from '../typography/Title'
+import { Button } from '../components/base/Button'
+import WalletConnectProvider from '@walletconnect/web3-provider'
+
+const STAKING_CONTRACT = '0x00000000219ab540356cBB839Cbe05303d7705Fa'
+
+export function WalletConnect() {
+  const { account, activate } = useEthers()
+
+  async function onConnect() {
+    const provider = new WalletConnectProvider({
+      infuraId: '57fc2c19095745e59ab96a4aa87dada8',
+    })
+    await provider.enable()
+    activate(provider)
+  }
+
+  const userBalance = useEtherBalance(account)
+  const stakingBalance = useEtherBalance(STAKING_CONTRACT)
+
+  return (
+    <MainContent>
+      <Container>
+        <Section>
+          <SectionRow>
+            <Title>WalletConnect Usage Example</Title>
+            <Button onClick={onConnect}>Connect</Button>
+          </SectionRow>
+          <ContentBlock>
+            {stakingBalance && (
+              <ContentRow>
+                <Label>ETH2 staking contract holds:</Label> <TextInline>{formatEther(stakingBalance)}</TextInline>{' '}
+                <Label>ETH</Label>
+              </ContentRow>
+            )}
+            {account && (
+              <ContentRow>
+                <Label>Account:</Label> <TextInline>{account}</TextInline>
+              </ContentRow>
+            )}
+            {userBalance && (
+              <ContentRow>
+                <Label>Ether balance:</Label> <TextInline>{formatEther(userBalance)}</TextInline> <Label>ETH</Label>
+              </ContentRow>
+            )}
+          </ContentBlock>
+        </Section>
+      </Container>
+    </MainContent>
+  )
+}