Skip to content

Commit 5bb82b0

Browse files
vetalcorevetalcore
committed
fix: [lw-12325] fix code duplications reported by sonarcloud
1 parent 958032a commit 5bb82b0

File tree

10 files changed

+394
-565
lines changed

10 files changed

+394
-565
lines changed

‎apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Button/IogButton/styles.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@
106106
padding: 60px 68px;
107107
height: auto;
108108
border: 1px dashed $color-blue-bell;
109-
border-radius: 8px;
110109
background: $color-port-gore;
111110
box-shadow: 0px 0px 20px rgba($color-black, 0.1);
112111
border-radius: 12px;

‎apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/styles.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363

6464
&:after {
6565
content: '';
66-
font-family: auto;
66+
font-family: auto, sans-serif;
6767
height: 100%;
6868
width: 100%;
6969
}

‎apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/steps/ChooseRecoveryMethod.tsx

Lines changed: 54 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,28 +22,32 @@ import styles from './ChooseRecoveryMethod.module.scss';
2222

2323
const FAQ_URL = process.env.FAQ_URL;
2424

25-
export const ChooseRecoveryMethod: VFC = () => {
26-
const { postHogActions } = useWalletOnboarding();
27-
const { back, next, recoveryMethod, setRecoveryMethod } = useCreateWallet();
28-
const analytics = useAnalyticsContext();
29-
30-
const handleNext = () => {
31-
void analytics.sendEventToPostHog(postHogActions.create.CHOOSE_RECOVERY_MODE_NEXT_CLICK);
32-
next();
33-
};
25+
type ChooseRecoveryMethodBaseProps = {
26+
title: React.ReactNode;
27+
description: React.ReactNode;
28+
back: () => void;
29+
handleNext: () => void;
30+
recoveryMethod: RecoveryMethod;
31+
setRecoveryMethod: (value: RecoveryMethod) => void;
32+
flow: 'create' | 'restore';
33+
};
3434

35+
export const ChooseRecoveryMethodBase: VFC<ChooseRecoveryMethodBaseProps> = ({
36+
title,
37+
description,
38+
back,
39+
handleNext,
40+
recoveryMethod,
41+
setRecoveryMethod,
42+
flow
43+
}) => {
44+
const analytics = useAnalyticsContext();
45+
const { postHogActions } = useWalletOnboarding();
3546
return (
3647
<>
3748
<WalletSetupStepLayoutRevamp
38-
title={i18n.t('paperWallet.chooseRecoveryMethod.title')}
39-
description={
40-
<Trans
41-
i18nKey="paperWallet.chooseRecoveryMethod.description"
42-
components={{
43-
a: <a href={FAQ_URL} target="_blank" rel="noopener noreferrer" data-testid="faq-what-is-paper-wallet" />
44-
}}
45-
/>
46-
}
49+
title={title}
50+
description={description}
4751
onBack={back}
4852
onNext={handleNext}
4953
currentTimelineStep={WalletTimelineSteps.CHOOSE_RECOVERY_METHOD}
@@ -60,7 +64,7 @@ export const ChooseRecoveryMethod: VFC = () => {
6064
render: ({ optionElement, onOptionClick }) => (
6165
<Card.Outlined
6266
onClick={() => {
63-
void analytics.sendEventToPostHog(postHogActions.create.CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK);
67+
void analytics.sendEventToPostHog(postHogActions[flow].CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK);
6468
onOptionClick();
6569
}}
6670
className={cn({
@@ -94,7 +98,7 @@ export const ChooseRecoveryMethod: VFC = () => {
9498
render: ({ optionElement, onOptionClick }) => (
9599
<Card.Outlined
96100
onClick={() => {
97-
void analytics.sendEventToPostHog(postHogActions.create.CHOOSE_RECOVERY_MODE_PAPER_CLICK);
101+
void analytics.sendEventToPostHog(postHogActions[flow].CHOOSE_RECOVERY_MODE_PAPER_CLICK);
98102
onOptionClick();
99103
}}
100104
className={cn(styles.paperWalletRadioGroupItem, {
@@ -144,3 +148,33 @@ export const ChooseRecoveryMethod: VFC = () => {
144148
</>
145149
);
146150
};
151+
152+
export const ChooseRecoveryMethod: VFC = () => {
153+
const { postHogActions } = useWalletOnboarding();
154+
const { back, next, recoveryMethod, setRecoveryMethod } = useCreateWallet();
155+
const analytics = useAnalyticsContext();
156+
157+
const handleNext = () => {
158+
void analytics.sendEventToPostHog(postHogActions.create.CHOOSE_RECOVERY_MODE_NEXT_CLICK);
159+
next();
160+
};
161+
162+
return (
163+
<ChooseRecoveryMethodBase
164+
title={i18n.t('paperWallet.chooseRecoveryMethod.title')}
165+
description={
166+
<Trans
167+
i18nKey="paperWallet.chooseRecoveryMethod.description"
168+
components={{
169+
a: <a href={FAQ_URL} target="_blank" rel="noopener noreferrer" data-testid="faq-what-is-paper-wallet" />
170+
}}
171+
/>
172+
}
173+
back={back}
174+
handleNext={handleNext}
175+
recoveryMethod={recoveryMethod}
176+
setRecoveryMethod={setRecoveryMethod}
177+
flow="create"
178+
/>
179+
);
180+
};

‎apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/steps/ChooseRestoreMethod.tsx

Lines changed: 17 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,11 @@
1-
/* eslint-disable react/no-multi-comp */
21
import React, { VFC } from 'react';
3-
import { WalletSetupStepLayoutRevamp, WalletTimelineSteps } from '@lace/core';
4-
import cn from 'classnames';
52
import { useRestoreWallet } from '../context';
6-
import {
7-
Box,
8-
Card,
9-
Flex,
10-
RadioButtonGroup,
11-
Text,
12-
PaperwalletComponent as PaperWalletIcon,
13-
MnemonicComponent as MnemonicWordsIcon
14-
} from '@input-output-hk/lace-ui-toolkit';
15-
import styles from './ChooseRestoreMethod.module.scss';
163
import { i18n } from '@lace/translation';
174

18-
import { RecoveryMethod } from '../../types';
195
import { Trans } from 'react-i18next';
206
import { useWalletOnboarding } from '../../walletOnboardingContext';
217
import { useAnalyticsContext } from '@providers';
8+
import { ChooseRecoveryMethodBase } from '../../create-wallet/steps/ChooseRecoveryMethod';
229

2310
const FAQ_URL = `${process.env.FAQ_URL}?question=what-is-paper-wallet`;
2411

@@ -33,106 +20,21 @@ export const ChooseRestoreMethod: VFC = () => {
3320
};
3421

3522
return (
36-
<>
37-
<WalletSetupStepLayoutRevamp
38-
title={i18n.t('paperWallet.chooseRestoreMethod.title')}
39-
description={
40-
<Trans
41-
i18nKey="paperWallet.chooseRestoreMethod.description"
42-
components={{
43-
a: (
44-
<a
45-
href={FAQ_URL}
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
data-testid="faq-what-is-paper-wallet-url"
49-
/>
50-
)
51-
}}
52-
/>
53-
}
54-
onBack={back}
55-
onNext={handleNext}
56-
currentTimelineStep={WalletTimelineSteps.CHOOSE_RECOVERY_METHOD}
57-
>
58-
<Flex flexDirection="column" w="$fill" h="$fill">
59-
<RadioButtonGroup
60-
selectedValue={recoveryMethod}
61-
onValueChange={(value: RecoveryMethod) => setRecoveryMethod(value)}
62-
className={styles.noPadding}
63-
options={[
64-
{
65-
value: 'mnemonic',
66-
label: i18n.t('core.walletSetupStep.recoveryPhrase'),
67-
render: ({ optionElement, onOptionClick }) => (
68-
<Card.Outlined
69-
onClick={() => {
70-
void analytics.sendEventToPostHog(postHogActions.restore.CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK);
71-
onOptionClick();
72-
}}
73-
className={cn({
74-
[styles.selectedRestoreMethod]: recoveryMethod === 'mnemonic',
75-
[styles.optionCard]: recoveryMethod !== 'mnemonic'
76-
})}
77-
>
78-
<Flex p="$16" gap="$24" justifyContent="space-between" className={styles.pointer}>
79-
<Flex flexDirection="column">
80-
<Flex mb="$8">
81-
<Text.Body.Normal weight="$medium" color="primary" data-testid="mnemonic-words-label">
82-
{optionElement}
83-
</Text.Body.Normal>
84-
</Flex>
85-
<Box pl="$40">
86-
<Text.Body.Normal weight="$medium" color="secondary" data-testid="mnemonic-words-description">
87-
{i18n.t('paperWallet.chooseRecoveryMethod.mnemonicDescription')}
88-
</Text.Body.Normal>
89-
</Box>
90-
</Flex>
91-
<Flex>
92-
<MnemonicWordsIcon className={styles.restoreIcon} data-testid="mnemonic-words-icon" />
93-
</Flex>
94-
</Flex>
95-
</Card.Outlined>
96-
)
97-
},
98-
{
99-
value: 'paper',
100-
label: i18n.t('paperWallet.chooseRestoreMethod.option.paper'),
101-
render: ({ optionElement, onOptionClick }) => (
102-
<Card.Outlined
103-
onClick={() => {
104-
void analytics.sendEventToPostHog(postHogActions.restore.CHOOSE_RECOVERY_MODE_PAPER_CLICK);
105-
onOptionClick();
106-
}}
107-
className={cn(styles.paperWalletRadioGroupItem, {
108-
[styles.selectedRestoreMethod]: recoveryMethod === 'paper',
109-
[styles.optionCard]: recoveryMethod !== 'paper'
110-
})}
111-
>
112-
<Flex p="$16" gap="$24" justifyContent="space-between" className={styles.pointer}>
113-
<Flex flexDirection="column">
114-
<Flex mb="$8" gap="$8" alignItems="center">
115-
<Text.Body.Normal weight="$medium" color="primary" data-testid="paper-wallet-label">
116-
{optionElement}
117-
</Text.Body.Normal>
118-
</Flex>
119-
<Box pl="$40">
120-
<Text.Body.Normal weight="$medium" color="secondary" data-testid="paper-wallet-description">
121-
{i18n.t('paperWallet.chooseRecoveryMethod.paperWallet.description')}
122-
</Text.Body.Normal>
123-
</Box>
124-
</Flex>
125-
<Flex>
126-
<PaperWalletIcon className={styles.restoreIcon} data-testid="paper-wallet-icon" />
127-
</Flex>
128-
</Flex>
129-
</Card.Outlined>
130-
)
131-
}
132-
]}
133-
/>
134-
</Flex>
135-
</WalletSetupStepLayoutRevamp>
136-
</>
23+
<ChooseRecoveryMethodBase
24+
title={i18n.t('paperWallet.chooseRestoreMethod.title')}
25+
description={
26+
<Trans
27+
i18nKey="paperWallet.chooseRestoreMethod.description"
28+
components={{
29+
a: <a href={FAQ_URL} target="_blank" rel="noopener noreferrer" data-testid="faq-what-is-paper-wallet-url" />
30+
}}
31+
/>
32+
}
33+
back={back}
34+
handleNext={handleNext}
35+
recoveryMethod={recoveryMethod}
36+
setRecoveryMethod={setRecoveryMethod}
37+
flow="create"
38+
/>
13739
);
13840
};

0 commit comments

Comments
 (0)