diff --git a/src/apps/accounts/src/lib/assets/security/index.ts b/src/apps/accounts/src/lib/assets/security/index.ts index 80b9111c0..8b87173a7 100644 --- a/src/apps/accounts/src/lib/assets/security/index.ts +++ b/src/apps/accounts/src/lib/assets/security/index.ts @@ -1,13 +1,17 @@ import { ReactComponent as MFAImage } from './mfa.svg' import { ReactComponent as AppleStore } from './apple-store.svg' +import { ReactComponent as UnSuccessfullDiceVerificationIcon } from './unsuccessful.svg' import diceIdLogo from './dicelogo.png' import diceIdLogoBig from './dicelogobig.png' +import diceIdLogoSmall from './dicelogosmall.png' import googlePlay from './google-play.png' export { AppleStore, diceIdLogo, diceIdLogoBig, + diceIdLogoSmall, googlePlay, MFAImage, + UnSuccessfullDiceVerificationIcon, } diff --git a/src/apps/accounts/src/lib/assets/security/unsuccessful.svg b/src/apps/accounts/src/lib/assets/security/unsuccessful.svg new file mode 100644 index 000000000..29ae859bd --- /dev/null +++ b/src/apps/accounts/src/lib/assets/security/unsuccessful.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.module.scss b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.module.scss index 5dee26af8..dd1329b65 100644 --- a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.module.scss +++ b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.module.scss @@ -9,6 +9,15 @@ display: flex; } + .titleWrap { + display: flex; + align-items: center; + + img { + margin-right: $sp-4; + } + } + .appSoresWrap { display: flex; justify-content: space-evenly; @@ -25,10 +34,29 @@ margin: auto; } + .diceBigLogo { + margin: $sp-4 0; + } + + .errorWrap { + display: flex; + align-items: center; + + svg { + margin-right: $sp-2; + width: 28px; + height: 28px; + } + } + .ctaButtons { display: flex; justify-content: space-between; width: 100%; flex: 1; } + + .errorText { + color: #ef476f; + } } \ No newline at end of file diff --git a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx index e03b63135..b8b5ad833 100644 --- a/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx +++ b/src/apps/accounts/src/settings/tabs/account/security/dice-setup-modal/DiceSetupModal.tsx @@ -4,7 +4,13 @@ import { get, isUndefined, lowerCase } from 'lodash' import { toast } from 'react-toastify' import { BaseModal, Button } from '~/libs/ui' -import { AppleStore, diceIdLogoBig, googlePlay } from '~/apps/accounts/src/lib' +import { + AppleStore, + diceIdLogoBig, + diceIdLogoSmall, + googlePlay, + UnSuccessfullDiceVerificationIcon, +} from '~/apps/accounts/src/lib' import { DiceConnectionStatus, updateMemberMFAStatusAsync, useDiceIdConnection, UserProfile } from '~/libs/core' import { EnvironmentConfig } from '~/config' @@ -51,7 +57,6 @@ const DiceSetupModal: FC = (props: DiceSetupModalProps) => switch (step) { case 1: case 2: - case 3: return setStep(step + 1) default: return props.onClose() } @@ -90,7 +95,15 @@ const DiceSetupModal: FC = (props: DiceSetupModalProps) => + DICE ID Title Logo +

DICE ID AUTHENTICATOR SETUP

+ + )} size='body' classNames={{ modal: styles.diceModal }} buttons={( @@ -101,10 +114,10 @@ const DiceSetupModal: FC = (props: DiceSetupModalProps) => onClick={handleSecondaryButtonClick} /> { - step <= 4 && ( + step !== 3 && (