Connect to the network

Author: aboutlo

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "semi": false
+}

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "swr-hello-world",
+  "name": "swr-eth",
   "version": "1.0.0",
-  "description": "Alphabet flash cards",
+  "description": "DApp Data Fetching strategy",
   "main": "dist/index.html",
   "scripts": {
     "start": "parcel src/index.html",
@@ -30,7 +30,6 @@
     "@ethersproject/contracts": "^5.0.0-beta.152",
     "@ethersproject/providers": "^5.0.0-beta.166",
     "@ethersproject/units": "^5.0.0-beta.133",
-    "@makerdao/multicall": "^0.11.0",
     "@web3-react/core": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/network-connector": "^6.0.9",

src/.prettierrc

@@ -1,68 +1,51 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import {
-  Web3ReactProvider,
-  useWeb3React,
-  UnsupportedChainIdError,
-  createWeb3ReactRoot,
-} from "@web3-react/core";
-import { Web3Provider } from "@ethersproject/providers";
-import useSWR, { SWRConfig } from "swr";
-import { createWatcher, aggregate } from "@makerdao/multicall";
-import { Wallet } from "./Wallet";
+import React from 'react'
+import { Web3ReactProvider } from '@web3-react/core'
+import { Web3Provider } from '@ethersproject/providers'
+import { useWeb3React } from '@web3-react/core'
+import { InjectedConnector } from '@web3-react/injected-connector'
+
+export const injectedConnector = new InjectedConnector({
+  supportedChainIds: [
+    1, // Mainet
+    3, // Ropsten
+    4, // Rinkeby
+    5, // Goerli
+    42, // Kovan
+  ],
+})
 
 function getLibrary(provider: any): Web3Provider {
-  console.log({ provider });
-  const library = new Web3Provider(provider);
-  library.pollingInterval = 12000;
-  return library;
+  const library = new Web3Provider(provider)
+  library.pollingInterval = 12000
+  return library
 }
 
-// Contract addresses used in this example
-const MKR_TOKEN = "0xaaf64bfcc32d0f15873a02163e7e500671a4ffcd";
-const MKR_WHALE = "0xdb33dfd3d61308c33c63209845dad3e6bfb2c674";
-const MKR_FISH = "0x2dfcedcb401557354d0cf174876ab17bfd6f4efd";
-
-// const config = { preset: "rinkeby" };
-
-const Container = styled.div`
-  border: 1px solid #ccc;
-  font-family: monospace;
-  white-space: pre;
-`;
-
-// Create watcher
-/*const watcher = createWatcher(
-  [
-    {
-      target: MKR_TOKEN,
-      call: ["balanceOf(address)(uint256)", MKR_WHALE],
-      returns: [["BALANCE_OF_MKR_WHALE", (val) => val / 10 ** 18]],
-    },
-  ],
-  config
-);
-
-// Subscribe to state updates
-watcher.subscribe((update) => {
-  console.log(`Update: ${update.type} = ${update.value}`);
-});
-
-// Subscribe to batched state updates
-watcher.batch().subscribe((updates) => {
-  // Handle batched updates here
-  // Updates are returned as { type, value } objects, e.g:
-  // { type: 'BALANCE_OF_MKR_WHALE', value: 70000 }
-});
-
-// Subscribe to new block number updates
-watcher.onNewBlock((blockNumber) => {
-  console.log("New block:", blockNumber);
-});*/
-
-// Start the watcher polling
-/*watcher.start();*/
+export const Wallet = () => {
+  const { chainId, account, activate, active } = useWeb3React<Web3Provider>()
+
+  const onClick = () => {
+    activate(injectedConnector)
+  }
+
+  return (
+    <div>
+      <div>ChainId: {chainId}</div>
+      <div>Account: {account}</div>
+      {active ? (
+        <div>✅ </div>
+      ) : (
+        <button type="button" onClick={onClick}>
+          Connect
+        </button>
+      )}
+    </div>
+  )
+}
 
 export const App = () => {
-  return <Web3ReactProvider getLibrary={getLibrary} children={<Wallet />} />;
-};
+  return (
+    <Web3ReactProvider getLibrary={getLibrary}>
+      <Wallet />
+    </Web3ReactProvider>
+  )
+}

src/components/App.tsx

@@ -1,45 +1,21 @@
-import React, { Suspense } from "react"
-import { SWRConfig } from "swr"
-import { useWeb3React } from "@web3-react/core"
-import { Web3Provider } from "@ethersproject/providers"
+import React from 'react'
+import { useWeb3React } from '@web3-react/core'
+import { Web3Provider } from '@ethersproject/providers'
 
-import { useEagerConnect } from "../hooks/useEagerConnect"
-import { useInactiveListener } from "../hooks/useInactiveListener"
-import { DisplayInfo } from "./DisplayInfo"
-import { web3Fetcher } from "../utils"
-import { injected } from "../connectors"
-import { ABIs } from "../abi"
+import { injected } from '../connectors'
 
 export const Wallet = () => {
-  const context = useWeb3React<Web3Provider>()
   const {
-    connector,
-    library,
     chainId,
     account,
     activate,
-    deactivate,
     active,
-    error,
-  } = context
+  } = useWeb3React<Web3Provider>()
 
   const onClick = () => {
     activate(injected)
   }
 
-  // handle logic to recognize the connector currently being activated
-  const [activatingConnector, setActivatingConnector] = React.useState()
-  React.useEffect(() => {
-    console.log("Wallet running")
-    if (activatingConnector && activatingConnector === connector) {
-      setActivatingConnector(undefined)
-    }
-  }, [activatingConnector, connector])
-
-  // mount only once or face issues :P
-  const triedEager = useEagerConnect()
-  useInactiveListener(!triedEager || !!activatingConnector)
-  console.log({ library, active, triedEager, activatingConnector })
   return (
     <div>
       <div>ChainId: {chainId}</div>
@@ -51,17 +27,6 @@ export const Wallet = () => {
           Connect
         </button>
       )}
-      {library && (
-        <SWRConfig
-          value={{
-            fetcher: web3Fetcher(library, ABIs),
-            suspense: true,
-            focusThrottleInterval: 5000,
-          }}
-        >
-          <DisplayInfo chainId={chainId} />
-        </SWRConfig>
-      )}
     </div>
   )
 }