8540545310

Committed 03 Apr 2024 01:54PM UTC coverage: 50.62% (-3.2%) from 53.839%

Build # 8540545310

Build Type

push

github

Specific Base 985486

Committed by

web-flow

Commit Message

fix: send alias during wallet creation (#1017)

* fix: send alias during wallet creation

* fix: properly position remove wallet event

* test(extension): unblock e2e tests

---------

Co-authored-by: januszjanus <janusz.janus@iohk.io>

Run Details

2161 of 5325 branches covered (40.58%)

Branch coverage included in aggregate %.

5149 of 9116 relevant lines covered (56.48%)

52.15 hits per line

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

82.86

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

import React, { useRef } from 'react';
import styles from './WalletSetupStepLayout.module.scss';
import cn from 'classnames';
import { Button, Timeline } from '@lace/common';
import { Tooltip } from 'antd';
import { urls } from '../../utils/constants';
import { useTranslate } from '@ui/hooks/useTranslate';
import i18n from '@ui/lib/i18n';
import { WalletSetupFlow, useWalletSetupFlow } from './WalletSetupFlowProvider';

export enum WalletTimelineSteps {
  LEGAL_AND_ANALYTICS,
  WALLET_SETUP,
  RECOVERY_PHRASE,
  ALL_DONE,
  CONNECT_WALLET,
  NAME_WALLET
}

export interface WalletSetupStepLayoutProps {
  title: React.ReactNode;
  children?: React.ReactNode;
  belowContentText?: React.ReactNode;
  description?: React.ReactNode;
  linkText?: React.ReactNode;
  stepInfoText?: string;
  onNext?: (event: Readonly<React.MouseEvent<HTMLButtonElement>>) => void;
  onBack?: () => void;
  onSkip?: () => void;
  nextLabel?: string;
  backLabel?: string;
  skipLabel?: string;
  isNextEnabled?: boolean;
  isNextLoading?: boolean;
  toolTipText?: string;
  currentTimelineStep?: WalletTimelineSteps;
  isHardwareWallet?: boolean;
}

const removeLegalAndAnalyticsStep = (
  steps: {
    key: WalletTimelineSteps;
    name: string;
  }[]
) => {
  steps.shift();
};

const getTimelineSteps = (currentStep: WalletTimelineSteps, isHardwareWallet: boolean, flow: WalletSetupFlow) => {
  const inMemoryWalletSteps = [
    { key: WalletTimelineSteps.LEGAL_AND_ANALYTICS, name: i18n.t('package.core.walletSetupStep.legalAndAnalytics') },
    { key: WalletTimelineSteps.WALLET_SETUP, name: i18n.t('package.core.walletSetupStep.walletSetup') },
    { key: WalletTimelineSteps.RECOVERY_PHRASE, name: i18n.t('package.core.walletSetupStep.recoveryPhrase') },
    { key: WalletTimelineSteps.ALL_DONE, name: i18n.t('package.core.walletSetupStep.allDone') }
  ];

  const hardwareWalletSteps = [
    { key: WalletTimelineSteps.LEGAL_AND_ANALYTICS, name: i18n.t('package.core.walletSetupStep.legalAndAnalytics') },
    { key: WalletTimelineSteps.CONNECT_WALLET, name: i18n.t('package.core.walletSetupStep.connectWallet') },
    { key: WalletTimelineSteps.NAME_WALLET, name: i18n.t('package.core.walletSetupStep.nameWallet') },
    { key: WalletTimelineSteps.ALL_DONE, name: i18n.t('package.core.walletSetupStep.allDone') }
  ];

  const walletSteps = isHardwareWallet ? hardwareWalletSteps : inMemoryWalletSteps;

  if (flow === WalletSetupFlow.ADD_WALLET) {
    // remove legal and analytics step
    removeLegalAndAnalyticsStep(walletSteps);
  }

  if (typeof currentStep !== 'undefined') {
    const currentStepIndex = walletSteps.findIndex((step) => step.key === currentStep);
    return walletSteps.map((step, index) => ({ ...step, active: index <= currentStepIndex }));
  }

  return walletSteps.map((step) => ({ ...step, active: false }));
};

export const WalletSetupStepLayout = ({
  children,
  title,
  description,
  linkText,
  stepInfoText,
  belowContentText,
  onNext,
  onBack,
  onSkip,
  nextLabel,
  backLabel,
  skipLabel,
  isNextEnabled = true,
  isNextLoading = false,
  toolTipText,
  currentTimelineStep,
  isHardwareWallet = false
}: WalletSetupStepLayoutProps): React.ReactElement => {
  const { t } = useTranslate();
  const nextButtonContainerRef = useRef(null);
  const flow = useWalletSetupFlow();

  const defaultLabel = {
    next: t('package.core.walletSetupStep.next'),
    back: t('package.core.walletSetupStep.back'),
    skip: t('package.core.walletSetupStep.skip')
  };

  const timelineSteps = getTimelineSteps(currentTimelineStep, isHardwareWallet, flow);

  return (
    <div className={styles.walletSetupStepLayout} data-testid="wallet-setup-step-layout">
      <div className={styles.sideTimelineContainer}>
        <Timeline>
          {timelineSteps.map(({ name, key, active }) => (
            <Timeline.Item key={key} active={active}>
              <div className={cn({ [styles.activeText]: currentTimelineStep === key })}>{name}</div>
            </Timeline.Item>
          ))}
        </Timeline>
      </div>
      <div className={styles.container}>
        <div className={styles.header} data-testid="wallet-setup-step-header">
          <h1 data-testid="wallet-setup-step-title">{title}</h1>
          {description && (
            <p data-testid="wallet-setup-step-subtitle">
              {description}{' '}
              <a href={urls.faq.secretPassphrase} target="_blank" data-testid="faq-secret-passphrase-url">
                {linkText}
              </a>
            </p>
          )}
        </div>
        <div className={styles.content} data-testid="wallet-setup-step-content">
          {children}
        </div>
        {belowContentText}
        <div className={styles.footer} data-testid="wallet-setup-step-footer">
          {onBack ? (
            <Button color="secondary" onClick={onBack} data-testid="wallet-setup-step-btn-back">
              {backLabel || defaultLabel.back}
            </Button>
          ) : (
            <div />
          )}
          {stepInfoText && <p data-testid="step-info-text">{stepInfoText}</p>}
          {onSkip && (
            <Button variant="text" onClick={onSkip} data-testid="wallet-setup-step-btn-skip">
              {skipLabel || defaultLabel.skip}
            </Button>
          )}
          {onNext && (
            <div ref={nextButtonContainerRef}>
              <Tooltip
                visible={!isNextEnabled && !!toolTipText}
                title={!isNextEnabled && toolTipText}
                getPopupContainer={() => nextButtonContainerRef.current}
                autoAdjustOverflow={false}
              >
                <Button
                  disabled={!isNextEnabled}
                  onClick={onNext}
                  loading={isNextLoading}
                  data-testid="wallet-setup-step-btn-next"
                >
                  {nextLabel || defaultLabel.next}
                </Button>
              </Tooltip>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

1	import React, { useRef } from 'react';	2✔
2	import styles from './WalletSetupStepLayout.module.scss';	2✔
3	import cn from 'classnames';	2✔
4	import { Button, Timeline } from '@lace/common';	2✔
5	import { Tooltip } from 'antd';	2✔
6	import { urls } from '../../utils/constants';	2✔
7	import { useTranslate } from '@ui/hooks/useTranslate';	2✔
8	import i18n from '@ui/lib/i18n';	2✔
9	import { WalletSetupFlow, useWalletSetupFlow } from './WalletSetupFlowProvider';	2✔
10
11	export enum WalletTimelineSteps {	2✔
12	LEGAL_AND_ANALYTICS,	2✔
13	WALLET_SETUP,	2✔
14	RECOVERY_PHRASE,	2✔
15	ALL_DONE,	2✔
16	CONNECT_WALLET,	2✔
17	NAME_WALLET	2✔
18	}
19
20	export interface WalletSetupStepLayoutProps {
21	title: React.ReactNode;
22	children?: React.ReactNode;
23	belowContentText?: React.ReactNode;
24	description?: React.ReactNode;
25	linkText?: React.ReactNode;
26	stepInfoText?: string;
27	onNext?: (event: Readonly<React.MouseEvent<HTMLButtonElement>>) => void;
28	onBack?: () => void;
29	onSkip?: () => void;
30	nextLabel?: string;
31	backLabel?: string;
32	skipLabel?: string;
33	isNextEnabled?: boolean;
34	isNextLoading?: boolean;
35	toolTipText?: string;
36	currentTimelineStep?: WalletTimelineSteps;
37	isHardwareWallet?: boolean;
38	}
39
40	const removeLegalAndAnalyticsStep = (	2✔
41	steps: {
42	key: WalletTimelineSteps;
43	name: string;
44	}[]
45	) => {
46	steps.shift();	×
47	};
48
49	const getTimelineSteps = (currentStep: WalletTimelineSteps, isHardwareWallet: boolean, flow: WalletSetupFlow) => {	2✔
50	const inMemoryWalletSteps = [	12✔
51	{ key: WalletTimelineSteps.LEGAL_AND_ANALYTICS, name: i18n.t('package.core.walletSetupStep.legalAndAnalytics') },
52	{ key: WalletTimelineSteps.WALLET_SETUP, name: i18n.t('package.core.walletSetupStep.walletSetup') },
53	{ key: WalletTimelineSteps.RECOVERY_PHRASE, name: i18n.t('package.core.walletSetupStep.recoveryPhrase') },
54	{ key: WalletTimelineSteps.ALL_DONE, name: i18n.t('package.core.walletSetupStep.allDone') }
55	];
56
57	const hardwareWalletSteps = [	12✔
58	{ key: WalletTimelineSteps.LEGAL_AND_ANALYTICS, name: i18n.t('package.core.walletSetupStep.legalAndAnalytics') },
59	{ key: WalletTimelineSteps.CONNECT_WALLET, name: i18n.t('package.core.walletSetupStep.connectWallet') },
60	{ key: WalletTimelineSteps.NAME_WALLET, name: i18n.t('package.core.walletSetupStep.nameWallet') },
61	{ key: WalletTimelineSteps.ALL_DONE, name: i18n.t('package.core.walletSetupStep.allDone') }
62	];
63
64	const walletSteps = isHardwareWallet ? hardwareWalletSteps : inMemoryWalletSteps;	12!
65
66	if (flow === WalletSetupFlow.ADD_WALLET) {	12!
67	// remove legal and analytics step
68	removeLegalAndAnalyticsStep(walletSteps);	×
69	}
70
71	if (typeof currentStep !== 'undefined') {	12✔
72	const currentStepIndex = walletSteps.findIndex((step) => step.key === currentStep);	36✔
73	return walletSteps.map((step, index) => ({ ...step, active: index <= currentStepIndex }));	48✔
74	}
75
76	return walletSteps.map((step) => ({ ...step, active: false }));	×
77	};
78
79	export const WalletSetupStepLayout = ({	2✔
80	children,
81	title,
82	description,
83	linkText,
84	stepInfoText,
85	belowContentText,
86	onNext,
87	onBack,
88	onSkip,
89	nextLabel,
90	backLabel,
91	skipLabel,
92	isNextEnabled = true,	×
93	isNextLoading = false,	6✔
94	toolTipText,
95	currentTimelineStep,
96	isHardwareWallet = false	6✔
97	}: WalletSetupStepLayoutProps): React.ReactElement => {
98	const { t } = useTranslate();	12✔
99	const nextButtonContainerRef = useRef(null);	12✔
100	const flow = useWalletSetupFlow();	12✔
101
102	const defaultLabel = {	12✔
103	next: t('package.core.walletSetupStep.next'),
104	back: t('package.core.walletSetupStep.back'),
105	skip: t('package.core.walletSetupStep.skip')
106	};
107
108	const timelineSteps = getTimelineSteps(currentTimelineStep, isHardwareWallet, flow);	12✔
109
110	return (	12✔
111	<div className={styles.walletSetupStepLayout} data-testid="wallet-setup-step-layout">
112	<div className={styles.sideTimelineContainer}>
113	<Timeline>
114	{timelineSteps.map(({ name, key, active }) => (
115	<Timeline.Item key={key} active={active}>	48✔
116	<div className={cn({ [styles.activeText]: currentTimelineStep === key })}>{name}</div>
117	</Timeline.Item>
118	))}
119	</Timeline>
120	</div>
121	<div className={styles.container}>
122	<div className={styles.header} data-testid="wallet-setup-step-header">
123	<h1 data-testid="wallet-setup-step-title">{title}</h1>
124	{description && (	12✔
125	<p data-testid="wallet-setup-step-subtitle">
126	{description}{' '}
127	<a href={urls.faq.secretPassphrase} target="_blank" data-testid="faq-secret-passphrase-url">
128	{linkText}
129	</a>
130	</p>
131	)}
132	</div>
133	<div className={styles.content} data-testid="wallet-setup-step-content">
134	{children}
135	</div>
136	{belowContentText}
137	<div className={styles.footer} data-testid="wallet-setup-step-footer">
138	{onBack ? (
139	<Button color="secondary" onClick={onBack} data-testid="wallet-setup-step-btn-back">	6!
140	{backLabel \|\| defaultLabel.back}	12✔
141	</Button>
142	) : (
143	<div />
144	)}
145	{stepInfoText && <p data-testid="step-info-text">{stepInfoText}</p>}	12✔
146	{onSkip && (	6!
147	<Button variant="text" onClick={onSkip} data-testid="wallet-setup-step-btn-skip">
148	{skipLabel \|\| defaultLabel.skip}	×
149	</Button>
150	)}
151	{onNext && (	12✔
152	<div ref={nextButtonContainerRef}>
153	<Tooltip
154	visible={!isNextEnabled && !!toolTipText}	11✔
155	title={!isNextEnabled && toolTipText}	11✔
156	getPopupContainer={() => nextButtonContainerRef.current}	×
157	autoAdjustOverflow={false}
158	>
159	<Button
160	disabled={!isNextEnabled}
161	onClick={onNext}
162	loading={isNextLoading}
163	data-testid="wallet-setup-step-btn-next"
164	>
165	{nextLabel \|\| defaultLabel.next}	12✔
166	</Button>
167	</Tooltip>
168	</div>
169	)}
170	</div>
171	</div>
172	</div>
173	);
174	};

input-output-hk / lace / 8540545310

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