Skip to content

Commit af1aba3

Browse files
jinoosssjinoosss
authored
feat. Update generate seed phrase screen UI (#361)
2 parents fe57c65 + 45d0b5a commit af1aba3

File tree

4 files changed

+164
-62
lines changed

4 files changed

+164
-62
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ const useQuestionnaireScreen = (): UseQuestionnaireScreenReturn => {
6969

7070
const completeQuestion = useCallback(() => {
7171
doneQuestionnaire().then(() => {
72-
navigate(callbackPath, { state: { doneQuestionnaire: true } });
72+
navigate(callbackPath, { state: { doneQuestionnaire: true }, replace: true });
7373
});
7474
}, [callbackPath]);
7575

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

+1
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ const useWalletCreateScreen = (): UseWalletCreateReturn => {
8181

8282
navigate(RoutePath.WebCreatePassword, {
8383
state: { serializedWallet, stepLength },
84+
replace: true,
8485
});
8586
}
8687
}

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

+97-35
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ReactElement, useState } from 'react';
2-
import styled, { useTheme } from 'styled-components';
1+
import { ReactElement, useEffect, useState } from 'react';
2+
import styled, { FlattenSimpleInterpolation, css, keyframes, useTheme } from 'styled-components';
33

44
import IconWarning from '@assets/web/warning.svg';
55
import IconCopy from '@assets/web/copy.svg';
@@ -9,6 +9,7 @@ import { WebSeedBox } from '@components/molecules';
99
import { UseWalletCreateReturn } from '@hooks/web/use-wallet-create-screen';
1010

1111
const StyledContainer = styled(View)`
12+
width: 552px;
1213
row-gap: 24px;
1314
`;
1415

@@ -25,11 +26,40 @@ const StyledWarnBox = styled(Row)`
2526

2627
const StyledButton = styled(WebButton)`
2728
border-radius: 8px;
28-
:active {
29-
background-color: #2a2c31;
29+
:hover {
30+
background-color: rgba(255, 255, 255, 0.08);
3031
}
3132
`;
3233

34+
const fill = keyframes`
35+
from {
36+
width: 0;
37+
}
38+
to {
39+
width: 100%;
40+
}
41+
`;
42+
43+
const StyledHoldButton = styled(StyledButton)<{ pressed: boolean }>`
44+
position: relative;
45+
overflow: hidden;
46+
${({ pressed: onPress }): FlattenSimpleInterpolation | undefined =>
47+
onPress
48+
? css`
49+
::before {
50+
content: '';
51+
z-index: -1;
52+
position: absolute;
53+
top: 0px;
54+
left: 0px;
55+
height: 100%;
56+
background-color: rgba(0, 89, 255, 0.32);
57+
animation: ${fill} 3s forwards;
58+
}
59+
`
60+
: undefined}
61+
`;
62+
3363
const GetMnemonicStep = ({
3464
useWalletCreateScreenReturn,
3565
}: {
@@ -38,10 +68,33 @@ const GetMnemonicStep = ({
3868
const { seeds, onClickNext } = useWalletCreateScreenReturn;
3969
const theme = useTheme();
4070
const [showBlur, setShowBlur] = useState(true);
71+
const [onPress, setOnPress] = useState(false);
4172
const [ableToReveal, setAbleToReveal] = useState(false);
4273
const [agreeAbleToReveals, setAgreeAbleToReveals] = useState(false);
74+
const [checkSavedMnemonic, setCheckSavedMnemonic] = useState(false);
4375
const [copied, setCopied] = useState(false);
4476

77+
const onClickCopy = (): void => {
78+
setCopied(true);
79+
navigator.clipboard.writeText(seeds);
80+
setTimeout(() => {
81+
setCopied(false);
82+
}, 2000);
83+
};
84+
85+
useEffect(() => {
86+
let timer: NodeJS.Timeout;
87+
if (onPress) {
88+
timer = setTimeout(() => {
89+
setShowBlur(false);
90+
}, 3000);
91+
}
92+
93+
return () => {
94+
clearTimeout(timer);
95+
};
96+
}, [onPress]);
97+
4598
return (
4699
<StyledContainer>
47100
<StyledMessageBox>
@@ -56,36 +109,45 @@ const GetMnemonicStep = ({
56109
<WebSeedBox seeds={seeds.split(' ')} showBlur={showBlur} />
57110

58111
{ableToReveal ? (
59-
<Row style={{ justifyContent: 'center', columnGap: 12 }}>
60-
<StyledButton
61-
figure='tertiary'
62-
size='small'
63-
onMouseDown={(): void => {
64-
setShowBlur(false);
65-
}}
66-
onMouseUp={(): void => {
67-
setShowBlur(true);
68-
}}
69-
text='Hold to Reveal'
70-
/>
71-
<StyledButton
72-
figure='tertiary'
73-
size='small'
74-
onClick={(): void => {
75-
navigator.clipboard.writeText(seeds);
76-
setCopied(true);
77-
}}
78-
>
79-
{copied ? (
80-
<WebText type='title6'>Copied!</WebText>
81-
) : (
82-
<Row style={{ columnGap: 4 }}>
83-
<WebImg src={IconCopy} size={14} />
84-
<WebText type='title6'>Copy</WebText>
85-
</Row>
86-
)}
87-
</StyledButton>
88-
</Row>
112+
<>
113+
<Row style={{ justifyContent: 'center', columnGap: 12 }}>
114+
<StyledHoldButton
115+
figure='tertiary'
116+
size='small'
117+
onMouseDown={(): void => {
118+
setOnPress(true);
119+
}}
120+
onMouseUp={(): void => {
121+
setOnPress(false);
122+
setShowBlur(true);
123+
}}
124+
text='Hold to Reveal'
125+
textType='body6'
126+
pressed={onPress}
127+
/>
128+
<StyledButton figure='tertiary' size='small' onClick={onClickCopy}>
129+
{copied ? (
130+
<WebText type='title6'>Copied!</WebText>
131+
) : (
132+
<Row style={{ columnGap: 4 }}>
133+
<WebImg src={IconCopy} size={14} />
134+
<WebText type='title6'>Copy</WebText>
135+
</Row>
136+
)}
137+
</StyledButton>
138+
</Row>
139+
<Row style={{ columnGap: 8, alignItems: 'center' }}>
140+
<WebCheckBox
141+
checked={checkSavedMnemonic}
142+
onClick={(): void => {
143+
setCheckSavedMnemonic(!checkSavedMnemonic);
144+
}}
145+
/>
146+
<WebText type='body5' color={theme.webNeutral._500}>
147+
I have saved my seed phrase.
148+
</WebText>
149+
</Row>
150+
</>
89151
) : (
90152
<Row style={{ columnGap: 8, alignItems: 'center' }}>
91153
<WebCheckBox
@@ -105,7 +167,7 @@ const GetMnemonicStep = ({
105167
figure='primary'
106168
size='small'
107169
onClick={onClickNext}
108-
disabled={!agreeAbleToReveals}
170+
disabled={!checkSavedMnemonic}
109171
style={{ justifyContent: 'center' }}
110172
text='Next'
111173
rightIcon='chevronRight'

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

+65-26
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useCallback, useMemo, useState } from 'react';
2-
import styled, { useTheme } from 'styled-components';
1+
import React, { useCallback, useEffect, useMemo, useState } from 'react';
2+
import styled, { FlattenSimpleInterpolation, css, keyframes, useTheme } from 'styled-components';
33

44
import IconWarning from '@assets/web/warning.svg';
55
import { Row, View, WebButton, WebImg, WebText } from '@components/atoms';
@@ -43,12 +43,38 @@ interface WalletExportResultProps {
4343
exportData: string | null;
4444
}
4545

46-
const WalletExportResult: React.FC<WalletExportResultProps> = ({
47-
exportType,
48-
exportData,
49-
}) => {
46+
const fill = keyframes`
47+
from {
48+
width: 0;
49+
}
50+
to {
51+
width: 100%;
52+
}
53+
`;
54+
55+
const StyledHoldButton = styled(WebButton)<{ pressed: boolean }>`
56+
position: relative;
57+
overflow: hidden;
58+
${({ pressed: onPress }): FlattenSimpleInterpolation | undefined =>
59+
onPress
60+
? css`
61+
::before {
62+
content: '';
63+
z-index: -1;
64+
position: absolute;
65+
top: 0px;
66+
left: 0px;
67+
height: 100%;
68+
background-color: rgba(0, 89, 255, 0.32);
69+
animation: ${fill} 3s forwards;
70+
}
71+
`
72+
: undefined}
73+
`;
74+
const WalletExportResult: React.FC<WalletExportResultProps> = ({ exportType, exportData }) => {
5075
const theme = useTheme();
5176
const [blur, setBlur] = useState(true);
77+
const [onPress, setOnPress] = useState(false);
5278

5379
const title = useMemo(() => {
5480
if (exportType === 'PRIVATE_KEY') {
@@ -59,7 +85,7 @@ const WalletExportResult: React.FC<WalletExportResultProps> = ({
5985

6086
const warningMessage = useMemo(() => {
6187
if (exportType === 'PRIVATE_KEY') {
62-
return 'You’re about to reveal your seed phrase. Please carefully review the\nchecklist below.'
88+
return 'You’re about to reveal your seed phrase. Please carefully review the\nchecklist below.';
6389
}
6490
return 'You’re about to reveal your private key. Please carefully review\nthe checklist below.';
6591
}, [exportType]);
@@ -84,20 +110,34 @@ const WalletExportResult: React.FC<WalletExportResultProps> = ({
84110
}, [exportData]);
85111

86112
const onClickDone = (): void => {
87-
AdenaStorage.session().remove(WALLET_EXPORT_TYPE_STORAGE_KEY).then(() => {
88-
window.close();
89-
});
113+
AdenaStorage.session()
114+
.remove(WALLET_EXPORT_TYPE_STORAGE_KEY)
115+
.then(() => {
116+
window.close();
117+
});
90118
};
91119

120+
useEffect(() => {
121+
let timer: NodeJS.Timeout;
122+
if (onPress) {
123+
timer = setTimeout(() => {
124+
setBlur(false);
125+
}, 3000);
126+
}
127+
128+
return () => {
129+
clearTimeout(timer);
130+
};
131+
}, [onPress]);
132+
92133
return (
93134
<StyledContainer>
94135
<StyledMessageBox>
95136
<WebText type='headline3'>{title}</WebText>
96137
<StyledWarnBox>
97138
<Row style={{ gap: 2, alignItems: 'center' }}>
98139
<WebImg src={IconWarning} size={20} />
99-
<WebText type='title6' color={theme.webWarning._100}
100-
style={{ height: 14 }}>
140+
<WebText type='title6' color={theme.webWarning._100} style={{ height: 14 }}>
101141
Approach with caution!
102142
</WebText>
103143
</Row>
@@ -108,25 +148,25 @@ const WalletExportResult: React.FC<WalletExportResultProps> = ({
108148
</StyledMessageBox>
109149

110150
<StyledInputBox>
111-
{exportType === 'SEED_PHRASE' && (
112-
<WebSeedBox seeds={seeds} showBlur={blur} />
113-
)}
151+
{exportType === 'SEED_PHRASE' && <WebSeedBox seeds={seeds} showBlur={blur} />}
114152
{exportType === 'PRIVATE_KEY' && (
115153
<WebPrivateKeyBox privateKey={privateKey} showBlur={blur} />
116154
)}
117-
<Row style={{ gap: 12, justifyContent: 'center' }} >
118-
<WebButton
155+
<Row style={{ gap: 12, justifyContent: 'center' }}>
156+
<StyledHoldButton
119157
figure='quaternary'
120158
size='small'
121159
onMouseDown={(): void => {
122-
setBlur(false);
160+
setOnPress(true);
123161
}}
124162
onMouseUp={(): void => {
163+
setOnPress(false);
125164
setBlur(true);
126165
}}
127166
text='Hold to Reveal'
128167
textType='body6'
129168
style={{ borderRadius: 8 }}
169+
pressed={onPress}
130170
/>
131171
<WebButton
132172
figure='quaternary'
@@ -143,27 +183,26 @@ const WalletExportResult: React.FC<WalletExportResultProps> = ({
143183
<TermsCheckbox
144184
id='term01'
145185
checked={true}
146-
onChange={(): void => { return; }}
186+
onChange={(): void => {
187+
return;
188+
}}
147189
text='Anyone with the phrase will have full control over my funds.'
148190
tabIndex={1}
149191
margin='0'
150192
/>
151193
<TermsCheckbox
152194
id='term02'
153195
checked={true}
154-
onChange={(): void => { return; }}
196+
onChange={(): void => {
197+
return;
198+
}}
155199
text='I will never share my seed phrase with anyone.'
156200
tabIndex={2}
157201
margin='0'
158202
/>
159203
</StyledTermsBox>
160204

161-
<WebButton
162-
figure='primary'
163-
size='full'
164-
onClick={onClickDone}
165-
text='Done'
166-
/>
205+
<WebButton figure='primary' size='full' onClick={onClickDone} text='Done' />
167206
</StyledContainer>
168207
);
169208
};

0 commit comments

Comments
 (0)