zkemail · wryonik · Jul 22, 2024 · Jul 23, 2024 · Jul 24, 2024 · Aug 1, 2024
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Prove ownership of a X (Twitter) account using an email from Twitter, and mint an NFT with your Twitter username.
 
-This project is a demonstration of ZK Email. You can fork it to build other projects using ZK Email.
+This project is a demonstration of ZK Email. You can fork it to build other projects using ZK Email. 
 
 Try it here: https://twitter.prove.email/
 

diff --git a/package.json b/package.json
@@ -8,5 +8,14 @@
   "keywords": [],
   "author": "",
   "license": "MIT",
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.0.1",
+    "@mui/material": "^6.0.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10"
+  }
 }
diff --git a/packages/app/index.css b/packages/app/index.css
@@ -1,4 +1,4 @@
-@tailwind base;
+/* @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -14,4 +14,27 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+} */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: "Space Grotesk", sans-serif;
+  background-color: #ffbfbf;
+  background: radial-gradient(70.71% 70.71% at 50% 50%, #FFF 19%, rgba(255, 255, 255, 0.00) 61%), linear-gradient(38deg, rgba(255, 255, 255, 0.00) 60%, rgba(255, 255, 255, 0.69) 100%), linear-gradient(45deg, #FFF 10%, rgba(255, 255, 255, 0.00) 23.5%), linear-gradient(36deg, #FFF 12.52%, rgba(255, 255, 255, 0.00) 76.72%), linear-gradient(214deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 220, 234, 0.40) 37.53%, rgba(255, 255, 255, 0.00) 71%), linear-gradient(212deg, rgba(255, 255, 255, 0.00) 15%, #E4F1FE 72.5%, rgba(255, 255, 255, 0.00) 91.5%);
+}
+
+body {
+  margin: 0;
+  font-family:  "Space Grotesk", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
diff --git a/packages/app/index.html b/packages/app/index.html
@@ -39,7 +39,17 @@
       window.process = process;
       window.setImmediate = setImmediate;
     </script>
+
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">
+
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap');
+    </style>
   </head>
+
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -2,21 +2,28 @@
   "name": "@zk-email/twitter-verifier-app",
   "version": "4.0.0",
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.0.1",
+    "@mui/material": "^6.0.1",
     "@proof-of-twitter/circuits": "workspace:^",
     "@proof-of-twitter/contracts": "workspace:^",
-    "@rainbow-me/rainbowkit": "^1.3.3",
+    "@rainbow-me/rainbowkit": "^2.1.4",
     "@react-oauth/google": "^0.12.1",
+    "@tanstack/react-query": "^5.52.0",
     "@zk-email/helpers": "^6.1.3",
+    "@zk-email/zk-email-sdk": "^1.0.3",
+    "js-base64": "^3.7.7",
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-router-dom": "^6.2.2",
     "react-use": "^17.3.2",
     "snarkjs": "https://github.com/sampritipanda/snarkjs.git#fef81fc51d17a734637555c6edbd585ecda02d9e",
     "styled-components": "^6.1.8",
-    "viem": "^2.2.0",
-    "wagmi": "^1.3.10"
+    "viem": "2.x",
+    "wagmi": "^2.12.7"
   },
   "scripts": {
     "start": "vite",

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -1,4 +1,5 @@
 import { MainPage } from "./pages/MainPage";
+import AboutPage from './pages/AboutPage'
 import "./styles.css";
 import {
   BrowserRouter as Router,
@@ -10,36 +11,15 @@ import { useLocation } from "react-use";
 import styled from "styled-components";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 
-const NavSection = () => {
-  const { pathname } = useLocation();
 
-  return (
-    <Nav>
-      <Logo to={"https://prove.email/"}>
-        ZK-Email
-      </Logo>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "1rem",
-        }}
-      >
-        <DocsLink href="https://prove.email/docs">Docs</DocsLink>
-        <ConnectButton />
-      </div>
-    </Nav>
-  );
-};
 
 const App = () => {
   return (
     <Router>
       <div>
-        <NavSection />
-
         <Routes>
           <Route path="/" element={<MainPage />} />
+          <Route path="/about" element={<AboutPage/>} />
           <Route element={<>Not found</>} />
         </Routes>
       </div>
@@ -48,28 +28,3 @@ const App = () => {
 };
 
 export default App;
-
-const Logo = styled(Link)`
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: #fff;
-  text-decoration: none;
-  font-size: 1.2rem;
-`;
-
-const Nav = styled.nav`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 12px;
-`;
-
-const DocsLink = styled.a`
-  color: rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  underline: none;
-  transition: all 0.2s ease-in-out;
-  &:hover {
-    color: rgba(255, 255, 255, 1);
-  }
-`;
diff --git a/packages/app/src/components/Accordion.tsx b/packages/app/src/components/Accordion.tsx
@@ -0,0 +1,97 @@
+import React, { FC } from 'react';
+import {
+  Accordion as MuiAccordion,
+  AccordionSummary,
+  AccordionDetails,
+  Typography,
+  styled,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+// Define the props types
+interface AccordionProps {
+  title: string;
+  contents: string;
+  alignment?: 'left' | 'right';
+}
+
+const CustomAccordion = styled(MuiAccordion)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+  '&:before': {
+    display: 'none',
+  },
+  background: 'inherit',
+  boxShadow: 'none',
+  borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
+  '& .MuiAccordionSummary-root': {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    '&:hover .MuiAccordionSummary-expandIconWrapper': {
+      color: theme.palette.secondary.main,
+    },
+  },
+  '& .MuiAccordionSummary-content': {
+    margin: 0,
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+  },
+  '& .MuiAccordionSummary-expandIconWrapper': {
+    marginRight: theme.spacing(1),
+    transition: 'transform 0.2s',
+  },
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(180deg)',
+  },
+  '& .MuiAccordionDetails-root': {
+    padding: theme.spacing(2),
+  },
+}));
+
+const Accordion: FC<AccordionProps> = ({ title, contents, alignment = 'left' }) => {
+  return (
+    <CustomAccordion>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls="panel-content"
+        id="panel-header"
+        sx={{
+          flexDirection: alignment === 'right' ? 'row-reverse' : 'row',
+          justifyContent: alignment === 'right' ? 'space-between' : 'flex-start',
+          '& .MuiAccordionSummary-expandIconWrapper': {
+            order: alignment === 'right' ? 2 : 1,
+            marginRight: alignment === 'right' ? 0 : 1,
+            marginLeft: alignment === 'right' ? 1 : 0,
+          },
+          width: '100%',
+        }}
+      >
+        <Typography
+          color="black"
+          fontWeight="500"
+          sx={{
+            fontSize: { xs: '12px', sm: '15px', md: '19px' },
+            textAlign: alignment === 'right' ? 'right' : 'left',
+            flexGrow: 1,
+          }}
+        >
+          {title}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography
+          sx={{
+            paddingLeft: alignment === 'right' ? '0px' : '0px',
+            paddingRight: alignment === 'right' ? '0px' : '0px',
+            color: '#666363',
+            fontSize: { xs: '11px', sm: '14px', md: '16px' },
+            textAlign: alignment === 'right' ? 'right' : 'left',
+          }}
+        >
+          {contents}
+        </Typography>
+      </AccordionDetails>
+    </CustomAccordion>
+  );
+};
+
+export default Accordion;