Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(wallet): rebrand new mnemonic success page #1533

Merged
merged 23 commits into from
Aug 14, 2024
Merged

feat(wallet): rebrand new mnemonic success page #1533

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
1a32c75
feat(wallet): BackupMnemonicPage rebrand.
panteleymonchuk Jul 31, 2024
0cd5e6a
feat(wallet): BackupMnemonicPage rebrand. Remove debris.
panteleymonchuk Aug 2, 2024
5d64ff8
Merge branch 'develop' into tooling-wallet/rebrand-create-mnemonic
panteleymonchuk Aug 2, 2024
8cfb1c2
Merge remote-tracking branch 'iotaledger/develop' into tooling-wallet…
panteleymonchuk Aug 8, 2024
83617df
feat(wallet): Onboarding. New wallet success & backup page updates.
panteleymonchuk Aug 8, 2024
b67b14b
feat(wallet): Onboarding. New wallet success & backup page updates. pt2.
panteleymonchuk Aug 9, 2024
9c22f49
Merge remote-tracking branch 'iotaledger/develop' into tooling-wallet…
panteleymonchuk Aug 9, 2024
58d7cf6
feat(wallet): Onboarding. New wallet success & backup page updates. F…
panteleymonchuk Aug 9, 2024
4dbd73c
Merge remote-tracking branch 'iotaledger/develop' into tooling-wallet…
panteleymonchuk Aug 12, 2024
8daac66
feat(wallet): update ui and add copy button on BackupMnemonicPage
panteleymonchuk Aug 12, 2024
d204525
Merge remote-tracking branch 'iotaledger/develop' into tooling-wallet…
panteleymonchuk Aug 12, 2024
9c684ba
feat(wallet): cover copy button my condition. BackupMnemonicPage.
panteleymonchuk Aug 12, 2024
5bcd583
refactor: mnemonic success page
begonaalvarezd Aug 12, 2024
09c4019
Merge branch 'develop' into tooling-wallet/rebrand-create-mnemonic
begonaalvarezd Aug 13, 2024
52391e5
Merge branch 'tooling-wallet/rebrand-create-mnemonic' into tooling-wa…
begonaalvarezd Aug 13, 2024
a2c85e9
feat: hide copy button if mnemonic is encrypted
begonaalvarezd Aug 13, 2024
3651359
fix: pushed test data
begonaalvarezd Aug 13, 2024
2acd0d3
Merge pull request #1755 from iotaledger/tooling-wallet/refactor-success
begonaalvarezd Aug 13, 2024
816d0e0
Merge branch 'develop' into tooling-wallet/rebrand-create-mnemonic
begonaalvarezd Aug 13, 2024
d9cb1c7
Merge remote-tracking branch 'iotaledger/develop' into tooling-wallet…
panteleymonchuk Aug 14, 2024
c493196
Merge branch 'develop' into tooling-wallet/rebrand-create-mnemonic
evavirseda Aug 14, 2024
1302346
Merge branch 'develop' into tooling-wallet/rebrand-create-mnemonic
evavirseda Aug 14, 2024
d07a0bf
Merge branch 'develop' into tooling-wallet/rebrand-create-mnemonic
begonaalvarezd Aug 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/ui-kit/src/lib/components/atoms/button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function Button({
<button
onClick={onClick}
className={cx(
'state-layer relative flex rounded-full disabled:opacity-40',
'state-layer relative flex justify-center rounded-full disabled:opacity-40',
paddingClasses,
backgroundColors,
)}
Expand Down
6 changes: 5 additions & 1 deletion apps/ui-kit/src/lib/components/molecules/text-field/TextFieldTrailingElement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ export function TextFieldTrailingElement({
onClick={onToggleButtonClick}
className={cx('text-neutral-10 dark:text-neutral-92')}
>
{isContentVisible ? <VisibilityOn /> : <VisibilityOff />}
{isContentVisible ? (
<VisibilityOn width={20} height={20} />
) : (
<VisibilityOff width={20} height={20} />
)}
</button>
);
}
Expand Down
125 changes: 60 additions & 65 deletions apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,12 @@
// Modifications Copyright (c) 2024 IOTA Stiftung
// SPDX-License-Identifier: Apache-2.0

import { Button } from '_app/shared/ButtonUI';
// import { Button } from '_app/shared/ButtonUI';
import { CardLayout } from '_app/shared/card-layout';
import { Text } from '_app/shared/text';
import Alert from '_components/alert';
import Loading from '_components/loading';
import { HideShowDisplayBox } from '_src/ui/app/components/HideShowDisplayBox';
import { ArrowLeft16, Check12 } from '@iota/icons';
import { ThumbUpFill32 } from '@iota/icons';
import { Button, ButtonType, Checkbox, TextArea } from '@iota/apps-ui-kit';
import { useEffect, useMemo, useState } from 'react';
import { Navigate, useLocation, useNavigate, useParams } from 'react-router-dom';

Expand Down Expand Up @@ -72,85 +71,81 @@ export function BackupMnemonicPage() {
/>
</CardLayout>
) : (
<CardLayout
icon={isOnboardingFlow ? 'success' : undefined}
title={
isOnboardingFlow ? 'Wallet Created Successfully!' : 'Backup Recovery Phrase'
}
>
<div className="flex h-full w-full flex-grow flex-col flex-nowrap">
<div className="mb-5 flex flex-grow flex-col flex-nowrap">
<div className="mb-1 mt-7.5 text-center">
<Text variant="caption" color="steel-darker" weight="bold">
Recovery phrase
</Text>
<div className="flex max-h-popup-height w-full max-w-popup-width flex-grow flex-col items-center justify-between gap-4 bg-white p-md text-center">
<div className="flex flex-col gap-4">
<div className="flex flex-col items-center gap-6 px-md py-sm">
{isOnboardingFlow && (
<div className="flex w-fit rounded-lg bg-tertiary-90 p-[10px]">
<ThumbUpFill32
width={20}
height={20}
className="text-tertiary-30"
/>
</div>
)}
<h3 className="text-[24px] text-headline-md text-neutral-10">
{isOnboardingFlow
? 'Wallet Created Successfully!'
: 'Backup Recovery Phrase'}
</h3>
</div>
<div className="flex flex-col items-center gap-1 text-center">
<div className="text-[14px] text-title-sm text-neutral-60">
Mnemonic
</div>
<div className="mb-3.5 mt-2 text-center">
<Text variant="pBodySmall" color="steel-dark" weight="normal">
Your recovery phrase makes it easy to back up and restore your
account.
</Text>
<div className="text-[14px] text-title-sm text-neutral-60">
Your recovery phrase makes it easy to
<br />
back up and restore your account.
</div>
</div>

<div className="flex flex-grow flex-col flex-nowrap">
<Loading loading={passphraseMutation.isPending}>
{passphraseMutation.data ? (
<HideShowDisplayBox value={passphraseMutation.data} hideCopy />
<>
<TextArea
value={passphraseMutation.data.join(' ')}
isVisibilityToggleEnabled
rows={5}
/>
evavirseda marked this conversation as resolved.
Show resolved Hide resolved
</>
) : (
<Alert>
{(passphraseMutation.error as Error)?.message ||
'Something went wrong'}
</Alert>
)}
</Loading>
<div className="mb-1 mt-3.75 text-center">
<Text variant="caption" color="steel-dark" weight="semibold">
Warning
</Text>
</div>
<div>
<div className="mb-1 text-[14px] text-title-sm text-neutral-60">
Warning
</div>
<div className="mb-1 text-center">
<Text variant="pBodySmall" color="steel-dark" weight="normal">
Never disclose your secret recovery phrase. Anyone can take over
your account with it.
</Text>
<div className="text-[14px] text-title-sm text-neutral-60">
Never disclose your secret recovery phrase.
<br />
Anyone can take over your account with it.
</div>
panteleymonchuk marked this conversation as resolved.
Show resolved Hide resolved
<div className="flex-1" />
{isOnboardingFlow ? (
<div className="mb- mt-5 flex w-full text-left">
<label className="text-iota-dark relative mb-0 mr-5 flex h-5 cursor-pointer items-center justify-center gap-1.25">
<input
type="checkbox"
name="agree"
id="agree"
className="peer/agree invisible ml-2"
onChange={() => setPasswordCopied(!passwordCopied)}
/>
<span className="peer-checked/agree:bg-success absolute left-0 top-0 flex h-5 w-5 items-center justify-center rounded border border-gray-50 bg-white shadow-button peer-checked/agree:shadow-none">
<Check12 className="text-body font-semibold text-white" />
</span>

<Text
variant="bodySmall"
color="steel-dark"
weight="normal"
>
I saved my recovery phrase
</Text>
</label>
</div>
) : null}
</div>
</div>
<div className={'flex w-full flex-col gap-2'}>
{isOnboardingFlow ? (
<div className="flex w-full text-left">
<Checkbox
label={'I saved my recovery phrase'}
onChange={() => setPasswordCopied(!passwordCopied)}
/>
</div>
) : null}
<Button
type="button"
size="tall"
variant="primary"
onClick={() => navigate('/')}
type={ButtonType.Primary}
disabled={!passwordCopied && isOnboardingFlow}
to="/"
text="Open Iota Wallet"
after={
<ArrowLeft16 className="rotate-135 text-pBodySmall font-normal" />
}
text="Open Wallet"
/>
</div>
</CardLayout>
</div>
)}
</Loading>
);
Expand Down
Loading