Skip to content

Commit c20fb22

Browse files
jinoosssjinoosss
committed
feat: add account initialization
1 parent 6b8e3e5 commit c20fb22

File tree

13 files changed

+382
-1
lines changed

13 files changed

+382
-1
lines changed

‎packages/adena-extension/src/assets/icon-account-initialize-failed.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* eslint-disable react/no-unknown-property */
2+
3+
const IconAccountInitializeFailed = (): JSX.Element => (
4+
<svg
5+
xmlns='http://www.w3.org/2000/svg'
6+
width='100'
7+
height='100'
8+
viewBox='0 0 100 100'
9+
fill='none'
10+
>
11+
<rect width='100' height='100' rx='50' fill='#EF2D21' fill-opacity='0.2' />
12+
<circle cx='50' cy='50' r='32' fill='#EF2D21' />
13+
<path
14+
d='M64.9287 38.3867L53.2197 50.0957L64.7354 61.6113L61.3477 64.999L49.832 53.4834L38.582 64.7344L35.1943 61.3467L46.4443 50.0957L35 38.6514L38.3877 35.2637L49.832 46.708L61.542 35L64.9287 38.3867Z'
15+
fill='#1B1A3B'
16+
/>
17+
</svg>
18+
);
19+
20+
export default IconAccountInitializeFailed;

‎packages/adena-extension/src/assets/icon-account-initialize-success.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* eslint-disable react/no-unknown-property */
2+
3+
const IconAccountInitializeSuccess = (): JSX.Element => (
4+
<svg
5+
xmlns='http://www.w3.org/2000/svg'
6+
width='100'
7+
height='100'
8+
viewBox='0 0 100 100'
9+
fill='none'
10+
>
11+
<rect width='100' height='100' rx='50' fill='#0DBE89' fill-opacity='0.2' />
12+
<circle cx='50' cy='50' r='32' fill='#0DBE89' />
13+
<rect
14+
x='44.3359'
15+
y='64.9062'
16+
width='20.2713'
17+
height='7'
18+
transform='rotate(-135 44.3359 64.9062)'
19+
fill='#1D403B'
20+
/>
21+
<rect
22+
x='39.3828'
23+
y='59.9561'
24+
width='35.2932'
25+
height='7'
26+
transform='rotate(-45 39.3828 59.9561)'
27+
fill='#1D403B'
28+
/>
29+
</svg>
30+
);
31+
32+
export default IconAccountInitializeSuccess;

‎packages/adena-extension/src/components/molecules/account-initialization-init/account-initialization-init.styles.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { View } from '@components/atoms';
2+
import mixins from '@styles/mixins';
3+
import { fonts } from '@styles/theme';
4+
import styled from 'styled-components';
5+
6+
export const AccountInitializationInitWrapper = styled(View)`
7+
width: 100%;
8+
height: auto;
9+
padding: 24px 20px;
10+
gap: 24px;
11+
12+
.image-wrapper {
13+
${mixins.flex({ align: 'center', justify: 'center' })};
14+
width: 100%;
15+
height: auto;
16+
17+
img {
18+
width: 80px;
19+
height: 80px;
20+
}
21+
}
22+
23+
.content-wrapper {
24+
${mixins.flex({ direction: 'column', align: 'center', justify: 'center' })};
25+
width: 100%;
26+
height: auto;
27+
gap: 20px;
28+
29+
.address-box {
30+
${mixins.flex({ align: 'center', justify: 'center' })};
31+
width: 100%;
32+
min-height: 41px;
33+
padding: 10px;
34+
border-radius: 24px;
35+
color: ${({ theme }): string => theme.neutral._1};
36+
background-color: ${({ theme }): string => theme.neutral._9};
37+
${fonts.body2Reg}
38+
}
39+
40+
.warning-box {
41+
display: flex;
42+
width: 100%;
43+
padding: 12px 16px;
44+
align-items: flex-start;
45+
gap: 10px;
46+
border-radius: 8px;
47+
background: rgba(255, 165, 60, 0.2);
48+
color: #ffa53c;
49+
${fonts.body2Reg}
50+
}
51+
}
52+
`;

‎packages/adena-extension/src/components/molecules/account-initialization-init/account-initialization-init.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import UnknownAccountImage from '@assets/common-unknown-logo.svg';
2+
import { formatAddress } from '@common/utils/client-utils';
3+
import { SubHeader } from '@components/atoms';
4+
import { BottomFixedButtonGroup } from '@components/molecules';
5+
import React, { useMemo } from 'react';
6+
import { AccountInitializationInitWrapper } from './account-initialization-init.styles';
7+
8+
export interface AccountInitializationInitProps {
9+
address: string;
10+
moveRequest: () => void;
11+
moveBack: () => void;
12+
}
13+
14+
const AccountInitializationInit: React.FC<AccountInitializationInitProps> = ({
15+
address,
16+
moveRequest,
17+
moveBack,
18+
}) => {
19+
const displayAddress = useMemo(() => {
20+
return formatAddress(address, 14);
21+
}, [address]);
22+
23+
return (
24+
<AccountInitializationInitWrapper>
25+
<SubHeader title='Account Initialization' />
26+
27+
<div className='image-wrapper'>
28+
<img src={UnknownAccountImage} alt='account-initialization' />
29+
</div>
30+
31+
<div className='content-wrapper'>
32+
<div className='address-box'>{displayAddress}</div>
33+
34+
<div className='warning-box'>
35+
{
36+
'Your account needs to be registered on-chain before you can send transactions on Gno.land. After the initialization, your transaction message will show up shortly.'
37+
}
38+
</div>
39+
</div>
40+
41+
<BottomFixedButtonGroup
42+
leftButton={{
43+
text: 'Cancel',
44+
onClick: moveBack,
45+
}}
46+
rightButton={{
47+
text: 'Confirm',
48+
primary: true,
49+
onClick: moveRequest,
50+
}}
51+
/>
52+
</AccountInitializationInitWrapper>
53+
);
54+
};
55+
56+
export default AccountInitializationInit;

‎packages/adena-extension/src/components/molecules/account-initialization-init/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './account-initialization-init';

‎packages/adena-extension/src/components/molecules/account-initialization-result/account-initialization-result.styles.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { View } from '@components/atoms';
2+
import mixins from '@styles/mixins';
3+
import styled from 'styled-components';
4+
5+
export const AccountInitializationResultWrapper = styled(View)`
6+
${mixins.flex({ align: 'center', justify: 'center' })};
7+
width: 100%;
8+
height: auto;
9+
gap: 24px;
10+
padding: 56px 20px 20px;
11+
12+
.image-wrapper {
13+
${mixins.flex({ align: 'center', justify: 'center' })};
14+
width: 100%;
15+
height: 100%;
16+
17+
img {
18+
width: 100px;
19+
height: 100px;
20+
}
21+
}
22+
23+
.content-wrapper {
24+
${mixins.flex({ direction: 'column', align: 'center', justify: 'center' })};
25+
width: 100%;
26+
height: auto;
27+
28+
.content > * {
29+
text-align: center;
30+
}
31+
}
32+
`;

‎packages/adena-extension/src/components/molecules/account-initialization-result/account-initialization-result.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
3+
import { BottomFixedButton, BottomFixedButtonGroup, TitleWithDesc } from '@components/molecules';
4+
import { AccountInitializationResultWrapper } from './account-initialization-result.styles';
5+
6+
import IconAccountInitializeFailed from '@assets/icon-account-initialize-failed';
7+
import IconAccountInitializeSuccess from '@assets/icon-account-initialize-success';
8+
9+
export interface AccountInitializationResultProps {
10+
state: 'LOADING' | 'SUCCESS' | 'FAILURE';
11+
moveInit: () => void;
12+
moveBack: () => void;
13+
}
14+
15+
const loadingImageMap = {
16+
LOADING: <IconAccountInitializeSuccess />,
17+
SUCCESS: <IconAccountInitializeSuccess />,
18+
FAILURE: <IconAccountInitializeFailed />,
19+
};
20+
21+
const contentMap = {
22+
LOADING: {
23+
title: 'Initializing...',
24+
desc: 'Please wait a bit.\nYour transaction will show up soon.',
25+
},
26+
SUCCESS: {
27+
title: 'Initialization Success',
28+
desc: 'Please wait a bit.\nYour transaction will show up soon.',
29+
},
30+
FAILURE: {
31+
title: 'Initialization Failed',
32+
desc: 'Your account has failed to be\nregistered on chain. Please try again.',
33+
},
34+
};
35+
36+
const AccountInitializationResult: React.FC<AccountInitializationResultProps> = ({
37+
state,
38+
moveInit,
39+
moveBack,
40+
}) => {
41+
return (
42+
<AccountInitializationResultWrapper>
43+
<div className='image-wrapper'>{loadingImageMap[state]}</div>
44+
45+
<div className='content-wrapper'>
46+
<TitleWithDesc
47+
className='content'
48+
title={contentMap[state].title}
49+
desc={contentMap[state].desc}
50+
/>
51+
</div>
52+
53+
{state === 'FAILURE' ? (
54+
<BottomFixedButtonGroup
55+
leftButton={{
56+
text: 'Cancel',
57+
onClick: moveBack,
58+
}}
59+
rightButton={{ text: 'Retry', primary: true, onClick: moveInit }}
60+
/>
61+
) : (
62+
<BottomFixedButton fill={false} text='Cancel' onClick={moveBack} />
63+
)}
64+
</AccountInitializationResultWrapper>
65+
);
66+
};
67+
68+
export default AccountInitializationResult;

‎packages/adena-extension/src/components/molecules/account-initialization-result/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './account-initialization-result';

‎packages/adena-extension/src/components/molecules/network-fee-setting-item/network-fee-setting-item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const NetworkFeeSettingItem: React.FC<NetworkFeeSettingItemProps> = ({
3535
[info.settingType],
3636
);
3737

38-
const hasGasInfo = !!info && !!info.gasInfo;
38+
const hasGasInfo = !!info && !!info.gasInfo && !info.gasInfo.hasError;
3939

4040
const gasInfoAmount = useMemo(() => {
4141
if (!hasGasInfo || !info?.gasInfo) {

‎packages/adena-extension/src/components/pages/account-initialization/account-initialization.styles.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { View } from '@components/atoms';
2+
import mixins from '@styles/mixins';
3+
import { fonts } from '@styles/theme';
4+
import styled from 'styled-components';
5+
6+
export const AccountInitializationWrapper = styled(View)`
7+
width: 100%;
8+
height: auto;
9+
10+
.address-wrapper {
11+
${mixins.flex({ align: 'center', justify: 'center' })};
12+
width: 100%;
13+
height: 100%;
14+
padding: 10px;
15+
border-radius: 24px;
16+
color: ${({ theme }): string => theme.neutral._1};
17+
background-color: ${({ theme }): string => theme.neutral._9};
18+
${fonts.body2Reg}
19+
}
20+
`;

0 commit comments

Comments
 (0)