v2.2.0

zkBob · May 19, 2023 · a9ded93 · a9ded93
2 parents 72bcd0b + e2c2ee7
commit a9ded93
Show file tree

Hide file tree

Showing 20 changed files with 267 additions and 104 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zkbob-ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "dependencies": {
     "@dicebear/avatars": "^4.10.2",

diff --git a/src/components/AccountSetUpModal/Generate/index.js b/src/components/AccountSetUpModal/Generate/index.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import WalletConnectors from 'components/WalletConnectors';
 
-export default ({ generate, isCreation }) => {
+export default ({ next, isCreation }) => {
   return (
     <Container>
       <Description>
@@ -12,7 +12,7 @@ export default ({ generate, isCreation }) => {
           : 'Select the wallet you used to create your zkAccount'
         }
       </Description>
-      <WalletConnectors callback={generate} />
+      <WalletConnectors callback={next} />
     </Container>
   );
 };

diff --git a/src/components/AccountSetUpModal/Sign/index.js b/src/components/AccountSetUpModal/Sign/index.js
@@ -1,18 +1,32 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
 
 import Spinner from 'components/Spinner';
+import Button from 'components/Button';
+
+export default ({ isCreation, sign }) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onClick = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      await sign();
+    } catch (error) {
+      console.error(error);
+    }
+    setIsLoading(false);
+  }, [sign]);
 
-export default ({ isCreation }) => {
   return (
     <Container>
-      <Spinner />
+      {isLoading && <Spinner />}
       <Note>
         {isCreation
           ? 'Your zkAccount is being created based on the connected wallet.'
           : 'Accessing your zkAccount with your connected wallet.'
         }
       </Note>
+      {!isLoading && <Button onClick={onClick}>Sign the message</Button>}
     </Container>
   );
 };

diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
@@ -103,20 +103,12 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
   }, []);
 
   const generate = useCallback(async () => {
-    const nextStep = step === STEP.CREATE_WITH_WALLET
-      ? STEP.SING_MESSAGE_TO_CREATE
-      : STEP.SING_MESSAGE_TO_RESTORE;
-    setStep(nextStep);
-    try {
-      const message = 'Access zkBob account.\n\nOnly sign this message for a trusted client!';
-      const signedMessage = await signMessageAsync({ message });
-      const newMnemonic = ethers.utils.entropyToMnemonic(md5.array(signedMessage));
-      setConfirmedMnemonic(newMnemonic);
-      setStep(STEP.CREATE_PASSWORD);
-    } catch (error) {
-      setStep(step);
-    }
-  }, [signMessageAsync, step]);
+    const message = 'Access zkBob account.\n\nOnly sign this message for a trusted client!';
+    const signedMessage = await signMessageAsync({ message });
+    const newMnemonic = ethers.utils.entropyToMnemonic(md5.array(signedMessage));
+    setConfirmedMnemonic(newMnemonic);
+    setStep(STEP.CREATE_PASSWORD);
+  }, [signMessageAsync]);
 
   const confirmPassword = useCallback(password => {
     const isNewAccount = !!newMnemonic;
@@ -148,7 +140,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       break;
     case STEP.CREATE_WITH_WALLET:
       title = 'Create new zkAccount';
-      component = <Generate generate={generate} />;
+      component = <Generate next={() => setStep(STEP.SING_MESSAGE_TO_CREATE)} />;
       prevStep = STEP.CREATE_OPTIONS;
       break;
     case STEP.CREATE_WITH_SECRET:
@@ -158,7 +150,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       break;
     case STEP.RESTORE_WITH_WALLET:
       title = 'Login to your zkAccount';
-      component = <Generate generate={generate} />;
+      component = <Generate next={() => setStep(STEP.SING_MESSAGE_TO_RESTORE)} />;
       prevStep = STEP.RESTORE_OPTIONS;
       break;
     case STEP.RESTORE_WITH_SECRET:
@@ -173,13 +165,13 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       break;
     case STEP.SING_MESSAGE_TO_CREATE:
       title = 'Sign the message to create your zkAccount';
-      component = <Sign isCreation />;
-      prevStep = null;
+      component = <Sign isCreation sign={generate} />;
+      prevStep = STEP.CREATE_WITH_WALLET;
       break;
     case STEP.SING_MESSAGE_TO_RESTORE:
       title = 'Sign the message to login to your zkAccount';
-      component = <Sign />;
-      prevStep = null;
+      component = <Sign sign={generate} />;
+      prevStep = STEP.RESTORE_WITH_WALLET;
       break;
     case STEP.CREATE_PASSWORD:
       title = 'Create password';

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -4,15 +4,16 @@ import styled from 'styled-components';
 import SpinnerDefault from 'components/Spinner';
 
 export default props => {
+  const { loading, ...otherProps } = props;
   switch(props.type) {
     case 'link':
-      return <TransparentButton {...props} />;
+      return <TransparentButton {...otherProps} />;
     case 'pripary':
     default:
       return (
-        <Button {...props}>
-          {props.$loading &&
-            <Spinner $small={props.small} $contrast={props.$contrast} size={props.small ? 16 : 24} />
+        <Button {...otherProps} >
+          {loading &&
+            <Spinner $small={props.small} $contrast={props.contrast} size={props.small ? 16 : 24} />
           }
           {props.children}
         </Button>
@@ -22,9 +23,9 @@ export default props => {
 
 const Button = styled.button`
   background: ${props =>
-    props.theme.button.primary.background[props.disabled ? (props.$contrast ? 'contrast' : 'disabled') : 'default']
+    props.theme.button.primary.background[props.disabled ? (props.contrast ? 'contrast' : 'disabled') : 'default']
   };
-  color: ${props => props.theme.button.primary.text.color[props.disabled && props.$contrast ? 'contrast' : 'default']};
+  color: ${props => props.theme.button.primary.text.color[props.disabled && props.contrast ? 'contrast' : 'default']};
   font-size: ${props => props.theme.button.primary.text.size[props.small ? 'small' : 'default']};
   font-weight: ${props => props.theme.button.primary.text.weight[props.small ? 'small' : 'default']};
   padding: ${props => props.small ? '8px 16px' : '0'};

diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.js
@@ -5,6 +5,7 @@ import 'rc-tooltip/assets/bootstrap.css';
 
 const GlobalStyle = createGlobalStyle`
   .dropdown {
+    top: 55px !important;
     @media only screen and (max-width: 560px) {
       left: calc(100% - 58px) !important;
       transform: translateX(-100%) !important;

diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
@@ -18,8 +18,8 @@ export default () => {
 
   const resources = [
     { icon: TwitterIcon, href: 'https://twitter.com/zkBob_' },
-    { icon: TelegramIcon, href: 'https://t.me/zkbob_news' },
-    { icon: MirrorIcon, href: 'https://mirror.xyz/0x6132eB883e88CD4E007552b871A6444Bfc34E837' },
+    { icon: TelegramIcon, href: 'https://t.me/zkbobcommunity' },
+    { icon: MirrorIcon, href: 'https://blog.zkbob.com/' },
     { icon: GithubIcon, href: 'https://github.com/zkBob' },
   ];
 

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -151,8 +151,8 @@ export default ({
         ) : (
           <Button
             small
-            $loading={isLoadingZkAccount}
-            $contrast
+            loading={isLoadingZkAccount}
+            contrast
             disabled={isLoadingZkAccount}
             onClick={openAccountSetUpModal}
           >