Skip to content

Commit 42d49af

Browse files
kkartunovkkartunov
committed
MP-40 dice modal wrap up
1 parent 247b6c9 commit 42d49af

File tree

5 files changed

+84
-10
lines changed

5 files changed

+84
-10
lines changed

‎src/apps/accounts/src/lib/assets/security/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { ReactComponent as MFAImage } from './mfa.svg'
22
import { ReactComponent as AppleStore } from './apple-store.svg'
3+
import { ReactComponent as UnSuccessfullDiceVerificationIcon } from './unsuccessful.svg'
34
import diceIdLogo from './dicelogo.png'
45
import diceIdLogoBig from './dicelogobig.png'
6+
import diceIdLogoSmall from './dicelogosmall.png'
57
import googlePlay from './google-play.png'
68

79
export {
810
AppleStore,
911
diceIdLogo,
1012
diceIdLogoBig,
13+
diceIdLogoSmall,
1114
googlePlay,
1215
MFAImage,
16+
UnSuccessfullDiceVerificationIcon,
1317
}

‎src/apps/accounts/src/lib/assets/security/unsuccessful.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.module.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,15 @@
99
display: flex;
1010
}
1111

12+
.titleWrap {
13+
display: flex;
14+
align-items: center;
15+
16+
img {
17+
margin-right: $sp-4;
18+
}
19+
}
20+
1221
.appSoresWrap {
1322
display: flex;
1423
justify-content: space-evenly;
@@ -25,10 +34,29 @@
2534
margin: auto;
2635
}
2736

37+
.diceBigLogo {
38+
margin: $sp-4 0;
39+
}
40+
41+
.errorWrap {
42+
display: flex;
43+
align-items: center;
44+
45+
svg {
46+
margin-right: $sp-2;
47+
width: 28px;
48+
height: 28px;
49+
}
50+
}
51+
2852
.ctaButtons {
2953
display: flex;
3054
justify-content: space-between;
3155
width: 100%;
3256
flex: 1;
3357
}
58+
59+
.errorText {
60+
color: #ef476f;
61+
}
3462
}

‎src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@ import { get, isUndefined, lowerCase } from 'lodash'
44
import { toast } from 'react-toastify'
55

66
import { BaseModal, Button } from '~/libs/ui'
7-
import { AppleStore, diceIdLogoBig, googlePlay } from '~/apps/accounts/src/lib'
7+
import {
8+
AppleStore,
9+
diceIdLogoBig,
10+
diceIdLogoSmall,
11+
googlePlay,
12+
UnSuccessfullDiceVerificationIcon,
13+
} from '~/apps/accounts/src/lib'
814
import { DiceConnectionStatus, updateMemberMFAStatusAsync, useDiceIdConnection, UserProfile } from '~/libs/core'
915
import { EnvironmentConfig } from '~/config'
1016

@@ -51,7 +57,6 @@ const DiceSetupModal: FC<DiceSetupModalProps> = (props: DiceSetupModalProps) =>
5157
switch (step) {
5258
case 1:
5359
case 2:
54-
case 3:
5560
return setStep(step + 1)
5661
default: return props.onClose()
5762
}
@@ -90,7 +95,15 @@ const DiceSetupModal: FC<DiceSetupModalProps> = (props: DiceSetupModalProps) =>
9095
<BaseModal
9196
open
9297
onClose={props.onClose}
93-
title='DICE ID AUTHENTICATOR SETUP'
98+
title={(
99+
<div className={styles.titleWrap}>
100+
<img
101+
src={diceIdLogoSmall}
102+
alt='DICE ID Title Logo'
103+
/>
104+
<h3>DICE ID AUTHENTICATOR SETUP</h3>
105+
</div>
106+
)}
94107
size='body'
95108
classNames={{ modal: styles.diceModal }}
96109
buttons={(
@@ -101,10 +114,10 @@ const DiceSetupModal: FC<DiceSetupModalProps> = (props: DiceSetupModalProps) =>
101114
onClick={handleSecondaryButtonClick}
102115
/>
103116
{
104-
step <= 4 && (
117+
step !== 3 && (
105118
<Button
106119
primary
107-
label={step === 4 ? 'Finish' : 'Next'}
120+
label={(step === 4 || step === 5) ? 'Finish' : 'Next'}
108121
onClick={handlePrimaryButtonClick}
109122
disabled={step === 2 && !diceConnection?.accepted}
110123
/>
@@ -227,7 +240,7 @@ const DiceSetupModal: FC<DiceSetupModalProps> = (props: DiceSetupModalProps) =>
227240
{
228241
step === 4 && (
229242
<>
230-
<h4>Setup completed!</h4>
243+
<h3>Setup completed!</h3>
231244
<p>
232245
Hello
233246
{' '}
@@ -238,7 +251,7 @@ const DiceSetupModal: FC<DiceSetupModalProps> = (props: DiceSetupModalProps) =>
238251
Your credentials have been verified and you are all set
239252
for MFA using your decentralized identity (DICE ID).
240253
</p>
241-
<img src={diceIdLogoBig} alt='DICE ID Logo' />
254+
<img src={diceIdLogoBig} className={styles.diceBigLogo} alt='DICE ID Logo' />
242255
<p>
243256
For more information on DICE ID, please visit
244257
{' '}
@@ -257,7 +270,27 @@ const DiceSetupModal: FC<DiceSetupModalProps> = (props: DiceSetupModalProps) =>
257270
{
258271
step === 5 && (
259272
<>
260-
273+
<div className={styles.errorWrap}>
274+
<UnSuccessfullDiceVerificationIcon />
275+
<h3 className={styles.errorText}>Unsuccessful Verification!</h3>
276+
</div>
277+
<p>
278+
Hello
279+
{' '}
280+
{props.profile.handle}
281+
,
282+
<br />
283+
<br />
284+
Your credentials could not be verified,
285+
you won&apos;t be able to connect to MFA using your decentralized identity (DICE ID).
286+
</p>
287+
<img src={diceIdLogoBig} className={styles.diceBigLogo} alt='DICE ID Logo' />
288+
<p>
289+
Please try again your process after few minutes.
290+
<br />
291+
<br />
292+
</p>
293+
<p>Please click Finish bellow.</p>
261294
</>
262295
)
263296
}

‎src/libs/ui/lib/components/modals/base-modal/BaseModal.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface BaseModalProps extends ModalProps {
1414
contentUrl?: string
1515
theme?: 'danger' | 'clear'
1616
size?: 'body' | 'lg' | 'md' | 'sm'
17-
title?: string
17+
title?: string | ReactNode
1818
buttons?: ReactNode
1919
}
2020

@@ -62,7 +62,13 @@ const BaseModal: FC<BaseModalProps> = (props: BaseModalProps) => {
6262
{props.title && (
6363
<>
6464
<div className={styles['modal-header']}>
65-
<h3>{props.title}</h3>
65+
{
66+
typeof props.title === 'string' ? (
67+
<h3>{props.title}</h3>
68+
) : (
69+
props.title
70+
)
71+
}
6672
</div>
6773

6874
<hr className={styles.spacer} />

0 commit comments

Comments
 (0)