From ef2777eee0fbb847e1d2c275310021bbf24045d9 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Wed, 26 Apr 2023 17:16:39 +0200
Subject: [PATCH 01/13] change wordings

---
 src/components/AccountSetUpModal/Confirm/index.js | 2 +-
 src/components/AccountSetUpModal/Create/index.js  | 4 ++--
 src/components/AccountSetUpModal/Restore/index.js | 2 +-
 src/components/AccountSetUpModal/index.js         | 8 ++++----
 src/components/ConfirmLogoutModal/index.js        | 2 +-
 src/components/Header/index.js                    | 2 +-
 src/components/PasswordModal/index.js             | 2 +-
 src/components/SeedPhraseModal/index.js           | 6 +++---
 src/components/ZkAccountDropdown/index.js         | 2 +-
 src/containers/AccountSetUpButton/index.js        | 8 ++------
 src/pages/Deposit/index.js                        | 4 ++--
 src/pages/Transfer/MultiTransfer/index.js         | 2 +-
 src/pages/Transfer/SingleTransfer/index.js        | 2 +-
 src/pages/Transfer/index.js                       | 2 +-
 src/pages/Welcome/index.js                        | 4 ++--
 src/pages/Withdraw/index.js                       | 4 ++--
 16 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/components/AccountSetUpModal/Confirm/index.js b/src/components/AccountSetUpModal/Confirm/index.js
index 61524173..adf62d55 100644
--- a/src/components/AccountSetUpModal/Confirm/index.js
+++ b/src/components/AccountSetUpModal/Confirm/index.js
@@ -32,7 +32,7 @@ export default ({ mnemonic, confirmMnemonic }) => {
   return (
     <Container>
       <Description>
-        Please input your seed phrase to verify it.<br/> Click on a word to remove it
+        Please input your secret phrase to verify it.<br/> Click on a word to remove it
       </Description>
       <MnemonicInput>
         {repeated.map(wordObj =>
diff --git a/src/components/AccountSetUpModal/Create/index.js b/src/components/AccountSetUpModal/Create/index.js
index 94549a90..9aeab4da 100644
--- a/src/components/AccountSetUpModal/Create/index.js
+++ b/src/components/AccountSetUpModal/Create/index.js
@@ -12,11 +12,11 @@ export default ({ mnemonic, next }) => {
         Write down or copy these words in the right order and save them somewhere safe
       </Description>
       <Warning>
-        Never share your recovery phrase with anyone,<br/> store it securely!
+        Never share your secret phrase with anyone,<br/> store it securely!
       </Warning>
       <SeedPhrase value={mnemonic} />
       <CopyTextButton text={mnemonic} style={{ alignSelf: 'center' }}>
-        Copy seed phrase
+        Copy secret phrase
       </CopyTextButton>
       <Button onClick={next}>Continue</Button>
     </Container>
diff --git a/src/components/AccountSetUpModal/Restore/index.js b/src/components/AccountSetUpModal/Restore/index.js
index 92660843..23bb8419 100644
--- a/src/components/AccountSetUpModal/Restore/index.js
+++ b/src/components/AccountSetUpModal/Restore/index.js
@@ -27,7 +27,7 @@ export default ({ restore }) => {
   return (
     <Container>
       <Description>
-        Input your saved seed phrase to restore an existing account
+        Input your saved secret phrase to restore an existing account
       </Description>
       <TextArea value={mnemonic} onChange={onChange} $error={error} />
       <Button onClick={onRestore}>Restore account</Button>
diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
index 11b0228d..f800fab9 100644
--- a/src/components/AccountSetUpModal/index.js
+++ b/src/components/AccountSetUpModal/index.js
@@ -67,7 +67,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, isWalletModalOpen, ope
     state = <Create mnemonic={newMnemonic} next={() => setAction('confirm')} />;
     prevAction = null;
   } else if (action === 'confirm') {
-    title = 'Confirm seed phrase';
+    title = 'Confirm secret phrase';
     state = <Confirm mnemonic={newMnemonic} confirmMnemonic={confirmMnemonic} />;
     prevAction = 'create';
   } else if (action === 'restore') {
@@ -94,14 +94,14 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, isWalletModalOpen, ope
           <Row>
             <Text>or</Text>
             <Button type="link" onClick={() => setNextAction('create')}>
-              secret recovery phrase
+              secret phrase
             </Button>
           </Row>
         </OptionContainer>
         <OptionContainer>
-          <Title>I already have a secret recovery phrase</Title>
+          <Title>I already have a secret phrase</Title>
           <Description>
-          Import your existing account using your 12 word secret recovery phrase.
+          Import your existing account using your 12 word secret phrase.
           </Description>
           <RestoreButton onClick={() => setNextAction('restore')}>
             Restore account
diff --git a/src/components/ConfirmLogoutModal/index.js b/src/components/ConfirmLogoutModal/index.js
index c2ce7434..9d909724 100644
--- a/src/components/ConfirmLogoutModal/index.js
+++ b/src/components/ConfirmLogoutModal/index.js
@@ -15,7 +15,7 @@ export default ({ isOpen, onClose, onConfirm }) => {
         <Description>
           When you log out your zkAccount information is erased from
           the data cache and is no longer accessible with your password.
-          Restore the account and balance using your seed phrase and a new password.
+          Restore the account and balance using your secret phrase and a new password.
         </Description>
         <Button onClick={onConfirm}>Log out</Button>
       </Container>
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index d893e987..bb8dfe7d 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -153,7 +153,7 @@ export default ({
             onClick={openAccountSetUpModal}
           >
             <LargeButtonContent>
-              {isLoadingZkAccount ? 'Loading zkAccount' : 'Create zkAccount'}
+              {isLoadingZkAccount ? 'Loading zkAccount' : 'zkAccount'}
             </LargeButtonContent>
             {!isLoadingZkAccount && <AccountIcon />}
           </Button>
diff --git a/src/components/PasswordModal/index.js b/src/components/PasswordModal/index.js
index a12231be..ebabc8d0 100644
--- a/src/components/PasswordModal/index.js
+++ b/src/components/PasswordModal/index.js
@@ -29,7 +29,7 @@ export default ({ isOpen, confirm, reset, password, onPasswordChange, error }) =
           error={!!error}
         />
         <Button onClick={confirm}>Sign in</Button>
-        <Button type="link" onClick={reset}>Lost password? Restore account with your seed phrase.</Button>
+        <Button type="link" onClick={reset}>Lost password? Restore account with your secret phrase.</Button>
       </Container>
     </Modal>
   );
diff --git a/src/components/SeedPhraseModal/index.js b/src/components/SeedPhraseModal/index.js
index b30f9f4c..345550fe 100644
--- a/src/components/SeedPhraseModal/index.js
+++ b/src/components/SeedPhraseModal/index.js
@@ -16,11 +16,11 @@ export default ({
     <Modal
       isOpen={isOpen}
       onClose={onClose}
-      title="Show secret recovery phrase"
+      title="Show secret phrase"
     >
       <Container onKeyPress={mnemonic ? null : onKeyPress}>
         <Warning>
-          Never share your recovery phrase with anyone,<br/> store it securely!
+          Never share your secret phrase with anyone,<br/> store it securely!
         </Warning>
         <Description>
           If someone has your secret phrase they will have full control of your wallet.
@@ -29,7 +29,7 @@ export default ({
           <>
             <SeedPhrase value={mnemonic} />
             <CopyTextButton text={mnemonic} style={{ alignSelf: 'center' }}>
-              Copy seed phrase
+              Copy secret phrase
             </CopyTextButton>
             <Button onClick={onClose}>Done</Button>
           </>
diff --git a/src/components/ZkAccountDropdown/index.js b/src/components/ZkAccountDropdown/index.js
index 07e2aafc..ce81742a 100644
--- a/src/components/ZkAccountDropdown/index.js
+++ b/src/components/ZkAccountDropdown/index.js
@@ -57,7 +57,7 @@ const Content = ({
 
   const options = [
     { text: 'Change password', action: changePassword },
-    { text: 'Show secret recovery phrase', action: showSeedPhrase },
+    { text: 'Show secret phrase', action: showSeedPhrase },
     { text: 'Switch account', action: switchAccount },
     { text: 'Log out', action: logout },
   ];
diff --git a/src/containers/AccountSetUpButton/index.js b/src/containers/AccountSetUpButton/index.js
index 6cef4a47..5c1453a4 100644
--- a/src/containers/AccountSetUpButton/index.js
+++ b/src/containers/AccountSetUpButton/index.js
@@ -6,11 +6,7 @@ import Button from 'components/Button';
 
 export default () => {
   const { openAccountSetUpModal } = useContext(ModalContext);
-  const { isLoadingZkAccount, loadingPercentage } = useContext(ZkAccountContext);
-  let text = 'Get started!';
-  if (isLoadingZkAccount) {
-    text = loadingPercentage === null ? 'Loading zkAccount...' : `Downloading parameters: ${loadingPercentage}%`;
-  }
+  const { isLoadingZkAccount } = useContext(ZkAccountContext);
   return (
     <Button
       $loading={isLoadingZkAccount}
@@ -18,7 +14,7 @@ export default () => {
       disabled={isLoadingZkAccount}
       onClick={openAccountSetUpModal}
     >
-      {text}
+      {isLoadingZkAccount ? 'Loading...' : 'Get started!'}
     </Button>
   );
 }
diff --git a/src/pages/Deposit/index.js b/src/pages/Deposit/index.js
index 17bcda08..84e5c0f4 100644
--- a/src/pages/Deposit/index.js
+++ b/src/pages/Deposit/index.js
@@ -25,7 +25,7 @@ import { tokenSymbol } from 'utils/token';
 import { formatNumber, minBigNumber } from 'utils';
 import config from 'config';
 
-const note = `${tokenSymbol()} will be deposited to your account inside the zero knowledge pool.`;
+const note = `${tokenSymbol()} will be deposited to your zkAccount. Once received, you can transfer ${tokenSymbol()} privately.`;
 
 export default () => {
   const { address: account } = useAccount();
@@ -84,7 +84,7 @@ export default () => {
           if (!zkAccount && !isLoadingZkAccount) return <AccountSetUpButton />
           else if (!account) return <Button onClick={openWalletModal}>Connect wallet</Button>
           if (!zkAccount) return <AccountSetUpButton />
-          else if (isLoadingState || isLoadingLimits) return <Button $loading $contrast disabled>Updating zero pool state...</Button>
+          else if (isLoadingState || isLoadingLimits) return <Button $loading $contrast disabled>Loading...</Button>
           else if (amount.isZero()) return <Button disabled>Enter amount</Button>
           else if (amount.lt(minTxAmount)) return <Button disabled>Min amount is {formatNumber(minTxAmount)} {tokenSymbol()}</Button>
           else if (amount.gt(balance)) return <Button disabled>Insufficient {tokenSymbol()} balance</Button>
diff --git a/src/pages/Transfer/MultiTransfer/index.js b/src/pages/Transfer/MultiTransfer/index.js
index 31d4f63f..790e94a2 100644
--- a/src/pages/Transfer/MultiTransfer/index.js
+++ b/src/pages/Transfer/MultiTransfer/index.js
@@ -156,7 +156,7 @@ export default forwardRef((props, ref) => {
       }
       {(() => {
           if (!zkAccount) return <AccountSetUpButton />
-          else if (isLoadingState) return <Button $loading $contrast disabled>Updating zero pool state...</Button>
+          else if (isLoadingState) return <Button $loading $contrast disabled>Loading...</Button>
           else if (!data) return <Button disabled>Proceed</Button>
           else return <Button onClick={validate}>Proceed</Button>;
         })()}
diff --git a/src/pages/Transfer/SingleTransfer/index.js b/src/pages/Transfer/SingleTransfer/index.js
index 50163875..50cfcd97 100644
--- a/src/pages/Transfer/SingleTransfer/index.js
+++ b/src/pages/Transfer/SingleTransfer/index.js
@@ -56,7 +56,7 @@ export default () => {
   let button = null;
   if (zkAccount) {
     if (isLoadingState) {
-      button = <Button $loading $contrast disabled>Updating zero pool state...</Button>;
+      button = <Button $loading $contrast disabled>Loading...</Button>;
     } else if (amount.isZero()) {
       button = <Button disabled>Enter amount</Button>;
     } else if (amount.lt(minTxAmount)) {
diff --git a/src/pages/Transfer/index.js b/src/pages/Transfer/index.js
index 61dc65a3..7b1658f6 100644
--- a/src/pages/Transfer/index.js
+++ b/src/pages/Transfer/index.js
@@ -19,7 +19,7 @@ import { ZkAccountContext, PoolContext } from 'contexts';
 import { useLatestAction } from 'hooks';
 import config from 'config';
 
-const note = 'The transfer will be performed privately within the zero knowledge pool. Sender, recipient and amount are never disclosed.';
+const note = 'The transfer will be performed privately. Sender, recipient and amount are never disclosed.';
 const tooltipText = 'Click Upload CSV to add a prepared .csv file from your machine. Each row should contain: zkAddress, amount';
 
 export default () => {
diff --git a/src/pages/Welcome/index.js b/src/pages/Welcome/index.js
index 1a7644f0..c497e5af 100644
--- a/src/pages/Welcome/index.js
+++ b/src/pages/Welcome/index.js
@@ -40,9 +40,9 @@ export default () => {
           </>
         ) : (
           <>
-            <Title>Welcome to Private zkBob Transfers!</Title>
+            <Title>Welcome to zkBob!</Title>
             <Description>
-              <Text>Create a zkAccount to deposit into a private pool, transfer, or withdraw in private mode.</Text>
+              <Text>Create a zkAccount to transfer tokens privately with your friends and colleagues.</Text>
             </Description>
             <AccountSetUpButton />
           </>
diff --git a/src/pages/Withdraw/index.js b/src/pages/Withdraw/index.js
index 36ad247c..1f8311e8 100644
--- a/src/pages/Withdraw/index.js
+++ b/src/pages/Withdraw/index.js
@@ -31,7 +31,7 @@ import config from 'config';
 import { NETWORKS } from 'constants';
 import { useMaxAmountExceeded } from './hooks';
 
-const note = `${tokenSymbol()} will be withdrawn from the zero knowledge pool and deposited into the selected account.`;
+const note = `${tokenSymbol()} will be withdrawn from zkBob and deposited into the provided wallet address.`;
 
 export default () => {
   const {
@@ -66,7 +66,7 @@ export default () => {
   let button = null;
   if (zkAccount) {
     if (isLoadingState || isLoadingLimits) {
-      button = <Button $loading $contrast disabled>Updating zero pool state...</Button>;
+      button = <Button $loading $contrast disabled>Loading...</Button>;
     } else if (amount.isZero()) {
       button = <Button disabled>Enter amount</Button>;
     } else if (amount.lt(minTxAmount)) {

From 3b14f7f7ad67c6e88cbad30034bdf941e0ecea00 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Wed, 3 May 2023 16:00:51 +0200
Subject: [PATCH 02/13] new login flow

---
 .../AccountSetUpModal/Generate/index.js       |  22 +-
 .../AccountSetUpModal/Restore/index.js        |   2 +-
 .../AccountSetUpModal/Sign/index.js           |  38 +++
 src/components/AccountSetUpModal/index.js     | 278 ++++++++++--------
 src/components/Modal/index.js                 |   2 +
 src/components/WalletConnectors/index.js      |  68 +++++
 src/components/WalletModal/index.js           |  52 +---
 src/containers/AccountSetUpModal/index.js     |  10 +-
 src/containers/WalletModal/index.js           |  19 +-
 src/pages/index.js                            |   2 -
 10 files changed, 286 insertions(+), 207 deletions(-)
 create mode 100644 src/components/AccountSetUpModal/Sign/index.js
 create mode 100644 src/components/WalletConnectors/index.js

diff --git a/src/components/AccountSetUpModal/Generate/index.js b/src/components/AccountSetUpModal/Generate/index.js
index df5b6666..e4b6f6c1 100644
--- a/src/components/AccountSetUpModal/Generate/index.js
+++ b/src/components/AccountSetUpModal/Generate/index.js
@@ -1,22 +1,18 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import Button from 'components/Button';
+import WalletConnectors from 'components/WalletConnectors';
 
-export default ({ generate, account, connectWallet }) => {
+export default ({ generate, isCreation }) => {
   return (
     <Container>
       <Description>
-        Your key identifies your account on Layer 2 and is saved locally on your browser.
+        {isCreation
+          ? 'Choose the wallet that will be associated with your zkAccount'
+          : 'Select the wallet you used to create your zkAccount'
+        }
       </Description>
-      {account ? (
-        <Button onClick={generate}>Generate key</Button>
-      ) : (
-        <Button onClick={connectWallet}>Connect wallet</Button>
-      )}
-      <Note>
-        Signing is free and will not send a transaction. You can recover your key at any time with your wallet.
-      </Note>
+      <WalletConnectors callback={generate} />
     </Container>
   );
 };
@@ -40,7 +36,3 @@ const Description = styled.span`
   line-height: 20px;
   text-align: center;
 `;
-
-const Note = styled(Description)`
-  color: ${({ theme }) => theme.text.color.secondary};
-`;
diff --git a/src/components/AccountSetUpModal/Restore/index.js b/src/components/AccountSetUpModal/Restore/index.js
index 23bb8419..8c30f08c 100644
--- a/src/components/AccountSetUpModal/Restore/index.js
+++ b/src/components/AccountSetUpModal/Restore/index.js
@@ -6,7 +6,7 @@ import Button from 'components/Button';
 import TextAreaDefault from 'components/TextArea';
 
 export default ({ restore }) => {
-  const [mnemonic, setMnemonic] = useState();
+  const [mnemonic, setMnemonic] = useState('');
   const [error, setError] = useState(false);
 
   const onRestore = useCallback(() => {
diff --git a/src/components/AccountSetUpModal/Sign/index.js b/src/components/AccountSetUpModal/Sign/index.js
new file mode 100644
index 00000000..41599dd1
--- /dev/null
+++ b/src/components/AccountSetUpModal/Sign/index.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Spinner from 'components/Spinner';
+
+export default ({ isCreation }) => {
+  return (
+    <Container>
+      <Spinner />
+      <Note>
+        {isCreation
+          ? 'Your zkAccount is being created based on the connected wallet.'
+          : 'Accessing your zkAccount with your connected wallet.'
+        }
+      </Note>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  & > * {
+    margin-bottom: 16px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+const Note = styled.span`
+  font-size: 14px;
+  color: ${({ theme }) => theme.text.color.secondary};
+  line-height: 20px;
+  text-align: center;
+`;
diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
index f800fab9..77bf69a5 100644
--- a/src/components/AccountSetUpModal/index.js
+++ b/src/components/AccountSetUpModal/index.js
@@ -1,57 +1,122 @@
 import React, { useState, useCallback } from 'react';
 import styled from 'styled-components';
 import { ethers } from 'ethers';
-import { useAccount, useSignMessage } from 'wagmi';
+import { useSignMessage } from 'wagmi';
 import md5 from 'js-md5';
 
 import Modal from 'components/Modal';
 import Button from 'components/Button';
+import Link from 'components/Link';
+
+import Create from './Create';
+import Confirm from './Confirm';
+import Restore from './Restore';
+import Generate from './Generate';
+import Password from './Password';
+import Sign from './Sign';
+
+const STEP = {
+  START: 1,
+  CREATE_OPTIONS: 2,
+  RESTORE_OPTIONS: 3,
+  CREATE_WITH_WALLET: 4,
+  CREATE_WITH_SECRET: 5,
+  RESTORE_WITH_WALLET: 6,
+  RESTORE_WITH_SECRET: 7,
+  CONFIRM_SECRET: 8,
+  SING_MESSAGE_TO_CREATE: 9,
+  SING_MESSAGE_TO_RESTORE: 10,
+  CREATE_PASSWORD: 11,
+};
 
-import Create from 'components/AccountSetUpModal/Create';
-import Confirm from 'components/AccountSetUpModal/Confirm';
-import Restore from 'components/AccountSetUpModal/Restore';
-import Generate from 'components/AccountSetUpModal/Generate';
-import Password from 'components/AccountSetUpModal/Password';
-
-export default ({ isOpen, onClose, saveZkAccountMnemonic, isWalletModalOpen, openWalletModal }) => {
-  const { address: account } = useAccount();
+const Start = ({ setStep }) => (
+  <Container>
+    <Description>
+      To start working with zkBob you need to create a zkAccount first
+    </Description>
+    <Button onClick={() => setStep(STEP.CREATE_OPTIONS)}>
+      Create new zkAccount
+    </Button>
+    <SecondButton onClick={() => setStep(STEP.RESTORE_OPTIONS)}>
+      I already have a zkAccount
+    </SecondButton>
+  </Container>
+);
+
+const CreateOptions = ({ setStep }) => (
+  <Container>
+    <Button onClick={() => setStep(STEP.CREATE_WITH_WALLET)}>
+      Use my Web3 wallet
+    </Button>
+    <SecondButton onClick={() => setStep(STEP.CREATE_WITH_SECRET)}>
+      Use zkBob secret phrase
+    </SecondButton>
+    <Description>
+      By creating zkAccount, you hereby agree to and accept zkBob{' '}
+      <Link href="https://docs.zkbob.com/zkbob-overview/compliance-and-security">
+        Terms of Service
+      </Link>
+    </Description>
+  </Container>
+);
+
+const RestoreOptions = ({ setStep }) => (
+  <Container>
+    <Button onClick={() => setStep(STEP.RESTORE_WITH_WALLET)}>
+      I used a Web3 wallet
+    </Button>
+    <SecondButton onClick={() => setStep(STEP.RESTORE_WITH_SECRET)}>
+      I used zkBob secret phrase
+    </SecondButton>
+  </Container>
+);
+
+export default ({ isOpen, onClose, saveZkAccountMnemonic }) => {
   const { signMessageAsync } = useSignMessage();
-  const [action, setAction] = useState();
+  const [step, setStep] = useState(STEP.START);
   const [newMnemonic, setNewMnemonic] = useState();
   const [confirmedMnemonic, setConfirmedMnemonic] = useState();
 
   const closeModal = useCallback(() => {
-    setAction(null);
+    setStep(STEP.START);
     setNewMnemonic(null);
     onClose();
   }, [onClose]);
 
-  const setNextAction = useCallback(nextAction => {
+  const setNextStep = useCallback(nextStep => {
     let newMnemonic = null;
-    if (nextAction === 'create') {
+    if (nextStep === STEP.CREATE_WITH_SECRET) {
       newMnemonic = ethers.Wallet.createRandom().mnemonic.phrase;
     }
     setNewMnemonic(newMnemonic);
-    setAction(nextAction);
+    setStep(nextStep);
   }, []);
 
   const confirmMnemonic = useCallback(() => {
     setConfirmedMnemonic(newMnemonic);
-    setAction('password');
+    setStep(STEP.CREATE_PASSWORD);
   }, [newMnemonic]);
 
   const restore = useCallback(mnemonic => {
     setConfirmedMnemonic(mnemonic);
-    setAction('password');
+    setStep(STEP.CREATE_PASSWORD);
   }, []);
 
   const generate = useCallback(async () => {
-    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);
-    setAction('password');
-  }, [signMessageAsync]);
+    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 confirmPassword = useCallback(password => {
     const isNewAccount = !!newMnemonic;
@@ -60,96 +125,93 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, isWalletModalOpen, ope
   }, [newMnemonic, confirmedMnemonic, saveZkAccountMnemonic, closeModal]);
 
   let title = null;
-  let state = null;
-  let prevAction = null;
-  if (action === 'create') {
-    title = 'Set up account';
-    state = <Create mnemonic={newMnemonic} next={() => setAction('confirm')} />;
-    prevAction = null;
-  } else if (action === 'confirm') {
-    title = 'Confirm secret phrase';
-    state = <Confirm mnemonic={newMnemonic} confirmMnemonic={confirmMnemonic} />;
-    prevAction = 'create';
-  } else if (action === 'restore') {
-    title = 'Restore account';
-    state = <Restore restore={restore} />;
-    prevAction = null;
-  } else if (action === 'generate') {
-    title = 'Create account';
-    state = <Generate generate={generate} account={account} connectWallet={openWalletModal} />;
-    prevAction = null;
-  } else if (action === 'password') {
-    title = 'Create password';
-    state = <Password confirmPassword={confirmPassword} />;
-    prevAction = null;
-  } else {
-    title = 'zkAccount';
-    state = (
-      <>
-        <OptionContainer>
-          <Title>Create a new zkBob Account with</Title>
-          <CreateButton onClick={() => setNextAction('generate')}>
-            {window?.ethereum && 'MetaMask or'} WalletConnect
-          </CreateButton>
-          <Row>
-            <Text>or</Text>
-            <Button type="link" onClick={() => setNextAction('create')}>
-              secret phrase
-            </Button>
-          </Row>
-        </OptionContainer>
-        <OptionContainer>
-          <Title>I already have a secret phrase</Title>
-          <Description>
-          Import your existing account using your 12 word secret phrase.
-          </Description>
-          <RestoreButton onClick={() => setNextAction('restore')}>
-            Restore account
-          </RestoreButton>
-        </OptionContainer>
-      </>
-    );
+  let component = null;
+  let prevStep = null;
+
+  switch(step) {
+    default:
+    case STEP.START:
+      title = 'zkAccount';
+      component = <Start setStep={setStep} />;
+      prevStep = null;
+      break;
+    case STEP.CREATE_OPTIONS:
+      title = 'Choose how you would like to create your account';
+      component = <CreateOptions setStep={setNextStep} />;
+      prevStep = STEP.START;
+      break;
+    case STEP.RESTORE_OPTIONS:
+      title = 'How did you create your account?';
+      component = <RestoreOptions setStep={setStep} />;
+      prevStep = STEP.START;
+      break;
+    case STEP.CREATE_WITH_WALLET:
+      title = 'Create account';
+      component = <Generate generate={generate} />;
+      prevStep = STEP.CREATE_OPTIONS;
+      break;
+    case STEP.CREATE_WITH_SECRET:
+      title = 'Set up account';
+      component = <Create mnemonic={newMnemonic} next={() => setStep(STEP.CONFIRM_SECRET)} />;
+      prevStep = STEP.CREATE_OPTIONS;
+      break;
+    case STEP.RESTORE_WITH_WALLET:
+      title = 'Create account';
+      component = <Generate generate={generate} />;
+      prevStep = STEP.CREATE_OPTIONS;
+      break;
+    case STEP.RESTORE_WITH_SECRET:
+      title = 'Restore account';
+      component = <Restore restore={restore} />;
+      prevStep = STEP.RESTORE_OPTIONS;
+      break;
+    case STEP.CONFIRM_SECRET:
+      title = 'Confirm secret phrase';
+      component = <Confirm mnemonic={newMnemonic} confirmMnemonic={confirmMnemonic} />;
+      prevStep = STEP.CREATE_WITH_SECRET;
+      break;
+    case STEP.SING_MESSAGE_TO_CREATE:
+      title = 'Sign the message to create your zkAccount';
+      component = <Sign isCreation />;
+      prevStep = null;
+      break;
+    case STEP.SING_MESSAGE_TO_RESTORE:
+      title = 'Sign the message to login to your zkAccount';
+      component = <Sign />;
+      prevStep = null;
+      break;
+    case STEP.CREATE_PASSWORD:
+      title = 'Create password';
+      component = <Password confirmPassword={confirmPassword} />;
+      prevStep = null;
+      break;
   }
+
   return (
     <Modal
       isOpen={isOpen}
       onClose={closeModal}
-      onBack={action ? () => setAction(prevAction) : null}
+      onBack={prevStep ? () => setStep(prevStep) : null}
       title={title}
-      containerStyle={{ visibility: isWalletModalOpen ? 'hidden' : 'visible' }}
     >
-      {state}
+      {component}
     </Modal>
   );
 };
 
-const OptionContainer = styled.div`
+const Container = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
-  align-items: stretch;
-  padding: 16px 24px;
-  border: 1px solid ${({ theme }) => theme.walletConnectorOption.border.default};
-  border-radius: 16px;
-  width: 100%;
-  box-sizing: border-box;
-  margin-bottom: 20px;
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
-const Title = styled.span`
-  text-align: center;
-  font-size: 16px;
-  color: ${({ theme }) => theme.text.color.primary};
-  font-weight: ${({ theme }) => theme.text.weight.bold};
-  margin-bottom: 10px;
-  &:last-child {
-    margin-bottom: 0;
+  & > * {
+    margin-bottom: 16px;
+    &:last-child {
+      margin: 0;
+    }
   }
 `;
 
-const Description = styled(Title)`
+const Description = styled.span`
   text-align: center;
   font-size: 14px;
   color: ${({ theme }) => theme.text.color.secondary};
@@ -157,24 +219,8 @@ const Description = styled(Title)`
   line-height: 20px;
 `;
 
-const CreateButton = styled(Button)`
-  margin-bottom: 10px;
-  position: relative;
-`;
-
-const RestoreButton = styled(Button)`
-  background: ${({ theme }) => theme.color.purpleLight};
-`;
-
-const Row = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Text = styled.span`
-  font-size: 14px;
-  color: ${({ theme }) => theme.text.color.primary};
-  font-weight: ${({ theme }) => theme.text.weight.normal};
-  margin-right: 5px;
+const SecondButton = styled(Button)`
+  background: transparent;
+  border: 1px solid ${props => props.theme.button.primary.background.default};
+  color: ${props => props.theme.button.primary.background.default};
 `;
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
index 0b84a543..715bbc99 100644
--- a/src/components/Modal/index.js
+++ b/src/components/Modal/index.js
@@ -65,6 +65,8 @@ const Title = styled.span`
   color: ${({ theme }) => theme.text.color.primary};
   font-weight: ${({ theme }) => theme.text.weight.bold};
   margin-bottom: 24px;
+  padding: 0 20px;
+  text-align: center;
 `;
 
 const CrossIcon = styled(CrossIconDefault)`
diff --git a/src/components/WalletConnectors/index.js b/src/components/WalletConnectors/index.js
new file mode 100644
index 00000000..c1a7d269
--- /dev/null
+++ b/src/components/WalletConnectors/index.js
@@ -0,0 +1,68 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import { useAccount, useConnect, useDisconnect } from 'wagmi';
+
+import { CONNECTORS_ICONS } from 'constants';
+
+const getConnectorName = connector => {
+  if (connector.name === 'WalletConnectLegacy') return 'WalletConnect';
+  // if (connector.name === 'WalletConnect') return 'WalletConnect v2';
+  return connector.name;
+}
+
+export default ({ callback }) => {
+  const { connector: activeConnector } = useAccount();
+  const { connectAsync, connectors } = useConnect();
+  const { disconnectAsync } = useDisconnect();
+
+  const connectWallet = useCallback(async connector => {
+    if (connector.id === activeConnector?.id) {
+      await disconnectAsync();
+    }
+    await connectAsync({ connector });
+    callback?.();
+  }, [connectAsync, disconnectAsync, activeConnector, callback]);
+
+  return (
+    <>
+      {connectors.map((connector, index) => connector.ready &&
+        <WalletConnector
+          key={index}
+          onClick={() => connectWallet(connector)}
+        >
+          <WalletConnectorName>{getConnectorName(connector)}</WalletConnectorName>
+          <WalletConnectorIcon src={CONNECTORS_ICONS[connector.name]} />
+        </WalletConnector>
+      )}
+    </>
+  );
+};
+
+const WalletConnector = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${({ theme }) => theme.walletConnectorOption.background.default};
+  border: 1px solid ${({ theme }) => theme.walletConnectorOption.border.default};
+  border-radius: 16px;
+  width: 100%;
+  height: 60px;
+  padding: 0 24px;
+  margin-bottom: 16px;
+  box-sizing: border-box;
+  cursor: pointer;
+  &:hover {
+    background-color: ${({ theme }) => theme.walletConnectorOption.background.hover};
+    border: 1px solid ${({ theme }) => theme.walletConnectorOption.border.hover};
+  }
+`;
+
+const WalletConnectorName = styled.span`
+  font-size: 16px;
+  color: ${({ theme }) => theme.text.color.primary};
+  font-weight: ${({ theme }) => theme.text.weight.normal};
+`;
+
+const WalletConnectorIcon = styled.img`
+  width: 32px;
+`;
diff --git a/src/components/WalletModal/index.js b/src/components/WalletModal/index.js
index 5e3d77a2..6557bdb3 100644
--- a/src/components/WalletModal/index.js
+++ b/src/components/WalletModal/index.js
@@ -3,34 +3,19 @@ import styled from 'styled-components';
 
 import Modal from 'components/Modal';
 import Link from 'components/Link';
+import WalletConnectors from 'components/WalletConnectors';
 
 import { tokenSymbol } from 'utils/token';
 
-import { CONNECTORS_ICONS } from 'constants';
-
-const getConnectorName = connector => {
-  if (connector.name === 'WalletConnectLegacy') return 'WalletConnect';
-  // if (connector.name === 'WalletConnect') return 'WalletConnect v2';
-  return connector.name;
-}
-
-export default ({ isOpen, onClose, connectors, connectWallet }) => {
+export default ({ isOpen, close }) => {
   return (
-    <Modal isOpen={isOpen} onClose={onClose} title="Connect web3 wallet">
+    <Modal isOpen={isOpen} onClose={close} title="Connect web3 wallet">
       <Text>
         Connect your wallet to deposit {tokenSymbol()} into your zkAccount.{' '}
         If you are creating a new zkAccount, your wallet is used{' '}
         to derive a private encryption key for the zkBob application.
       </Text>
-      {connectors.map((connector, index) => connector.ready &&
-        <WalletConnector
-          key={index}
-          onClick={() => connectWallet(connector)}
-        >
-          <WalletConnectorName>{getConnectorName(connector)}</WalletConnectorName>
-          <WalletConnectorIcon src={CONNECTORS_ICONS[connector.name]} />
-        </WalletConnector>
-      )}
+      <WalletConnectors callback={close} />
       <Text>
         By connecting a wallet, you agree to zkBob<br />
         <Link href="https://docs.zkbob.com/zkbob-overview/compliance-and-security">
@@ -51,32 +36,3 @@ const Text = styled.span`
     margin-bottom: 0;
   }
 `;
-
-const WalletConnector = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: ${({ theme }) => theme.walletConnectorOption.background.default};
-  border: 1px solid ${({ theme }) => theme.walletConnectorOption.border.default};
-  border-radius: 16px;
-  width: 100%;
-  height: 60px;
-  padding: 0 24px;
-  margin-bottom: 16px;
-  box-sizing: border-box;
-  cursor: pointer;
-  &:hover {
-    background-color: ${({ theme }) => theme.walletConnectorOption.background.hover};
-    border: 1px solid ${({ theme }) => theme.walletConnectorOption.border.hover};
-  }
-`;
-
-const WalletConnectorName = styled.span`
-  font-size: 16px;
-  color: ${({ theme }) => theme.text.color.primary};
-  font-weight: ${({ theme }) => theme.text.weight.normal};
-`;
-
-const WalletConnectorIcon = styled.img`
-  width: 32px;
-`;
diff --git a/src/containers/AccountSetUpModal/index.js b/src/containers/AccountSetUpModal/index.js
index 469433fe..80c18acb 100644
--- a/src/containers/AccountSetUpModal/index.js
+++ b/src/containers/AccountSetUpModal/index.js
@@ -4,18 +4,12 @@ import { ModalContext, ZkAccountContext } from 'contexts';
 import AccountSetUpModal from 'components/AccountSetUpModal';
 
 export default () => {
-  const {
-    isAccountSetUpModalOpen, closeAccountSetUpModal,
-    isWalletModalOpen, openWalletModal,
-  } = useContext(ModalContext);
-  const { zkAccount, saveZkAccountMnemonic } = useContext(ZkAccountContext);
+  const { isAccountSetUpModalOpen, closeAccountSetUpModal } = useContext(ModalContext);
+  const { saveZkAccountMnemonic } = useContext(ZkAccountContext);
   return (
     <AccountSetUpModal
       isOpen={isAccountSetUpModalOpen}
       onClose={closeAccountSetUpModal}
-      isWalletModalOpen={isWalletModalOpen}
-      openWalletModal={openWalletModal}
-      zkAccount={zkAccount}
       saveZkAccountMnemonic={saveZkAccountMnemonic}
     />
   );
diff --git a/src/containers/WalletModal/index.js b/src/containers/WalletModal/index.js
index 8dde4c76..8b2ccbd1 100644
--- a/src/containers/WalletModal/index.js
+++ b/src/containers/WalletModal/index.js
@@ -1,29 +1,14 @@
-import { useCallback, useContext } from 'react';
-import { useAccount, useConnect, useDisconnect } from 'wagmi';
+import { useContext } from 'react';
 
 import { ModalContext } from 'contexts';
 import WalletModal from 'components/WalletModal';
 
 export default () => {
   const { isWalletModalOpen, closeWalletModal } = useContext(ModalContext);
-  const { connector: activeConnector } = useAccount();
-  const { connectAsync, connectors } = useConnect();
-  const { disconnectAsync } = useDisconnect();
-
-  const connectWallet = useCallback(async connector => {
-    if (connector.id === activeConnector?.id) {
-      await disconnectAsync();
-    }
-    await connectAsync({ connector });
-    closeWalletModal();
-  }, [connectAsync, disconnectAsync, activeConnector, closeWalletModal]);
-
   return (
     <WalletModal
       isOpen={isWalletModalOpen}
-      onClose={closeWalletModal}
-      connectors={connectors}
-      connectWallet={connectWallet}
+      close={closeWalletModal}
     />
   );
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index 04fde1b8..7f604b40 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -12,7 +12,6 @@ import TransactionModal from 'containers/TransactionModal';
 import WalletModal from 'containers/WalletModal';
 import AccountSetUpModal from 'containers/AccountSetUpModal';
 import PasswordModal from 'containers/PasswordModal';
-import TermsModal from 'containers/TermsModal';
 import SwapModal from 'containers/SwapModal';
 import ConfirmLogoutModal from 'containers/ConfirmLogoutModal';
 import SeedPhraseModal from 'containers/SeedPhraseModal';
@@ -138,7 +137,6 @@ const Content = () => {
         <RedeemGiftCardModal />
         <PasswordModal />
         <ChangePasswordModal />
-        <TermsModal />
         <ToastContainer />
         <SwapModal />
         <ConfirmLogoutModal />

From 0a67546b5676f66daf2b476ff2f26b9881ff37d6 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Wed, 3 May 2023 16:13:49 +0200
Subject: [PATCH 03/13] reopen password modal after set up close

---
 src/components/AccountSetUpModal/index.js |  5 +++--
 src/components/PasswordModal/index.js     |  6 +++++-
 src/containers/PasswordModal/index.js     | 14 +++++++++++---
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
index 77bf69a5..a0929215 100644
--- a/src/components/AccountSetUpModal/index.js
+++ b/src/components/AccountSetUpModal/index.js
@@ -71,7 +71,7 @@ const RestoreOptions = ({ setStep }) => (
   </Container>
 );
 
-export default ({ isOpen, onClose, saveZkAccountMnemonic }) => {
+export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal }) => {
   const { signMessageAsync } = useSignMessage();
   const [step, setStep] = useState(STEP.START);
   const [newMnemonic, setNewMnemonic] = useState();
@@ -121,8 +121,9 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic }) => {
   const confirmPassword = useCallback(password => {
     const isNewAccount = !!newMnemonic;
     saveZkAccountMnemonic(confirmedMnemonic, password, isNewAccount);
+    closePasswordModal();
     closeModal();
-  }, [newMnemonic, confirmedMnemonic, saveZkAccountMnemonic, closeModal]);
+  }, [newMnemonic, confirmedMnemonic, saveZkAccountMnemonic, closeModal, closePasswordModal]);
 
   let title = null;
   let component = null;
diff --git a/src/components/PasswordModal/index.js b/src/components/PasswordModal/index.js
index ebabc8d0..18e742dc 100644
--- a/src/components/PasswordModal/index.js
+++ b/src/components/PasswordModal/index.js
@@ -5,7 +5,10 @@ import Button from 'components/Button';
 import Modal from 'components/Modal';
 import Input from 'components/Input';
 
-export default ({ isOpen, confirm, reset, password, onPasswordChange, error }) => {
+export default ({
+  isOpen, confirm, reset, password,
+  onPasswordChange, error, isAccountSetUpModalOpen
+}) => {
   const handleKeyPress = useCallback(event => {
     if(event.key === 'Enter'){
       confirm();
@@ -15,6 +18,7 @@ export default ({ isOpen, confirm, reset, password, onPasswordChange, error }) =
     <Modal
       isOpen={isOpen}
       title="Enter password"
+      containerStyle={{ visibility: isAccountSetUpModalOpen ? 'hidden' : 'visible' }}
     >
       <Container onKeyPress={handleKeyPress}>
         <Description>
diff --git a/src/containers/PasswordModal/index.js b/src/containers/PasswordModal/index.js
index 95b303cc..a9723301 100644
--- a/src/containers/PasswordModal/index.js
+++ b/src/containers/PasswordModal/index.js
@@ -4,14 +4,20 @@ import { ModalContext, ZkAccountContext } from 'contexts';
 import PasswordModal from 'components/PasswordModal';
 
 export default () => {
-  const { isPasswordModalOpen, closePasswordModal, openAccountSetUpModal } = useContext(ModalContext);
+  const {
+    isPasswordModalOpen,
+    openAccountSetUpModal,
+    isAccountSetUpModalOpen,
+  } = useContext(ModalContext);
   const { unlockAccount } = useContext(ZkAccountContext);
   const [password, setPassword] = useState('');
   const [error, setError] = useState(null);
+
   const handlePasswordChange = useCallback(e => {
     setError(null);
     setPassword(e.target.value);
   }, []);
+
   const confirm = useCallback(async () => {
     try {
       await unlockAccount(password);
@@ -20,11 +26,12 @@ export default () => {
       setError(error);
     }
   }, [password, unlockAccount]);
+
   const reset = useCallback(async () => {
     setPassword('');
-    closePasswordModal();
     openAccountSetUpModal();
-  }, [closePasswordModal, openAccountSetUpModal]);
+  }, [openAccountSetUpModal]);
+
   return (
     <PasswordModal
       isOpen={isPasswordModalOpen}
@@ -33,6 +40,7 @@ export default () => {
       confirm={confirm}
       reset={reset}
       error={error}
+      isAccountSetUpModalOpen={isAccountSetUpModalOpen}
     />
   );
 }

From 8ad6645e71882f80cee3f8c2038c32379f385049 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Wed, 3 May 2023 18:46:47 +0200
Subject: [PATCH 04/13] change text

---
 src/components/PasswordModal/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PasswordModal/index.js b/src/components/PasswordModal/index.js
index 18e742dc..ae6e7826 100644
--- a/src/components/PasswordModal/index.js
+++ b/src/components/PasswordModal/index.js
@@ -33,7 +33,7 @@ export default ({
           error={!!error}
         />
         <Button onClick={confirm}>Sign in</Button>
-        <Button type="link" onClick={reset}>Lost password? Restore account with your secret phrase.</Button>
+        <Button type="link" onClick={reset}>Lost password? Click here to restore access</Button>
       </Container>
     </Modal>
   );

From 932a488f2cddf9f5525f782afd6081f1ae2a2e08 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Wed, 3 May 2023 19:12:10 +0200
Subject: [PATCH 05/13] fix confirm password screen

---
 src/components/AccountSetUpModal/index.js | 2 +-
 src/containers/AccountSetUpModal/index.js | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
index a0929215..9d469734 100644
--- a/src/components/AccountSetUpModal/index.js
+++ b/src/components/AccountSetUpModal/index.js
@@ -32,7 +32,7 @@ const STEP = {
 const Start = ({ setStep }) => (
   <Container>
     <Description>
-      To start working with zkBob you need to create a zkAccount first
+      To start working with zkBob you need a zkAccount
     </Description>
     <Button onClick={() => setStep(STEP.CREATE_OPTIONS)}>
       Create new zkAccount
diff --git a/src/containers/AccountSetUpModal/index.js b/src/containers/AccountSetUpModal/index.js
index 80c18acb..2346e7d7 100644
--- a/src/containers/AccountSetUpModal/index.js
+++ b/src/containers/AccountSetUpModal/index.js
@@ -4,13 +4,19 @@ import { ModalContext, ZkAccountContext } from 'contexts';
 import AccountSetUpModal from 'components/AccountSetUpModal';
 
 export default () => {
-  const { isAccountSetUpModalOpen, closeAccountSetUpModal } = useContext(ModalContext);
+  const {
+    isAccountSetUpModalOpen,
+    closeAccountSetUpModal,
+    closePasswordModal,
+  } = useContext(ModalContext);
   const { saveZkAccountMnemonic } = useContext(ZkAccountContext);
+
   return (
     <AccountSetUpModal
       isOpen={isAccountSetUpModalOpen}
       onClose={closeAccountSetUpModal}
       saveZkAccountMnemonic={saveZkAccountMnemonic}
+      closePasswordModal={closePasswordModal}
     />
   );
 }

From ea0894e142880b6cd5b7d73732562e9f589a1f28 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Mon, 8 May 2023 10:45:01 +0200
Subject: [PATCH 06/13] fix texts

---
 src/components/AccountSetUpModal/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
index 9d469734..de6f01a3 100644
--- a/src/components/AccountSetUpModal/index.js
+++ b/src/components/AccountSetUpModal/index.js
@@ -147,17 +147,17 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       prevStep = STEP.START;
       break;
     case STEP.CREATE_WITH_WALLET:
-      title = 'Create account';
+      title = 'Create new zkAccount';
       component = <Generate generate={generate} />;
       prevStep = STEP.CREATE_OPTIONS;
       break;
     case STEP.CREATE_WITH_SECRET:
-      title = 'Set up account';
+      title = 'Setup account';
       component = <Create mnemonic={newMnemonic} next={() => setStep(STEP.CONFIRM_SECRET)} />;
       prevStep = STEP.CREATE_OPTIONS;
       break;
     case STEP.RESTORE_WITH_WALLET:
-      title = 'Create account';
+      title = 'Login to your zkAccount';
       component = <Generate generate={generate} />;
       prevStep = STEP.CREATE_OPTIONS;
       break;

From 6084326b7229037244ffe6b2cda292b854f968b5 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Mon, 8 May 2023 10:47:54 +0200
Subject: [PATCH 07/13] fix login navigation

---
 src/components/AccountSetUpModal/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
index de6f01a3..eddea346 100644
--- a/src/components/AccountSetUpModal/index.js
+++ b/src/components/AccountSetUpModal/index.js
@@ -159,7 +159,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
     case STEP.RESTORE_WITH_WALLET:
       title = 'Login to your zkAccount';
       component = <Generate generate={generate} />;
-      prevStep = STEP.CREATE_OPTIONS;
+      prevStep = STEP.RESTORE_OPTIONS;
       break;
     case STEP.RESTORE_WITH_SECRET:
       title = 'Restore account';

From af6b0e9b353d4d8bd2dd27cd8255298cbad87d9b Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Mon, 8 May 2023 17:18:16 +0200
Subject: [PATCH 08/13] add loader for password entry

---
 src/components/PasswordModal/index.js |  7 +++++--
 src/containers/PasswordModal/index.js | 18 +++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/PasswordModal/index.js b/src/components/PasswordModal/index.js
index ae6e7826..97d364ef 100644
--- a/src/components/PasswordModal/index.js
+++ b/src/components/PasswordModal/index.js
@@ -6,7 +6,7 @@ import Modal from 'components/Modal';
 import Input from 'components/Input';
 
 export default ({
-  isOpen, confirm, reset, password,
+  isOpen, confirm, reset, password, isLoading,
   onPasswordChange, error, isAccountSetUpModalOpen
 }) => {
   const handleKeyPress = useCallback(event => {
@@ -31,8 +31,11 @@ export default ({
           value={password}
           onChange={onPasswordChange}
           error={!!error}
+          disabled={isLoading}
         />
-        <Button onClick={confirm}>Sign in</Button>
+        <Button onClick={confirm} disabled={isLoading}>
+          {isLoading ? 'Singing in...' : 'Sign in'}
+        </Button>
         <Button type="link" onClick={reset}>Lost password? Click here to restore access</Button>
       </Container>
     </Modal>
diff --git a/src/containers/PasswordModal/index.js b/src/containers/PasswordModal/index.js
index f5d29e77..7a7d8536 100644
--- a/src/containers/PasswordModal/index.js
+++ b/src/containers/PasswordModal/index.js
@@ -1,4 +1,4 @@
-import { useContext, useState, useCallback } from 'react';
+import { useContext, useState, useCallback, useEffect } from 'react';
 
 import { ModalContext, ZkAccountContext } from 'contexts';
 import PasswordModal from 'components/PasswordModal';
@@ -12,23 +12,34 @@ export default () => {
   const { unlockAccount } = useContext(ZkAccountContext);
   const [password, setPassword] = useState('');
   const [error, setError] = useState(null);
+  const [attempt, setAttempt] = useState(0);
 
   const handlePasswordChange = useCallback(e => {
     setError(null);
     setPassword(e.target.value);
   }, []);
 
-  const confirm = useCallback(async () => {
+  const confirm = useCallback(() => {
     try {
-      const success = await unlockAccount(password);
+      const success = unlockAccount(password);
       if (success) {
         setPassword('');
+        setAttempt(0);
+      } else {
+        setAttempt(prev => prev + 1);
       }
     } catch (error) {
       setError(error);
+      setAttempt(0);
     }
   }, [password, unlockAccount]);
 
+  useEffect(() => {
+    if (attempt > 0) {
+      setTimeout(confirm, 500);
+    }
+  }, [attempt]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const reset = useCallback(async () => {
     setPassword('');
     openAccountSetUpModal();
@@ -43,6 +54,7 @@ export default () => {
       reset={reset}
       error={error}
       isAccountSetUpModalOpen={isAccountSetUpModalOpen}
+      isLoading={attempt > 0}
     />
   );
 }

From 60a0e656234a867e7b94b9feaed3e168930e2d35 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Mon, 8 May 2023 17:28:11 +0200
Subject: [PATCH 09/13] added loader for network switching

---
 src/components/Header/index.js         | 12 ++++++++----
 src/containers/Header/index.js         |  3 ++-
 src/contexts/ZkAccountContext/index.js |  5 ++++-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index e0ff73d2..7c77146e 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -30,7 +30,7 @@ export default ({
   balance, poolBalance, refresh, isLoadingBalance,
   openSwapModal, generateAddress, openChangePasswordModal,
   openSeedPhraseModal, isDemo, disconnect, isLoadingState,
-  switchToPool, currentPool, initializeGiftCard,
+  switchToPool, currentPool, initializeGiftCard, isPoolSwitching,
 }) => {
   const walletButtonRef = useRef(null);
   const zkAccountButtonRef = useRef(null);
@@ -55,13 +55,17 @@ export default ({
       <AccountSection>
         <NetworkDropdown
           buttonRef={networkButtonRef}
-          disabled={isLoadingState}
+          disabled={isPoolSwitching || isLoadingState}
           switchToPool={switchToPool}
           currentPool={currentPool}
         >
-          <NetworkDropdownButton ref={networkButtonRef} $refreshing={isLoadingState}>
+          <NetworkDropdownButton ref={networkButtonRef} $refreshing={isPoolSwitching || isLoadingState}>
             <NetworkIcon src={NETWORKS[config.pools[currentPool].chainId].icon} />
-            <DropdownIcon />
+            {isPoolSwitching ? (
+              <Spinner size={12} style={{ marginLeft: 10 }} />
+            ) : (
+              <DropdownIcon />
+            )}
           </NetworkDropdownButton>
         </NetworkDropdown>
         <BridgeButton small onClick={openSwapModal}>
diff --git a/src/containers/Header/index.js b/src/containers/Header/index.js
index 9ac0436a..6da04038 100644
--- a/src/containers/Header/index.js
+++ b/src/containers/Header/index.js
@@ -13,7 +13,7 @@ export default ({ empty }) => {
   const { balance, updateBalance, isLoadingBalance } = useContext(TokenBalanceContext);
   const {
     zkAccount, isLoadingZkAccount, balance: poolBalance,
-    updatePoolData, generateAddress, isDemo,
+    updatePoolData, generateAddress, isDemo, isPoolSwitching,
     isLoadingState, switchToPool, initializeGiftCard,
   } = useContext(ZkAccountContext);
   const {
@@ -54,6 +54,7 @@ export default ({ empty }) => {
         switchToPool={switchToPool}
         currentPool={currentPool}
         initializeGiftCard={initializeGiftCard}
+        isPoolSwitching={isPoolSwitching}
       />
     </>
   );
diff --git a/src/contexts/ZkAccountContext/index.js b/src/contexts/ZkAccountContext/index.js
index 98138fd4..70a37f1f 100644
--- a/src/contexts/ZkAccountContext/index.js
+++ b/src/contexts/ZkAccountContext/index.js
@@ -57,6 +57,7 @@ export const ZkAccountContextProvider = ({ children }) => {
   const [isPendingIncoming, setIsPendingIncoming] = useState(false);
   const [isPending, setIsPending] = useState(false);
   const [pendingActions, setPendingActions] = useState([]);
+  const [isPoolSwitching, setIsPoolSwitching] = useState(false);
   const [isLoadingZkAccount, setIsLoadingZkAccount] = useState(false);
   const [isLoadingState, setIsLoadingState] = useState(false);
   const [isLoadingHistory, setIsLoadingHistory] = useState(false);
@@ -86,8 +87,10 @@ export const ZkAccountContextProvider = ({ children }) => {
 
   const switchToPool = useCallback(async poolId => {
     if (!zkClient) return;
+    setIsPoolSwitching(true);
     await zkClient.switchToPool(poolId);
     setCurrentPool(poolId);
+    setIsPoolSwitching(false);
   }, [zkClient, setCurrentPool]);
 
   const loadZkAccount = useCallback(async (secretKey, birthIndex, useDelegatedProver = false) => {
@@ -550,7 +553,7 @@ export const ZkAccountContextProvider = ({ children }) => {
   return (
     <ZkAccountContext.Provider
       value={{
-        zkAccount, balance, saveZkAccountMnemonic, deposit,
+        zkAccount, balance, saveZkAccountMnemonic, deposit, isPoolSwitching,
         withdraw, transfer, generateAddress, history, unlockAccount, transferMulti,
         isLoadingZkAccount, isLoadingState, isLoadingHistory, isPending, pendingActions,
         removeZkAccountMnemonic, updatePoolData, minTxAmount, loadingPercentage,

From 50a106edae424de12a68e626be2b4b0d602433c6 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Tue, 9 May 2023 11:37:08 +0200
Subject: [PATCH 10/13] change text

---
 src/components/AccountSetUpModal/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
index eddea346..611a469f 100644
--- a/src/components/AccountSetUpModal/index.js
+++ b/src/components/AccountSetUpModal/index.js
@@ -152,7 +152,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       prevStep = STEP.CREATE_OPTIONS;
       break;
     case STEP.CREATE_WITH_SECRET:
-      title = 'Setup account';
+      title = 'Create new zkAccount';
       component = <Create mnemonic={newMnemonic} next={() => setStep(STEP.CONFIRM_SECRET)} />;
       prevStep = STEP.CREATE_OPTIONS;
       break;
@@ -162,7 +162,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       prevStep = STEP.RESTORE_OPTIONS;
       break;
     case STEP.RESTORE_WITH_SECRET:
-      title = 'Restore account';
+      title = 'Restore zkAccount';
       component = <Restore restore={restore} />;
       prevStep = STEP.RESTORE_OPTIONS;
       break;

From 9d211873f627d2e613d4d6fb593139dfcb9ed21d Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Tue, 9 May 2023 17:05:46 +0200
Subject: [PATCH 11/13] update link to dune analytics

---
 src/components/MoreDropdown/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MoreDropdown/index.js b/src/components/MoreDropdown/index.js
index 13800df2..83e6adf1 100644
--- a/src/components/MoreDropdown/index.js
+++ b/src/components/MoreDropdown/index.js
@@ -5,7 +5,7 @@ import Dropdown from 'components/Dropdown';
 import OptionButton from 'components/OptionButton';
 
 const links = [
-  { name: 'Dune Analytics', href: 'https://dune.com/maxaleks/zkbob' },
+  { name: 'Dune Analytics', href: 'https://dune.com/zkbob/zkbob' },
   { name: 'Documentation', href: 'https://docs.zkbob.com/' },
   { name: 'Linktree', href: 'https://linktr.ee/zkbob' },
 ];

From 8145e8b592492c64d0675c3dc23ef30bf84a7f49 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Wed, 10 May 2023 17:52:47 +0200
Subject: [PATCH 12/13] add try/catch

---
 src/utils/token.js | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/utils/token.js b/src/utils/token.js
index fd00d5b4..74da8220 100644
--- a/src/utils/token.js
+++ b/src/utils/token.js
@@ -11,11 +11,21 @@ export function tokenIcon() {
 }
 
 export async function createPermitSignature(tokenContractInstance, signer, spenderAddress, value, deadline, salt) {
-  const [ownerAddress, chainId] = await Promise.all([signer.getAddress(), signer.getChainId()]);
-  const [contractName, nonce] = await Promise.all([
-    tokenContractInstance.name(),
-    tokenContractInstance.nonces(ownerAddress),
-  ]);
+  let ownerAddress;
+  let chainId;
+  let contractName;
+  let nonce;
+
+  try {
+    [ownerAddress, chainId] = await Promise.all([signer.getAddress(), signer.getChainId()]);
+    [contractName, nonce] = await Promise.all([
+      tokenContractInstance.name(),
+      tokenContractInstance.nonces(ownerAddress),
+    ]);
+  } catch (error) {
+    console.error(error);
+    throw Error('Network request failed, please try again or setup a different rpc url in your wallet.');
+  }
 
   // The domain
   const domain = {

From 0cf816d7f20bea9a769b0e63684402a8cf1463f0 Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Wed, 10 May 2023 17:54:30 +0200
Subject: [PATCH 13/13] v2.1.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 6c237d34..39d7cb4c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zkbob-ui",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "private": true,
   "dependencies": {
     "@dicebear/avatars": "^4.10.2",