Merge pull request #55 from hansmrtn/sign-creation

Basic UI improvements
moonshotcollective · Dec 18, 2021 · cb16bd6 · cb16bd6
2 parents 645a38a + aa751f1
commit cb16bd6
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 250 deletions.
diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
@@ -5,7 +5,7 @@ import WalletLink from "walletlink";
 import { Alert, Button } from "antd";
 import "antd/dist/antd.css";
 import React, { useCallback, useEffect, useState } from "react";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { BrowserRouter, Route, Switch, useHistory } from "react-router-dom";
 import Web3Modal from "web3modal";
 import "./App.css";
 import { Account, Contract, Header, Footer } from "./components";
@@ -21,7 +21,7 @@ import Portis from "@portis/web3";
 import Fortmatic from "fortmatic";
 import Authereum from "authereum";
 
-import { Box } from "@chakra-ui/react";
+import { Box, HStack, Flex, Spacer } from "@chakra-ui/react";
 import NotConnectedCard from "./components/Cards/NotConnectedCard";
 import CenteredFrame from "./components/layout/CenteredFrame";
 
@@ -115,8 +115,7 @@ const web3Modal = new Web3Modal({
     // },
     "custom-walletlink": {
       display: {
-        logo:
-          "https://play-lh.googleusercontent.com/PjoJoG27miSglVBXoXrxBSLveV6e3EeBPpNY55aiUUBM9Q1RCETKCOqdOkX2ZydqVf0",
+        logo: "https://play-lh.googleusercontent.com/PjoJoG27miSglVBXoXrxBSLveV6e3EeBPpNY55aiUUBM9Q1RCETKCOqdOkX2ZydqVf0",
         name: "Coinbase",
         description: "Connect to Coinbase Wallet (not Coinbase App)",
       },
@@ -409,23 +408,30 @@ function App(props) {
   }, [yourLocalBalance]);
 
   return (
-    <div style={{ padding: 52 }}>
-      {networkDisplay}
-      <Box mb={8} w="full">
-        <div style={{ position: "fixed", textAlign: "right", right: 32, top: 60, padding: 10 }}>
-          <Account
-            address={address}
-            localProvider={localProvider}
-            userSigner={userSigner}
-            mainnetProvider={mainnetProvider}
-            price={price}
-            web3Modal={web3Modal}
-            loadWeb3Modal={loadWeb3Modal}
-            logoutOfWeb3Modal={logoutOfWeb3Modal}
-            blockExplorer={blockExplorer}
-          />
-        </div>
-        <Header />
+    <div>
+      <Box mb={8} pl={"12vw"} pr={"12vw"}>
+        <Box pb={10}>
+          <HStack>
+            <Box>
+              <Header />
+            </Box>
+            <Spacer />
+            <Box pt={5}>
+              <Account
+                address={address}
+                localProvider={localProvider}
+                userSigner={userSigner}
+                mainnetProvider={mainnetProvider}
+                price={price}
+                web3Modal={web3Modal}
+                loadWeb3Modal={loadWeb3Modal}
+                logoutOfWeb3Modal={logoutOfWeb3Modal}
+                blockExplorer={blockExplorer}
+              />
+            </Box>
+          </HStack>
+        </Box>
+
         {address && address !== "" ? (
           <BrowserRouter>
             <Switch>

diff --git a/packages/react-app/src/components/Account.jsx b/packages/react-app/src/components/Account.jsx
@@ -1,44 +1,7 @@
-import { Button } from "antd";
 import React from "react";
 import { useThemeSwitcher } from "react-css-theme-switcher";
-import Address from "./Address";
-import Balance from "./Balance";
-import Wallet from "./Wallet";
-import { Text, Heading, VStack, HStack, Divider as ChDivider, Button as ChButton, Avatar } from "@chakra-ui/react";
-
-/*
-  ~ What it does? ~
-
-  Displays an Address, Balance, and Wallet as one Account component,
-  also allows users to log in to existing accounts and log out
-
-  ~ How can I use? ~
-
-  <Account
-    address={address}
-    localProvider={localProvider}
-    userProvider={userProvider}
-    mainnetProvider={mainnetProvider}
-    price={price}
-    web3Modal={web3Modal}
-    loadWeb3Modal={loadWeb3Modal}
-    logoutOfWeb3Modal={logoutOfWeb3Modal}
-    blockExplorer={blockExplorer}
-  />
-
-  ~ Features ~
-
-  - Provide address={address} and get balance corresponding to the given address
-  - Provide localProvider={localProvider} to access balance on local network
-  - Provide userProvider={userProvider} to display a wallet
-  - Provide mainnetProvider={mainnetProvider} and your address will be replaced by ENS name
-              (ex. "0xa870" => "user.eth")
-  - Provide price={price} of ether and get your balance converted to dollars
-  - Provide web3Modal={web3Modal}, loadWeb3Modal={loadWeb3Modal}, logoutOfWeb3Modal={logoutOfWeb3Modal}
-              to be able to log in/log out to/from existing accounts
-  - Provide blockExplorer={blockExplorer}, click on address and get the link
-              (ex. by default "https://etherscan.io/" or for xdai "https://blockscout.com/poa/xdai/")
-*/
+import { Box, Button } from "@chakra-ui/react";
+import { useLookupAddress } from "eth-hooks/dapps/ens";
 
 export default function Account({
   address,
@@ -52,30 +15,32 @@ export default function Account({
   logoutOfWeb3Modal,
   blockExplorer,
 }) {
+  const lookup = useLookupAddress(mainnetProvider, address);
+  const ensSplit = lookup?.split(".");
+  const validEnsCheck = ensSplit && ensSplit[ensSplit.length - 1] === "eth";
+
+  let displayAddress = "Loading...";
+
+  if (validEnsCheck) {
+    displayAddress = lookup;
+  } else {
+    displayAddress =
+      address !== undefined
+        ? `${address.substr(0, 5)}...${address.substr(address.length - 6, address.length)}`
+        : "Loading...";
+  }
+
   const modalButtons = [];
   if (web3Modal) {
     if (web3Modal.cachedProvider) {
       modalButtons.push(
-        <Button
-          key="logoutbutton"
-          style={{ verticalAlign: "top", marginLeft: 8, marginTop: 4 }}
-          shape="round"
-          size="large"
-          onClick={logoutOfWeb3Modal}
-        >
-          logout
+        <Button key="logoutbutton" size="sm" variant="outline" onClick={logoutOfWeb3Modal}>
+          🟢 {displayAddress}
         </Button>,
       );
     } else {
       modalButtons.push(
-        <Button
-          key="loginbutton"
-          style={{ verticalAlign: "top", marginLeft: 8, marginTop: 4 }}
-          shape="round"
-          size="large"
-          /* type={minimized ? "default" : "primary"}     too many people just defaulting to MM and having a bad time */
-          onClick={loadWeb3Modal}
-        >
+        <Button key="loginbutton" size="sm" onClick={loadWeb3Modal}>
           connect
         </Button>,
       );
@@ -84,31 +49,5 @@ export default function Account({
 
   const { currentTheme } = useThemeSwitcher();
 
-  const display = minimized ? (
-    ""
-  ) : (
-    <HStack w="100%" align="left" spacing="1rem">
-      {address ? (
-        <Address address={address} ensProvider={mainnetProvider} blockExplorer={blockExplorer} />
-      ) : (
-        "Connecting..."
-      )}
-      {/* <Balance address={address} provider={localProvider} price={price} /> */}
-      {/* <Wallet
-        address={address}
-        provider={localProvider}
-        signer={userSigner}
-        ensProvider={mainnetProvider}
-        price={price}
-        color={currentTheme === "light" ? "#1890ff" : "#2caad9"}
-      /> */}
-    </HStack>
-  );
-
-  return (
-    <HStack w="100%" align="left">
-      {display}
-      {modalButtons}
-    </HStack>
-  );
+  return <Box>{modalButtons}</Box>;
 }
diff --git a/packages/react-app/src/components/Footer.jsx b/packages/react-app/src/components/Footer.jsx
@@ -1,13 +1,32 @@
-import { Flex, HStack, Link, Text, Box, useColorModeValue } from "@chakra-ui/react";
+import { Flex, HStack, Link, Text, Box, useColorModeValue, Spacer} from "@chakra-ui/react";
 import { Icon } from "@chakra-ui/icon";
 import { FaGithub } from "react-icons/fa";
 
 import GitcoinIcon from "./Icons/GitcoinIcon";
 
 const Footer = () => {
   return (
-    <Box as="footer" width="100%" alignContent="center" pt="8" pb="12" pl="16" mt={4} ml={4} mr={8}>
-      <HStack alignItems="center" justifyContent="space-between" width="full">
+    <Box as="footer" width="100%" alignContent="center" pt={10}>
+          <HStack>
+
+          <Link href="https://github.com/moonshotcollective" isExternal>
+          <Icon
+            as={FaGithub}
+            w={6}
+            h={6}
+            color="purple.500"
+            _hover={{
+              color: "yellow.500",
+            }}
+          />
+        </Link>
+          <Spacer />
+          <GitcoinIcon />
+          <Link href="https://moonshotcollective.space/" isExternal>
+              Moonshot Collective
+            </Link>
+        </HStack>
+      {/* <HStack alignItems="center" justifyContent="space-between" width="full">
         <Flex alignItems="bottom" justifyContent="bottom">
           <GitcoinIcon />
           <Text ml="2">
@@ -27,7 +46,7 @@ const Footer = () => {
             }}
           />
         </Link>
-      </HStack>
+      </HStack> */}
     </Box>
   );
 };

diff --git a/packages/react-app/src/components/Header.jsx b/packages/react-app/src/components/Header.jsx
@@ -7,19 +7,12 @@ import QDIcon from "./Icons/QDIcon";
 export default function Header() {
   const headingColor = useColorModeValue("yellow.600", "yellow.500");
   return (
-    <Box mb={8} mt={4} ml={4} w="full">
-      <HStack>
-        <VStack align="left">
-          <HStack align="center">
-            <QDIcon size={16} />
-            <Text mb={1} color={headingColor} fontSize="5xl">
-              pay.party
-            </Text>
-          </HStack>
-          <Text color="purple.500">
-            by MOONSHOT COLLECTIVE
-          </Text>
-        </VStack>
+    <Box pb={0}>
+      <HStack align="center">
+        <QDIcon size={16} />
+        <Text color={headingColor} fontSize="5xl">
+          pay.party
+        </Text>
       </HStack>
     </Box>
   );