Skip to content

Commit

Permalink
Merge branch 'main' into feat/lw-10249-revamp-multi-wallet-recovery-p…
Browse files Browse the repository at this point in the history 
…hrase-screen
  • Loading branch information
@szymonmaslowski
szymonmaslowski committed May 6, 2024
2 parents 20b643c + 3991002 commit 2a01dc0
Show file tree
Hide file tree
Showing 28 changed files with 310 additions and 299 deletions.
26 changes: 18 additions & 8 deletions ...et/src/views/browser-view/features/send-transaction/components/SendTransactionSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import { getTokenAmountInFiat, parseFiat } from '@src/utils/assets-transformers'
import { useObservable, Banner } from '@lace/common';
import ExclamationIcon from '../../../../../assets/icons/exclamation-triangle-red.component.svg';
import { WalletType } from '@cardano-sdk/web-extension';
import { getAllWalletsAddresses } from '@src/utils/get-all-wallets-addresses';
import { walletRepository } from '@lib/wallet-api-ui';

const { Text } = Typography;

Expand Down Expand Up @@ -98,7 +100,7 @@ interface SendTransactionSummaryProps {
export const SendTransactionSummary = withAddressBookContext(
({ isPopupView = false }: SendTransactionSummaryProps): React.ReactElement => {
const { t } = useTranslation();
const { builtTxData: { uiTx: { fee, outputs } = {} } = {} } = useBuiltTxState();
const { builtTxData: { uiTx: { fee, outputs, handleResolutions } = {} } = {} } = useBuiltTxState();
const [metadata] = useMetadata();
const {
inMemoryWallet,
Expand Down Expand Up @@ -128,24 +130,32 @@ export const SendTransactionSummary = withAddressBookContext(
[addressList]
);

const rows = [...(outputs?.values() ?? [])].map((item) => ({
list: formatRow({ output: item, assetInfo: assetsInfo, cardanoCoin, fiatCurrency, prices: priceResult }),
recipientAddress: item.address,
recipientName:
addressToNameMap?.get(item.handleResolution?.handle || item.address) || item.handleResolution?.handle
}));
const rows = [...(outputs?.values() ?? [])].map<OutputSummaryProps>((item) => {
const handle =
item.handleResolution?.handle ||
handleResolutions.find(({ cardanoAddress }) => cardanoAddress === item.address)?.handle;
return {
list: formatRow({ output: item, assetInfo: assetsInfo, cardanoCoin, fiatCurrency, prices: priceResult }),
recipientAddress: item.address,
recipientName: addressToNameMap?.get(handle || item.address) || handle
};
});

const ownAddresses = useObservable(inMemoryWallet.addresses$)?.map((a) => a.address);
const allWalletsAddresses = getAllWalletsAddresses(useObservable(walletRepository.wallets$));

// Where do we get the deposit field? LW-1363
return (
<>
<OutputSummaryList
rows={rows as OutputSummaryProps[]}
rows={rows}
txFee={{
...getFee(fee?.toString(), priceResult?.cardano?.price, cardanoCoin, fiatCurrency),
tootipText: t('send.theAmountYoullBeChargedToProcessYourTransaction')
}}
metadata={metadata}
translations={outputSummaryListTranslation}
ownAddresses={allWalletsAddresses.length > 0 ? allWalletsAddresses : ownAddresses}
/>
{isHardwareWallet && !isPopupView && (
<Text className={styles.connectLedgerText}>
Expand Down
6 changes: 3 additions & 3 deletions packages/common/src/analytics/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export enum PostHogAction {
OnboardingRestoreClick = 'onboarding | restore wallet revamp | restore | click',
OnboardingRestoreEnterRecoveryPhraseNextClick = 'onboarding | restore wallet revamp | enter your recovery phrase | next | click',
OnboardingRestoreEnterRecoveryPhrasePasteFromClipboardClick = 'onboarding | restore wallet revamp | enter your recovery phrase | paste from clipboard | click',
OnboardingRestoreEnterRecoveryPhrasePasteReadMoreClick = 'onboarding | restore wallet revamp | enter your recovery phrase | read more | click',
OnboardingRestoreEnterRecoveryPhrasePasteReadMoreClick = 'onboarding | restore wallet revamp | enter your recovery phrase | best practices faq | click',
OnboardingRestoreHdWallet = 'onboarding | restore wallet | hd wallet',
OnboardingRestoreEnterWalletClick = "onboarding | restore wallet revamp | let's set up your new wallet | enter wallet | click",
// Create new wallet
Expand All @@ -26,10 +26,10 @@ export enum PostHogAction {
OnboardingCreateEnterRecoveryPhraseNextClick = 'onboarding | new wallet revamp | enter your recovery phrase | next | click',
OnboardingCreateSaveRecoveryPhraseIntroPlayVideoClick = 'onboarding | new wallet revamp | save your recovery phrase | watch video | click',
OnboardingCreateSaveRecoveryPhraseCopyToClipboardClick = 'onboarding | new wallet revamp | save your recovery phrase | copy to clipboard | click',
OnboardingCreateSaveRecoveryPhraseCopyReadMoreClick = 'onboarding | new wallet revamp | save your recovery phrase | read more | click',
OnboardingCreateSaveRecoveryPhraseCopyReadMoreClick = 'onboarding | new wallet revamp | save your recovery phrase | best practices faq | click',
OnboardingCreateKeepWalletSecureGotItClick = 'onboarding | new wallet revamp | keeping your wallet secure | got it | click',
OnboardingCreateEnterRecoveryPhrasePasteFromClipboardClick = 'onboarding | new wallet revamp | enter your recovery phrase | paste from clipboard | click',
OnboardingCreateEnterRecoveryPhrasePasteReadMoreClick = 'onboarding | new wallet revamp | enter your recovery phrase | read more | click',
OnboardingCreateEnterRecoveryPhrasePasteReadMoreClick = 'onboarding | new wallet revamp | enter your recovery phrase | best practices faq | click',
OnboardingCreateEnterWalletClick = "onboarding | new wallet revamp | let's set up your new wallet | enter wallet | click",
// Multi wallet
MultiWalletSwitchWallet = 'multiwallet | switch wallet | click',
Expand Down
12 changes: 9 additions & 3 deletions packages/core/src/ui/components/ActivityDetail/TransactionDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import cn from 'classnames';

import { Ellipsis, toast } from '@lace/common';
import { Box } from '@lace/ui';
import { Box, Text } from '@lace/ui';
import { useTranslate } from '@ui/hooks';
import { getAddressTagTranslations, renderAddressTag } from '@ui/utils';

Expand Down Expand Up @@ -358,6 +358,7 @@ export const TransactionDetails = ({
</div>
)}
{(summary.addr as string[]).map((addr) => {
const addressName = addressToNameMap?.get(addr);
const address = isPopupView ? (
<Ellipsis
className={cn(styles.addr, styles.fiat)}
Expand All @@ -372,8 +373,13 @@ export const TransactionDetails = ({
);
return (
<div key={addr} className={cn([styles.detail, styles.addr, styles.addressTag])}>
{address}
{renderAddressTag(addr, getAddressTagTranslations(t), ownAddresses, addressToNameMap)}
{addressName && <Text.Body.Normal weight="$semibold">{addressName}</Text.Body.Normal>}
{<Text.Address color={addressName ? 'secondary' : 'primary'}>{address}</Text.Address>}
{renderAddressTag({
address: addr,
translations: getAddressTagTranslations(t),
ownAddresses
})}
</div>
);
})}
Expand Down
50 changes: 14 additions & 36 deletions packages/core/src/ui/components/ActivityDetail/TransactionInputOutput.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,6 @@
display: flex;
justify-content: space-between;
padding: size_unit(3) 0px;
color: var(--text-color-primary);
@include text-bodyLarge-bold;

.label {
@include text-bodyLarge-bold;
}

button.arrowBtn[data-color='secondary'] {
border-radius: size_unit(1) !important;
Expand All @@ -35,7 +29,6 @@
.addressContainer {
display: flex;
flex-direction: column;
gap: size_unit(3);
border-bottom: 1px solid var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey));
padding: size_unit(5) 0;

Expand All @@ -47,22 +40,12 @@
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: size_unit(1.5);

.label {
display: flex;
flex: 0 0 50%;
align-self: baseline;
color: var(--text-color-primary, #fff);
@include text-body-semi-bold;
}

.address {
@include text-address;
font-weight: 500;
text-align: right;
}
.addressDetail {
font-size: var(--bodySmall, 14px) !important;
}

.content {
Expand All @@ -71,9 +54,6 @@
align-items: end;
gap: size_unit(2);

color: var(--text-color-primary, #ffffff);
@include text-body-medium;

text-align: right;
word-break: break-all;

Expand All @@ -82,14 +62,6 @@
flex-direction: column;
width: 100%;
align-items: flex-end;

.asset {
color: var(--text-color-primary, #ffffff);
}

.fiat {
color: var(--text-color-secondary, #878e9e);
}
}
}
}
Expand All @@ -114,7 +86,6 @@
}

.listHeader {
color: var(--text-color-primary, #ffffff);
display: flex;
justify-content: space-between;
margin-bottom: size_unit(4);
Expand All @@ -124,17 +95,24 @@
display: flex;
flex: 0 0 50%;
align-self: baseline;
color: var(--text-color-primary, #ffffff);
@include text-body-bold;
}
}

.rotateOpen {
.rotateOpen {
transform: rotate(180deg);
transition: transform .2s linear;
transition: transform 0.2s linear;
}

.rotateClose {
.rotateClose {
transform: rotate(0deg);
transition: transform .2s linear;
transition: transform 0.2s linear;
}

.rightAlign {
text-align: right;
word-break: break-all;
}

.addressTextContainer {
line-height: size_unit(2);
}
91 changes: 59 additions & 32 deletions packages/core/src/ui/components/ActivityDetail/TransactionInputOutput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { TranslationsFor } from '../../utils/types';

import { ReactComponent as BracketDown } from '../../assets/icons/bracket-down.component.svg';
import styles from './TransactionInputOutput.module.scss';
import { Flex } from '@lace/ui';
import { Box, Flex, Text } from '@lace/ui';
import { getAddressTagTranslations, renderAddressTag } from '@ui/utils';
import { useTranslate } from '@ui/hooks';

Expand Down Expand Up @@ -61,8 +61,8 @@ export const TransactionInputOutput = ({
return (
<div data-testid={testId} className={cn(styles.transactionInOut, { [styles.separatorLine]: withSeparatorLine })}>
<div className={styles.expanderHeader}>
<div className={styles.title}>
<span>{title}</span>
<div>
<Text.Body.Large weight="$bold">{title}</Text.Body.Large>
{tooltipContent && (
<Tooltip title={tooltipContent}>
<InfoCircleOutlined className={styles.infoIcon} />
Expand All @@ -84,41 +84,68 @@ export const TransactionInputOutput = ({
</div>
{isVisible && (
<div className={styles.txInOutContent} data-testid="tx-addr-list">
{list.map(({ addr: inputAddress, amount: addressAmount, assetList }, idx) => (
<div className={styles.addressContainer} key={`${inputAddress}-${idx}`}>
<div className={styles.row}>
<div className={styles.label}>{translations.address}</div>
<Flex flexDirection="column" alignItems="flex-end" gap="$8">
<div data-testid="tx-address" className={cn(styles.addressDetail, styles.content)}>
<Tooltip title={inputAddress}>{addEllipsis(inputAddress, 8, 8)}</Tooltip>
</div>
{renderAddressTag(inputAddress, getAddressTagTranslations(t), ownAddresses, addressToNameMap)}
</Flex>
</div>
{list.map(({ addr: inputAddress, amount: addressAmount, assetList }, idx) => {
const addressName = addressToNameMap?.get(inputAddress);
return (
<div className={styles.addressContainer} key={`${inputAddress}-${idx}`}>
<div className={styles.row}>
<Text.Body.Normal weight="$semibold" className={styles.label}>
{translations.address}
</Text.Body.Normal>
<Flex flexDirection="column" alignItems="flex-end">
{addressName && (
<Box mb="$4" className={cn([styles.rightAlign, styles.addressTextContainer])}>
<Text.Address>{addressToNameMap?.get(inputAddress)}</Text.Address>
</Box>
)}
<Box
mb={addressName ? '$4' : '$12'}
data-testid="tx-address"
className={cn([styles.rightAlign, styles.addressTextContainer])}
>
<Tooltip title={inputAddress}>
<Text.Address color={addressName ? 'secondary' : 'primary'} weight="$medium">
{addEllipsis(inputAddress, 8, 8)}
</Text.Address>
</Tooltip>
</Box>
{renderAddressTag({
address: inputAddress,
translations: getAddressTagTranslations(t),
ownAddresses
})}
</Flex>
</div>

<div className={styles.row}>
<div className={styles.label}>{translations.sent}</div>
<div className={styles.row}>
<Text.Body.Normal weight="$semibold" className={styles.label}>
{translations.sent}
</Text.Body.Normal>

<div className={styles.content}>
<div data-testid="tx-amounts" className={styles.amount}>
{/* asset amount */}
<span data-testid="tx-ada-amount" className={styles.asset}>{`${addressAmount} ${coinSymbol}`}</span>
{/* fiat value */}
<span data-testid="tx-fiat-amount" className={styles.fiat}>
{amountTransformer(addressAmount)}
</span>
</div>
{assetList?.map(({ id: assetId, amount: assetAmount, name: assetName, fiatBalance }, indx) => (
<div data-testid="tx-asset" key={assetId || indx} className={styles.amount}>
<span className={styles.asset}> {`${assetAmount} ${assetName || assetId}`}</span>
<div className={styles.content}>
<div data-testid="tx-amounts" className={styles.amount}>
{/* asset amount */}
<Text.Body.Normal data-testid="tx-ada-amount" weight="$medium">
{`${addressAmount} ${coinSymbol}`}
</Text.Body.Normal>
{/* fiat value */}
<span className={styles.fiat}>{fiatBalance}</span>
<Text.Body.Normal data-testid="tx-fiat-amount" color="secondary" weight="$medium">
{amountTransformer(addressAmount)}
</Text.Body.Normal>
</div>
))}
{assetList?.map(({ id: assetId, amount: assetAmount, name: assetName, fiatBalance }, indx) => (
<div data-testid="tx-asset" key={assetId || indx} className={styles.amount}>
<Text.Body.Normal weight="$medium">{`${assetAmount} ${assetName || assetId}`}</Text.Body.Normal>
<Text.Body.Normal color="secondary" weight="$medium">
{fiatBalance}
</Text.Body.Normal>
</div>
))}
</div>
</div>
</div>
</div>
))}
);
})}
</div>
)}
</div>
Expand Down
7 changes: 5 additions & 2 deletions packages/core/src/ui/components/ActivityDetail/TxDetailsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { ReactComponent as BracketDown } from '../../assets/icons/bracket-down.c
import { DetailRows } from './components';
import styles from './TransactionInputOutput.module.scss';
import { TxDetails } from './types';
import { Text } from '@lace/ui';

interface TxDetailListProps<T extends string> {
testId: string;
Expand Down Expand Up @@ -46,7 +47,7 @@ export const TxDetailList = <T extends string>({
<div data-testid={testId} className={cn(styles.transactionInOut, { [styles.separatorLine]: withSeparatorLine })}>
<div className={styles.expanderHeader}>
<div className={styles.title}>
<span>{title}</span>
<Text.Body.Large weight="$bold">{title}</Text.Body.Large>
{tooltipContent && (
<Tooltip title={tooltipContent}>
<InfoCircleOutlined className={styles.infoIcon} />
Expand All @@ -70,7 +71,9 @@ export const TxDetailList = <T extends string>({
<div className={cn({ [styles.topBorderContent]: idx > 0 })} />
{lists.length > 1 && (
<div key={`${testId}-list-header`} className={styles.listHeader}>
<div className={styles.listHeaderTitle}>{`${subTitle} ${idx + 1}`}</div>
<Text.Body.Normal className={styles.listHeaderTitle} weight="$bold">{`${subTitle} ${
idx + 1
}`}</Text.Body.Normal>
</div>
)}
<DetailRows<T> translations={translations} testId={testId} list={list} />
Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/ui/components/ActivityDetail/components/DetailRows.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { DetailRow } from './DetailRow';
import { TxDetails } from '../types';
import { TranslationsFor } from '@src/ui/utils/types';
import styles from '../TransactionInputOutput.module.scss';
import { Text } from '@lace/ui';

type DetailRowsProps<T extends string> = {
list: TxDetails<T>;
Expand Down Expand Up @@ -33,7 +34,9 @@ export const DetailRows = function DetailRows<T extends string>({
key={`${testId}-list-header`}
className={cn(styles.listHeader, { [styles.topBorderContent]: index > 0 })}
>
<div className={styles.listHeaderTitle}>{translations[item.header]}</div>
<Text.Body.Normal className={styles.listHeaderTitle} weight="$bold">
{translations[item.header]}
</Text.Body.Normal>
</div>
<DetailRows testId={testId} list={item.details} translations={translations} />
</>
Expand Down

0 comments on commit 2a01dc0

Please sign in to comment.