on master help sign in
perf: debounce Mnemonic login eager api call
ecd2e0btomholford
src/views/Login/Mnemonic.tsx+27−21
@@ -6,7 +6,7 @@ import { Grid } from 'indigo-react';
6import { useWallet } from 'store/wallet';
6import { useWallet } from 'store/wallet';
7
7
8import { walletFromMnemonic } from 'lib/wallet';
8import { walletFromMnemonic } from 'lib/wallet';
9−import { DEFAULT_HD_PATH, WALLET_TYPES } from 'lib/constants';
9+import { DEFAULT_HD_PATH, ONE_SECOND, WALLET_TYPES } from 'lib/constants';
10import useLoginView from 'lib/useLoginView';
10import useLoginView from 'lib/useLoginView';
11import { MnemonicInput, HdPathInput, PassphraseInput } from 'form/Inputs';
11import { MnemonicInput, HdPathInput, PassphraseInput } from 'form/Inputs';
12import {
12import {
@@ -25,6 +25,7 @@ import HeaderPane from 'components/L2/Window/HeaderPane';
25import BodyPane from 'components/L2/Window/BodyPane';
25import BodyPane from 'components/L2/Window/BodyPane';
26import AdvancedOptions from 'components/L2/Headers/AdvancedOptions';
26import AdvancedOptions from 'components/L2/Headers/AdvancedOptions';
27import { Row } from '@tlon/indigo-react';
27import { Row } from '@tlon/indigo-react';
28+import { debounce } from 'lodash';
28
29
29interface MnemonicProps {
30interface MnemonicProps {
30 className?: string;
31 className?: string;
@@ -52,26 +53,31 @@ export default function Mnemonic({ className, goHome }: MnemonicProps) {
52 }, [skipValidation]);
53 }, [skipValidation]);
53
54
54 // when the properties change, re-derive wallet and set global state
55 // when the properties change, re-derive wallet and set global state
55− const onValues = useCallback(
56− ({ valid, values }) => {
56+ const debouncedOnValues = debounce(({ valid, values }) => {
57+ console.log('values');
57− if (valid) {
58+ if (valid) {
58− setWalletHdPath(values.hdpath);
59+ setWalletHdPath(values.hdpath);
59− setAuthMnemonic(Just(values.mnemonic));
60+ setAuthMnemonic(Just(values.mnemonic));
60− setWallet(
61+ setWallet(
61− walletFromMnemonic(
62+ walletFromMnemonic(
62− values.mnemonic,
63+ values.mnemonic,
63− values.hdpath,
64+ values.hdpath,
64− values.passphrase,
65+ values.passphrase,
65− skipValidation
66+ skipValidation
66− )
67+ )
67− );
68+ );
68− } else {
69+ } else {
69− setAuthMnemonic(Nothing());
70+ setAuthMnemonic(Nothing());
70− setWallet(Nothing());
71+ setWallet(Nothing());
71− }
72+ }
72− },
73+ }, ONE_SECOND);
74+
75+ const onValues = useCallback(debouncedOnValues, [
73− [setAuthMnemonic, setWallet, setWalletHdPath, skipValidation]
76+ setAuthMnemonic,
77+ setWallet,
78+ setWalletHdPath,
79+ skipValidation,
74− );
80+ ]);
75
81
76 const initialValues = {
82 const initialValues = {
77 hdpath: DEFAULT_HD_PATH,
83 hdpath: DEFAULT_HD_PATH,