feat(react): inital refactor

packages/dashboard/package.json

@@ -15,6 +15,14 @@
     "dist/bin"
   ],
   "dependencies": {
+    "@chakra-ui/icons": "^1.0.15",
+    "@chakra-ui/react": "^1.6.6",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@fontsource/inter": "^4.5.0",
+    "@metamask/jazzicon": "^2.0.0",
+    "@usedapp/core": "^0.4.4",
+    "framer-motion": "^4.1.17",
     "@securerpc/msgbus": "^0.2.0",
     "cors": "^2.8.5",
     "debug": "^4.3.2",

packages/dashboard/src/App.tsx

@@ -1,11 +1,23 @@
 import { getLibrary } from './utils/utils';
 import { Web3ReactProvider } from '@web3-react/core';
 import Dashboard from './Dashboard';
+import { ChakraProvider, useDisclosure } from "@chakra-ui/react";
+import Layout from "./components/Layout";
+import ConnectButton from "./components/ConnectButton";
+import AccountModal from "./components/AccountModal";
+import "@fontsource/inter";
 
 function App() {
+const { isOpen, onOpen, onClose } = useDisclosure();
   return (
     <Web3ReactProvider getLibrary={getLibrary}>
+ <ChakraProvider>
+      <Layout>
+        <ConnectButton handleOpenModal={onOpen} />
+        <AccountModal isOpen={isOpen} onClose={onClose} />
+      </Layout>
       <Dashboard />
+      </ChakraProvider>
     </Web3ReactProvider>
   );
 }

packages/dashboard/src/components/AccountModal.tsx

@@ -0,0 +1,158 @@
+import {
+  Box,
+  Button,
+  Flex,
+  Link,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Text,
+} from "@chakra-ui/react";
+import { ExternalLinkIcon, CopyIcon } from "@chakra-ui/icons";
+import { useEthers } from "@usedapp/core";
+import Identicon from "./Identicon";
+
+type Props = {
+  isOpen: any;
+  onClose: any;
+}
+
+const AccountModal = ({ isOpen, onClose }: Props) => {
+  const { account, deactivate } = useEthers()
+
+  function handleDeactivateAccount() {
+    deactivate();
+    onClose();
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} isCentered size="md">
+      <ModalOverlay />
+      <ModalContent
+        background="gray.900"
+        border="1px"
+        borderStyle="solid"
+        borderColor="gray.700"
+        borderRadius="3xl"
+      >
+        <ModalHeader color="white" px={4} fontSize="lg" fontWeight="medium">
+          Account
+        </ModalHeader>
+        <ModalCloseButton
+          color="white"
+          fontSize="sm"
+          _hover={{
+            color: "whiteAlpha.700",
+          }}
+        />
+        <ModalBody pt={0} px={4}>
+          <Box
+            borderRadius="3xl"
+            border="1px"
+            borderStyle="solid"
+            borderColor="gray.600"
+            px={5}
+            pt={4}
+            pb={2}
+            mb={3}
+          >
+            <Flex justifyContent="space-between" alignItems="center" mb={3}>
+              <Text color="gray.400" fontSize="sm">
+                Connected with MetaMask
+              </Text>
+              <Button
+                onClick={handleDeactivateAccount}
+                variant="outline"
+                size="sm"
+                borderColor="blue.800"
+                borderRadius="3xl"
+                color="blue.500"
+                fontSize="13px"
+                fontWeight="normal"
+                px={2}
+                height="26px"
+                _hover={{
+                  background: "none",
+                  borderColor: "blue.300",
+                  textDecoration: "underline",
+                }}
+              >
+                Change
+              </Button>
+            </Flex>
+            <Flex alignItems="center" mt={2} mb={4} lineHeight={1}>
+              <Identicon />
+              <Text
+                color="white"
+                fontSize="xl"
+                fontWeight="semibold"
+                ml="2"
+                lineHeight="1.1"
+              >
+                {account &&
+                  `${account.slice(0, 6)}...${account.slice(
+                    account.length - 4,
+                    account.length
+                  )}`}
+              </Text>
+            </Flex>
+            <Flex alignContent="center" m={3}>
+              <Button
+                variant="link"
+                color="gray.400"
+                fontWeight="normal"
+                fontSize="sm"
+                _hover={{
+                  textDecoration: "none",
+                  color: "whiteAlpha.800",
+                }}
+              >
+                <CopyIcon mr={1} />
+                Copy Address
+              </Button>
+              <Link
+                fontSize="sm"
+                display="flex"
+                alignItems="center"
+                href={`https://ropsten.etherscan.io/address/${account}`}
+                isExternal
+                color="gray.400"
+                ml={6}
+                _hover={{
+                  color: "whiteAlpha.800",
+                  textDecoration: "underline",
+                }}
+              >
+                <ExternalLinkIcon mr={1} />
+                View on Explorer
+              </Link>
+            </Flex>
+          </Box>
+        </ModalBody>
+
+        <ModalFooter
+          justifyContent="end"
+          background="gray.700"
+          borderBottomLeftRadius="3xl"
+          borderBottomRightRadius="3xl"
+          p={6}
+        >
+          <Text
+            color="white"
+            textAlign="left"
+            fontWeight="medium"
+            fontSize="md"
+          >
+            Your transactions willl appear here...
+          </Text>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default AccountModal

packages/dashboard/src/components/ConnectButton.tsx

@@ -0,0 +1,57 @@
+import { Button, Box, Text } from "@chakra-ui/react";
+import { useEthers, useEtherBalance } from "@usedapp/core";
+import { formatEther } from "@ethersproject/units";
+import Identicon from "./Identicon"
+
+type Props = {
+  handleOpenModal: any;
+}
+
+const ConnectButton = ({ handleOpenModal }: Props) => {
+  const { activateBrowserWallet, account } = useEthers()
+  const etherBalance = useEtherBalance(account)
+
+  const handleConnectWallet = () => {
+    activateBrowserWallet()
+  }
+
+  return account ? (
+    <Box
+      display="flex"
+      alignItems="center"
+      background="gray.700"
+      borderRadius="xl"
+      py="0"
+    >
+      <Box px="3">
+        <Text color="white" fontSize="md">
+          {etherBalance && parseFloat(formatEther(etherBalance)).toFixed(3)} ETH
+        </Text>
+      </Box>
+      <Button
+        onClick={handleOpenModal}
+        bg="gray.800"
+        border="1px solid transparent"
+        _hover={{
+          border: "1px",
+          borderStyle: "solid",
+          borderColor: "blue.400",
+          backgroundColor: "gray.700"
+        }}
+        borderRadius="xl"
+        m="1px"
+        px={3}
+        h="38px"
+      >
+        <Text color="white" fontSize="md" fontWeight="medium" mr="2">
+          {account && `${account.slice(0, 6)}...${account.slice(account.length - 4, account.length)}`}
+        </Text>
+        <Identicon />
+      </Button>
+    </Box>
+  ) : (
+    <Button onClick={handleConnectWallet}>Connect to a wallet</Button>
+  )
+}
+
+export default ConnectButton

packages/dashboard/src/components/Identicon.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+import { useEthers } from "@usedapp/core";
+import styled from "@emotion/styled";
+import Jazzicon from "@metamask/jazzicon";
+
+const StyledIdenticon = styled.div`
+  height: 1rem;
+  width: 1rem;
+  border-radius: 1.125rem;
+  background-color: black;
+`
+
+const Identicon = () => {
+  const ref = useRef<HTMLDivElement>()
+  const { account } = useEthers()
+
+  useEffect(() => {
+    if (account && ref.current) {
+      ref.current.innerHTML = ""
+      ref.current.appendChild(Jazzicon(16, parseInt(account.slice(2, 10), 16)));
+    }
+  }, [account])
+
+  return <StyledIdenticon ref={ref as any} />
+}
+
+export default Identicon