Work on the create pool page, and refine the UI

client/data.jsx

@@ -0,0 +1,44 @@
+import CreatePools from "./src/assets/CreatePools.png";
+import SupplyLiquidity from "./src/assets/SupplyLiquidity.png";
+import Swap from "./src/assets/Swap.png";
+import BAT from "./src/assets/supportedTokens/BAT.png";
+import LINK from "./src/assets/supportedTokens/LINK.png";
+import USDC from "./src/assets/supportedTokens/USDC.png";
+import WETH from "./src/assets/supportedTokens/WETH.png";
+import TokenAvatar from "./src/components/TokenAvatar";
+
+const supportedTokens = {
+    weth: { name: "WETH", avatar: <TokenAvatar icon={WETH} /> },
+    link: { name: "LINK", avatar: <TokenAvatar icon={LINK} /> },
+    bat: { name: "BAT", avatar: <TokenAvatar icon={BAT} /> },
+    usdc: { name: "USDC", avatar: <TokenAvatar icon={USDC} /> },
+};
+
+const features = [
+    {
+        img: SupplyLiquidity,
+        title: "Supply Pools with Liquidity",
+        description:
+            "Effortlessly supply liquidity to existing liquidity pools and receive LP tokens which earn attractive fees in active markets",
+        linkTo: "/supplyLiquidity",
+        text: "supply",
+    },
+    {
+        img: Swap,
+        title: "Swap or Flash Swap Tokens",
+        description:
+            "Swap one token for another in any of the available liquidity pools for a very minimal fee. Additionally, Thunder Swap users can leverage flash swaps and use hooks to fine tune their trading strategy",
+        linkTo: "/swap",
+        text: "swap",
+    },
+    {
+        img: CreatePools,
+        title: "Create New Pools",
+        description:
+            "Permissionlessly create new liquidity pools for supported tokens if one does not exist already",
+        linkTo: "/createPool",
+        text: "create pool",
+    },
+];
+
+export { supportedTokens, features };

client/src/App.jsx

@@ -2,7 +2,6 @@ import { Box } from "@chakra-ui/react";
 import { useEthers } from "@usedapp/core";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
-import Footer from "./components/Footer.jsx";
 import Header from "./components/Header.jsx";
 import CreatePool from "./pages/CreatePool.jsx";
 import Home from "./pages/Home.jsx";
@@ -26,7 +25,6 @@ function App() {
                     <Route element={<SupplyLiquidity />} path="/supplyLiquidity"></Route>
                     <Route element={<CreatePool />} path="/createPool"></Route>
                 </Routes>
-                <Footer />
             </BrowserRouter>
         </Box>
     );

client/src/components/Feature.jsx

@@ -0,0 +1,28 @@
+import { ArrowForwardIcon } from "@chakra-ui/icons";
+import { Box, Link as ChakraLink, Heading, Image, Text, VStack } from "@chakra-ui/react";
+import { Link } from "react-router-dom";
+
+import ButtonVariant from "./buttons/ButtonVariant";
+
+export default function Feature({ img, title, description, linkTo, text }) {
+    return (
+        <Box maxW="70ch" mx="auto" px={8} pt={24}>
+            <VStack color="gray.900" textAlign="center">
+                <Image maxW={300} mb={3} src={img} />
+                <Heading as="h2" fontSize={28} letterSpacing="-0.1px" mb={3}>
+                    {title}
+                </Heading>
+                <Text mb={5}>{description}</Text>
+                <ChakraLink as={Link} to={linkTo}>
+                    <ButtonVariant
+                        colorScheme="pink"
+                        IconType={ArrowForwardIcon}
+                        onButtonClicked={() => {}}
+                        text={text}
+                        variant="outline"
+                    />
+                </ChakraLink>
+            </VStack>
+        </Box>
+    );
+}

client/src/components/Footer.jsx

@@ -2,8 +2,8 @@ import { Box, Text, VStack } from "@chakra-ui/react";
 
 export default function Footer() {
     return (
-        <Box bg="yellow.500" py={16}>
-            <VStack color="white" textAlign="center">
+        <Box bg="gray.100" py={16}>
+            <VStack color="gray.600" textAlign="center">
                 <Text>@Thunder Swap ---- mgnfy-view</Text>
                 <Text fontSize="xs" letterSpacing="1px">
                     2024-25

client/src/components/Header.jsx

@@ -1,54 +1,54 @@
-import { Flex, Heading, Hide } from "@chakra-ui/react";
+import { Box, Flex, HStack, Heading, Hide } from "@chakra-ui/react";
 
-import Button from "./Button";
+import ThunderSwap from "../../public/thunder-swap.png";
+import shortenAddress from "../utils/shortenAddress";
 import InfoChip from "./InfoChip";
-import NavBar from "./NavBar";
 import SmallScreenMenu from "./SmallScreenMenu";
+import TokenAvatar from "./TokenAvatar";
+import Button from "./buttons/Button";
+import NavBar from "./nav/NavBar";
 
 export default function Header({ account, onMetaMaskConnect, onMetaMaskDisconnect }) {
-    const accountPrefixLength = 5;
-    const accountSuffixLength = 3;
-    const text = account
-        ? account.substr(0, accountPrefixLength) +
-          "..." +
-          account.substr(account.length - 1 - accountSuffixLength, accountSuffixLength)
-        : "Not Connected";
-    let connectDisconnectButton;
-
-    if (!account)
-        connectDisconnectButton = (
-            <Button
-                colorScheme="pink"
-                onButtonClicked={onMetaMaskConnect}
-                text="Connect"
-                variant="solid"
-            />
-        );
-    else
-        connectDisconnectButton = (
-            <Button
-                colorScheme="pink"
-                onButtonClicked={onMetaMaskDisconnect}
-                text="Disconnect"
-                variant="outline"
-            />
-        );
+    const text = account ? shortenAddress(account) : "Not Connected";
 
     return (
-        <Flex alignItems="center" gap={6} maxWidth="1270px" mx="auto" px={8} py={8}>
-            <Heading as="h1" color="gray.800" letterSpacing="-0.1px" size="lg">
-                Thunder Swap
-            </Heading>
-            <NavBar />
-            <Flex alignItems="center" gap={3} ml={{ sm: "auto", md: "auto", lg: "0", xl: "0" }}>
-                <Hide below="lg">
-                    <InfoChip text={text} actualText={account} />
-                </Hide>
-                {connectDisconnectButton}
-                <Hide above="lg">
-                    <SmallScreenMenu account={account} />
-                </Hide>
+        <Box>
+            <Flex alignItems="center" gap={6} maxWidth="1270px" mx="auto" px={8} py={8}>
+                <HStack spacing={1}>
+                    <TokenAvatar icon={ThunderSwap} />
+                    <Heading as="h1" color="gray.800" letterSpacing="-0.1px" size="lg">
+                        Thunder Swap
+                    </Heading>
+                </HStack>
+                <NavBar />
+                <Flex
+                    alignItems="center"
+                    gap={3}
+                    ml={{ base: "auto", sm: "auto", md: "auto", lg: "0", xl: "0", "2xl": "0" }}
+                >
+                    <Hide below="lg">
+                        <InfoChip text={text} actualText={account} />
+                    </Hide>
+                    {account ? (
+                        <Button
+                            colorScheme="pink"
+                            onButtonClicked={onMetaMaskDisconnect}
+                            text="Disconnect"
+                            variant="outline"
+                        />
+                    ) : (
+                        <Button
+                            colorScheme="pink"
+                            onButtonClicked={onMetaMaskConnect}
+                            text="Connect"
+                            variant="solid"
+                        />
+                    )}
+                    <Hide above="lg">
+                        <SmallScreenMenu account={account} />
+                    </Hide>
+                </Flex>
             </Flex>
-        </Flex>
+        </Box>
     );
 }

client/src/components/InfoChip.jsx

@@ -1,4 +1,4 @@
-import { Button, useClipboard } from "@chakra-ui/react";
+import { Button, Text, useClipboard } from "@chakra-ui/react";
 
 export default function InfoChip({ text, actualText }) {
     const { onCopy, hasCopied } = useClipboard(actualText);
@@ -13,13 +13,16 @@ export default function InfoChip({ text, actualText }) {
             _hover={{
                 bgColor: "yellow.200",
             }}
+            _active={{
+                bgColor: "yellow.300",
+            }}
             borderRadius={50}
             bgColor="yellow.100"
             color="yellow.500"
             onClick={onCopyHelper}
             size="lg"
         >
-            {hasCopied ? "Copied" : text}
+            <Text>{hasCopied ? "Copied!" : text}</Text>
         </Button>
     );
 }

client/src/components/SmallScreenMenu.jsx

@@ -4,22 +4,22 @@ import {
     ModalBody,
     ModalCloseButton,
     ModalContent,
-    ModalFooter,
     ModalOverlay,
     VStack,
     useDisclosure,
 } from "@chakra-ui/react";
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 
-import Button from "../components/Button";
+import Button from "../components/buttons/Button";
+import shortenAddress from "../utils/shortenAddress";
 import InfoChip from "./InfoChip";
-import NavLink from "./NavLink";
+import NavLink from "./nav/NavLink";
 
 export default function SmallScreenMenu({ account }) {
     const { isOpen, onOpen, onClose } = useDisclosure();
     const { pathname } = useLocation();
-    const text = account ? account : "Not Connected";
+    const text = account ? shortenAddress(account) : "Not Connected";
 
     useEffect(() => {
         onClose();
@@ -55,13 +55,9 @@ export default function SmallScreenMenu({ account }) {
                                     linkPath="/createPool"
                                 />
                             </Box>
+                            <InfoChip text={text} actualText={account} />
                         </VStack>
                     </ModalBody>
-                    <ModalFooter>
-                        <VStack mx="auto">
-                            <InfoChip text={text} />
-                        </VStack>
-                    </ModalFooter>
                 </ModalContent>
             </Modal>
         </>

client/src/components/TokenAvatar.jsx

@@ -1,5 +1,5 @@
-import { Avatar } from "@chakra-ui/react";
+import { Image } from "@chakra-ui/react";
 
 export default function TokenAvatar({ icon }) {
-    return <Avatar size="md" src={icon} />;
+    return <Image src={icon} maxW={8} />;
 }

client/src/components/Button.jsx → client/src/components/buttons/Button.jsx

@@ -1,11 +1,13 @@
 import { Button as ChakraButton } from "@chakra-ui/react";
 
-export default function Button({ text, onButtonClicked, variant, colorScheme }) {
+export default function Button({ colorScheme, onButtonClicked, text, variant }) {
     return (
         <ChakraButton
             colorScheme={colorScheme}
             onClick={() => onButtonClicked()}
-            size="lg"
+            py={{ base: "20px" }}
+            size={{ base: "sm", sm: "md", md: "lg", lg: "lg", xl: "lg", "2xl": "lg" }}
+            textTransform="uppercase"
             variant={variant}
         >
             {text}

client/src/components/buttons/ButtonVariant.jsx

@@ -0,0 +1,17 @@
+import { Button } from "@chakra-ui/react";
+
+export default function ButtonVariant({ colorScheme, IconType, onButtonClicked, text, variant }) {
+    return (
+        <Button
+            colorScheme={colorScheme}
+            onClick={() => onButtonClicked()}
+            py={{ base: "20px" }}
+            rightIcon={<IconType />}
+            size={{ base: "sm", sm: "md", md: "lg", lg: "lg", xl: "lg", "2xl": "lg" }}
+            textTransform="uppercase"
+            variant={variant}
+        >
+            {text}
+        </Button>
+    );
+}

client/src/components/buttons/FullWidthButton.jsx

@@ -0,0 +1,17 @@
+import { Button as ChakraButton } from "@chakra-ui/react";
+
+export default function Button({ colorScheme, onButtonClicked, text, variant }) {
+    return (
+        <ChakraButton
+            colorScheme={colorScheme}
+            onClick={() => onButtonClicked()}
+            py={{ base: "20px" }}
+            size={{ base: "sm", sm: "md", md: "lg", lg: "lg", xl: "lg", "2xl": "lg" }}
+            textTransform="uppercase"
+            variant={variant}
+            w="full"
+        >
+            {text}
+        </ChakraButton>
+    );
+}

client/src/components/NavBar.jsx → client/src/components/nav/NavBar.jsx

@@ -9,7 +9,7 @@ export default function NavBar() {
 
     return (
         <Hide below="lg">
-            <HStack spacing="16px" mx="auto">
+            <HStack spacing={4} mx="auto">
                 <NavLink currentPath={pathname} linkName="Home" linkPath="/" />
                 <NavLink currentPath={pathname} linkName="Swap" linkPath="/swap" />
                 <NavLink currentPath={pathname} linkName="Supply" linkPath="/supplyLiquidity" />

client/src/components/NavLink.jsx → client/src/components/nav/NavLink.jsx

@@ -14,12 +14,15 @@ export default function NavLink({ currentPath, linkPath, linkName }) {
 
     return (
         <ChakraLink
-            as={Link}
-            color={linkColor}
             _hover={{
                 color: "yellow.500",
                 textDecoration: "underline",
             }}
+            _active={{
+                color: "yellow.700",
+            }}
+            as={Link}
+            color={linkColor}
             textDecoration={textDecoration}
             textTransform="uppercase"
             to={linkPath}

client/src/index.css

@@ -2,4 +2,4 @@
 
 * {
     font-family: RobotoRegular;
-}
+}