From 946d40aa328aad3ec9bd9440e4313983d220e63b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Szymon=20Mas=C5=82owski?= Date: Tue, 21 May 2024 13:59:43 +0200 Subject: [PATCH] fix: eliminate lint warnings (#1170) --- .../multi-wallet/create-wallet/context.tsx | 27 +++++---- .../multi-wallet/hardware-wallet/context.tsx | 2 +- .../multi-wallet/restore-wallet/context.tsx | 60 ++++++++++++------- .../ListEmptyState/ListEmptyState.tsx | 4 +- 4 files changed, 56 insertions(+), 37 deletions(-) diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/context.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/context.tsx index 7314e0da4..7189c0cc1 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/context.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/create-wallet/context.tsx @@ -1,7 +1,7 @@ import { CreateWalletParams } from '@hooks'; import { Wallet } from '@lace/cardano'; import { walletRoutePaths } from '@routes'; -import React, { createContext, useContext, useMemo, useState } from 'react'; +import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'; import { useHistory } from 'react-router'; import { useHotWalletCreation } from '../useHotWalletCreation'; import { useWalletOnboarding } from '../walletOnboardingContext'; @@ -44,24 +44,27 @@ export const CreateWalletProvider = ({ children }: Props): React.ReactElement => }); const [step, setStep] = useState(WalletCreateStep.RecoveryPhraseWriteDown); - const generateMnemonic = () => { + const generateMnemonic = useCallback(() => { setCreateWalletData((prevState) => ({ ...prevState, mnemonic: Wallet.KeyManagement.util.generateMnemonicWords() })); - }; + }, [setCreateWalletData]); - const onNameAndPasswordChange: OnNameAndPasswordChange = ({ name, password }) => { - setCreateWalletData((prevState) => ({ ...prevState, name, password })); - }; + const onNameAndPasswordChange: OnNameAndPasswordChange = useCallback( + ({ name, password }) => { + setCreateWalletData((prevState) => ({ ...prevState, name, password })); + }, + [setCreateWalletData] + ); - const finalizeWalletCreation = async () => { + const finalizeWalletCreation = useCallback(async () => { const wallet = await createHotWallet(); await sendPostWalletAddAnalytics({ extendedAccountPublicKey: wallet.source.account.extendedAccountPublicKey, walletAddedPostHogAction: postHogActions.create.WALLET_ADDED }); clearSecrets(); - }; + }, [clearSecrets, createHotWallet, postHogActions.create.WALLET_ADDED, sendPostWalletAddAnalytics]); - const next = async () => { + const next = useCallback(async () => { switch (step) { case WalletCreateStep.RecoveryPhraseWriteDown: { setFormDirty(true); @@ -78,9 +81,9 @@ export const CreateWalletProvider = ({ children }: Props): React.ReactElement => break; } } - }; + }, [finalizeWalletCreation, history, setFormDirty, step]); - const back = () => { + const back = useCallback(() => { switch (step) { case WalletCreateStep.RecoveryPhraseWriteDown: { history.push(walletRoutePaths.newWallet.root); @@ -97,7 +100,7 @@ export const CreateWalletProvider = ({ children }: Props): React.ReactElement => break; } } - }; + }, [generateMnemonic, history, setFormDirty, step]); const state = useMemo( () => ({ diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/context.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/context.tsx index 0210377e3..fc5c4b086 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/context.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/context.tsx @@ -102,7 +102,7 @@ export const HardwareWalletProvider = ({ children }: HardwareWalletProviderProps break; } } - }, [closeConnection, history, step]); + }, [closeConnection, history, setFormDirty, step]); const back = useCallback(() => { switch (step) { diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/context.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/context.tsx index b0add4783..779954cf4 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/context.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/restore-wallet/context.tsx @@ -61,23 +61,32 @@ export const RestoreWalletProvider = ({ children }: Props): React.ReactElement = [setCreateWalletData, setFormDirty] ); - const onRecoveryPhraseLengthChange: OnRecoveryPhraseLengthChange = (length) => { - setCreateWalletData((prevState) => ({ ...prevState, mnemonic: Array.from({ length }, () => '') })); - }; - - const onNameAndPasswordChange: OnNameAndPasswordChange = ({ name, password }) => { - setCreateWalletData((prevState) => ({ ...prevState, name, password })); - }; - - const sendHdWalletAnalyticEvent = async ({ wallet }: Wallet.CardanoWallet) => { - const addresses = await firstValueFrom(wallet.addresses$.pipe(filter((a) => a.length > 0))); - const hdWalletDiscovered = addresses.some((addr) => !isScriptAddress(addr) && addr.index > 0); - if (hdWalletDiscovered) { - await analytics.sendEventToPostHog(postHogActions.restore.HD_WALLET); - } - }; + const onRecoveryPhraseLengthChange: OnRecoveryPhraseLengthChange = useCallback( + (length) => { + setCreateWalletData((prevState) => ({ ...prevState, mnemonic: Array.from({ length }, () => '') })); + }, + [setCreateWalletData] + ); + + const onNameAndPasswordChange: OnNameAndPasswordChange = useCallback( + ({ name, password }) => { + setCreateWalletData((prevState) => ({ ...prevState, name, password })); + }, + [setCreateWalletData] + ); - const finalizeWalletRestoration = async () => { + const sendHdWalletAnalyticEvent = useCallback( + async ({ wallet }: Wallet.CardanoWallet) => { + const addresses = await firstValueFrom(wallet.addresses$.pipe(filter((a) => a.length > 0))); + const hdWalletDiscovered = addresses.some((addr) => !isScriptAddress(addr) && addr.index > 0); + if (hdWalletDiscovered) { + await analytics.sendEventToPostHog(postHogActions.restore.HD_WALLET); + } + }, + [analytics, postHogActions.restore.HD_WALLET] + ); + + const finalizeWalletRestoration = useCallback(async () => { const wallet = await createWallet(); void sendPostWalletAddAnalytics({ extendedAccountPublicKey: wallet.source.account.extendedAccountPublicKey, @@ -88,9 +97,16 @@ export const RestoreWalletProvider = ({ children }: Props): React.ReactElement = deleteFromLocalStorage('isForgotPasswordFlow'); } clearSecrets(); - }; - - const next = async () => { + }, [ + clearSecrets, + createWallet, + forgotPasswordFlowActive, + postHogActions.restore.WALLET_ADDED, + sendHdWalletAnalyticEvent, + sendPostWalletAddAnalytics + ]); + + const next = useCallback(async () => { switch (step) { case WalletRestoreStep.RecoveryPhrase: setStep(WalletRestoreStep.Setup); @@ -99,9 +115,9 @@ export const RestoreWalletProvider = ({ children }: Props): React.ReactElement = history.push(walletRoutePaths.assets); break; } - }; + }, [history, step]); - const back = () => { + const back = useCallback(() => { switch (step) { case WalletRestoreStep.RecoveryPhrase: setFormDirty(false); @@ -111,7 +127,7 @@ export const RestoreWalletProvider = ({ children }: Props): React.ReactElement = setStep(WalletRestoreStep.RecoveryPhrase); break; } - }; + }, [history, setFormDirty, step]); const state = useMemo( () => ({ diff --git a/packages/core/src/ui/components/ListEmptyState/ListEmptyState.tsx b/packages/core/src/ui/components/ListEmptyState/ListEmptyState.tsx index 04ac7958f..f83481667 100644 --- a/packages/core/src/ui/components/ListEmptyState/ListEmptyState.tsx +++ b/packages/core/src/ui/components/ListEmptyState/ListEmptyState.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import React, { VFC } from 'react'; import { ReactComponent as NeutralFaceIcon } from '../../assets/icons/neutral-face.component.svg'; import { ReactComponent as SadFaceIcon } from '../../assets/icons/sad-face.component.svg'; import styles from './ListEmptyState.module.scss'; -export const ListEmptyState = (props: { message: React.ReactNode; icon: 'sad-face' | 'neutral-face' }) => { +export const ListEmptyState: VFC<{ message: React.ReactNode; icon: 'sad-face' | 'neutral-face' }> = (props) => { const Icon: Record = { 'sad-face': , 'neutral-face':