feat: registration page

client/src/App.tsx

@@ -1,7 +1,8 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import Layout from 'src/components/Layout'
 
-import RegisterPage from './pages/RegisterPage'
+import RegisterPage from './pages/Register'
+import RegistrationPage from './pages/Registration'
 import SwapPage from './pages/Swap'
 import StarknetProvider from './providers/StarknetProvider'
 
@@ -15,7 +16,15 @@ const router = createBrowserRouter([
     ),
   },
   {
-    path: '/register',
+    path: '/registration',
+    element: (
+      <Layout>
+        <RegistrationPage />
+      </Layout>
+    ),
+  },
+  {
+    path: '/registration/register',
     element: (
       <Layout>
         <RegisterPage />

client/src/components/Button/index.tsx

@@ -1,12 +1,17 @@
 import styled from 'styled-components'
 
 export const PrimaryButton = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   padding: 16px;
   background-color: ${({ theme }) => theme.accent1};
   border: 0;
   border-radius: 12px;
   font-weight: 500;
+  text-decoration: none;
   cursor: pointer;
 
   &:disabled {

client/src/components/GenerateProofModal/index.tsx

@@ -0,0 +1,33 @@
+import { ThemedText } from 'src/theme/components'
+import { Logo } from 'src/theme/components/icons'
+
+import { Column } from '../Flex'
+import Content from '../Modal/Content'
+import Overlay from '../Modal/Overlay'
+import Portal from '../Portal'
+
+function GenerateProofModalContent() {
+  return (
+    <Content title="Proof generation">
+      <Column gap={42} alignItems="center">
+        <Column gap={16}>
+          <Logo width={42} height={42} />
+
+          <ThemedText.HeadlineSmall>Snarkification of the elliptic curve...</ThemedText.HeadlineSmall>
+        </Column>
+
+        <ThemedText.BodySecondary fontSize={16}>This might take a while</ThemedText.BodySecondary>
+      </Column>
+    </Content>
+  )
+}
+
+export default function GenerateProofModal() {
+  return (
+    <Portal>
+      <GenerateProofModalContent />
+
+      <Overlay />
+    </Portal>
+  )
+}

client/src/components/Modal/Content.tsx

@@ -5,86 +5,72 @@ import { styled } from 'styled-components'
 import { Column, Row } from '../Flex'
 
 const StyledContent = styled.div`
-  border: 3px solid ${({ theme }) => theme.neutral1};
-  padding: 80px 32px;
-  background: ${({ theme }) => theme.bg1};
-  z-index: 1060;
   position: fixed;
-  width: 100%;
-  top: 0;
-  bottom: 0;
+  z-index: 1060;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   justify-content: center;
-
-  @media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.xs}px`}) {
-    left: 50%;
-    top: 50%;
-    width: 386px;
-    transform: translate(-50%, -50%);
-    padding: 32px;
-    bottom: unset;
-  }
+  width: 100%;
+  max-width: 480px;
+  padding: 16px;
+  background: ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.border};
+  border-radius: 20px;
+  box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 10px rgba(0, 0, 0, 0.15);
 `
 
 const TitleContainer = styled(Row)`
-  position: absolute;
   width: 100%;
-  padding: 0 4px;
-  text-align: center;
-  top: 16px;
-
-  & > div {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 100%;
-  }
+`
 
-  @media only screen and (min-width: ${({ theme }) => `${theme.breakpoint.xs}px`}) {
-    top: -32px;
-    text-align: left;
-  }
+const Title = styled(ThemedText.HeadlineSmall)`
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 `
 
-const CloseContainer = styled.div`
-  position: absolute;
-  color: ${({ theme }) => theme.neutral1};
+const CloseContainer = styled.button`
   width: 28px;
   height: 28px;
   padding: 4px;
+  background: transparent;
+  color: ${({ theme }) => theme.neutral1};
+  border: none;
   cursor: pointer;
-  border: 3px solid ${({ theme }) => theme.neutral1};
-  top: -3px;
-  right: -3px;
+  transition: color 0.15s linear;
 
   & > svg {
     display: block;
   }
 
   &:hover {
-    background: ${({ theme }) => theme.neutral1};
-    color: ${({ theme }) => theme.bg1};
+    color: ${({ theme }) => theme.neutral2};
   }
 `
 
 interface ContentProps {
   children: React.ReactNode
   title: string
-  close: () => void
+  close?: () => void
 }
 
 export default function Content({ children, title, close }: ContentProps) {
   return (
     <StyledContent>
       <Column gap={32}>
         <TitleContainer>
-          <ThemedText.HeadlineSmall>{title}</ThemedText.HeadlineSmall>
-        </TitleContainer>
+          <Title>{title}</Title>
 
-        <CloseContainer onClick={close}>
-          <Icons.Close />
-        </CloseContainer>
+          {close && (
+            <CloseContainer onClick={close}>
+              <Icons.Close />
+            </CloseContainer>
+          )}
+        </TitleContainer>
 
         {children}
       </Column>

client/src/components/Modal/Overlay.tsx

@@ -15,7 +15,7 @@ const StyledOverlay = styled.div`
 `
 
 interface OverlayProps {
-  onClick: () => void
+  onClick?: () => void
 }
 
 export default function Overlay({ onClick }: OverlayProps) {

client/src/components/WalletSidebar/index.tsx

@@ -88,7 +88,7 @@ export default function WalletSidebar({ onClose }: WalletSidebarProps) {
         </WalletInfo>
 
         <Links gap={16}>
-          <LinkItem as={Link} to="/">
+          <LinkItem as={Link} to="/registration">
             <UserCheck width={28} height={28} color="#0047FF" />
             <ThemedText.BodyPrimary>Registration</ThemedText.BodyPrimary>
           </LinkItem>

client/src/pages/Register.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react'
+import { PrimaryButton } from 'src/components/Button'
+import { Column, Row } from 'src/components/Flex'
+import GenerateProofModal from 'src/components/GenerateProofModal'
+import { ThemedText } from 'src/theme/components'
+import { LockClosed, LockOpen } from 'src/theme/components/icons'
+import { styled, useTheme } from 'styled-components'
+
+const Layout = styled(Column)`
+  width: 100%;
+  margin: 0 auto;
+  justify-content: center;
+  flex: 1;
+`
+
+const Content = styled(Column)`
+  max-width: 464px;
+  width: 100%;
+`
+
+const Headline = styled(Row)`
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.grids.md};
+`
+
+const ContentCard = styled(Column)`
+  width: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+`
+
+const NoDataCard = styled(Column)`
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 0;
+  background-color: ${({ theme }) => theme.bg3};
+`
+
+const RevtagCard = styled(Row)`
+  width: 100%;
+  justify-content: space-between;
+  padding: 24px 16px;
+  background-color: ${({ theme }) => theme.bg3};
+`
+
+const ProofCard = styled(Row)`
+  width: 100%;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px;
+  background-color: ${({ theme }) => theme.bg2};
+`
+
+export default function RegisterPage() {
+  const theme = useTheme()
+  const [revtag, setRevtag] = useState('')
+  const [generatingProof, setGeneratingProof] = useState(false)
+  const [proven, setProven] = useState(false)
+
+  useEffect(() => {
+    if (generatingProof) {
+      setTimeout(() => {
+        setProven(true)
+        setGeneratingProof(false)
+      }, 5_000)
+    }
+  }, [generatingProof])
+
+  return (
+    <Layout>
+      <Content gap={12}>
+        <Headline>
+          <ThemedText.HeadlineLarge>Register</ThemedText.HeadlineLarge>
+        </Headline>
+
+        {!revtag && (
+          <>
+            <ContentCard>
+              <NoDataCard>
+                <ThemedText.Title fontWeight={500}>No data detected</ThemedText.Title>
+              </NoDataCard>
+            </ContentCard>
+
+            <PrimaryButton onClick={() => setRevtag('chqrlesjuzw')}>
+              <ThemedText.Title>Open sidebar</ThemedText.Title>
+            </PrimaryButton>
+          </>
+        )}
+
+        {revtag && (
+          <>
+            <ContentCard>
+              <RevtagCard>
+                <ThemedText.BodyPrimary>Revtag:</ThemedText.BodyPrimary>
+                <ThemedText.BodyPrimary fontWeight={500}>{revtag}</ThemedText.BodyPrimary>
+              </RevtagCard>
+
+              <ProofCard>
+                {proven ? (
+                  <LockClosed width={18} height={18} color={theme.green} />
+                ) : (
+                  <LockOpen width={18} height={18} color={theme.neutral2} />
+                )}
+
+                {proven ? (
+                  <ThemedText.BodyPrimary>Proved</ThemedText.BodyPrimary>
+                ) : (
+                  <ThemedText.BodySecondary fontWeight={500}>Unproved</ThemedText.BodySecondary>
+                )}
+              </ProofCard>
+            </ContentCard>
+
+            <PrimaryButton onClick={() => !proven && setGeneratingProof(true)}>
+              <ThemedText.Title>{proven ? 'Complete registration' : 'Generate proof'}</ThemedText.Title>
+            </PrimaryButton>
+          </>
+        )}
+      </Content>
+
+      {generatingProof && <GenerateProofModal />}
+    </Layout>
+  )
+}