feat. Update generate seed phrase screen UI

packages/adena-extension/src/hooks/web/questionnaire/use-questionnaire-screen.ts

@@ -69,7 +69,7 @@ const useQuestionnaireScreen = (): UseQuestionnaireScreenReturn => {
 
   const completeQuestion = useCallback(() => {
     doneQuestionnaire().then(() => {
-      navigate(callbackPath, { state: { doneQuestionnaire: true } });
+      navigate(callbackPath, { state: { doneQuestionnaire: true }, replace: true });
     });
   }, [callbackPath]);
 

packages/adena-extension/src/hooks/web/use-wallet-create-screen.ts

@@ -81,6 +81,7 @@ const useWalletCreateScreen = (): UseWalletCreateReturn => {
 
         navigate(RoutePath.WebCreatePassword, {
           state: { serializedWallet, stepLength },
+          replace: true,
         });
       }
     }

packages/adena-extension/src/pages/web/wallet-create-screen/get-mnemonic-step.tsx

@@ -1,5 +1,5 @@
-import { ReactElement, useState } from 'react';
-import styled, { useTheme } from 'styled-components';
+import { ReactElement, useEffect, useState } from 'react';
+import styled, { FlattenSimpleInterpolation, css, keyframes, useTheme } from 'styled-components';
 
 import IconWarning from '@assets/web/warning.svg';
 import IconCopy from '@assets/web/copy.svg';
@@ -9,6 +9,7 @@ import { WebSeedBox } from '@components/molecules';
 import { UseWalletCreateReturn } from '@hooks/web/use-wallet-create-screen';
 
 const StyledContainer = styled(View)`
+  width: 552px;
   row-gap: 24px;
 `;
 
@@ -25,11 +26,40 @@ const StyledWarnBox = styled(Row)`
 
 const StyledButton = styled(WebButton)`
   border-radius: 8px;
-  :active {
-    background-color: #2a2c31;
+  :hover {
+    background-color: rgba(255, 255, 255, 0.08);
   }
 `;
 
+const fill = keyframes`
+  from {
+   width: 0;
+  }
+  to {
+   width: 100%;
+  }
+`;
+
+const StyledHoldButton = styled(StyledButton)<{ pressed: boolean }>`
+  position: relative;
+  overflow: hidden;
+  ${({ pressed: onPress }): FlattenSimpleInterpolation | undefined =>
+    onPress
+      ? css`
+          ::before {
+            content: '';
+            z-index: -1;
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            height: 100%;
+            background-color: rgba(0, 89, 255, 0.32);
+            animation: ${fill} 3s forwards;
+          }
+        `
+      : undefined}
+`;
+
 const GetMnemonicStep = ({
   useWalletCreateScreenReturn,
 }: {
@@ -38,10 +68,33 @@ const GetMnemonicStep = ({
   const { seeds, onClickNext } = useWalletCreateScreenReturn;
   const theme = useTheme();
   const [showBlur, setShowBlur] = useState(true);
+  const [onPress, setOnPress] = useState(false);
   const [ableToReveal, setAbleToReveal] = useState(false);
   const [agreeAbleToReveals, setAgreeAbleToReveals] = useState(false);
+  const [checkSavedMnemonic, setCheckSavedMnemonic] = useState(false);
   const [copied, setCopied] = useState(false);
 
+  const onClickCopy = (): void => {
+    setCopied(true);
+    navigator.clipboard.writeText(seeds);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (onPress) {
+      timer = setTimeout(() => {
+        setShowBlur(false);
+      }, 3000);
+    }
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [onPress]);
+
   return (
     <StyledContainer>
       <StyledMessageBox>
@@ -56,36 +109,45 @@ const GetMnemonicStep = ({
       <WebSeedBox seeds={seeds.split(' ')} showBlur={showBlur} />
 
       {ableToReveal ? (
-        <Row style={{ justifyContent: 'center', columnGap: 12 }}>
-          <StyledButton
-            figure='tertiary'
-            size='small'
-            onMouseDown={(): void => {
-              setShowBlur(false);
-            }}
-            onMouseUp={(): void => {
-              setShowBlur(true);
-            }}
-            text='Hold to Reveal'
-          />
-          <StyledButton
-            figure='tertiary'
-            size='small'
-            onClick={(): void => {
-              navigator.clipboard.writeText(seeds);
-              setCopied(true);
-            }}
-          >
-            {copied ? (
-              <WebText type='title6'>Copied!</WebText>
-            ) : (
-              <Row style={{ columnGap: 4 }}>
-                <WebImg src={IconCopy} size={14} />
-                <WebText type='title6'>Copy</WebText>
-              </Row>
-            )}
-          </StyledButton>
-        </Row>
+        <>
+          <Row style={{ justifyContent: 'center', columnGap: 12 }}>
+            <StyledHoldButton
+              figure='tertiary'
+              size='small'
+              onMouseDown={(): void => {
+                setOnPress(true);
+              }}
+              onMouseUp={(): void => {
+                setOnPress(false);
+                setShowBlur(true);
+              }}
+              text='Hold to Reveal'
+              textType='body6'
+              pressed={onPress}
+            />
+            <StyledButton figure='tertiary' size='small' onClick={onClickCopy}>
+              {copied ? (
+                <WebText type='title6'>Copied!</WebText>
+              ) : (
+                <Row style={{ columnGap: 4 }}>
+                  <WebImg src={IconCopy} size={14} />
+                  <WebText type='title6'>Copy</WebText>
+                </Row>
+              )}
+            </StyledButton>
+          </Row>
+          <Row style={{ columnGap: 8, alignItems: 'center' }}>
+            <WebCheckBox
+              checked={checkSavedMnemonic}
+              onClick={(): void => {
+                setCheckSavedMnemonic(!checkSavedMnemonic);
+              }}
+            />
+            <WebText type='body5' color={theme.webNeutral._500}>
+              I have saved my seed phrase.
+            </WebText>
+          </Row>
+        </>
       ) : (
         <Row style={{ columnGap: 8, alignItems: 'center' }}>
           <WebCheckBox
@@ -105,7 +167,7 @@ const GetMnemonicStep = ({
           figure='primary'
           size='small'
           onClick={onClickNext}
-          disabled={!agreeAbleToReveals}
+          disabled={!checkSavedMnemonic}
           style={{ justifyContent: 'center' }}
           text='Next'
           rightIcon='chevronRight'

packages/adena-extension/src/pages/web/wallet-export-screen/result.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import styled, { useTheme } from 'styled-components';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import styled, { FlattenSimpleInterpolation, css, keyframes, useTheme } from 'styled-components';
 
 import IconWarning from '@assets/web/warning.svg';
 import { Row, View, WebButton, WebImg, WebText } from '@components/atoms';
@@ -43,12 +43,38 @@ interface WalletExportResultProps {
   exportData: string | null;
 }
 
-const WalletExportResult: React.FC<WalletExportResultProps> = ({
-  exportType,
-  exportData,
-}) => {
+const fill = keyframes`
+  from {
+   width: 0;
+  }
+  to {
+   width: 100%;
+  }
+`;
+
+const StyledHoldButton = styled(WebButton)<{ pressed: boolean }>`
+  position: relative;
+  overflow: hidden;
+  ${({ pressed: onPress }): FlattenSimpleInterpolation | undefined =>
+    onPress
+      ? css`
+          ::before {
+            content: '';
+            z-index: -1;
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            height: 100%;
+            background-color: rgba(0, 89, 255, 0.32);
+            animation: ${fill} 3s forwards;
+          }
+        `
+      : undefined}
+`;
+const WalletExportResult: React.FC<WalletExportResultProps> = ({ exportType, exportData }) => {
   const theme = useTheme();
   const [blur, setBlur] = useState(true);
+  const [onPress, setOnPress] = useState(false);
 
   const title = useMemo(() => {
     if (exportType === 'PRIVATE_KEY') {
@@ -59,7 +85,7 @@ const WalletExportResult: React.FC<WalletExportResultProps> = ({
 
   const warningMessage = useMemo(() => {
     if (exportType === 'PRIVATE_KEY') {
-      return 'You’re about to reveal your seed phrase. Please carefully review the\nchecklist below.'
+      return 'You’re about to reveal your seed phrase. Please carefully review the\nchecklist below.';
     }
     return 'You’re about to reveal your private key. Please carefully review\nthe checklist below.';
   }, [exportType]);
@@ -84,20 +110,34 @@ const WalletExportResult: React.FC<WalletExportResultProps> = ({
   }, [exportData]);
 
   const onClickDone = (): void => {
-    AdenaStorage.session().remove(WALLET_EXPORT_TYPE_STORAGE_KEY).then(() => {
-      window.close();
-    });
+    AdenaStorage.session()
+      .remove(WALLET_EXPORT_TYPE_STORAGE_KEY)
+      .then(() => {
+        window.close();
+      });
   };
 
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (onPress) {
+      timer = setTimeout(() => {
+        setBlur(false);
+      }, 3000);
+    }
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [onPress]);
+
   return (
     <StyledContainer>
       <StyledMessageBox>
         <WebText type='headline3'>{title}</WebText>
         <StyledWarnBox>
           <Row style={{ gap: 2, alignItems: 'center' }}>
             <WebImg src={IconWarning} size={20} />
-            <WebText type='title6' color={theme.webWarning._100}
-              style={{ height: 14 }}>
+            <WebText type='title6' color={theme.webWarning._100} style={{ height: 14 }}>
               Approach with caution!
             </WebText>
           </Row>
@@ -108,25 +148,25 @@ const WalletExportResult: React.FC<WalletExportResultProps> = ({
       </StyledMessageBox>
 
       <StyledInputBox>
-        {exportType === 'SEED_PHRASE' && (
-          <WebSeedBox seeds={seeds} showBlur={blur} />
-        )}
+        {exportType === 'SEED_PHRASE' && <WebSeedBox seeds={seeds} showBlur={blur} />}
         {exportType === 'PRIVATE_KEY' && (
           <WebPrivateKeyBox privateKey={privateKey} showBlur={blur} />
         )}
-        <Row style={{ gap: 12, justifyContent: 'center' }} >
-          <WebButton
+        <Row style={{ gap: 12, justifyContent: 'center' }}>
+          <StyledHoldButton
             figure='quaternary'
             size='small'
             onMouseDown={(): void => {
-              setBlur(false);
+              setOnPress(true);
             }}
             onMouseUp={(): void => {
+              setOnPress(false);
               setBlur(true);
             }}
             text='Hold to Reveal'
             textType='body6'
             style={{ borderRadius: 8 }}
+            pressed={onPress}
           />
           <WebButton
             figure='quaternary'
@@ -143,27 +183,26 @@ const WalletExportResult: React.FC<WalletExportResultProps> = ({
         <TermsCheckbox
           id='term01'
           checked={true}
-          onChange={(): void => { return; }}
+          onChange={(): void => {
+            return;
+          }}
           text='Anyone with the phrase will have full control over my funds.'
           tabIndex={1}
           margin='0'
         />
         <TermsCheckbox
           id='term02'
           checked={true}
-          onChange={(): void => { return; }}
+          onChange={(): void => {
+            return;
+          }}
           text='I will never share my seed phrase with anyone.'
           tabIndex={2}
           margin='0'
         />
       </StyledTermsBox>
 
-      <WebButton
-        figure='primary'
-        size='full'
-        onClick={onClickDone}
-        text='Done'
-      />
+      <WebButton figure='primary' size='full' onClick={onClickDone} text='Done' />
     </StyledContainer>
   );
 };