commit

components/page/cancel.js

@@ -0,0 +1,38 @@
+import React from 'react'
+
+const CancelButton = ({
+  fill = '#000A28',
+  width = '16px',
+  height = '16px',
+  margin = {},
+  handleClick,
+}) => (
+  <button
+    onClick={handleClick}
+    style={{
+      border: 'none',
+      outline: 'none',
+      ...(Object.keys(margin).length && { ...margin }),
+    }}
+    className="reset"
+  >
+    <svg
+      style={{
+        cursor: 'pointerEvent',
+        pointerEvents: 'none',
+      }}
+      width={width}
+      height={height}
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <path
+        d="M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"
+        fill={fill}
+      />
+    </svg>
+  </button>
+)
+
+export default CancelButton

components/page/footer.js

@@ -0,0 +1,71 @@
+import { Box, Flex, HStack, Link, Text } from '@chakra-ui/layout'
+import React from 'react'
+
+const links = [
+  {
+    label: 'Code',
+    href: '#',
+    isExternal: true,
+  },
+  {
+    label: 'Discord',
+    href: '#',
+    isExternal: true,
+  },
+  {
+    label: 'FAQ',
+    href: '#',
+    isExternal: true,
+  },
+  {
+    label: 'Governance',
+    href: '#',
+    isExternal: true,
+  },
+]
+
+const Footer = () => {
+  return (
+    <Box as="footer">
+      <Flex
+        py={8}
+        flexDirection={['column', 'column', 'row']}
+        justifyContent="space-between"
+        alignItems="center"
+        as="footer"
+      >
+        <Box textAlign={['center', 'center', 'initial']}>
+          <Text fontWeight="bold" fontSize="md">
+            kitchen.sink
+          </Text>
+          <Text fontSize="sm" color="gray.500">
+            A NextJS Web3 Starter Repo
+          </Text>
+        </Box>
+        <Box>
+          <HStack spacing={4}>
+            {links.map(({ href, isExternal, label }) => (
+              <Link
+                py={1}
+                key={label}
+                href={href}
+                fontSize="sm"
+                isExternal={isExternal}
+                rel="noopener noreferrer"
+                _hover={{
+                  color: 'green.300',
+                  borderBottomColor: 'green.300',
+                  borderBottomWidth: 1,
+                }}
+              >
+                {label}
+              </Link>
+            ))}
+          </HStack>
+        </Box>
+      </Flex>
+    </Box>
+  )
+}
+
+export default Footer

components/page/header.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Image } from '@chakra-ui/image'
+import { IconButton } from '@chakra-ui/button'
+import { FiSun, FiMoon } from 'react-icons/fi'
+import { useColorMode, useColorModeValue } from '@chakra-ui/color-mode'
+import { Box, Flex, LinkBox, LinkOverlay } from '@chakra-ui/layout'
+
+import { useWeb3 } from '../../contexts/useWeb3'
+
+import UserAddress from './wallet'
+
+const Header = () => {
+  const { account, balance } = useWeb3()
+  const { colorMode, toggleColorMode } = useColorMode()
+
+  const isDarkMode = colorMode === 'dark'
+  const buttonHoverBgColor = useColorModeValue('gray.100', 'gray.700')
+
+  return (
+    <>
+      <Flex justifyContent="space-between" alignItems="center" py={4}>
+        {/* Hardcoded 283 for now to center user wallet component */}
+        <LinkBox width={['auto', 'auto', 283]}>
+          <LinkOverlay href="/">🏔</LinkOverlay>
+        </LinkBox>
+        <Box display={['none', 'none', 'none', 'block']}>
+          {/* {account && <UserWallet />} */}
+        </Box>
+        <Box>
+          <IconButton
+            mr={2}
+            borderRadius="lg"
+            variant="ghost"
+            onClick={toggleColorMode}
+            icon={isDarkMode ? <FiMoon /> : <FiSun />}
+            aria-label={isDarkMode ? 'Toggle light mode' : 'Toggle dark mode'}
+            _hover={{ background: buttonHoverBgColor }}
+          />
+          <UserAddress />
+        </Box>
+      </Flex>
+    </>
+  )
+}
+
+export default Header

components/page/index.js

@@ -0,0 +1,23 @@
+import { Box, Flex } from '@chakra-ui/layout'
+import Footer from './footer'
+import Header from './header'
+import React from 'react'
+import { useColorModeValue } from '@chakra-ui/color-mode'
+
+const Layout = ({ children }) => {
+  const bgColor = useColorModeValue('gray.50', 'gray.800')
+
+  return (
+    <Flex
+      minHeight="100vh"
+      flexDirection="column"
+      backgroundColor={bgColor}
+      px={[4, 4, 12]}
+    >
+      <Header />
+      <Box flexGrow={1}>{children}</Box>
+      <Footer />
+    </Flex>
+  )
+}
+export default Layout

components/page/wallet.js

@@ -0,0 +1,56 @@
+import React, { useContext } from 'react'
+import { Text, Button, Box, useColorModeValue } from '@chakra-ui/react'
+import CancelButton from './cancel'
+import { useWeb3 } from '../../contexts/useWeb3'
+
+export default function UserAddress() {
+  const {
+    web3,
+    account,
+    balance,
+    status,
+    disconnectWallet,
+    connectWallet,
+  } = useWeb3()
+
+  const buttonBgColor = useColorModeValue('white', 'gray.700')
+
+  return (
+    <>
+      <Button
+        onClick={() => connectWallet()}
+        background={buttonBgColor}
+        variant="muted"
+        boxShadow="md"
+        borderRadius="lg"
+      >
+        <Text fontSize="sm" color="gray.500" mr={2}>
+          {account ? `${balance.toFixed(2)} ETH` : 'Connect Wallet'}
+        </Text>
+        {account && (
+          <>
+            <Text fontSize="sm" mr={4}>
+              {account.substring(0, 6) +
+                '...' +
+                account.substring(account.length - 4)}
+            </Text>
+          </>
+        )}
+        <Box
+          background={account ? 'green.400' : 'gray.400'}
+          borderRadius="100%"
+          width={3}
+          height={3}
+        />
+        {account && (
+          <CancelButton
+            margin={{ marginLeft: '8px' }}
+            width="14px"
+            height="14px"
+            handleClick={() => disconnectWallet()}
+          />
+        )}
+      </Button>
+    </>
+  )
+}

contexts/useWeb3.js

@@ -17,8 +17,7 @@ const atob = (a) => Buffer.from(a, 'base64').toString('binary')
 export const UseWeb3Context = createContext()
 
 export const Web3Provider = (props) => {
-  const { account, connect, status, ethereum, reset } = useWallet()
-
+  const { account, connect, status, ethereum, balance, reset } = useWallet()
   // Remember provider preference
   const [provider, setProvider] = useLocalStorage('provider', false)
 
@@ -34,26 +33,31 @@ export const Web3Provider = (props) => {
   }
 
   // Check to see if we've set a provider in local Storage and connect
-  const initProvider = () => {
+  const initProvider = async () => {
     if (provider) {
       console.log('Provider Found:', provider)
-      connect(provider)
       registerProvider(ethereum)
+      await connect(provider)
     }
   }
 
   // Once we've connected a wallet, switch to wallet provider
-  useEffect(() => {
+  useEffect(async () => {
     if (status === 'connected') {
-      console.log('Connected!')
       registerProvider(ethereum)
+      console.log('Connected!')
+      if (!account) {
+        initProvider()
+      }
     }
   }, [status])
 
   // Once loaded, initalise the provider
   useEffect(() => {
     initProvider()
-  }, [provider])
+  }, [])
+
+  const ethBalance = balance ? balance / 1e18 : 0
 
   const tools = useMemo(
     () => ({
@@ -63,8 +67,10 @@ export const Web3Provider = (props) => {
       disconnectWallet,
       account,
       status,
+      web3,
+      balance: ethBalance,
     }),
-    [provider, account, status]
+    [web3, provider, account, status, balance]
   )
 
   // pass the value in provider and return

contracts/index.js

@@ -1,3 +1,3 @@
-import usdc from './usdc'
+import usdcInfo from './usdc'
 
-export default { usdc }
+export const usdc = usdcInfo

hooks/useContractBalance.js

@@ -1,16 +1,59 @@
+import { ethers } from 'ethers'
 import { web3 } from '../utils/ethers'
 import React, { useState, useEffect } from 'react'
+import { useWeb3 } from '../contexts/useWeb3'
 
-const currentBlock = () => {
+const currentBalance = (contract, digits) => {
+  const { account } = useWeb3()
   let [block, setBlock] = useState(0)
+  let [balance, setBalance] = useState(0)
+
+  const erc20 = new ethers.Contract(
+    contract,
+    [
+      {
+        constant: true,
+        inputs: [
+          {
+            name: '_owner',
+            type: 'address',
+          },
+        ],
+        name: 'balanceOf',
+        outputs: [
+          {
+            name: 'balance',
+            type: 'uint256',
+          },
+        ],
+        payable: false,
+        stateMutability: 'view',
+        type: 'function',
+      },
+    ],
+    web3
+  )
+
+  const fetchBalance = async () => {
+    const rawNum = await erc20.balanceOf(account)
+    const normalised = ethers.utils.formatUnits(rawNum, digits || 18)
+    setBalance(normalised)
+  }
+
+  useEffect(() => {
+    if (account) fetchBalance()
+  }, [account])
 
   useEffect(() => {
-    web3.on('block', (newBlock) => {
-      if (newBlock > block && newBlock !== block) setBlock(newBlock)
+    web3.on('block', async (newBlock) => {
+      if (newBlock > block && newBlock !== block && account) {
+        fetchBalance()
+        setBlock(newBlock)
+      }
     })
   }, [])
 
-  return block
+  return balance
 }
 
-export default currentBlock
+export default currentBalance

package.json

@@ -8,13 +8,18 @@
     "start": "next start"
   },
   "dependencies": {
+    "@chakra-ui/react": "^1.3.4",
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5",
     "dotenv": "^8.2.0",
     "ethers": "^5.0.31",
     "ethers-multicall": "^0.1.6",
+    "framer-motion": "^3.10.2",
     "isomorphic-fetch": "^3.0.0",
     "next": "10.0.7",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-icons": "^4.2.0",
     "styled-components": "^5.2.1",
     "use-wallet": "^0.8.1"
   },