Add ens & bump deps

l3wi · Mar 21, 2022 · 37d4b0c · 37d4b0c
1 parent 8fef2c4
commit 37d4b0c
Show file tree

Hide file tree

Showing 4 changed files with 1,222 additions and 1,753 deletions.
diff --git a/contexts/useWeb3.js b/contexts/useWeb3.js
@@ -4,7 +4,7 @@ import React, {
   useContext,
   useMemo,
   useEffect,
-  useCallback,
+  useCallback
 } from 'react'
 
 import { useWallet } from 'use-wallet'
@@ -20,7 +20,11 @@ export const Web3Provider = (props) => {
   const { account, connect, status, ethereum, reset, balance } = useWallet()
   // Remember provider preference
   const [provider, setProvider] = useLocalStorage('provider', false)
+  const [ens, setEns] = useState(false)
 
+  const fetchENS = async (address) => {
+    setEns(await web3.lookupAddress(address))
+  }
   // Connect/Disconnect Wallet
   const connectWallet = async (key) => {
     await connect(key)
@@ -52,6 +56,10 @@ export const Web3Provider = (props) => {
     }
   }, [status])
 
+  useEffect(() => {
+    if (account) fetchENS(account)
+  }, [account])
+
   // Once loaded, initalise the provider
   useEffect(() => {
     initProvider()
@@ -70,15 +78,16 @@ export const Web3Provider = (props) => {
       web3,
       balance: ethBalance,
       ethereum,
+      ens
     }),
-    [web3, provider, account, status, balance]
+    [web3, provider, account, status, balance, ens]
   )
 
   // pass the value in provider and return
   return (
     <UseWeb3Context.Provider
       value={{
-        tools,
+        tools
       }}
     >
       {props.children}

diff --git a/package.json b/package.json
@@ -9,20 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@chakra-ui/icons": "^1.0.15",
-    "@chakra-ui/react": "^1.6.8",
-    "@emotion/react": "^11.4.1",
-    "@emotion/styled": "^11.3.0",
-    "dotenv": "^10.0.0",
-    "ethers": "^5.4.7",
-    "ethers-multicall": "^0.2.1",
-    "framer-motion": "^4.1.17",
+    "@chakra-ui/icons": "^1.1.7",
+    "@chakra-ui/react": "^1.8.6",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "dotenv": "^16.0.0",
+    "ethers": "^5.6.1",
+    "ethers-multicall": "^0.2.2",
+    "framer-motion": "^6.2.8",
     "isomorphic-fetch": "^3.0.0",
-    "next": "11.1.2",
+    "next": "12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-icons": "^4.2.0",
-    "use-wallet": "^0.9.0"
+    "react-icons": "^4.3.1",
+    "use-wallet": "^0.13.4"
   },
   "description": "This is a simple web3 starter with a clean layout",
   "main": "index.js",

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,20 +1,20 @@
-import { Web3Provider } from "../contexts/useWeb3"
-import { useWallet, UseWalletProvider } from "use-wallet"
-import { AlertProvider } from "../contexts/useAlerts"
+import { Web3Provider } from '../contexts/useWeb3'
+import { useWallet, UseWalletProvider } from 'use-wallet'
+import { AlertProvider } from '../contexts/useAlerts'
 
-import { ChakraProvider, CSSReset, extendTheme } from "@chakra-ui/react"
+import { ChakraProvider, CSSReset, extendTheme } from '@chakra-ui/react'
 
 const theme = {
   styles: {
     global: {
-      "html, body": {
-        minHeight: "100vh",
-        fontSize: "sm",
-        color: "gray.600",
-        lineHeight: "tall"
+      'html, body': {
+        minHeight: '100vh',
+        fontSize: 'sm',
+        color: 'gray.600',
+        lineHeight: 'tall'
       },
       a: {
-        color: "teal.500"
+        color: 'teal.500'
       }
     }
   }
@@ -29,8 +29,13 @@ export default function App({ Component, pageProps }) {
       <UseWalletProvider
         chainId={chainID}
         connectors={{
-          walletconnect: { rpcUrl: "https://mainnet.eth.aragon.network/" },
-          walletlink: { url: "https://mainnet.eth.aragon.network/" }
+          injected: {
+            chainId: [1, 42]
+          },
+          walletconnect: {
+            chainId: [1],
+            rpcUrl: 'https://mainnet.eth.aragon.network/'
+          }
         }}
       >
         <AlertProvider>