8344184620

Committed 19 Mar 2024 01:48PM UTC coverage: 53.437% (-0.4%) from 53.839%

Build # 8344184620

Build Type

push

github

Specific Base 985b04

Committed by

pczeglik-iohk

Commit Message

[LW-9871] Posthog events for multi wallet (#946)

* feat: multi wallet events

* feat: add wallet and account amount as user property

* fix: mock analytics

* fix: add missing dependency

* refactor: update property name

* fix: use correct passphrase event for recovery wallet flow

---------

Co-authored-by: Renan Ferreira <renan.ferreira@iohk.io>

Run Details

2293 of 5275 branches covered (43.47%)

Branch coverage included in aggregate %.

13 of 20 new or added lines in 4 files covered. (65.0%)

685 existing lines in 58 files now uncovered.

5239 of 8820 relevant lines covered (59.4%)

54.34 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

17.5

/packages/core/src/ui/components/WalletSetup/WalletSetupWalletNameStep.tsx

import React, { ChangeEvent, useMemo, useState } from 'react';
import { WalletSetupStepLayout, WalletTimelineSteps } from './WalletSetupStepLayout';
import { Input } from '@lace/common';
import styles from './WalletSetupRegisterStep.module.scss';
import { TranslationsFor } from '@ui/utils/types';

const nameShouldHaveRightLengthRegex = /^.{1,20}$/;

const validateName = (name: string) => nameShouldHaveRightLengthRegex.test(name);

export interface WalletSetupWalletNameStepProps {
  onBack: () => void;
  onNext: (walletName: string) => void;
  translations: TranslationsFor<'maxCharacters' | 'nameYourWallet' | 'create' | 'walletName' | 'chooseName'>;
  isHardwareWallet?: boolean;
  onChange?: (name: string) => void;
}

export const WalletSetupWalletNameStep = ({
  onBack,
  onNext,
  translations,
  isHardwareWallet = false,
  onChange
}: WalletSetupWalletNameStepProps): React.ReactElement => {
  const [isCreating, setIsCreating] = useState(false);
  const [isDirty, setIsDirty] = useState(false);
  const [walletName, setWalletName] = useState('');
  const isNameValid = useMemo(() => validateName(walletName), [walletName]);
  const validationError = useMemo(
    () => !isNameValid && translations.maxCharacters,
    [isNameValid, translations.maxCharacters]
  );

  const onSubmit = async () => {
    setIsCreating(true);
    setIsDirty(true);
    isNameValid && onNext(walletName);
    setIsCreating(false);
  };

  const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
    setIsDirty(true);
    setWalletName(e.target.value);
    onChange?.(e.target.value);
  };

  return (
    <WalletSetupStepLayout
      title={translations.nameYourWallet}
      onBack={onBack}
      isNextEnabled={!!walletName && !validationError}
      onNext={onSubmit}
      nextLabel={translations.create}
      isNextLoading={isCreating}
      currentTimelineStep={isHardwareWallet ? WalletTimelineSteps.NAME_WALLET : WalletTimelineSteps.WALLET_SETUP}
      isHardwareWallet={isHardwareWallet}
    >
      <p className={styles.subtitle}>{translations.chooseName}</p>
      <Input
        dataTestId="wallet-setup-register-name-input"
        className={styles.inputName}
        label={translations.walletName}
        value={walletName}
        onChange={handleNameChange}
        autoFocus
      />
      {isDirty && walletName && !isNameValid && (
        <p className={styles.formError} data-testid="wallet-setup-register-name-error">
          {validationError}
        </p>
      )}
    </WalletSetupStepLayout>
  );
};

1	import React, { ChangeEvent, useMemo, useState } from 'react';	2✔
2	import { WalletSetupStepLayout, WalletTimelineSteps } from './WalletSetupStepLayout';	2✔
3	import { Input } from '@lace/common';	2✔
4	import styles from './WalletSetupRegisterStep.module.scss';	2✔
5	import { TranslationsFor } from '@ui/utils/types';
6
7	const nameShouldHaveRightLengthRegex = /^.{1,20}$/;	2✔
8
9	const validateName = (name: string) => nameShouldHaveRightLengthRegex.test(name);	2✔
10
11	export interface WalletSetupWalletNameStepProps {
12	onBack: () => void;
13	onNext: (walletName: string) => void;
14	translations: TranslationsFor<'maxCharacters' \| 'nameYourWallet' \| 'create' \| 'walletName' \| 'chooseName'>;
15	isHardwareWallet?: boolean;
16	onChange?: (name: string) => void;
17	}
18
19	export const WalletSetupWalletNameStep = ({	2✔
20	onBack,
21	onNext,
22	translations,
23	isHardwareWallet = false,	×
24	onChange
25	}: WalletSetupWalletNameStepProps): React.ReactElement => {
26	const [isCreating, setIsCreating] = useState(false);	×
27	const [isDirty, setIsDirty] = useState(false);	×
28	const [walletName, setWalletName] = useState('');	×
29	const isNameValid = useMemo(() => validateName(walletName), [walletName]);	×
UNCOV 30	const validationError = useMemo(	×
UNCOV 31	() => !isNameValid && translations.maxCharacters,	×
32	[isNameValid, translations.maxCharacters]
33	);
34
35	const onSubmit = async () => {	×
36	setIsCreating(true);	×
37	setIsDirty(true);	×
UNCOV 38	isNameValid && onNext(walletName);	×
UNCOV 39	setIsCreating(false);	×
40	};
41
42	const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {	×
UNCOV 43	setIsDirty(true);	×
UNCOV 44	setWalletName(e.target.value);	×
45	onChange?.(e.target.value);	×
46	};
47
UNCOV 48	return (	×
49	<WalletSetupStepLayout
50	title={translations.nameYourWallet}
51	onBack={onBack}
52	isNextEnabled={!!walletName && !validationError}	×
53	onNext={onSubmit}
54	nextLabel={translations.create}
55	isNextLoading={isCreating}
56	currentTimelineStep={isHardwareWallet ? WalletTimelineSteps.NAME_WALLET : WalletTimelineSteps.WALLET_SETUP}	×
57	isHardwareWallet={isHardwareWallet}
58	>
59	<p className={styles.subtitle}>{translations.chooseName}</p>
60	<Input
61	dataTestId="wallet-setup-register-name-input"
62	className={styles.inputName}
63	label={translations.walletName}
64	value={walletName}
65	onChange={handleNameChange}
66	autoFocus
67	/>
68	{isDirty && walletName && !isNameValid && (	×
69	<p className={styles.formError} data-testid="wallet-setup-register-name-error">
70	{validationError}
71	</p>
72	)}
73	</WalletSetupStepLayout>
74	);
75	};

input-output-hk / lace / 8344184620

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous