-
Notifications
You must be signed in to change notification settings - Fork 36
/
WalletSetupConnectHardwareWalletStepRevamp.tsx
50 lines (48 loc) · 1.57 KB
/
WalletSetupConnectHardwareWalletStepRevamp.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { Banner, Loader } from '@lace/common';
import { TranslationsFor } from '@ui/utils/types';
import React from 'react';
import ExclamationCircleIcon from '../../assets/icons/exclamation-circle.svg';
import { WalletTimelineSteps } from '../WalletSetup';
import styles from './WalletSetupConnectHardwareWalletStepRevamp.module.scss';
import { WalletSetupStepLayoutRevamp } from './WalletSetupStepLayoutRevamp';
export interface WalletSetupConnectHardwareWalletStepProps {
onBack: () => void;
translations: TranslationsFor<'title' | 'subTitle' | 'errorMessage' | 'errorCta'>;
state: 'loading' | 'error';
onRetry?: () => void;
}
export const WalletSetupConnectHardwareWalletStepRevamp = ({
onBack,
translations,
state,
onRetry
}: WalletSetupConnectHardwareWalletStepProps): React.ReactElement => (
<WalletSetupStepLayoutRevamp
onBack={onBack}
title={translations.title}
description={translations.subTitle}
currentTimelineStep={WalletTimelineSteps.CONNECT_WALLET}
isHardwareWallet
onNext={onRetry}
nextLabel={translations.errorCta}
>
<div className={styles.wrapper}>
{state === 'loading' && (
<div className={styles.loader}>
<Loader />
</div>
)}
{state === 'error' && (
<>
<img
src={ExclamationCircleIcon}
className={styles.errorImage}
alt="hardware wallet connection error image"
data-testid="error-image"
/>
<Banner message={translations.errorMessage} />
</>
)}
</div>
</WalletSetupStepLayoutRevamp>
);