fix proof generation modal

keep-starknet-strange · Sep 4, 2024 · 2ac4d20 · 2ac4d20
1 parent e57d99b
commit 2ac4d20
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 75 deletions.
diff --git a/client/src/components/GenerateProofModal/index.tsx b/client/src/components/GenerateProofModal/index.tsx
@@ -1,3 +1,4 @@
+import { useCloseModal, useProofGenerationModal } from 'src/hooks/useModal'
 import { ThemedText } from 'src/theme/components'
 import { Logo } from 'src/theme/components/icons'
 
@@ -6,28 +7,28 @@ 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>
+export default function GenerateProofModal() {
+  // modal
+  const [isOpen] = useProofGenerationModal()
+  const close = useCloseModal()
 
-        <ThemedText.BodySecondary fontSize={16}>This might take a while</ThemedText.BodySecondary>
-      </Column>
-    </Content>
-  )
-}
+  if (!isOpen) return null
 
-export default function GenerateProofModal() {
   return (
     <Portal>
-      <GenerateProofModalContent />
+      <Content title="Proof generation" close={close}>
+        <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>
 
-      <Overlay />
+      <Overlay onClick={close} />
     </Portal>
   )
 }
diff --git a/client/src/hooks/useModal.ts b/client/src/hooks/useModal.ts
@@ -25,3 +25,5 @@ function useModal(modal: ModalType): [boolean, () => void] {
 export const useWalletConnectModal = () => useModal(ModalType.WALLET_CONNECT)
 // eslint-disable-next-line import/no-unused-modules
 export const useWalletOverviewModal = () => useModal(ModalType.WALLET_OVERVIEW)
+
+export const useProofGenerationModal = () => useModal(ModalType.PROOF_GENERATION)
diff --git a/client/src/pages/Register.tsx b/client/src/pages/Register.tsx
@@ -1,6 +1,8 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { PrimaryButton } from 'src/components/Button'
 import { Column, Row } from 'src/components/Flex'
+import GenerateProofModal from 'src/components/GenerateProofModal'
+import { useProofGenerationModal } from 'src/hooks/useModal'
 import { ThemedText } from 'src/theme/components'
 import { LockClosed, LockOpen } from 'src/theme/components/icons'
 import { styled, useTheme } from 'styled-components'
@@ -47,66 +49,67 @@ const ProofCard = styled(Row)`
 `
 
 export default function RegisterPage() {
+  // theme
   const theme = useTheme()
+
+  // modal
+  const [, toggleProofGenerationModal] = useProofGenerationModal()
+
   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])
+  const [proven] = useState(false)
 
   return (
-    <Content gap={12}>
-      <Headline>
-        <ThemedText.HeadlineLarge>Register</ThemedText.HeadlineLarge>
-      </Headline>
-
-      {!revtag && (
-        <>
-          <ContentCard>
-            <NoDataCard>
-              <ThemedText.BodyPrimary fontWeight={500}>No data detected</ThemedText.BodyPrimary>
-            </NoDataCard>
-          </ContentCard>
-
-          <PrimaryButton onClick={() => setRevtag('chqrlesjuzw')}>Open sidebar</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.BodyPrimary>{proven ? 'Complete registration' : 'Generate proof'}</ThemedText.BodyPrimary>
-          </PrimaryButton>
-        </>
-      )}
-    </Content>
+    <>
+      <Content gap={12}>
+        <Headline>
+          <ThemedText.HeadlineLarge>Register</ThemedText.HeadlineLarge>
+        </Headline>
+
+        {!revtag && (
+          <>
+            <ContentCard>
+              <NoDataCard>
+                <ThemedText.BodyPrimary fontWeight={500}>No data detected</ThemedText.BodyPrimary>
+              </NoDataCard>
+            </ContentCard>
+
+            <PrimaryButton onClick={() => setRevtag('chqrlesjuzw')}>Open sidebar</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>Unproved</ThemedText.BodySecondary>
+                )}
+              </ProofCard>
+            </ContentCard>
+
+            {proven ? (
+              <PrimaryButton>Complete registration</PrimaryButton>
+            ) : (
+              <PrimaryButton onClick={toggleProofGenerationModal}>Generate proof</PrimaryButton>
+            )}
+          </>
+        )}
+      </Content>
+
+      <GenerateProofModal />
+    </>
   )
 }
diff --git a/client/src/state/application.ts b/client/src/state/application.ts
@@ -5,6 +5,7 @@ import { StoreState } from './index'
 export enum ModalType {
   WALLET_CONNECT,
   WALLET_OVERVIEW,
+  PROOF_GENERATION,
 }
 
 export type ApplicationSlice = State & Actions