refactor. Update Sensitive Info Component (#347)

packages/adena-extension/src/components/pages/web/sensitive-info-step/index.tsx

@@ -0,0 +1,69 @@
+import { ReactElement } from 'react';
+import styled, { useTheme } from 'styled-components';
+
+import IconAlert from '@assets/web/alert-rounded.svg';
+import IconLink from '@assets/web/external-link.svg';
+
+import { Pressable, Row, View, WebButton, WebImg, WebText } from '@components/atoms';
+import useLink from '@hooks/use-link';
+
+const StyledContainer = styled(View)`
+  width: 540px;
+  row-gap: 40px;
+  align-items: flex-start;
+`;
+
+const StyledMessageBox = styled(View)`
+  row-gap: 16px;
+`;
+
+export type SensitiveInfoStepProps = {
+  link?: string;
+  desc: string;
+  onClickNext: () => void;
+};
+
+export const SensitiveInfoStep = ({
+  link,
+  desc,
+  onClickNext,
+}: SensitiveInfoStepProps): ReactElement => {
+  const theme = useTheme();
+  const { openLink } = useLink();
+
+  return (
+    <StyledContainer>
+      <View style={{ rowGap: 24, alignItems: 'flex-start' }}>
+        <WebImg src={IconAlert} />
+        <StyledMessageBox>
+          <WebText type='headline3'>Sensitive Information Ahead</WebText>
+          <WebText type='body4' color={theme.webNeutral._500}>
+            {desc}
+          </WebText>
+        </StyledMessageBox>
+      </View>
+      <WebButton
+        figure='primary'
+        size='small'
+        onClick={onClickNext}
+        text='Next'
+        rightIcon='chevronRight'
+      />
+      <Pressable
+        onClick={(): void => {
+          // TODO: link to docs
+          openLink(link || 'https://docs.adena.app/');
+        }}
+      >
+        <Row style={{ columnGap: 6 }}>
+          <WebText type='title5' color={theme.webNeutral._600}>
+            Learn More
+          </WebText>
+          <WebImg src={IconLink} size={20} />
+        </Row>
+      </Pressable>
+    </StyledContainer>
+  );
+};
+
+export default SensitiveInfoStep;

packages/adena-extension/src/pages/web/account-add-screen/index.tsx

@@ -4,19 +4,22 @@ import { WebMain } from '@components/atoms';
 import { WebMainHeader } from '@components/pages/web/main-header';
 import useAccountAddScreen from '@hooks/web/use-account-add-screen';
 
-import InitStep from './init-step';
 import GetMnemonicStep from './create-account-step';
+import SensitiveInfoStep from '@components/pages/web/sensitive-info-step';
 
 const AccountAddScreen = (): ReactElement => {
   const useAccountAddScreenReturn = useAccountAddScreen();
-  const { step, onClickGoBack, stepLength } = useAccountAddScreenReturn;
+  const { step, onClickGoBack, stepLength, onClickNext } = useAccountAddScreenReturn;
 
   return (
     <WebMain>
       {step === 'INIT' && (
         <>
           <WebMainHeader stepLength={stepLength} onClickGoBack={onClickGoBack} currentStep={0} />
-          <InitStep useAccountAddScreenReturn={useAccountAddScreenReturn} />
+          <SensitiveInfoStep
+            desc='You are about to add a new private key derived from your existing seed phrase. Be sure to store it in a safe place.'
+            onClickNext={onClickNext}
+          />
         </>
       )}
 

packages/adena-extension/src/pages/web/account-import-screen/index.tsx

@@ -4,16 +4,17 @@ import { Wallet } from 'adena-module';
 import { WebMain } from '@components/atoms';
 import { WebMainHeader } from '@components/pages/web/main-header';
 
-import InitStep from './init-step';
 import SetPrivateKeyStep from './set-privatekey-step';
 import useAccountImportScreen from '@hooks/web/use-account-import-screen';
 import { useWalletContext } from '@hooks/use-context';
 import useAppNavigate from '@hooks/use-app-navigate';
 import { RoutePath } from '@types';
+import SensitiveInfoStep from '@components/pages/web/sensitive-info-step';
 
 const HasWallet = ({ wallet }: { wallet: Wallet }): ReactElement => {
   const useAccountImportScreenReturn = useAccountImportScreen({ wallet });
-  const { step, onClickGoBack, stepLength, accountImportStepNo } = useAccountImportScreenReturn;
+  const { step, onClickGoBack, stepLength, accountImportStepNo, onClickNext } =
+    useAccountImportScreenReturn;
 
   return (
     <>
@@ -22,7 +23,14 @@ const HasWallet = ({ wallet }: { wallet: Wallet }): ReactElement => {
         onClickGoBack={onClickGoBack}
         currentStep={accountImportStepNo[step]}
       />
-      {step === 'INIT' && <InitStep useAccountImportScreenReturn={useAccountImportScreenReturn} />}
+      {step === 'INIT' && (
+        <SensitiveInfoStep
+          desc={
+            'You are about to import your private key on this device. We recommend connecting with a hardware wallet for higher security.'
+          }
+          onClickNext={onClickNext}
+        />
+      )}
       {step === 'SET_PRIVATE_KEY' && (
         <SetPrivateKeyStep useAccountImportScreenReturn={useAccountImportScreenReturn} />
       )}

packages/adena-extension/src/pages/web/google-login-screen/index.tsx

@@ -4,9 +4,9 @@ import { WebMain } from '@components/atoms';
 import { WebMainHeader } from '@components/pages/web/main-header';
 import useGoogleLoginScreen from '@hooks/web/google-login/use-google-login-screen';
 
-import GoogleLoginInitStep from './init-step';
 import GoogleLoginRequest from './request';
 import GoogleLoginRequestFail from './request-fail';
+import SensitiveInfoStep from '@components/pages/web/sensitive-info-step';
 
 const GoogleLoginScreen: React.FC = () => {
   const {
@@ -26,26 +26,24 @@ const GoogleLoginScreen: React.FC = () => {
   return (
     <WebMain>
       {googleLoginState === 'INIT' && (
-        <WebMainHeader
-          stepLength={stepLength}
-          currentStep={googleLoginStepNo[googleLoginState]}
-          onClickGoBack={onClickGoBack}
-        />
-      )}
-      {googleLoginState === 'INIT' && (
-        <GoogleLoginInitStep
-          initGoogleLogin={initGoogleLogin}
-        />
+        <>
+          <WebMainHeader
+            stepLength={stepLength}
+            currentStep={googleLoginStepNo[googleLoginState]}
+            onClickGoBack={onClickGoBack}
+          />
+          <SensitiveInfoStep
+            desc={
+              'You are about to construct a private key on your device using Web3Auth,\na third party service provider. This account will be accessible with your\nsocial logins.'
+            }
+            onClickNext={initGoogleLogin}
+          />
+        </>
       )}
       {googleLoginState === 'REQUEST_LOGIN' && (
-        <GoogleLoginRequest
-          requestGoogleLogin={requestGoogleLogin}
-          backStep={backStep}
-        />
-      )}
-      {googleLoginState === 'FAILED' && (
-        <GoogleLoginRequestFail retry={retry} />
+        <GoogleLoginRequest requestGoogleLogin={requestGoogleLogin} backStep={backStep} />
       )}
+      {googleLoginState === 'FAILED' && <GoogleLoginRequestFail retry={retry} />}
     </WebMain>
   );
 };

packages/adena-extension/src/pages/web/landing-screen/index.tsx

@@ -22,7 +22,7 @@ const LandingScreen = (): ReactElement => {
   }, []);
 
   return (
-    <WebMain>
+    <WebMain style={{ alignItems: 'flex-start' }}>
       <View style={{ marginLeft: -100, marginTop: -200 }}>
         <Lottie
           options={{

packages/adena-extension/src/pages/web/wallet-create-screen/index.tsx

@@ -3,13 +3,14 @@ import { ReactElement } from 'react';
 import { WebMain } from '@components/atoms';
 import { WebMainHeader } from '@components/pages/web/main-header';
 
-import InitStep from './init-step';
 import GetMnemonicStep from './get-mnemonic-step';
 import useWalletCreateScreen from '@hooks/web/use-wallet-create-screen';
+import SensitiveInfoStep from '@components/pages/web/sensitive-info-step';
 
 const WalletCreateScreen = (): ReactElement => {
   const useWalletCreateScreenReturn = useWalletCreateScreen();
-  const { step, onClickGoBack, stepLength, walletCreateStepNo } = useWalletCreateScreenReturn;
+  const { step, onClickGoBack, stepLength, walletCreateStepNo, onClickNext } =
+    useWalletCreateScreenReturn;
 
   return (
     <WebMain>
@@ -18,7 +19,14 @@ const WalletCreateScreen = (): ReactElement => {
         onClickGoBack={onClickGoBack}
         currentStep={walletCreateStepNo[step]}
       />
-      {step === 'INIT' && <InitStep useWalletCreateScreenReturn={useWalletCreateScreenReturn} />}
+      {step === 'INIT' && (
+        <SensitiveInfoStep
+          desc={
+            'This will generate a seed phrase on your device. Only proceed if you\nunderstand how to safely store your seed phrase.'
+          }
+          onClickNext={onClickNext}
+        />
+      )}
       {step === 'GET_SEED_PHRASE' && (
         <GetMnemonicStep useWalletCreateScreenReturn={useWalletCreateScreenReturn} />
       )}