Skip to content

Commit

Permalink
fix: [lw-12325] fix code duplications reported by sonarcloud
Browse files Browse the repository at this point in the history
  • Loading branch information
@vetalcore
vetalcore committed Feb 20, 2025
1 parent 958032a commit 5bb82b0
Show file tree
Hide file tree
Showing 10 changed files with 394 additions and 565 deletions.
1 change: 0 additions & 1 deletion ...let/src/views/browser-view/features/dapp/explorer/components/Button/IogButton/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,6 @@
padding: 60px 68px;
height: auto;
border: 1px dashed $color-blue-bell;
border-radius: 8px;
background: $color-port-gore;
box-shadow: 0px 0px 20px rgba($color-black, 0.1);
border-radius: 12px;
Expand Down
2 changes: 1 addition & 1 deletion ...s/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@

&:after {
content: '';
font-family: auto;
font-family: auto, sans-serif;
height: 100%;
width: 100%;
}
Expand Down
74 changes: 54 additions & 20 deletions ...src/views/browser-view/features/multi-wallet/create-wallet/steps/ChooseRecoveryMethod.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,28 +22,32 @@ import styles from './ChooseRecoveryMethod.module.scss';

const FAQ_URL = process.env.FAQ_URL;

export const ChooseRecoveryMethod: VFC = () => {
const { postHogActions } = useWalletOnboarding();
const { back, next, recoveryMethod, setRecoveryMethod } = useCreateWallet();
const analytics = useAnalyticsContext();

const handleNext = () => {
void analytics.sendEventToPostHog(postHogActions.create.CHOOSE_RECOVERY_MODE_NEXT_CLICK);
next();
};
type ChooseRecoveryMethodBaseProps = {
title: React.ReactNode;
description: React.ReactNode;
back: () => void;
handleNext: () => void;
recoveryMethod: RecoveryMethod;
setRecoveryMethod: (value: RecoveryMethod) => void;
flow: 'create' | 'restore';
};

export const ChooseRecoveryMethodBase: VFC<ChooseRecoveryMethodBaseProps> = ({
title,
description,
back,
handleNext,
recoveryMethod,
setRecoveryMethod,
flow
}) => {
const analytics = useAnalyticsContext();
const { postHogActions } = useWalletOnboarding();
return (
<>
<WalletSetupStepLayoutRevamp
title={i18n.t('paperWallet.chooseRecoveryMethod.title')}
description={
<Trans
i18nKey="paperWallet.chooseRecoveryMethod.description"
components={{
a: <a href={FAQ_URL} target="_blank" rel="noopener noreferrer" data-testid="faq-what-is-paper-wallet" />
}}
/>
}
title={title}
description={description}
onBack={back}
onNext={handleNext}
currentTimelineStep={WalletTimelineSteps.CHOOSE_RECOVERY_METHOD}
Expand All @@ -60,7 +64,7 @@ export const ChooseRecoveryMethod: VFC = () => {
render: ({ optionElement, onOptionClick }) => (
<Card.Outlined
onClick={() => {
void analytics.sendEventToPostHog(postHogActions.create.CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK);
void analytics.sendEventToPostHog(postHogActions[flow].CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK);
onOptionClick();
}}
className={cn({
Expand Down Expand Up @@ -94,7 +98,7 @@ export const ChooseRecoveryMethod: VFC = () => {
render: ({ optionElement, onOptionClick }) => (
<Card.Outlined
onClick={() => {
void analytics.sendEventToPostHog(postHogActions.create.CHOOSE_RECOVERY_MODE_PAPER_CLICK);
void analytics.sendEventToPostHog(postHogActions[flow].CHOOSE_RECOVERY_MODE_PAPER_CLICK);
onOptionClick();
}}
className={cn(styles.paperWalletRadioGroupItem, {
Expand Down Expand Up @@ -144,3 +148,33 @@ export const ChooseRecoveryMethod: VFC = () => {
</>
);
};

export const ChooseRecoveryMethod: VFC = () => {
const { postHogActions } = useWalletOnboarding();
const { back, next, recoveryMethod, setRecoveryMethod } = useCreateWallet();
const analytics = useAnalyticsContext();

const handleNext = () => {
void analytics.sendEventToPostHog(postHogActions.create.CHOOSE_RECOVERY_MODE_NEXT_CLICK);
next();
};

return (
<ChooseRecoveryMethodBase
title={i18n.t('paperWallet.chooseRecoveryMethod.title')}
description={
<Trans
i18nKey="paperWallet.chooseRecoveryMethod.description"
components={{
a: <a href={FAQ_URL} target="_blank" rel="noopener noreferrer" data-testid="faq-what-is-paper-wallet" />
}}
/>
}
back={back}
handleNext={handleNext}
recoveryMethod={recoveryMethod}
setRecoveryMethod={setRecoveryMethod}
flow="create"
/>
);
};
132 changes: 17 additions & 115 deletions ...src/views/browser-view/features/multi-wallet/restore-wallet/steps/ChooseRestoreMethod.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,11 @@
/* eslint-disable react/no-multi-comp */
import React, { VFC } from 'react';
import { WalletSetupStepLayoutRevamp, WalletTimelineSteps } from '@lace/core';
import cn from 'classnames';
import { useRestoreWallet } from '../context';
import {
Box,
Card,
Flex,
RadioButtonGroup,
Text,
PaperwalletComponent as PaperWalletIcon,
MnemonicComponent as MnemonicWordsIcon
} from '@input-output-hk/lace-ui-toolkit';
import styles from './ChooseRestoreMethod.module.scss';
import { i18n } from '@lace/translation';

import { RecoveryMethod } from '../../types';
import { Trans } from 'react-i18next';
import { useWalletOnboarding } from '../../walletOnboardingContext';
import { useAnalyticsContext } from '@providers';
import { ChooseRecoveryMethodBase } from '../../create-wallet/steps/ChooseRecoveryMethod';

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

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

return (
<>
<WalletSetupStepLayoutRevamp
title={i18n.t('paperWallet.chooseRestoreMethod.title')}
description={
<Trans
i18nKey="paperWallet.chooseRestoreMethod.description"
components={{
a: (
<a
href={FAQ_URL}
target="_blank"
rel="noopener noreferrer"
data-testid="faq-what-is-paper-wallet-url"
/>
)
}}
/>
}
onBack={back}
onNext={handleNext}
currentTimelineStep={WalletTimelineSteps.CHOOSE_RECOVERY_METHOD}
>
<Flex flexDirection="column" w="$fill" h="$fill">
<RadioButtonGroup
selectedValue={recoveryMethod}
onValueChange={(value: RecoveryMethod) => setRecoveryMethod(value)}
className={styles.noPadding}
options={[
{
value: 'mnemonic',
label: i18n.t('core.walletSetupStep.recoveryPhrase'),
render: ({ optionElement, onOptionClick }) => (
<Card.Outlined
onClick={() => {
void analytics.sendEventToPostHog(postHogActions.restore.CHOOSE_RECOVERY_MODE_MNEMONIC_CLICK);
onOptionClick();
}}
className={cn({
[styles.selectedRestoreMethod]: recoveryMethod === 'mnemonic',
[styles.optionCard]: recoveryMethod !== 'mnemonic'
})}
>
<Flex p="$16" gap="$24" justifyContent="space-between" className={styles.pointer}>
<Flex flexDirection="column">
<Flex mb="$8">
<Text.Body.Normal weight="$medium" color="primary" data-testid="mnemonic-words-label">
{optionElement}
</Text.Body.Normal>
</Flex>
<Box pl="$40">
<Text.Body.Normal weight="$medium" color="secondary" data-testid="mnemonic-words-description">
{i18n.t('paperWallet.chooseRecoveryMethod.mnemonicDescription')}
</Text.Body.Normal>
</Box>
</Flex>
<Flex>
<MnemonicWordsIcon className={styles.restoreIcon} data-testid="mnemonic-words-icon" />
</Flex>
</Flex>
</Card.Outlined>
)
},
{
value: 'paper',
label: i18n.t('paperWallet.chooseRestoreMethod.option.paper'),
render: ({ optionElement, onOptionClick }) => (
<Card.Outlined
onClick={() => {
void analytics.sendEventToPostHog(postHogActions.restore.CHOOSE_RECOVERY_MODE_PAPER_CLICK);
onOptionClick();
}}
className={cn(styles.paperWalletRadioGroupItem, {
[styles.selectedRestoreMethod]: recoveryMethod === 'paper',
[styles.optionCard]: recoveryMethod !== 'paper'
})}
>
<Flex p="$16" gap="$24" justifyContent="space-between" className={styles.pointer}>
<Flex flexDirection="column">
<Flex mb="$8" gap="$8" alignItems="center">
<Text.Body.Normal weight="$medium" color="primary" data-testid="paper-wallet-label">
{optionElement}
</Text.Body.Normal>
</Flex>
<Box pl="$40">
<Text.Body.Normal weight="$medium" color="secondary" data-testid="paper-wallet-description">
{i18n.t('paperWallet.chooseRecoveryMethod.paperWallet.description')}
</Text.Body.Normal>
</Box>
</Flex>
<Flex>
<PaperWalletIcon className={styles.restoreIcon} data-testid="paper-wallet-icon" />
</Flex>
</Flex>
</Card.Outlined>
)
}
]}
/>
</Flex>
</WalletSetupStepLayoutRevamp>
</>
<ChooseRecoveryMethodBase
title={i18n.t('paperWallet.chooseRestoreMethod.title')}
description={
<Trans
i18nKey="paperWallet.chooseRestoreMethod.description"
components={{
a: <a href={FAQ_URL} target="_blank" rel="noopener noreferrer" data-testid="faq-what-is-paper-wallet-url" />
}}
/>
}
back={back}
handleNext={handleNext}
recoveryMethod={recoveryMethod}
setRecoveryMethod={setRecoveryMethod}
flow="create"
/>
);
};
Loading

0 comments on commit 5bb82b0

Please sign in to comment.