Merge branch 'main' into sohail/contracts

Author: captain-woof

README.md

@@ -12,7 +12,7 @@ This repo contains all the code that runs CazzPay - all smart contracts, subgrap
 
 - [TestCoin ($TST)](https://rinkeby.etherscan.io/address/0x6A308Fb8391Cecd7bb9570840239956f25C101F9) - **0x6A308Fb8391Cecd7bb9570840239956f25C101F9**
 - [CazzPayToken ($CZP)](https://rinkeby.etherscan.io/address/0x8d7b5E919620D2C9742389bc1CeC671eaB0E3150) - **0x8d7b5E919620D2C9742389bc1CeC671eaB0E3150**
-- [CazzPay](https://rinkeby.etherscan.io/address/0xd057D5A7Bc5403436AAB3CeEBfE72E5d781577Dc) - **0xd057D5A7Bc5403436AAB3CeEBfE72E5d781577Dc**
+- [CazzPay](https://rinkeby.etherscan.io/address/0xd057D5A7Bc5403436AAB3CeEBfE72E5d781577Dc) - **0xDBbD3EF86b6F1a250f542F21362FeA46c28F037c**
 
 ## CazzPay graph
 

client/README.md

@@ -1,34 +1,12 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+# CazzPay
+
+## Environement variables
+
+- **NEXT_PUBLIC_DEPLOY_ENV** *("local", "development", or "production")*
+- **INFURA_PROJECT_ID**
+- **NEXT_PUBLIC_CAZZPAY_CONTRACT_ADDR**
+- **NEXT_PUBLIC_CZP_CONTRACT_ADDR**
+- **NEXT_PUBLIC_PAYPAL_CLIENT_ID**
+- **PAYPAL_CLIENT_SECRET**
+- **NEXT_PUBLIC_GRAPH_API_ENDPOINT**
+- **CAZZPAY_SIGNER_PRIVATE_KEY**

client/components/atoms/container/container.tsx

@@ -1,17 +1,18 @@
 import { Box, BoxProps, useBreakpointValue } from "@chakra-ui/react";
+import { useMemo } from "react";
 
 interface ContainerProps extends BoxProps {
     adjustForAppBar?: boolean;
     fullViewportHeight?: boolean;
     forReading?: boolean;
 }
 
-export default function Container(props: ContainerProps) {
+export default function Container({ adjustForAppBar, fullViewportHeight, forReading, ...props }: ContainerProps) {
 
     const fullScreenHeightForAppBarAdjust = useBreakpointValue({ base: "calc(100vh - 4rem)", md: "calc(100vh - 4.5rem)" });
 
     return (
-        <Box width="full" maxWidth={props?.forReading ? "60ch" : "5xl"} marginX="auto" as="section" marginTop={{ base: props.adjustForAppBar ? "4rem" : "0", md: props.adjustForAppBar ? "4.5rem" : "0" }} minHeight={props.fullViewportHeight ? (props.adjustForAppBar ? fullScreenHeightForAppBarAdjust : "100vh") : "auto"} {...props}>
+        <Box width="full" maxWidth={forReading ? "60ch" : "5xl"} marginX="auto" as="section" marginTop={{ base: adjustForAppBar ? "4rem" : "0", md: adjustForAppBar ? "4.5rem" : "0" }} minHeight={fullViewportHeight ? (adjustForAppBar ? fullScreenHeightForAppBarAdjust : "100vh") : "auto"} {...props}>
             {props?.children}
         </Box>
     )

client/components/organisms/appbar/appbar.tsx

@@ -1,14 +1,19 @@
-import { Button, Flex, Heading, Hide, IconButton, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, MenuItemProps, MenuList, Show, useBreakpointValue, useColorMode, useColorModeValue } from "@chakra-ui/react";
+import { Button, Flex, Heading, Hide, IconButton, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, MenuItemProps, MenuList, Show, useBreakpointValue, useColorMode, useColorModeValue, useTheme } from "@chakra-ui/react";
 import { FiChevronDown as DownArrowIcon, FiSun as SunIcon, FiMoon as MoonIcon } from "react-icons/fi";
 import { HiMenuAlt4 as MenuIcon } from "react-icons/hi";
 import { BiHelpCircle as HelpIcon } from "react-icons/bi";
+import { FiLogOut as LogoutIcon } from "react-icons/fi";
 import { AiOutlineLogin as LoginIcon } from "react-icons/ai";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { usePaypal } from "../../../hooks/usePaypal";
+import { useRouter } from "next/router";
 
 export default function AppBar() {
 
+    // For router
+    const router = useRouter();
+
     // For tracking first render
     const [isFirstRendered, setIsFirstRendered] = useState<boolean>(false);
     useEffect(() => {
@@ -19,7 +24,7 @@ export default function AppBar() {
     const { colorMode, toggleColorMode } = useColorMode();
 
     // For Paypal
-    const { paypalState } = usePaypal();
+    const { paypalState, setPaypalLoggedInState, setPaypalUserInfo } = usePaypal();
 
     // Icon Button size
     const menuIconButtonSize = useBreakpointValue({ base: "md", md: "lg" });
@@ -28,6 +33,16 @@ export default function AppBar() {
     // Navbar background
     const navbarBackgroundColor = useColorModeValue("gray.50", "gray.800");
 
+    // Handle logout
+    const handleLogout = useCallback(async () => {
+        setPaypalLoggedInState(false);
+        setPaypalUserInfo(null);
+        await router.push("/");
+    }, [router]);
+
+    // Theme
+    const theme = useTheme();
+
     return (
         <Flex position="fixed" top="0" left="0" width="full" zIndex="docked" boxShadow="md" paddingX="6" paddingY="3" alignItems="center" backgroundColor={navbarBackgroundColor}>
             {/* Logo/name */}
@@ -74,6 +89,13 @@ export default function AppBar() {
                                 </MenuItem></a></Link>
                             </MenuList>
                         </Menu>
+
+                        {/* Log out */}
+                        {paypalState.loggedIn &&
+                            <Button variant="unstyled" onClick={handleLogout} leftIcon={<LogoutIcon stroke={theme.colors.red["400"]} />} display="flex" color={theme.colors.red["400"]}>
+                                Logout
+                            </Button>
+                        }
                     </Show>
 
                     {/* Nav menu (small screens) */}
@@ -103,6 +125,14 @@ export default function AppBar() {
                                         Know more
                                     </MenuItemCustom></a></Link>
                                 </MenuGroup>
+                                <MenuDivider />
+
+                                {/* For logging out */}
+                                {paypalState.loggedIn &&
+                                    <MenuItem icon={<LogoutIcon size={16} stroke={theme.colors.red["400"]} />} onClick={handleLogout} color={theme.colors.red["400"]} _focus={{ background: "red.400", color: "gray.50" }}>
+                                        Logout
+                                    </MenuItem>
+                                }
 
                             </MenuList>
                         </Menu>

client/components/organisms/connectWalletDialog/connectWalletDialog.tsx

@@ -0,0 +1,50 @@
+import { Grid, GridItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text } from "@chakra-ui/react";
+import useWalletConnection from "../../../hooks/useWalletConnection";
+import MetamaskIcon from "../../../icons/MetamaskIcon";
+import WalletConnectIcon from "../../../icons/WalletConnectIcon";
+import WalletLinkIcon from "../../../icons/WalletLinkIcon";
+import OtherWalletIcon from "../../../icons/OtherWalletIcon";
+
+export default function ConnectWalletDialog() {
+    const { connectDialogVisible, hideConnectDialog, connect } = useWalletConnection();
+
+    return (
+        <Modal isOpen={connectDialogVisible} onClose={hideConnectDialog} isCentered size="xl">
+            <ModalOverlay />
+            <ModalContent>
+                <ModalHeader>Connect your wallet</ModalHeader>
+                <ModalCloseButton />
+
+                {/* Connectors */}
+                <ModalBody>
+                    <Grid templateColumns="repeat(2, 1fr)" gap="6">
+                        {/* Metamask */}
+                        <GridItem width="full" padding="4" display="flex" flexDirection="column" justifyContent="center" alignItems="center" role="button" onClick={() => { connect("metamask"); }}>
+                            <MetamaskIcon height="48" width="48" />
+                            <Text marginTop="4" textAlign="center">Metamask</Text>
+                        </GridItem>
+
+                        {/* WalletConnect */}
+                        <GridItem width="full" padding="4" display="flex" flexDirection="column" justifyContent="center" alignItems="center" role="button" onClick={() => { connect("wallet-connect"); }}>
+                            <WalletConnectIcon height="48" width="48" />
+                            <Text marginTop="4" textAlign="center">WalletConnect</Text>
+                        </GridItem>
+
+                        {/* WalletLink */}
+                        <GridItem width="full" padding="4" display="flex" flexDirection="column" justifyContent="center" alignItems="center" role="button" onClick={() => { connect("wallet-link"); }}>
+                            <WalletLinkIcon height="48" width="48" />
+                            <Text marginTop="4" textAlign="center">Coinbase</Text>
+                        </GridItem>
+
+                        {/* Others */}
+                        <GridItem width="full" padding="4" display="flex" flexDirection="column" justifyContent="center" alignItems="center" role="button" onClick={() => { connect("injected"); }}>
+                            <OtherWalletIcon height="48" width="48" />
+                            <Text marginTop="4" textAlign="center">Others (injected)</Text>
+                        </GridItem>
+                    </Grid>
+                </ModalBody>
+
+            </ModalContent>
+        </Modal>
+    )
+}

client/components/organisms/connectWalletDialog/index.tsx

@@ -0,0 +1,2 @@
+import ConnectWalletDialog from "./connectWalletDialog";
+export default ConnectWalletDialog;

client/components/pages/liquidity-provider/dashboard/buyCzp.tsx

@@ -0,0 +1,121 @@
+import { Box, Button, ButtonProps, FormControl, FormHelperText, FormLabel, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, Tooltip, useToast } from "@chakra-ui/react";
+import { BsCoin as BuyCzpIcon } from "react-icons/bs";
+import { useLiquidityProvider } from "../../../../hooks/useLiquidityProvider";
+import useWalletConnection from "../../../../hooks/useWalletConnection";
+import { IoWallet as WalletIcon } from "react-icons/io5";
+import { PayPalButtons } from "@paypal/react-paypal-js";
+import axios from "axios";
+
+interface ISellerQRCode {
+    buttonProps: ButtonProps;
+}
+
+export default function BuyCzp({ buttonProps }: ISellerQRCode) {
+
+    // For liquidity provider
+    const { buyCzpDialogVisible, setBuyCzpDialogVisible, czpBuyAmt, setCzpBuyAmt } = useLiquidityProvider();
+
+    // For wallet connection
+    const { isConnecting, isConnected, showConnectDialog, disconnect, signerAddr } = useWalletConnection();
+
+    // For toast
+    const toast = useToast();
+
+    return (
+        <>
+            {/* Button to show Buy CZP dialog code */}
+            <Tooltip label="Click here to buy $CZP!" aria-label='Buy $CZP to provide liquidity on CazzPay'>
+                <Button {...buttonProps} leftIcon={<BuyCzpIcon size={24} />} variant="outline" colorScheme="blue" display="flex" onClick={() => { setBuyCzpDialogVisible(true); }}>
+                    Buy CZP
+                </Button>
+            </Tooltip>
+
+            {/* Buy CZP in a pop-up */}
+            <Modal isOpen={buyCzpDialogVisible} onClose={() => { setBuyCzpDialogVisible(false); }} isCentered>
+                <ModalOverlay />
+
+                <ModalContent>
+                    <ModalHeader>Buy $CZP</ModalHeader>
+                    <ModalCloseButton />
+
+                    <ModalBody>
+
+                        {/* Connect wallet button */}
+                        <Button isLoading={isConnecting} loadingText="Connecting" onClick={!isConnected ? showConnectDialog : disconnect} display="flex" marginX="auto" rightIcon={<WalletIcon size={24} />} colorScheme="blue" variant="outline">
+                            {isConnected ? "Connected" : "Connect wallet"}
+                        </Button>
+
+                        {/* Input field for buy amount */}
+                        <FormControl marginTop={4}>
+                            <FormLabel>$CZP to buy</FormLabel>
+                            <Input value={czpBuyAmt} onChange={(e) => { setCzpBuyAmt(e.target.value) }} colorScheme="blue" type="number" placeholder="XX.XX" />
+                            <FormHelperText>$CZP:USD = 1:1</FormHelperText>
+                        </FormControl>
+
+                    </ModalBody>
+
+                    {/* Interaction buttons */}
+                    <ModalFooter flexDirection="column" alignItems="flex-end">
+
+                        {/* Buy button */}
+                        <PayPalButtons style={{
+                            layout: "horizontal",
+                            color: "blue",
+                            shape: "pill",
+                            label: "pay"
+                        }} forceReRender={[czpBuyAmt, signerAddr, isConnected, setCzpBuyAmt, setBuyCzpDialogVisible]}
+                            disabled={!(isConnected && !!czpBuyAmt)}
+                            createOrder={async () => {
+                                try {
+                                    const res = await fetch("/api/orders", {
+                                        method: "POST",
+                                        headers: {
+                                            "Content-Type": "application/json",
+                                            Accept: "application/json",
+                                        },
+                                        body: JSON.stringify({
+                                            price: czpBuyAmt,
+                                        }),
+                                    });
+                                    const data = await res.json();
+                                    return data.id;
+                                } catch (e) {
+                                    console.error(e);
+                                }
+                            }}
+                            onCancel={(data) => {
+                                console.error(data);
+                                toast({
+                                    position: "bottom",
+                                    status: "error",
+                                    title: "Could not send payment!"
+                                });
+                            }}
+                            onApprove={async (data, actions) => {
+                                const resp = await axios.post(`/api/orders/${data.orderID}`, {
+                                    mintTo: signerAddr
+                                }, {
+                                    responseType: "json"
+                                });
+
+                                setCzpBuyAmt("0");
+                                setBuyCzpDialogVisible(false);
+
+                                toast({
+                                    position: "bottom",
+                                    status: "success",
+                                    title: "Payment successful!"
+                                });
+                                
+                            }}
+                        />
+
+                        <Text fontSize="sm" marginTop={2} fontWeight={500} color="gray.500">
+                            $CZP bought would be deposited to your wallet
+                        </Text>
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+        </>
+    )
+}

client/components/pages/liquidity-provider/dashboard/index.tsx

@@ -0,0 +1,2 @@
+import LiquidityProviderDashboardPage from "./liquidityProviderDashboard";
+export default LiquidityProviderDashboardPage;