UI Refactor

next-app/components/FAQ/IDFAQ.tsx

@@ -5,6 +5,8 @@ import {
 	AccordionItem,
 	AccordionPanel,
 	Box,
+    Center,
+    Flex,
 } from "@chakra-ui/react"
 import React from "react"
 
@@ -30,7 +32,16 @@ const faq = [
 const IDFAQ = (props: Props) => {
 	return (
 		<>
-			<Accordion allowToggle>
+            <Flex mb={10} width={{base:"500%", sm: "100%"}} justify={"center"}>
+				<Center
+					width={{ base: "100%", md: "60%", lg: "70%", xl: "50%" }}
+					textAlign={"center"}
+                    fontSize={{ base: "6xl", sm: "60px" }}
+                    >
+					<h1 style={{fontSize: "30px"}} color="brand.primary">FAQs</h1>
+				</Center>
+			</Flex>
+			<Accordion id="faq" allowToggle>
 				{faq.map((faq) => (
 					<AccordionItem>
 						<h2>

next-app/components/Header/Footer.tsx

@@ -9,7 +9,7 @@ type Props = {}
 function Footer({}: Props) {
   return (
     <Center >
-     <Flex width={"30%"}justifyContent={"space-between"} my={10}    >
+     <Flex width={"15%"}justifyContent={"space-between"} my={10}    >
 
                 <Link href='https://www.linkedin.com/in/sharayushendre/' target='_blank'>
 

next-app/components/Header/Header.tsx

@@ -116,7 +116,7 @@ const handleRoute = (path: string) => (event: React.MouseEvent<HTMLButtonElement
 
     				<Button
     					border={"none"}
-    					mx={"5"}
+    					// mx={"5"}
     					bg={"transparent"}
     					style={{ textDecoration: "none", fontSize: 15, fontWeight: 600 }}
     					_hover={{ color: "brand.quinary", background: "transparent" }}
@@ -131,6 +131,18 @@ const handleRoute = (path: string) => (event: React.MouseEvent<HTMLButtonElement
     					onClick={handleRoute("portfolio")}>
     					My Portfolio
     				</Button>
+                    <Button
+    						border={"none"}
+    						bg={"transparent"}
+    						style={{ textDecoration: "none", fontSize: 15, fontWeight: 600 }}
+    						_hover={{ color: "brand.quinary", background: "transparent" }}>
+    						<Link
+    							style={{ textDecoration: "none", fontSize: 15, fontWeight: 600 }}
+    							_hover={{ color: "brand.quinary" }}
+    							href="#About">
+    							FAQs
+    						</Link>
+    				</Button>
                      {/* <p>
               Connection status: {isConnecting && <span>🟡 connecting...</span>}
               {isConnected && <span>🟢 connected.</span>}
@@ -145,10 +157,10 @@ const handleRoute = (path: string) => (event: React.MouseEvent<HTMLButtonElement
 			<Flex width={"40%"} mr={5} align={"center"} justify={"flex-end"}>
 				{/* {isConnected && <Profile/>} */}
 				{/* SIWE */}
-                <Text mr={5}>{isConnected && address.slice(0, 4) + "..." + address.slice(-4)}</Text>
+                {isConnected && address ? <Text mr={5}>{address.slice(0, 4) + "..." + address.slice(-4)}</Text> : ""}
                 {/* <FundWallet/> */}
-                <Button onClick={handleFund}>Buy USDC</Button>
-                <MintUSDC address={address}/>
+                <Button variant={"solid_complete"} disabled={!isConnected} mr={5} onClick={handleFund}>Buy USDC</Button>
+                {/* <MintUSDC address={address}/> */}
 				{/* {isConnected && address &&<ConnectButton
 					accountStatus={{
 						smallScreen: "avatar",

next-app/components/Homepage/About.tsx

@@ -20,14 +20,14 @@ function About({}: Props) {
     //   }
     // };
   return (
-		<Stack id="About" mx={20} pt={20} my={10}>
+		<Stack id="About" mx={20} pt={10} my={5}>
 			<Flex width={{base:"500%", sm: "100%"}} justify={"center"}>
 				<Center
 					width={{ base: "100%", md: "60%", lg: "70%", xl: "50%" }}
 					textAlign={"center"}
                     fontSize={{ base: "6xl", sm: "60px" }}
                     >
-					<h1 style={{fontSize: "50px"}} color="brand.primary">Why AltInvest?</h1>
+					<h1 style={{fontSize: "30px"}} color="brand.primary">Why AltInvest?</h1>
 				</Center>
 			</Flex>
 

next-app/components/Homepage/Homepage.tsx

@@ -29,6 +29,9 @@ import { useAccount, useSignMessage } from "wagmi"
 import axios from "axios"
 import UploadedInvoice from "@/models/UploadedInvoice"
 import {factoryContract} from "@/blockend/interact"
+import {useRouter} from "next/router"
+import IDFAQ from "../FAQ/IDFAQ"
+import SellerCard from "./SellerCard"
 
 type Props = {}
 
@@ -45,6 +48,8 @@ function Homepage({}: Props) {
     const [isFileuploaded, setIsFileUploaded] = useState(false);
     const [deployedContractAddress, setDeployedContractAddress] = useState(null);
     const toast = useToast()
+    const router = useRouter();
+
 
 
 	const pinataConfig = {
@@ -230,6 +235,9 @@ function Homepage({}: Props) {
                           duration: 9000,
                           isClosable: true,
                     })
+
+                    router.push('/portfolio');
+
 
                 })
 
@@ -305,12 +313,12 @@ function Homepage({}: Props) {
 									<ModalFooter>
 
 
-                                        <Button isDisabled={!isFileuploaded} type="submit">Submit</Button>
+                                        <Button mr={-6} isDisabled={!isFileuploaded} type="submit">Submit</Button>
 
 
-										<Button ml={4} onClick={() => setUploadClicked(false)}>
+										{/* <Button ml={4} onClick={() => setUploadClicked(false)}>
 											Close
-										</Button>
+										</Button> */}
 									</ModalFooter>
 								</form>
 							</Stack>
@@ -332,12 +340,16 @@ function Homepage({}: Props) {
 					</Text>
 
 					<Flex justify={"flex-start"} mt="10">
-						<Button mr={10} onClick={() => window.open("/invest", "_self")}>
+						<Button variant={"solid_complete"} mr={10} onClick={() => window.open("/invest", "_self")}>
 							Invest Now
 						</Button>
-						<Button onClick={handleUploadInvoice}>Upload Invoice</Button>
 						{/* <ListNFTForm/> */}
 					</Flex>
+
+                    <Stack cursor="pointer" onClick={handleUploadInvoice} mt="10">
+                            <h1><i>Click to sell your invoices</i></h1>
+                    </Stack>
+
 				</Stack>
 
                 <Hide below="md">
@@ -352,6 +364,11 @@ function Homepage({}: Props) {
 			</Flex>
 
 			<About />
+
+            <Stack mx={20} pt={10} my={5}>
+                <IDFAQ/>
+            </Stack>
+
 			{/* <AboutCompanies /> */}
 		</>
 	)

next-app/components/Invest/InvoiceDetails.tsx

@@ -137,7 +137,7 @@ function InvoiceDetails(props:any) {
 				<Flex justify={"space-between"}>
 					<Stack width={"20%"}>
 						<Text className="invoice-detail-heading">Invoice Amount</Text>
-						<Text className="invoice-detail-text">{Number(invoiceInfo?.totalInvoiceAmount)/10**6}</Text>
+						<Text className="invoice-detail-text">{Number(invoiceInfo?.totalInvoiceAmount)/10**6} USDC</Text>
 					</Stack>
 					<Stack width={"20%"}>
 						<Text className="invoice-detail-heading">XIRR</Text>
@@ -168,8 +168,8 @@ function InvoiceDetails(props:any) {
 						<Text className="invoice-detail-text">Low</Text>
 					</Stack>
 					<Stack width={"20%"}>
-						<Text className="invoice-detail-heading">Invoice Contract</Text>
-						<Text fontSize="10" className="invoice-detail-text">{invoiceAddress}</Text>
+						<Text className="invoice-detail-heading">Units Remaining</Text>
+						<Text className="invoice-detail-text">{Number(invoiceInfo?.totalUnits) - Number(invoiceInfo?.purchasedUnits)} / {invoiceInfo?.totalUnits.toString()}</Text>
 					</Stack>
 				</Flex>
 				<Flex>

next-app/components/Invest/InvoiceInfo.tsx

@@ -9,6 +9,7 @@ import {
 	Button,
 	Container,
 	Divider,
+    Tooltip,
 } from "@chakra-ui/react"
 import React, {useEffect, useState} from "react"
 import { LiaIndustrySolid } from "react-icons/lia"
@@ -69,15 +70,33 @@ const InvoiceInfo = (props:Props) => {
 								/>
 								<Stack>
 									<Text className="invoice-card-heading">Seller</Text>
-									<Text>{invoiceDetails?.sellerName || "Loading ..."}</Text>
-								</Stack>
+                                    <Tooltip label={invoiceDetails?.sellerName} hasArrow>
+                                        <Text
+                                          maxWidth="80px" 
+                                          whiteSpace="nowrap"
+                                          overflow="hidden"
+                                          textOverflow="ellipsis"
+                                        >
+                                          {invoiceDetails?.sellerName}
+                                        </Text>
+                                    </Tooltip>								
+                                </Stack>
 							</Flex>
 
 							<Flex>
 								<Stack mr={"0"}>
 									<Text className="invoice-card-heading">Buyer</Text>
-									<Text>{invoiceDetails?.buyerName}</Text>
-								</Stack>
+                                     <Tooltip label={invoiceDetails?.buyerName} hasArrow>
+                                        <Text
+                                          maxWidth="80px" 
+                                          whiteSpace="nowrap"
+                                          overflow="hidden"
+                                          textOverflow="ellipsis"
+                                        >
+                                          {invoiceDetails?.buyerName}
+                                        </Text>
+                                      </Tooltip>								
+                                </Stack>
 								<LiaIndustrySolid size={60} />
 							</Flex>
 						</Flex>
@@ -86,17 +105,17 @@ const InvoiceInfo = (props:Props) => {
 						<Flex textAlign={"center"} justifyContent={"space-between"}>
 							<Stack>
 								<Text className="invoice-card-heading">Unit Cost</Text>
-								<Text>{Number(invoiceDetails?.amountPerUnit)/10**6}</Text>
+								<Text>{Number(invoiceDetails?.amountPerUnit)/10**6} USDC</Text>
 							</Stack>
 
 							<Stack>
 								<Text className="invoice-card-heading">Repayment/Unit</Text>
-								<Text>{Number(invoiceDetails?.repaymentPerUnit)/10**6}</Text>
+								<Text>{Number(invoiceDetails?.repaymentPerUnit)/10**6} USDC</Text>
 							</Stack>
 
 							<Stack>
 								<Text className="invoice-card-heading">XIRR</Text>
-								<Text>{Number(invoiceDetails?.xirr)/100}</Text>
+								<Text>{Number(invoiceDetails?.xirr)/100} %</Text>
 							</Stack>
 						</Flex>
 

next-app/components/Layout.jsx → next-app/components/Layout.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useAccount } from 'wagmi';
 import {usePrivy} from '@privy-io/react-auth';
+import Header from '@/components/Header/Header'
 
 const Layout = ({ children }) => {
   const router = useRouter();
@@ -25,7 +26,10 @@ const Layout = ({ children }) => {
     }
   }, [isConnected, router, modalOpened]);
 
-  return <>{children}</>;
+  return(  <>
+      <Header />
+      {children}
+  </>);
 };
 
 export default Layout;

next-app/components/Portfolio/ClientDashboard.tsx

@@ -14,6 +14,9 @@ import invoiceAbi from '@/blockend/build/invoice.json'
 import web3 from "@/blockend/web3";
 import Link from "next/link";
 import {useAccount} from "wagmi";
+import { useClipboard } from '@chakra-ui/react'
+import { FaRegCopy } from "react-icons/fa";
+
 
 type Props = {
 }
@@ -25,7 +28,9 @@ const ClientDashboard = (sellerAddress:any) => {
 
     const {chainId} = useAccount();
 
-    const toast = useToast()
+    const toast = useToast();
+    const { onCopy, value, setValue, hasCopied } = useClipboard('')
+
 
     //get the agreements for the address == deployed.contract. seller
     //How will you find that - think
@@ -115,6 +120,17 @@ const ClientDashboard = (sellerAddress:any) => {
             })
     }
 
+const copyToClipboard = (contractAddress) => {
+    setValue(contractAddress);
+    onCopy();
+    toast({
+        title: 'Copied',
+        description: "Contract address copied to clipboard.",
+        status: 'success',
+        duration: 9000,
+        isClosable: true,
+    })
+}
 
 	return (
 		<>
@@ -136,7 +152,7 @@ const ClientDashboard = (sellerAddress:any) => {
 					<Tbody color={"brand.secondary"}>
                     {invoices.map((invoice:UploadedInvoice)=>(
                         <Tr>
-							<Td>{invoice.contractAddress}</Td>
+							<Td>{ invoice.contractAddress.slice(0, 4) + "..." + invoice.contractAddress.slice(-6)} <button style={{marginLeft:"5px"}} onClick={()=>copyToClipboard(invoice.contractAddress)}><FaRegCopy /></button></Td>
 							<Td>{invoice.date_added.slice(0,10)}</Td>
 							<Td color="brand.senary"><Link  target="_blank" href={`https://ipfs.io/ipfs/${invoice?.fileURL}`} >Click to View</Link></Td>
 							<Td>
@@ -146,7 +162,7 @@ const ClientDashboard = (sellerAddress:any) => {
 								<Button isDisabled={invoice.isCompleted} onClick={()=>claimPayment(invoice)} variant={"oauth"}>Withdraw Amount</Button>
 							</Td>
 							<Td>
-								<Button onClick={()=>payInvoice(invoice)} variant={"pay"}>Pay Invoice</Button>
+								<Button onClick={()=>payInvoice(invoice)}>Pay Invoice</Button>
 							</Td>
 						</Tr>
 

next-app/components/Portfolio/PortfolioTable.tsx

@@ -12,14 +12,14 @@ import {
   Center,
   Heading,
   Text,
-  Button
+  Button,
+  Link
 } from '@chakra-ui/react'
 import { useToast } from '@chakra-ui/react'
 import { factoryContract } from '@/blockend/interact'
 import {useAccount} from 'wagmi';
 import invoiceAbi from '@/blockend/build/invoice.json'
 import web3 from '@/blockend/web3';
-import Link from 'next/link';
 
 
 
@@ -96,7 +96,7 @@ useEffect(() => {
 					<Tbody color={"brand.secondary"}>
                         {invoices.map((invoice) => (
                           <Tr>
-							<Td><Link href={`/company/${invoice?.invoiceAddress}`}>Click for Company Info</Link></Td>
+							<Td><Link color={"brand.senary"} href={`/company/${invoice?.invoiceAddress}`}>View Invoice Details</Link></Td>
 							<Td>{Number(invoice?.res?.investedAmount)/10**6} USDC</Td>
 							<Td>{Number(invoice?.res?.repaymentAmount)/10**6} USDC</Td>
 							<Td>{Number(invoice?.res?.totalUnits)}</Td>

next-app/components/Privy/LoginButton.tsx

@@ -7,7 +7,7 @@ export default function LoginButton() {
   const disableLogin = !ready || (ready && authenticated);
 
   return (
-    <Button disabled={disableLogin} onClick={login}>
+    <Button variant="solid_complete" disabled={disableLogin} onClick={login}>
       Log in
     </Button>
   );

next-app/pages/_app.tsx

@@ -110,11 +110,12 @@ export default function App({ Component, pageProps }: AppProps) {
 							accentColorForeground: "black",
 							borderRadius: "large",
 						})}> */}
-						<Layout>
-							<ChakraProvider theme={theme}>
+		            <ChakraProvider theme={theme}>
+                        <Layout>
 								<Component {...pageProps} />
-							</ChakraProvider>
 						</Layout>
+                    </ChakraProvider>
+
 					{/* </RainbowKitProvider> */}
 					{/* </RainbowKitSiweNextAuthProvider> */}
 			{/* </SessionProvider> */}