Merge pull request #5 from tripster-hackers/lykhoyda/add_metamask_con…

…nection

wip

frontend/src/components/Footer.tsx

@@ -1,24 +1,75 @@
 import React from 'react';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
 import Box from '@mui/material/Box';
 import styled from "@emotion/styled";
+import Link from "@mui/material/Link";
 
 const Footer: React.FC = () => {
     return (
-        <StyledBox component="footer" sx={{ py: 3, px: 2, mt: 'auto', backgroundColor: '#1976d2' }}>
-            <Container maxWidth="sm">
-                <Typography variant="body1" color="white" >
-                    My sticky footer can be found here.
-                </Typography>
+        <StyledBox component="footer" sx={{py: 3, px: 2, mt: 'auto', backgroundColor: '#1976d2'}}>
+            <Link href='https://github.com/tripster-hackers/zkTripster'>
+
+            <Container>
+                <RunningText>
+                    Ethical Hacking | Visit our Github
+                </RunningText>
             </Container>
+            </Link>
+
         </StyledBox>
     );
 };
 
+const RunningText = styled(Box)`
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    box-sizing: border-box;
+    animation: marquee 10s linear infinite;
+    text-transform: none;
+
+    @keyframes marquee {
+        0% {
+            transform: translateX(-100%);
+        }
+        100% {
+            transform: translateX(100%);
+        }
+    }
+`;
+
+const Container = styled(Box)`
+    color: white;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    box-sizing: border-box;
+    max-width: 300px;
+    border: 1px solid white;
+    border-radius: 20px;
+    text-transform: uppercase;
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        color: black;
+        background: white;
+    }
+`;
+
+
 const StyledBox = styled(Box)`
+    display: flex;
+    justify-content: flex-end;
     background-color: transparent;
     z-index: 5;
+    
+    a {
+        text-transform: none;
+    }
 `;
 
+
 export default Footer;

frontend/src/components/Header.tsx

@@ -15,7 +15,7 @@ const Header: React.FC = () => {
         <StyledAppBar position="static" sx={{width: '100%'}}>
             <Toolbar>
                 <Typography variant="h6" component="div" sx={{flexGrow: 1}}>
-                    My Web3 App
+                    zkTripsters
                 </Typography>
                 <StyledLink component={RouterLink} to="/" color="inherit" underline="none" sx={{marginRight: 2}}>
                     Home

frontend/src/pages/Home.tsx

@@ -9,10 +9,7 @@ const Home: React.FC = () => {
         <StyledContainer>
             <Box my={4}>
                 <Typography variant="h4" component="h1" gutterBottom>
-                    Welcome to My Web3 App
-                </Typography>
-                <Typography variant="body1">
-                    This is a simple example of a React app using Material UI, TypeScript, and Vite.
+                    Time Release Incentive Platform for Security Threads Ethical Reporting
                 </Typography>
             </Box>
         </StyledContainer>

frontend/src/pages/IssueForm.tsx

@@ -7,12 +7,13 @@ import styled from "@emotion/styled";
 import {useParams} from "react-router-dom";
 import {verifyZkPoex, fetchContractData} from "../utils";
 import useMetaMask from "../hooks/useMetamask.ts";
-import {purchaseToken} from "../../contracts/src/scripts/api.ts";
+import {purchaseToken, unwatchPurchase, unwatchRedeem} from "../../contracts/src/scripts/api.ts";
 
 const IssueForm: React.FC = () => {
     const {contract_address} = useParams<{ contract_address: string }>();
     const [zkPoex, setZkPoex] = useState('')
     const [enc, setEnc] = useState('')
+    const [purchaseTokenResult, setPurchaseTokenResult] = useState()
     const [verificationResult, setVerificationResult] = useState<string | null>(null);
     const {isConnected, connectMetaMask, account, walletClient} = useMetaMask();
 
@@ -41,17 +42,16 @@ const IssueForm: React.FC = () => {
         }
     }, [zkPoex, enc]);
 
-    // const handleBountyAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    //     const formattedValue = formatEthAmount(event.target.value);
-    //     setBountyAmount(formattedValue);
-    // };
-    //
-    // const handleSubmit = async (event: React.FormEvent) => {
-    //     event.preventDefault();
-    //     console.log('Contract Address:', contract_address);
-    //     console.log('Call Data:', callData);
-    //     console.log('Bounty Amount:', bountyAmount);
-    // };
+
+    useEffect(() => {
+      if(purchaseTokenResult && isConnected) {
+          const purchase = unwatchPurchase()
+          const redeem = unwatchRedeem()
+
+          console.log(purchase)
+          console.log(redeem)
+      }
+    }, [purchaseTokenResult, isConnected])
 
 
     const renderVerificationBox = () => {
@@ -78,6 +78,7 @@ const IssueForm: React.FC = () => {
             )
         }
 
+    console.log('purchaseTokenResult', purchaseTokenResult)
 
     return (
         <Container>
@@ -96,36 +97,15 @@ const IssueForm: React.FC = () => {
                                     color="primary"
                                     onClick={async () => {
                                         if (walletClient) {
-                                            await purchaseToken(walletClient, 0)
+                                            const purchaseTokenResult = await purchaseToken(walletClient, 0)
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                            // @ts-expect-error
+                                            setPurchaseTokenResult(purchaseTokenResult)
                                         }
-                                    }}>Deposit Tokens</Button>
+                                    }}>
+                                Deposit Tokens
+                            </Button>
                         )}
-                        {/*<form onSubmit={handleSubmit} noValidate autoComplete="off">*/}
-                        {/*    <TextField*/}
-                        {/*        label="Call Data"*/}
-                        {/*        variant="outlined"*/}
-                        {/*        fullWidth*/}
-                        {/*        onChange={(e) => setCallData(e.target.value)}*/}
-                        {/*        margin="normal"*/}
-                        {/*        multiline*/}
-                        {/*        rows={4}*/}
-                        {/*    />*/}
-                        {/*    <TextField*/}
-                        {/*        label="Bounty Amount (ETH)"*/}
-                        {/*        variant="outlined"*/}
-                        {/*        fullWidth*/}
-                        {/*        value={bountyAmount}*/}
-                        {/*        onChange={handleBountyAmountChange}*/}
-                        {/*        margin="normal"*/}
-                        {/*    />*/}
-                        {/*    <StyledButtonWrapper>*/}
-                        {/*        <Button type="submit" disabled={!(bountyAmount.length && callData.length)}*/}
-                        {/*                variant="contained"*/}
-                        {/*                size="large" color="primary">*/}
-                        {/*            Generate Proof*/}
-                        {/*        </Button>*/}
-                        {/*    </StyledButtonWrapper>*/}
-                        {/*</form>*/}
                     </>
                 ) : (verificationResult && renderVerificationBox())}
             </StyledBox>
@@ -141,10 +121,6 @@ const StyledBox = styled(Box)`
     margin-top: 40px;
 `
 
-// const StyledButtonWrapper = styled('div')`
-//     width: 100%;
-//     text-align: right;
-// `
 
 const VerificationResultBox = styled(Box)<{ isValid: boolean }>`
     margin-top: 20px;