Skip to content

Commit c85bcf6

Browse files
vetalcorevetalcore
authored
fix: [lw-11523] add advanced receive on popup view
1 parent 3478c41 commit c85bcf6

File tree

8 files changed

+181
-85
lines changed

8 files changed

+181
-85
lines changed

‎apps/browser-extension-wallet/src/features/receive-info/components/ReceiveInfo.module.scss

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,24 @@
66
padding: size_unit(4.5) 0;
77
}
88

9-
.title {
10-
color: var(--text-color-primary);
11-
@include text-heading;
9+
.subTitle {
10+
button {
11+
&:focus:not(:active) {
12+
outline-color: unset;
13+
outline-width: 0;
14+
outline-style: none;
15+
}
16+
17+
background-color: var(--dark-mode-light-grey, #c0c0c0);
18+
19+
&[data-state="checked"]:not(:disabled) {
20+
background: var(--lace-gradient);
21+
}
22+
}
1223
}
1324

14-
.subtitle {
15-
color: var(--text-color-secondary);
16-
@include text-bodyLarge-medium;
25+
.iconWrapper {
26+
display: flex;
27+
flex: 1;
28+
justify-content: flex-end;
1729
}

‎apps/browser-extension-wallet/src/features/receive-info/components/ReceiveInfo.tsx

Lines changed: 81 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useCallback } from 'react';
1+
import React, { useCallback, useState } from 'react';
22
import { ADDRESS_CARD_QR_CODE_SIZE_POPUP, AddressCard, HandleAddressCard } from '@lace/core';
33
import { Drawer, DrawerHeader, DrawerNavigation } from '@lace/common';
44
import { useTranslation } from 'react-i18next';
@@ -7,9 +7,16 @@ import { useTheme } from '@providers/ThemeProvider';
77
import { getQRCodeOptions } from '@src/utils/qrCodeHelpers';
88
import { HandleInfo } from '@cardano-sdk/wallet';
99
import { getAssetImageUrl } from '@src/utils/get-asset-image-url';
10-
import { useAnalyticsContext } from '@providers';
10+
import { useAnalyticsContext, useBackgroundServiceAPIContext } from '@providers';
1111
import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
12-
import { Flex } from '@input-output-hk/lace-ui-toolkit';
12+
import { Flex, Box, ToggleSwitch } from '@input-output-hk/lace-ui-toolkit';
13+
import { InfoCircleOutlined } from '@ant-design/icons';
14+
import { Tooltip } from 'antd';
15+
import { BrowserViewSections } from '@lib/scripts/types';
16+
import { WarningModal } from '@src/views/browser-view/components';
17+
import { useLocalStorage } from '@hooks';
18+
19+
const useAdvancedReceived = process.env.USE_ADVANCED_RECEIVE === 'true';
1320

1421
export interface ReceiveInfoProps {
1522
name: string;
@@ -22,6 +29,9 @@ export const ReceiveInfo = ({ name, address, handles, goBack }: ReceiveInfoProps
2229
const analytics = useAnalyticsContext();
2330
const { t } = useTranslation();
2431
const { theme } = useTheme();
32+
const backgroundServices = useBackgroundServiceAPIContext();
33+
const [isSwitchToExpandedViewModalVisible, setIsSwitchToExpandedViewModalVisible] = useState(false);
34+
const [, { updateLocalStorage: setIsReceiveInAdvancedMode }] = useLocalStorage('isReceiveInAdvancedMode', false);
2535
const handleOnClose = () => {
2636
goBack();
2737
analytics.sendEventToPostHog(PostHogAction.ReceiveYourWalletAddressXClick);
@@ -35,32 +45,75 @@ export const ReceiveInfo = ({ name, address, handles, goBack }: ReceiveInfoProps
3545
analytics.sendEventToPostHog(PostHogAction.ReceiveCopyAddressIconClick);
3646
};
3747

48+
const openTabExtensionReceiveFlow = () => {
49+
setIsReceiveInAdvancedMode(true);
50+
backgroundServices.handleOpenBrowser({ section: BrowserViewSections.RECEIVE_ADVANCED });
51+
};
52+
3853
return (
39-
<Drawer
40-
visible
41-
onClose={handleOnClose}
42-
title={<DrawerHeader title={t('qrInfo.receive')} subtitle={t('qrInfo.scanQRCodeToConnectWallet')} />}
43-
navigation={<DrawerNavigation onCloseIconClick={handleOnClose} />}
44-
popupView
45-
>
46-
<Flex className={styles.container} testId="receive-address-qr" flexDirection="column" gap="$16">
47-
<AddressCard
48-
name={name}
49-
isPopupView
50-
address={address?.toString()}
51-
getQRCodeOptions={useCallback(() => getQRCodeOptions(theme, ADDRESS_CARD_QR_CODE_SIZE_POPUP), [theme])}
52-
onCopyClick={handleCopyAddress}
53-
/>
54-
{handles?.map(({ nftMetadata, image }) => (
55-
<HandleAddressCard
56-
key={nftMetadata.name}
57-
name={nftMetadata.name}
58-
image={getAssetImageUrl(image || nftMetadata.image)}
59-
copiedMessage={t('core.infoWallet.handleCopied')}
60-
onCopyClick={handleCopyAdaHandle}
54+
<>
55+
<Drawer
56+
open
57+
onClose={handleOnClose}
58+
title={
59+
<DrawerHeader
60+
title={t('qrInfo.receive')}
61+
subtitle={
62+
<Box className={styles.subTitle}>
63+
{t('qrInfo.scanQRCodeToConnectWallet')}
64+
{useAdvancedReceived && (
65+
<Flex mt="$20" justifyContent="space-between">
66+
<span>{t('qrInfo.advancedMode.toggle.label')}</span>
67+
<ToggleSwitch
68+
icon={
69+
<Tooltip title={t('qrInfo.advancedMode.toggle.description')}>
70+
<InfoCircleOutlined />
71+
</Tooltip>
72+
}
73+
defaultChecked={isSwitchToExpandedViewModalVisible}
74+
checked={isSwitchToExpandedViewModalVisible}
75+
onCheckedChange={() => setIsSwitchToExpandedViewModalVisible(true)}
76+
testId="advanced-mode-"
77+
/>
78+
</Flex>
79+
)}
80+
</Box>
81+
}
82+
/>
83+
}
84+
navigation={<DrawerNavigation onCloseIconClick={handleOnClose} />}
85+
popupView
86+
>
87+
<Flex className={styles.container} testId="receive-address-qr" flexDirection="column" gap="$16">
88+
<AddressCard
89+
name={name}
90+
isPopupView
91+
address={address?.toString()}
92+
getQRCodeOptions={useCallback(() => getQRCodeOptions(theme, ADDRESS_CARD_QR_CODE_SIZE_POPUP), [theme])}
93+
onCopyClick={handleCopyAddress}
6194
/>
62-
))}
63-
</Flex>
64-
</Drawer>
95+
{handles?.map(({ nftMetadata, image }) => (
96+
<HandleAddressCard
97+
key={nftMetadata.name}
98+
name={nftMetadata.name}
99+
image={getAssetImageUrl(image || nftMetadata.image)}
100+
copiedMessage={t('core.infoWallet.handleCopied')}
101+
onCopyClick={handleCopyAdaHandle}
102+
/>
103+
))}
104+
</Flex>
105+
</Drawer>
106+
<WarningModal
107+
header={t('qrInfo.advancedMode.modal.title')}
108+
content={<span className={styles.removeWalletContent}>{t('qrInfo.advancedMode.modal.description')}</span>}
109+
visible={isSwitchToExpandedViewModalVisible}
110+
onCancel={() => setIsSwitchToExpandedViewModalVisible(false)}
111+
onConfirm={openTabExtensionReceiveFlow}
112+
cancelLabel={t('qrInfo.advancedMode.modal.cancel')}
113+
confirmLabel={t('qrInfo.advancedMode.modal.confirm')}
114+
confirmCustomClassName={styles.settingsConfirmButton}
115+
isPopupView
116+
/>
117+
</>
65118
);
66119
};

‎apps/browser-extension-wallet/src/lib/scripts/background/services/utilityServices.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const handleOpenBrowser = async (data: OpenBrowserData) => {
4848
let path = '';
4949
switch (data.section) {
5050
case BrowserViewSections.SEND_ADVANCED:
51+
case BrowserViewSections.RECEIVE_ADVANCED:
5152
path = '';
5253
await setBackgroundStorage({ message: { type: MessageTypes.OPEN_BROWSER_VIEW, data } });
5354
break;

‎apps/browser-extension-wallet/src/lib/scripts/types/background-service.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export enum MessageTypes {
2525

2626
export enum BrowserViewSections {
2727
SEND_ADVANCED = 'send-advanced',
28+
RECEIVE_ADVANCED = 'receive-advanced',
2829
STAKING = 'staking',
2930
NFTS = 'nfts',
3031
TRANSACTION = 'transaction',

‎apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { PinExtension } from '@views/browser/features/wallet-setup/components/Pi
1515
import { useLocalStorage } from '@hooks';
1616
import { useWalletStore } from '@stores';
1717
import { useOpenTransactionDrawer } from '@views/browser/features/send-transaction';
18+
import { useOpenReceiveDrawer } from '../TransactionCTAsBox/useOpenReceiveDrawer';
1819

1920
interface LayoutProps {
2021
children: React.ReactNode;
@@ -31,6 +32,8 @@ export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: Layout
3132
const { theme, setTheme } = useTheme();
3233
const backgroundServices = useBackgroundServiceAPIContext();
3334
const { walletState } = useWalletStore();
35+
const openReceiveDrawer = useOpenReceiveDrawer();
36+
3437
const openTransactionDrawer = useOpenTransactionDrawer({
3538
content: DrawerContent.SEND_TRANSACTION,
3639
config: { options: { isAdvancedFlow: true } }
@@ -50,9 +53,16 @@ export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: Layout
5053
await backgroundServices.clearBackgroundStorage({ keys: ['message'] });
5154
openTransactionDrawer();
5255
}
56+
if (
57+
backgroundStorage.message?.type === MessageTypes.OPEN_BROWSER_VIEW &&
58+
backgroundStorage.message?.data.section === BrowserViewSections.RECEIVE_ADVANCED
59+
) {
60+
await backgroundServices.clearBackgroundStorage({ keys: ['message'] });
61+
openReceiveDrawer();
62+
}
5363
};
5464
openDrawer();
55-
}, [backgroundServices, openTransactionDrawer]);
65+
}, [backgroundServices, openReceiveDrawer, openTransactionDrawer]);
5666

5767
useEffect(() => {
5868
const subscription = backgroundServices.requestMessage$?.subscribe(({ type, data }: Message): void => {

‎apps/browser-extension-wallet/src/views/browser-view/components/TransactionCTAsBox/TransactionCTAsBox.tsx

Lines changed: 3 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22
import React from 'react';
33
import { TransactionCTAs } from '@lace/core';
44
import { DrawerContent } from '@views/browser/components/Drawer';
5-
import { DrawerHeader, DrawerNavigation } from '@lace/common';
6-
import { useDrawer } from '../../stores';
7-
import { useTranslation } from 'react-i18next';
85
import { useAnalyticsContext as useAnalytics } from '@providers/AnalyticsProvider';
96
import styles from './TransactionCTAsBox.module.scss';
107
import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
@@ -14,62 +11,18 @@ import {
1411
useOpenTransactionDrawer
1512
} from '../../features/send-transaction';
1613
import { useWalletStore } from '@stores';
17-
import { Box, Flex, ToggleSwitch } from '@input-output-hk/lace-ui-toolkit';
18-
import { InfoCircleOutlined } from '@ant-design/icons';
19-
import { useLocalStorage } from '@hooks';
20-
import { Tooltip } from 'antd';
21-
22-
const useAdvancedReceived = process.env.USE_ADVANCED_RECEIVE === 'true';
14+
import { useOpenReceiveDrawer } from './useOpenReceiveDrawer';
2315

2416
export const TransactionCTAsBox = (): React.ReactElement => {
2517
const { isSharedWallet } = useWalletStore();
2618
const analytics = useAnalytics();
27-
const [config, setDrawerConfig] = useDrawer();
2819
const openSendTransactionDrawer = useOpenTransactionDrawer({ content: DrawerContent.SEND_TRANSACTION });
2920
const openCoSignTransactionDrawer = useOpenTransactionDrawer({ content: DrawerContent.CO_SIGN_TRANSACTION });
3021
const { setTriggerPoint } = useAnalyticsSendFlowTriggerPoint();
31-
const { t } = useTranslation();
32-
const [isReceiveInAdvancedMode, { updateLocalStorage: setIsReceiveInAdvancedMode }] = useLocalStorage(
33-
'isReceiveInAdvancedMode',
34-
false
35-
);
36-
37-
const handleReceiveCloseIconClick = () => {
38-
const onClose = config?.onClose || (() => setDrawerConfig());
39-
onClose();
40-
analytics.sendEventToPostHog(PostHogAction.ReceiveYourWalletAddressXClick);
41-
};
22+
const openReceiveDrawer = useOpenReceiveDrawer();
4223

4324
const openReceive = () => {
44-
setDrawerConfig({
45-
content: DrawerContent.RECEIVE_TRANSACTION,
46-
renderTitle: () => (
47-
<Flex justifyContent="space-between" alignItems="center" className={styles.title}>
48-
<Box>
49-
<DrawerHeader title={t('qrInfo.title')} subtitle={t('qrInfo.scanQRCodeToConnectWallet')} />
50-
</Box>
51-
{useAdvancedReceived && (
52-
<ToggleSwitch
53-
icon={
54-
<Tooltip title={t('qrInfo.advancedMode.toggle.description')}>
55-
<InfoCircleOutlined />
56-
</Tooltip>
57-
}
58-
defaultChecked={isReceiveInAdvancedMode}
59-
label={t('qrInfo.advancedMode.toggle.label')}
60-
onCheckedChange={(isChecked) => setIsReceiveInAdvancedMode(isChecked)}
61-
testId="advanced-mode-"
62-
/>
63-
)}
64-
</Flex>
65-
),
66-
renderHeader: () => (
67-
<DrawerNavigation
68-
title={<div>{t('browserView.receiveDrawer.title')}</div>}
69-
onCloseIconClick={handleReceiveCloseIconClick}
70-
/>
71-
)
72-
});
25+
openReceiveDrawer();
7326
analytics.sendEventToPostHog(PostHogAction.ReceiveClick);
7427
};
7528

‎apps/browser-extension-wallet/src/views/browser-view/components/TransactionCTAsBox/useOpenReceiveDrawer.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* eslint-disable react/no-multi-comp */
2+
import React, { useCallback } from 'react';
3+
import { DrawerContent } from '@src/views/browser-view/components/Drawer/DrawerUIContent';
4+
import styles from './TransactionCTAsBox.module.scss';
5+
import { useDrawer } from '@views/browser/stores';
6+
import { Box, Flex, ToggleSwitch } from '@input-output-hk/lace-ui-toolkit';
7+
import { DrawerHeader, DrawerNavigation, PostHogAction } from '@lace/common';
8+
import { useTranslation } from 'react-i18next';
9+
import { useLocalStorage } from '@hooks';
10+
import { useAnalyticsContext } from '@providers';
11+
import { Tooltip } from 'antd';
12+
import { InfoCircleOutlined } from '@ant-design/icons';
13+
14+
const useAdvancedReceived = process.env.USE_ADVANCED_RECEIVE === 'true';
15+
16+
export const useOpenReceiveDrawer = (): (() => void) => {
17+
const [config, setDrawerConfig] = useDrawer();
18+
const analytics = useAnalyticsContext();
19+
const { t } = useTranslation();
20+
const [isReceiveInAdvancedMode, { updateLocalStorage: setIsReceiveInAdvancedMode }] = useLocalStorage(
21+
'isReceiveInAdvancedMode',
22+
false
23+
);
24+
25+
const handleReceiveCloseIconClick = useCallback(() => {
26+
const onClose = config?.onClose || (() => setDrawerConfig());
27+
onClose();
28+
analytics.sendEventToPostHog(PostHogAction.ReceiveYourWalletAddressXClick);
29+
}, [analytics, config?.onClose, setDrawerConfig]);
30+
31+
return useCallback(() => {
32+
setDrawerConfig({
33+
content: DrawerContent.RECEIVE_TRANSACTION,
34+
renderTitle: () => (
35+
<Flex justifyContent="space-between" alignItems="center" className={styles.title}>
36+
<Box>
37+
<DrawerHeader title={t('qrInfo.title')} subtitle={t('qrInfo.scanQRCodeToConnectWallet')} />
38+
</Box>
39+
{useAdvancedReceived && (
40+
<ToggleSwitch
41+
icon={
42+
<Tooltip title={t('qrInfo.advancedMode.toggle.description')}>
43+
<InfoCircleOutlined />
44+
</Tooltip>
45+
}
46+
defaultChecked={isReceiveInAdvancedMode}
47+
label={t('qrInfo.advancedMode.toggle.label')}
48+
onCheckedChange={(isChecked) => setIsReceiveInAdvancedMode(isChecked)}
49+
testId="advanced-mode-"
50+
/>
51+
)}
52+
</Flex>
53+
),
54+
renderHeader: () => (
55+
<DrawerNavigation
56+
title={<div>{t('browserView.receiveDrawer.title')}</div>}
57+
onCloseIconClick={handleReceiveCloseIconClick}
58+
/>
59+
)
60+
});
61+
}, [handleReceiveCloseIconClick, isReceiveInAdvancedMode, setDrawerConfig, setIsReceiveInAdvancedMode, t]);
62+
};

‎packages/translation/src/lib/translations/browser-extension-wallet/en.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -726,6 +726,10 @@
726726
"qrInfo.advancedMode.newAddress.warning": "You can only add new addresses after using the latest",
727727
"qrInfo.advancedMode.tags.unused": "New",
728728
"qrInfo.advancedMode.tags.main": "Main",
729+
"qrInfo.advancedMode.modal.title": "Switching to Expanded View",
730+
"qrInfo.advancedMode.modal.description": "For the full experience of advanced mode, this will now open in expanded view.",
731+
"qrInfo.advancedMode.modal.confirm": "Ok",
732+
"qrInfo.advancedMode.modal.cancel": "Cancel",
729733
"send.addressBook.nameLabel": "Wallet name",
730734
"send.addressBook.title": "Address book",
731735
"send.balanceAmount": "Balance: {{ amount }}",

0 commit comments

Comments
 (0)