diff --git a/apps/browser-extension-wallet/.env.defaults b/apps/browser-extension-wallet/.env.defaults index f7da959487..006147c923 100644 --- a/apps/browser-extension-wallet/.env.defaults +++ b/apps/browser-extension-wallet/.env.defaults @@ -18,7 +18,8 @@ USE_DIFFERENT_MNEMONIC_LENGTHS=true USE_NFT_FOLDERS=true USE_MULTI_CURRENCY=true USE_HIDE_MY_BALANCE=true -USE_MULTI_DELEGATION_STAKING=true +USE_MULTI_DELEGATION_STAKING_LEDGER=false +USE_MULTI_DELEGATION_STAKING_TREZOR=false USE_ADA_HANDLE=true USE_DATA_CHECK=false USE_POSTHOG_ANALYTICS=true @@ -27,6 +28,7 @@ USE_MULTI_DELEGATION_STAKING_ACTIVITY=false USE_POSTHOG_ANALYTICS_FOR_OPTED_OUT=false USE_MATOMO_ANALYTICS_FOR_OPTED_OUT=false +USE_MULTI_WALLET=false # In App URLs CATALYST_GOOGLE_PLAY_URL=https://play.google.com/store/apps/details?id=io.iohk.vitvoting diff --git a/apps/browser-extension-wallet/.env.example b/apps/browser-extension-wallet/.env.example index 1f7505ca91..ae66e0ab8a 100644 --- a/apps/browser-extension-wallet/.env.example +++ b/apps/browser-extension-wallet/.env.example @@ -18,7 +18,8 @@ USE_DIFFERENT_MNEMONIC_LENGTHS=true USE_NFT_FOLDERS=true USE_MULTI_CURRENCY=true USE_HIDE_MY_BALANCE=true -USE_MULTI_DELEGATION_STAKING=true +USE_MULTI_DELEGATION_STAKING_LEDGER=false +USE_MULTI_DELEGATION_STAKING_TREZOR=false USE_ADA_HANDLE=true USE_HANDLE_AB=false USE_DATA_CHECK=false diff --git a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss index 7d8322a7b9..5dbc2da419 100644 --- a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss +++ b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.module.scss @@ -45,3 +45,7 @@ transform: rotateX(180deg); } } + +.profileDropdownTrigger { + flex-shrink: 0; +} diff --git a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx index f1d754cbb3..a91c2c635d 100644 --- a/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx +++ b/apps/browser-extension-wallet/src/components/DropdownMenu/DropdownMenu.tsx @@ -11,6 +11,9 @@ import { useWalletStore } from '@src/stores'; import { UserAvatar } from '../MainMenu/DropdownMenuOverlay/components'; import { useAnalyticsContext } from '@providers'; import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker'; +import { ProfileDropdown } from '@lace/ui'; +import { useGetHandles } from '@hooks'; +import { getAssetImageUrl } from '@src/utils/get-asset-image-url'; export interface DropdownMenuProps { isPopup?: boolean; @@ -20,6 +23,8 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement const analytics = useAnalyticsContext(); const { walletInfo } = useWalletStore(); const [open, setOpen] = useState(false); + const [handle] = useGetHandles(); + const handleImage = handle?.profilePic; const Chevron = isPopup ? ChevronSmall : ChevronNormal; const sendAnalyticsEvent = (event: PostHogAction) => { @@ -41,20 +46,39 @@ export const DropdownMenu = ({ isPopup }: DropdownMenuProps): React.ReactElement placement="bottomRight" trigger={['click']} > - + + ) : ( + + )} ); }; diff --git a/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.module.scss b/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.module.scss index dfa9d4f4f9..e16f9a4a5f 100644 --- a/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.module.scss +++ b/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.module.scss @@ -36,6 +36,21 @@ } } +.multiWallet { + max-width: size_unit(6); + width: size_unit(6); + height: size_unit(6); + border-radius: size_unit(2); + flex-shrink: 0; + + &:hover { + max-width: size_unit(6); + width: size_unit(6); + gap: 0px; + padding: 0; + } +} + .text { color: var(--text-color-secondary); white-space: nowrap; diff --git a/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.tsx b/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.tsx index 1e7da942e1..5abafd532a 100644 --- a/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.tsx +++ b/apps/browser-extension-wallet/src/components/ExpandButton/ExpandButton.tsx @@ -1,11 +1,31 @@ -import React from 'react'; +/* eslint-disable react/no-multi-comp */ +import React, { ReactNode } from 'react'; import ExpandIcon from '../../assets/icons/expand.component.svg'; +import classnames from 'classnames'; +import { Tooltip } from 'antd'; import styles from './ExpandButton.module.scss'; +const RenderTooltipIfMultiWallet = ({ children, label }: { children: ReactNode; label: string }) => { + if (process.env.USE_MULTI_WALLET === 'true') { + return {children}; + } + + return <>{children}; +}; + export const ExpandButton = ({ label, onClick }: { label: string; onClick: () => void }): React.ReactElement => ( - - - {label} - + + + + {process.env.USE_MULTI_WALLET !== 'true' && {label}} + + ); diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss index 098024b802..e43bee1f1f 100644 --- a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss +++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss @@ -17,7 +17,6 @@ .userInfoWrapper { display: flex; flex-direction: column; - padding: 10px size_unit(2) size_unit(2.75); gap: size_unit(2); .userInfo { @@ -50,6 +49,14 @@ } } + .singleWalletWrapper { + padding: 10px size_unit(2) size_unit(2.75); + } + + .multiWalletWrapper { + padding-bottom: size_unit(2.75); + } + .walletStatusInfo { cursor: default; display: flex; diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx index da8edbfe45..b48c5e9270 100644 --- a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx +++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx @@ -8,7 +8,8 @@ import { ThemeSwitcher, LockWallet, UserInfo, - NetworkChoise + NetworkChoise, + AddNewWalletLink } from './components'; import styles from './DropdownMenuOverlay.module.scss'; import { NetworkInfo } from './components/NetworkInfo'; @@ -42,6 +43,7 @@ export const DropdownMenuOverlay: VFC = ({ <> {topSection} + {process.env.USE_MULTI_WALLET === 'true' && } diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/AddNewWalletLink.tsx b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/AddNewWalletLink.tsx new file mode 100644 index 0000000000..281fa80ea5 --- /dev/null +++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/AddNewWalletLink.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { walletRoutePaths } from '@routes'; +import { Menu } from 'antd'; +import { useTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; +import styles from '../DropdownMenuOverlay.module.scss'; + +const handleOnClicked = (): void => void 0; + +export const AddNewWalletLink = (): React.ReactElement => { + const { t } = useTranslation(); + + return ( + + + {t('browserView.sideMenu.links.addNewWallet')} + + + ); +}; diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx index 801c51ae89..e36d810bd7 100644 --- a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx +++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/UserInfo.tsx @@ -11,6 +11,8 @@ import { UserAvatar } from './UserAvatar'; import { useGetHandles } from '@hooks'; import { useAnalyticsContext } from '@providers'; import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker'; +import { ProfileDropdown } from '@lace/ui'; +import { getAssetImageUrl } from '@src/utils/get-asset-image-url'; const ADRESS_FIRST_PART_LENGTH = 10; const ADRESS_LAST_PART_LENGTH = 5; @@ -36,6 +38,7 @@ export const UserInfo = ({ avatarVisible = true }: UserInfoProps): React.ReactEl const walletName = addEllipsis(walletInfo.name.toString(), WALLET_NAME_MAX_LENGTH, 0); const [handle] = useGetHandles(); const handleName = handle?.nftMetadata?.name; + const handleImage = handle?.profilePic; const handleOnAddressCopy = () => { toast.notify({ duration: TOAST_DEFAULT_DURATION, text: t('general.clipboard.copiedToClipboard') }); @@ -44,29 +47,51 @@ export const UserInfo = ({ avatarVisible = true }: UserInfoProps): React.ReactEl return ( -
+
- - {handleName ? t('settings.copyHandle') : t('settings.copyAddress')} - - } - > -
- {avatarVisible && } -
-

- {walletName} -

-

- {handleName || shortenedWalletAddress} -

+ {process.env.USE_MULTI_WALLET === 'true' ? ( + + ) : ( + + {handleName ? t('settings.copyHandle') : t('settings.copyAddress')} + + } + > +
+ {avatarVisible && } +
+

+ {walletName} +

+

+ {handleName || shortenedWalletAddress} +

+
-
- + + )}
diff --git a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/index.ts b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/index.ts index 040f0a990c..5382f3cf6f 100644 --- a/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/index.ts +++ b/apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/index.ts @@ -8,3 +8,4 @@ export * from './UserInfo'; export * from './UserAvatar'; export * from './NetworkChoise'; export * from './NetworkInfo'; +export * from './AddNewWalletLink'; diff --git a/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.module.scss b/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.module.scss index cb96dbc1c8..853218748c 100644 --- a/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.module.scss +++ b/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.module.scss @@ -36,3 +36,12 @@ } } } + +.multiWallet { + flex-wrap: wrap; +} + +.multiWalletNetworkPillBox { + width: 100%; + margin-bottom: 12px; +} diff --git a/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.tsx b/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.tsx index 734aad4c85..ac2c66bebf 100644 --- a/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.tsx +++ b/apps/browser-extension-wallet/src/components/MainMenu/MainHeader.tsx @@ -4,6 +4,7 @@ import styles from './MainHeader.module.scss'; import LaceLogoMark from '../../assets/branding/lace-logo-mark.component.svg'; import { useTranslation } from 'react-i18next'; import { walletRoutePaths } from '@routes'; +import classNames from 'classnames'; import { DropdownMenu } from '@components/DropdownMenu'; import { ExpandButton } from '@components/ExpandButton'; @@ -30,7 +31,16 @@ export const MainHeader = (): React.ReactElement => { return (
-
+
+ {process.env.USE_MULTI_WALLET === 'true' && ( +
+ +
+ )} { onClick={() => analytics.sendEventToPostHog(PostHogAction.WalletLaceClick)} > - + {process.env.USE_MULTI_WALLET !== 'true' && }
{ +export const NetworkPill = ({ isExpandable, isPopup = false }: NetworkPillProp): ReactElement => { const { environmentName } = useWalletStore(); const { t } = useTranslation(); const { isOnline, isBackendFailing } = useNetwork(); @@ -19,10 +20,19 @@ export const NetworkPill = ({ isExpandable }: NetworkPillProp): ReactElement => if (isOnline && !isBackendFailing && environmentName !== 'Mainnet') { return (
- {environmentName} + + {environmentName} +
); } @@ -30,7 +40,10 @@ export const NetworkPill = ({ isExpandable }: NetworkPillProp): ReactElement => return (
@@ -45,7 +58,10 @@ export const NetworkPill = ({ isExpandable }: NetworkPillProp): ReactElement => return (
diff --git a/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.test.tsx b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.test.tsx new file mode 100644 index 0000000000..7f06c9d6d2 --- /dev/null +++ b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.test.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { render, fireEvent, screen } from '@testing-library/react'; +import { EditAccountDrawer } from './EditAccountDrawer'; +import '@testing-library/jest-dom'; + +jest.mock('react-i18next', () => ({ + useTranslation: () => ({ t: jest.fn() }) +})); + +describe('EditAccountDrawer', () => { + const onSaveMock = jest.fn(); + const hideMock = jest.fn(); + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('displays default account name', () => { + render(); + + expect(screen.getByTestId('edit-account')).toBeInTheDocument(); + expect(screen.getByTestId('drawer-navigation-title')).toHaveTextContent('Account #1'); + expect(screen.getByTestId('edit-account-name-input')).toHaveValue(''); + expect(screen.getByTestId('edit-account-save-btn')).toBeDisabled(); + }); + + it('displays correct account name', () => { + render(); + + expect(screen.getByTestId('edit-account')).toBeInTheDocument(); + expect(screen.getByTestId('drawer-navigation-title')).toHaveTextContent('Test Account'); + expect(screen.getByTestId('edit-account-name-input')).toHaveValue('Test Account'); + expect(screen.getByTestId('edit-account-save-btn')).toBeDisabled(); + }); + + it('updates input value on change and enables save button', () => { + render(); + + const input = screen.getByTestId('edit-account-name-input'); + + fireEvent.change(input, { target: { value: 'New Account Name' } }); + fireEvent.click(screen.getByTestId('edit-account-save-btn')); + + expect(input).toHaveValue('New Account Name'); + expect(screen.getByTestId('drawer-navigation-title')).toHaveTextContent('Test Account'); + expect(screen.getByTestId('edit-account-save-btn')).toBeEnabled(); + expect(onSaveMock).toHaveBeenCalledWith('New Account Name'); + }); + + it('calls hide function when Cancel button is clicked', () => { + render(); + + fireEvent.click(screen.getByTestId('edit-account-cancel-btn')); + + expect(hideMock).toHaveBeenCalled(); + }); +}); diff --git a/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx new file mode 100644 index 0000000000..1e1f27b568 --- /dev/null +++ b/apps/browser-extension-wallet/src/features/account/components/EditAccount/EditAccountDrawer.tsx @@ -0,0 +1,60 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { Box, Flex, Button, Text, TextBox } from '@lace/ui'; +import { Drawer, DrawerNavigation } from '@lace/common'; + +export type Props = { + onSave: (name: string) => void; + visible: boolean; + hide: () => void; + name: string; + index: string; +}; + +export const EditAccountDrawer = ({ name, index, visible, onSave, hide }: Props): React.ReactElement => { + const { t } = useTranslation(); + const [currentName, setCurrentName] = useState(name); + + return ( + } + footer={ + + + onSave(currentName)} + data-testid="edit-account-save-btn" + label={t('account.edit.footer.save')} + /> + + + + } + > +
+ + {t('account.edit.title')} + + + {t('account.edit.subtitle')} + + setCurrentName(e.target.value)} + /> +
+ + ); +}; diff --git a/apps/browser-extension-wallet/src/features/account/components/EditAccount/hooks.ts b/apps/browser-extension-wallet/src/features/account/components/EditAccount/hooks.ts new file mode 100644 index 0000000000..f17ee3d5f8 --- /dev/null +++ b/apps/browser-extension-wallet/src/features/account/components/EditAccount/hooks.ts @@ -0,0 +1,11 @@ +import { useState } from 'react'; + +export const useEditAccountDrawer = (): { isOpen: boolean; open: () => void; hide: () => void } => { + const [visible, setVisible] = useState(false); + + return { + isOpen: visible, + open: () => setVisible(true), + hide: () => setVisible(false) + }; +}; diff --git a/apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx b/apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx index ba6ea45711..f90eea8d72 100644 --- a/apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx +++ b/apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-console */ import React, { useMemo } from 'react'; -import { Button } from '@lace/common'; +import { Button, PostHogAction } from '@lace/common'; import { useTranslation } from 'react-i18next'; import { Layout } from '../Layout'; import { useViewsFlowContext } from '@providers/ViewFlowProvider'; @@ -14,6 +14,9 @@ import { DAPP_CHANNELS } from '@src/utils/constants'; import { runtime } from 'webextension-polyfill'; import { getTitleKey, getTxType } from './utils'; import { ConfirmTransactionContent } from './ConfirmTransactionContent'; +import { TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/AnalyticsProvider/analyticsTracker'; +import { txSubmitted$ } from '@providers/AnalyticsProvider/onChain'; +import { useAnalyticsContext } from '@providers'; export const ConfirmTransaction = (): React.ReactElement => { const { t } = useTranslation(); @@ -34,6 +37,7 @@ export const ConfirmTransaction = (): React.ReactElement => { [] ); const { getKeyAgentType } = useWalletStore(); + const analytics = useAnalyticsContext(); const { signTxData, errorMessage } = useSignTxData(dappDataApi.getSignTxData); const keyAgentType = getKeyAgentType(); const isUsingHardwareWallet = keyAgentType !== Wallet.KeyManagement.KeyAgentType.InMemory; @@ -41,6 +45,19 @@ export const ConfirmTransaction = (): React.ReactElement => { const { isConfirmingTx, signWithHardwareWallet } = useSignWithHardwareWallet(); const txType = signTxData ? getTxType(signTxData.tx) : undefined; const title = txType ? t(getTitleKey(txType)) : ''; + const onConfirm = () => { + analytics.sendEventToPostHog(PostHogAction.SendTransactionSummaryConfirmClick, { + [TX_CREATION_TYPE_KEY]: TxCreationType.External + }); + + txSubmitted$.next({ + id: signTxData.tx?.id.toString(), + date: new Date().toString(), + creationType: TxCreationType.External + }); + + isUsingHardwareWallet ? signWithHardwareWallet() : setNextView(); + }; useOnBeforeUnload(disallowSignTx); @@ -49,9 +66,7 @@ export const ConfirmTransaction = (): React.ReactElement => {
- {fee && fee !== '-' && ( -
-
-
{t('package.core.activityDetails.transactionFee')}
- - {Info ? ( - - ) : ( - - )} - -
- -
-
- {`${fee} ${coinSymbol}`} - - {amountTransformer(fee)} - -
-
-
+ + + )} - {deposit && renderDepositValueSection({ value: deposit, label: t('package.core.activityDetails.deposit') })} {depositReclaim && renderDepositValueSection({ diff --git a/packages/core/src/ui/components/ActivityDetail/TransactionFee.module.scss b/packages/core/src/ui/components/ActivityDetail/TransactionFee.module.scss new file mode 100644 index 0000000000..7ba4758637 --- /dev/null +++ b/packages/core/src/ui/components/ActivityDetail/TransactionFee.module.scss @@ -0,0 +1,109 @@ +@import '../../styles/theme.scss'; +@import '../../../../../common/src/ui/styles/abstracts/typography'; + +.txFeeContainer { + display: flex; + align-items: center; + justify-content: center; + gap: size_unit(1); +} + +.txfee { + color: var(--text-color-primary); + font-size: var(--body, 16px); + font-weight: 600; + line-height: size_unit(3); +} + +.details { + color: var(--text-color-primary, #ffffff); + display: flex; + justify-content: space-between; + align-items: flex-start; + width: 100%; + + .title { + display: flex; + flex: 0 0 50%; + align-self: baseline; + color: var(--text-color-primary, #ffffff); + @include text-body-semi-bold; + } + + .detail { + align-items: end; + display: flex; + flex-direction: column; + gap: size_unit(2); + color: var(--text-color-primary, #ffffff); + text-align: right; + word-break: break-all; + @include text-body-medium; + + @media (max-width: $breakpoint-popup) { + flex-direction: column; + } + + &.hash { + @include text-address; + font-weight: 500; + text-align: right; + cursor: pointer; + } + &.txLink { + color: var(--text-color-blue, #3489f7); + line-height: 17px; + @media (max-width: $breakpoint-popup) { + flex: 60%; + } + } + &.poolId { + color: var(--text-color-secondary); + font-size: var(--bodySmall); + font-weight: 500; + line-height: 17px; + } + } + + .timestamp { + flex: 0 0 35%; + } + + .amount { + display: flex; + flex-direction: column; + width: 100%; + align-items: flex-end; + + .ada { + color: var(--text-color-primary, #ffffff); + } + + .fiat { + color: var(--text-color-secondary, #878e9e); + } + + .addrName { + margin-bottom: size_unit(1); + } + } + + .addressDetail { + font-size: var(--bodySmall, 14px); + font-weight: 400; + line-height: size_unit(2); + text-align: right; + margin-bottom: size_unit(5); + @media (max-width: $breakpoint-popup) { + margin-bottom: size_unit(6); + } + } + + .metadataLabel { + display: flex; + flex: 0 0 50%; + align-self: baseline; + @include text-bodyLarge-bold; + color: var(--text-color-primary); + } +} diff --git a/packages/core/src/ui/components/ActivityDetail/TransactionFee.tsx b/packages/core/src/ui/components/ActivityDetail/TransactionFee.tsx new file mode 100644 index 0000000000..ba4f3fd62b --- /dev/null +++ b/packages/core/src/ui/components/ActivityDetail/TransactionFee.tsx @@ -0,0 +1,42 @@ +/* eslint-disable no-magic-numbers */ +import React from 'react'; +import { InfoCircleOutlined } from '@ant-design/icons'; +import { Tooltip } from 'antd'; +import styles from './TransactionFee.module.scss'; +import { ReactComponent as Info } from '../../assets/icons/info-icon.component.svg'; +import { useTranslate } from '@src/ui/hooks'; + +export interface TransactionFeeProps { + fee: string; + amountTransformer: (amount: string) => string; + coinSymbol: string; +} +export const TransactionFee = ({ fee, amountTransformer, coinSymbol }: TransactionFeeProps): React.ReactElement => { + const { t } = useTranslate(); + + return ( +
+
+
+ {t('package.core.activityDetails.transactionFee')} +
+ + {Info ? ( + + ) : ( + + )} + +
+ +
+
+ {`${fee} ${coinSymbol}`} + + {amountTransformer(fee)} + +
+
+
+ ); +}; diff --git a/packages/core/src/ui/components/ActivityDetail/index.ts b/packages/core/src/ui/components/ActivityDetail/index.ts index 26ccb7a4b5..7ba95eea83 100644 --- a/packages/core/src/ui/components/ActivityDetail/index.ts +++ b/packages/core/src/ui/components/ActivityDetail/index.ts @@ -3,3 +3,4 @@ export * from './RewardsDetails'; export * from './ActivityTypeIcon'; export * from './TransactionDetailAsset'; export * from './TransactionInputOutput'; +export * from './TransactionFee'; diff --git a/packages/core/src/ui/components/DappTransaction/DappTransaction.module.scss b/packages/core/src/ui/components/DappTransaction/DappTransaction.module.scss index ac80eec8e0..ea1eb99b34 100644 --- a/packages/core/src/ui/components/DappTransaction/DappTransaction.module.scss +++ b/packages/core/src/ui/components/DappTransaction/DappTransaction.module.scss @@ -1,5 +1,6 @@ @import '../../styles/theme.scss'; @import '../../../../../common/src/ui/styles/abstracts/_typography.scss'; + .dappInfo { margin: size_unit(1) 0px; } @@ -12,92 +13,14 @@ margin: size_unit(4) 0 size_unit(2) 0px; padding: size_unit(3) 0; border-top: 2px solid var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey)); + gap: size_unit(3); } .error { margin: size_unit(2) 0px; } -.header { - font-size: var(--bodyLarge); - letter-spacing: -0.015em; - margin-bottom: size_unit(1); - display: flex; - justify-content: space-between; - align-items: center; - - .title { - font-weight: 600; - line-height: size_unit(3); - /* or 133% */ - /* Secondary - Black */ - color: var(--text-color-primary); - } - .type { - font-weight: 500; - line-height: size_unit(4); - /* or 178% */ - text-align: right; - /* Primary - Purple */ - color: var(--primary-default, #7f5af0); - } -} -.body { - display: flex; - flex-direction: column; - gap: size_unit(2); -} -.detail { - display: flex; - justify-content: space-between; - align-items: baseline; - - > * { - display: flex; - flex: 0 1 50%; - min-width: 0; - } - - .title { - font-weight: 500; - font-size: var(--body); - line-height: size_unit(3); - /* or 150% */ - /* Secondary - Black */ - color: var(--text-color-primary); - text-align: right; - } - .value { - display: flex; - align-items: flex-end; - flex-direction: column; - - font-size: var(--bodySmall); - font-weight: 500; - line-height: size_unit(2); - /* Secondary - Black */ - color: var(--text-color-primary); - - .bold { - font-weight: 600; - line-height: size_unit(3); - font-size: var(--body); - word-break: break-all; - } - - .rightAligned { - text-align: right; - > div { - justify-content: flex-end; - } - div, - p { - text-align: right; - } - } - } -} .warningAlert { flex-direction: row; background: var(--lace-cream); @@ -118,15 +41,12 @@ margin: 0; } } -:global(.__react_component_tooltip) { - @include tooltip-default; -} -.sub { - @include text-bodySmall-medium; - /* or 171% */ - letter-spacing: -0.015em; - /* Data - Dark Grey */ +.feeContainer { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: space-between; + @include text-body-semi-bold; color: var(--text-color-primary); - text-align: right; } diff --git a/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx b/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx index d7c4da265c..6b0d0bce81 100644 --- a/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx +++ b/packages/core/src/ui/components/DappTransaction/DappTransaction.tsx @@ -1,91 +1,84 @@ +/* eslint-disable sonarjs/no-duplicate-string */ import React from 'react'; -import { Ellipsis, ErrorPane } from '@lace/common'; +import { ErrorPane } from '@lace/common'; +import { Wallet } from '@lace/cardano'; import { DappInfo, DappInfoProps } from '../DappInfo'; +import { DappTxHeader } from './DappTxHeader/DappTxHeader'; +import { DappTxAsset } from './DappTxAsset/DappTxAsset'; +import { DappTxOutput } from './DappTxOutput/DappTxOutput'; import styles from './DappTransaction.module.scss'; -import { TranslationsFor } from '@ui/utils/types'; - -type TransactionDetails = { - fee: string; - outputs: { - coins: string; - recipient: string; - assets?: { - name: string; - amount: string; - ticker?: string; - }[]; - }[]; - type: 'Send' | 'Mint' | 'Burn'; -}; +import { useTranslate } from '@src/ui/hooks'; +import { TransactionFee } from '@ui/components/ActivityDetail'; export interface DappTransactionProps { /** Transaction details such as type, amount, fee and address */ - transaction: TransactionDetails; + transaction: Wallet.Cip30SignTxSummary; /** dApp information such as logo, name and url */ dappInfo: Omit; /** Optional error message */ errorMessage?: string; - translations: TranslationsFor<'transaction' | 'amount' | 'recipient' | 'fee' | 'adaFollowingNumericValue'>; + fiatCurrencyCode?: string; + fiatCurrencyPrice?: number; + coinSymbol?: string; } export const DappTransaction = ({ - transaction: { type, outputs, fee }, + transaction: { type, outputs, fee, mintedAssets, burnedAssets }, dappInfo, errorMessage, - translations -}: DappTransactionProps): React.ReactElement => ( -
- - {errorMessage && } -
-
-
- {translations.transaction} -
-
- {type} -
+ fiatCurrencyCode, + fiatCurrencyPrice, + coinSymbol +}: DappTransactionProps): React.ReactElement => { + const { t } = useTranslate(); + return ( +
+ + {errorMessage && } +
+ {type === Wallet.Cip30TxType.Mint && mintedAssets?.length > 0 && ( + <> + + {mintedAssets.map((asset) => ( + + ))} + + )} + {type === Wallet.Cip30TxType.Burn && burnedAssets?.length > 0 && ( + <> + 0 ? undefined : t('package.core.dappTransaction.transaction')} + subtitle={t('package.core.dappTransaction.burn')} + /> + {burnedAssets.map((asset) => ( + + ))} + + )} + {type === Wallet.Cip30TxType.Send && ( + <> + + {outputs.map((output) => ( + + ))} + + )} + {fee && fee !== '-' && ( + + `${Wallet.util.convertAdaToFiat({ ada, fiat: fiatCurrencyPrice })} ${fiatCurrencyCode}` + } + coinSymbol={coinSymbol} + /> + )}
- {outputs.map((output) => ( -
-
-
- {translations.amount} -
-
-
- {output.coins.toString()} ADA -
- {outputs.length === 1 && ( -
- {translations.fee}: {fee.toString()} ADA -
- )} - {output.assets && - output.assets.map((asset) => ( -
- {asset.amount} {asset.ticker || asset.name} -
- ))} -
-
-
-
- {translations.recipient} -
-
- -
-
-
- ))} - {outputs.length > 1 && ( -
-
- {translations.fee}: {fee.toString()} ADA -
-
- )}
-
-); + ); +}; diff --git a/packages/core/src/ui/components/DappTransaction/DappTxAsset/DappTxAsset.module.scss b/packages/core/src/ui/components/DappTransaction/DappTxAsset/DappTxAsset.module.scss new file mode 100644 index 0000000000..0d5bf78af1 --- /dev/null +++ b/packages/core/src/ui/components/DappTransaction/DappTxAsset/DappTxAsset.module.scss @@ -0,0 +1,41 @@ +@import '../../../styles/theme.scss'; +@import '../../../../../../common/src/ui/styles/abstracts/_typography.scss'; + +.body { + display: flex; + flex-direction: column; + gap: size_unit(3); + background-color: var(--light-mode-light-grey, var(--dark-mode-grey, #f9f9f9)); + border-radius: size_unit(2); + padding: size_unit(2); + + .detail { + @include text-body-semi-bold; + display: flex; + justify-content: space-between; + align-items: center; + + .title { + color: var(--text-color-primary); + line-height: 1; + } + + .value { + display: flex; + max-width: 50%; + align-items: flex-end; + flex-direction: column; + gap: size_unit(2); + + font-size: var(--bodySmall); + font-weight: 500; + line-height: 1; + /* Secondary - Black */ + color: var(--text-color-primary); + } + + .ellipsis > p { + margin: 0; + } + } +} diff --git a/packages/core/src/ui/components/DappTransaction/DappTxAsset/DappTxAsset.tsx b/packages/core/src/ui/components/DappTransaction/DappTxAsset/DappTxAsset.tsx new file mode 100644 index 0000000000..b775403436 --- /dev/null +++ b/packages/core/src/ui/components/DappTransaction/DappTxAsset/DappTxAsset.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import styles from './DappTxAsset.module.scss'; +import { Ellipsis } from '@lace/common'; +import { useTranslate } from '@src/ui/hooks'; +import { Wallet } from '@lace/cardano'; + +export const DappTxAsset = ({ amount, name, ticker }: Wallet.Cip30SignTxAssetItem): React.ReactElement => { + const { t } = useTranslate(); + return ( +
+
+
{t('package.core.dappTransaction.asset')}
+
+ +
+
+
+
{t('package.core.dappTransaction.quantity')}
+
{amount}
+
+
+ ); +}; diff --git a/packages/core/src/ui/components/DappTransaction/DappTxAsset/index.ts b/packages/core/src/ui/components/DappTransaction/DappTxAsset/index.ts new file mode 100644 index 0000000000..3418661f1c --- /dev/null +++ b/packages/core/src/ui/components/DappTransaction/DappTxAsset/index.ts @@ -0,0 +1 @@ +export { DappTxAsset } from './DappTxAsset'; diff --git a/packages/core/src/ui/components/DappTransaction/DappTxHeader/DappTxHeader.module.scss b/packages/core/src/ui/components/DappTransaction/DappTxHeader/DappTxHeader.module.scss new file mode 100644 index 0000000000..94eefef49f --- /dev/null +++ b/packages/core/src/ui/components/DappTransaction/DappTxHeader/DappTxHeader.module.scss @@ -0,0 +1,27 @@ +@import '../../../styles/theme.scss'; +@import '../../../../../../common/src/ui/styles/abstracts/_typography.scss'; + +.header { + font-size: var(--bodyLarge); + letter-spacing: -0.015em; + margin-bottom: size_unit(1); + display: flex; + justify-content: space-between; + align-items: center; + + .title { + font-weight: 600; + line-height: size_unit(3); + /* or 133% */ + /* Secondary - Black */ + color: var(--text-color-primary); + } + .type { + font-weight: 500; + line-height: size_unit(4); + /* or 178% */ + text-align: right; + /* Primary - Purple */ + color: var(--primary-default, #7f5af0); + } +} diff --git a/packages/core/src/ui/components/DappTransaction/DappTxHeader/DappTxHeader.tsx b/packages/core/src/ui/components/DappTransaction/DappTxHeader/DappTxHeader.tsx new file mode 100644 index 0000000000..8117fcd3e0 --- /dev/null +++ b/packages/core/src/ui/components/DappTransaction/DappTxHeader/DappTxHeader.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import styles from './DappTxHeader.module.scss'; + +export interface DappTxHeaderProps { + title?: string; + subtitle?: string; +} + +export const DappTxHeader = (props: DappTxHeaderProps): React.ReactElement => ( +
+
+ {props?.title ?? ''} +
+ {props?.subtitle && ( +
+ {props.subtitle} +
+ )} +
+); diff --git a/packages/core/src/ui/components/DappTransaction/DappTxOutput/DappTxOutput.module.scss b/packages/core/src/ui/components/DappTransaction/DappTxOutput/DappTxOutput.module.scss new file mode 100644 index 0000000000..04c3b12f0a --- /dev/null +++ b/packages/core/src/ui/components/DappTransaction/DappTxOutput/DappTxOutput.module.scss @@ -0,0 +1,67 @@ +@import '../../../styles/theme.scss'; +@import '../../../../../../common/src/ui/styles/abstracts/_typography.scss'; + +.body { + display: flex; + flex-direction: column; + gap: size_unit(3); + background-color: var(--light-mode-light-grey, var(--dark-mode-grey, #f9f9f9)); + border-radius: size_unit(2); + padding: size_unit(2); +} + +.detail { + display: flex; + justify-content: space-between; + align-items: baseline; + + > * { + display: flex; + flex: 0 1 50%; + min-width: 0; + } + + .title { + font-weight: 500; + font-size: var(--body); + line-height: size_unit(3); + /* or 150% */ + /* Secondary - Black */ + color: var(--text-color-primary); + text-align: right; + } + .value { + display: flex; + align-items: flex-end; + flex-direction: column; + gap: size_unit(2); + + font-size: var(--bodySmall); + font-weight: 500; + line-height: size_unit(2); + /* Secondary - Black */ + color: var(--text-color-primary); + + .bold { + font-weight: 600; + line-height: size_unit(3); + font-size: var(--body); + word-break: break-all; + } + + .rightAligned { + text-align: right; + > div { + justify-content: flex-end; + } + div, + p { + text-align: right; + } + } + } +} + +:global(.__react_component_tooltip) { + @include tooltip-default; +} diff --git a/packages/core/src/ui/components/DappTransaction/DappTxOutput/DappTxOutput.tsx b/packages/core/src/ui/components/DappTransaction/DappTxOutput/DappTxOutput.tsx new file mode 100644 index 0000000000..9eccd4e0e7 --- /dev/null +++ b/packages/core/src/ui/components/DappTransaction/DappTxOutput/DappTxOutput.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { Ellipsis } from '@lace/common'; +import styles from './DappTxOutput.module.scss'; +import { useTranslate } from '@src/ui/hooks'; +import { Wallet } from '@lace/cardano'; + +export interface DappTxOutputProps { + coins: string; + recipient: string; + assets?: Wallet.Cip30SignTxAssetItem[]; +} + +export const DappTxOutput = ({ recipient, coins, assets }: DappTxOutputProps): React.ReactElement => { + const { t } = useTranslate(); + return ( +
+
+
+ {t('package.core.dappTransaction.sending')} +
+
+
+ {coins.toString()} ADA +
+ {assets?.map((asset) => ( +
+ {asset.amount} {asset.ticker || asset.name} +
+ ))} +
+
+
+
+ {t('package.core.dappTransaction.recipient')} +
+
+ +
+
+
+ ); +}; diff --git a/packages/core/src/ui/lib/translations/en.json b/packages/core/src/ui/lib/translations/en.json index c73e862cbd..7336752ffd 100644 --- a/packages/core/src/ui/lib/translations/en.json +++ b/packages/core/src/ui/lib/translations/en.json @@ -100,6 +100,18 @@ "noMatchPassword": "Oops! The passwords don't match.", "secondLevelPasswordStrengthFeedback": "Getting there! Add some symbols and numbers to make it stronger.", "firstLevelPasswordStrengthFeedback": "Weak password. Add some numbers and characters to make it stronger." + }, + "dappTransaction": { + "asset": "Asset", + "burn": "Burn", + "fee": "Transaction Fee", + "insufficientFunds": "You do not have enough funds to complete the transaction", + "mint": "Mint", + "quantity": "Quantity", + "recipient": "Recipient", + "send": "Send", + "sending": "Sending", + "transaction": "Transaction" } } } diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json index 4af33bf873..55746c84ac 100755 --- a/packages/e2e-tests/package.json +++ b/packages/e2e-tests/package.json @@ -34,14 +34,14 @@ "@types/flat": "5.0.2", "@typescript-eslint/eslint-plugin": "6.0.0", "@typescript-eslint/parser": "6.0.0", - "@wdio/allure-reporter": "8.24.0", - "@wdio/cli": "8.24.0", - "@wdio/config": "8.24.0", - "@wdio/cucumber-framework": "8.24.0", - "@wdio/devtools-service": "8.24.0", - "@wdio/local-runner": "8.24.0", - "@wdio/spec-reporter": "8.24.0", - "@wdio/types": "8.24.0", + "@wdio/allure-reporter": "8.20.0", + "@wdio/cli": "8.20.0", + "@wdio/config": "8.20.0", + "@wdio/cucumber-framework": "8.20.0", + "@wdio/devtools-service": "8.20.0", + "@wdio/local-runner": "8.20.0", + "@wdio/spec-reporter": "8.20.0", + "@wdio/types": "8.20.0", "allure-commandline": "2.24.1", "clipboardy": "2.3.0", "eslint": "8.38.0", @@ -53,6 +53,6 @@ "ts-node": "10.9.1", "typescript": "4.9.5", "wdio-intercept-service": "4.4.0", - "webdriverio": "8.24.0" + "webdriverio": "8.20.0" } } diff --git a/packages/e2e-tests/src/assert/dAppConnectorAssert.ts b/packages/e2e-tests/src/assert/dAppConnectorAssert.ts index f19c85e0c4..cf484e4124 100644 --- a/packages/e2e-tests/src/assert/dAppConnectorAssert.ts +++ b/packages/e2e-tests/src/assert/dAppConnectorAssert.ts @@ -289,13 +289,19 @@ class DAppConnectorAssert { await ConfirmTransactionPage.transactionAmountTitle.waitForDisplayed(); expect(await ConfirmTransactionPage.transactionAmountTitle.getText()).to.equal( - await t('dapp.confirm.details.amount') + await t('package.core.dappTransaction.sending', 'core') ); await ConfirmTransactionPage.transactionAmountValue.waitForDisplayed(); expect(await ConfirmTransactionPage.transactionAmountValue.getText()).to.equal(expectedTransactionData.amountADA); - await ConfirmTransactionPage.transactionAmountFee.waitForDisplayed(); + await ConfirmTransactionPage.transactionFeeTitle.waitForDisplayed(); + expect(await ConfirmTransactionPage.transactionFeeTitle.getText()).to.equal( + await t('package.core.activityDetails.transactionFee', 'core') + ); + await ConfirmTransactionPage.transactionFeeTooltipIcon.waitForDisplayed(); + await ConfirmTransactionPage.transactionFeeValueAda.waitForDisplayed(); + await ConfirmTransactionPage.transactionFeeValueFiat.waitForDisplayed(); if (expectedTransactionData.amountAsset && expectedTransactionData.amountAsset !== '0') { await ConfirmTransactionPage.transactionAmountAsset.waitForDisplayed(); diff --git a/packages/e2e-tests/src/elements/dappConnector/confirmTransactionPage.ts b/packages/e2e-tests/src/elements/dappConnector/confirmTransactionPage.ts index ffdfc455fc..1b8636a7d7 100644 --- a/packages/e2e-tests/src/elements/dappConnector/confirmTransactionPage.ts +++ b/packages/e2e-tests/src/elements/dappConnector/confirmTransactionPage.ts @@ -7,7 +7,10 @@ class ConfirmTransactionPage extends CommonDappPageElements { private TRANSACTION_TYPE = '[data-testid="dapp-transaction-type"]'; private TRANSACTION_AMOUNT_TITLE = '[data-testid="dapp-transaction-amount-title"]'; private TRANSACTION_AMOUNT_VALUE = '[data-testid="dapp-transaction-amount-value"]'; - private TRANSACTION_AMOUNT_FEE = '[data-testid="dapp-transaction-amount-fee"]'; + private TRANSACTION_AMOUNT_FEE_TITLE = '[data-testid="tx-fee-title"]'; + private TRANSACTION_AMOUNT_FEE_TITLE_TOOLTIP_ICON = '[data-testid="tx-fee-tooltip-icon"]'; + private TRANSACTION_AMOUNT_FEE_VALUE_ADA = '[data-testid="tx-fee-ada"]'; + private TRANSACTION_AMOUNT_FEE_VALUE_FIAT = '[data-testid="tx-fee-fiat"]'; private TRANSACTION_AMOUNT_ASSET = '[data-testid="dapp-transaction-asset"]'; private TRANSACTION_RECIPIENT_TITLE = '[data-testid="dapp-transaction-recipient-title"]'; private TRANSACTION_RECIPIENT_ADDRESS = '[data-testid="dapp-transaction-recipient-address"]'; @@ -29,9 +32,20 @@ class ConfirmTransactionPage extends CommonDappPageElements { get transactionAmountValue(): ChainablePromiseElement { return $(this.TRANSACTION_AMOUNT_VALUE); } + get transactionFeeTitle(): ChainablePromiseElement { + return $(this.TRANSACTION_AMOUNT_FEE_TITLE); + } + + get transactionFeeTooltipIcon(): ChainablePromiseElement { + return $(this.TRANSACTION_AMOUNT_FEE_TITLE_TOOLTIP_ICON); + } + + get transactionFeeValueAda(): ChainablePromiseElement { + return $(this.TRANSACTION_AMOUNT_FEE_VALUE_ADA); + } - get transactionAmountFee(): ChainablePromiseElement { - return $(this.TRANSACTION_AMOUNT_FEE); + get transactionFeeValueFiat(): ChainablePromiseElement { + return $(this.TRANSACTION_AMOUNT_FEE_VALUE_FIAT); } get transactionAmountAsset(): ChainablePromiseElement { diff --git a/packages/e2e-tests/src/features/EmptyStatesExtended.feature b/packages/e2e-tests/src/features/EmptyStatesExtended.feature index b1437d70ee..273e140f50 100644 --- a/packages/e2e-tests/src/features/EmptyStatesExtended.feature +++ b/packages/e2e-tests/src/features/EmptyStatesExtended.feature @@ -29,7 +29,6 @@ Feature: Empty states @LW-8447 Scenario: Extended View - Staking empty state - When I disable showing Multidelegation beta banner And I navigate to Staking extended page Then I see empty state banner for Staking page in extended mode When I click "Copy" button on empty state banner diff --git a/packages/e2e-tests/src/features/EmptyStatesPopup.feature b/packages/e2e-tests/src/features/EmptyStatesPopup.feature index c58982208f..daa1864c58 100644 --- a/packages/e2e-tests/src/features/EmptyStatesPopup.feature +++ b/packages/e2e-tests/src/features/EmptyStatesPopup.feature @@ -28,7 +28,6 @@ Feature: Empty states @LW-8470 Scenario: Popup View - Staking empty state - When I disable showing Multidelegation beta banner And I navigate to Staking popup page Then I see empty state banner for Staking page in popup mode When I click "Copy" button on empty state banner diff --git a/packages/e2e-tests/src/features/FullExperiencePopup.feature b/packages/e2e-tests/src/features/FullExperiencePopup.feature index 9cbc58ea86..2209cd4938 100644 --- a/packages/e2e-tests/src/features/FullExperiencePopup.feature +++ b/packages/e2e-tests/src/features/FullExperiencePopup.feature @@ -12,7 +12,6 @@ Feature: Full experience - popup view @LW-3446 Scenario Outline: Popup View - opened - "Expand" button click - Given I disable showing Multidelegation beta banner And I am on popup page When I click on "Expand" button Then the page is displayed on a new tab in extended view diff --git a/packages/e2e-tests/src/features/MultiDelegationPageExtended.feature b/packages/e2e-tests/src/features/MultiDelegationPageExtended.feature index ca562f6571..1b571b3a7c 100644 --- a/packages/e2e-tests/src/features/MultiDelegationPageExtended.feature +++ b/packages/e2e-tests/src/features/MultiDelegationPageExtended.feature @@ -7,7 +7,6 @@ Feature: Staking Page - Extended View @LW-8931 @Testnet Scenario: Extended View - Start Staking component Given I save token: "Cardano" balance - And I disable showing Multidelegation beta banner When I navigate to Staking extended page Then I see Start Staking page in extended mode @@ -23,14 +22,12 @@ Feature: Staking Page - Extended View @LW-8449 @Testnet @Mainnet Scenario: Extended View - Staking search control is displayed with appropriate content - Given I disable showing Multidelegation beta banner When I navigate to Staking extended page And I click Browse pools tab Then I see the stake pool search control with appropriate content @LW-8448 @Testnet Scenario Outline: Extended View - Stake pool search for "" returns the expected number of results with appropriate content - Given I disable showing Multidelegation beta banner When I navigate to Staking extended page And I click Browse pools tab And I input "" into stake pool search bar @@ -49,7 +46,6 @@ Feature: Staking Page - Extended View @LW-8448 @Mainnet Scenario Outline: Extended View - Stake pool search for "" returns the expected number of results with appropriate content - Given I disable showing Multidelegation beta banner When I navigate to Staking extended page And I click Browse pools tab And I input "" into stake pool search bar @@ -69,12 +65,10 @@ Feature: Staking Page - Extended View @LW-8466 @Testnet @Mainnet Scenario: Extended View - "About staking" widget Given I am on Staking extended page - And I close Multi-delegation beta modal Then I see "About staking" widget with all relevant items @LW-8465 @Testnet @Mainnet Scenario Outline: Extended View - "About staking" widget item click - - Given I disable showing Multidelegation beta banner And I am on Staking extended page When I click on a widget item with subtitle: "" Then I see a "" article with title "" @@ -87,13 +81,11 @@ Feature: Staking Page - Extended View @LW-8469 @Testnet @Mainnet Scenario: Extended View - Network info component is present with expected content - Given I disable showing Multidelegation beta banner When I navigate to Staking extended page Then I see the Network Info component with the expected content @LW-8499 @Testnet @Mainnet Scenario Outline: Extended View - Staking - Show tooltip for column names in browse pools section - Given I disable showing Multidelegation beta banner When I navigate to Staking extended page And I click Browse pools tab When I hover over "" column name in stake pool list @@ -105,7 +97,6 @@ Feature: Staking Page - Extended View @LW-8637 @Testnet @Mainnet Scenario: Extended View - Staking password screen details - Given I disable showing Multidelegation beta banner When I navigate to Staking extended page And I click Overview tab And I click Browse pools tab @@ -118,7 +109,6 @@ Feature: Staking Page - Extended View @LW-8445 @Testnet Scenario: Extended View - Selecting stakepool from list opens drawer with appropriate details - Given I disable showing Multidelegation beta banner And I am on Staking extended page And I click Browse pools tab And I input "ADA Capital" into stake pool search bar @@ -127,7 +117,6 @@ Feature: Staking Page - Extended View @LW-8438 @Testnet Scenario: Extended View - Staking - Stakepool details drawer - Close drawer - Given I disable showing Multidelegation beta banner And I am on Staking extended page And I click Browse pools tab And I input "ADA Capital" into stake pool search bar @@ -137,7 +126,6 @@ Feature: Staking Page - Extended View @LW-8463 @Testnet @Mainnet Scenario: Extended View - Stake pool list item - Given I disable showing Multidelegation beta banner And I am on Staking extended page And I click Browse pools tab And I wait for stake pool list to be populated diff --git a/packages/e2e-tests/src/features/MultiDelegationPagePopup.feature b/packages/e2e-tests/src/features/MultiDelegationPagePopup.feature index da12730b12..f0810fafb1 100644 --- a/packages/e2e-tests/src/features/MultiDelegationPagePopup.feature +++ b/packages/e2e-tests/src/features/MultiDelegationPagePopup.feature @@ -7,7 +7,6 @@ Feature: Staking Page - Popup View @LW-8933 @Testnet Scenario: Popup View - Start Staking component Given I save token: "Cardano" balance - And I disable showing Multidelegation beta banner When I navigate to Staking popup page Then I see Start Staking page in popup mode diff --git a/packages/e2e-tests/src/features/MultidelegationDelegatedFundsExtended.feature b/packages/e2e-tests/src/features/MultidelegationDelegatedFundsExtended.feature index 422a2d405b..000d5aba03 100644 --- a/packages/e2e-tests/src/features/MultidelegationDelegatedFundsExtended.feature +++ b/packages/e2e-tests/src/features/MultidelegationDelegatedFundsExtended.feature @@ -6,7 +6,6 @@ Feature: Staking Page - Extended View @LW-8436 @LW-8439 @LW-8440 @LW-8598 Scenario Outline: Extended View - Staking - Close drawer - Given I disable showing Multidelegation beta banner When I navigate to Staking extended page And I click Browse pools tab And I pick "1" pools for delegation from browse pools view: "ADA Capital" @@ -28,7 +27,6 @@ Feature: Staking Page - Extended View @LW-8450 Scenario Outline: Extended View - Staking - Hover over currently staking element: - Given I disable showing Multidelegation beta banner And I navigate to Staking extended page When I hover over in currently staking component Then I see tooltip for element in currently staking component diff --git a/packages/e2e-tests/src/features/MultidelegationDelegatedFundsPopup.feature b/packages/e2e-tests/src/features/MultidelegationDelegatedFundsPopup.feature index a397fdee1b..a138ee1ae7 100644 --- a/packages/e2e-tests/src/features/MultidelegationDelegatedFundsPopup.feature +++ b/packages/e2e-tests/src/features/MultidelegationDelegatedFundsPopup.feature @@ -7,15 +7,14 @@ Feature: Staking Page - Popup View @LW-8330 Scenario Outline: Popup View - Delegation card displays correct data Given I open wallet: "" in: popup mode - And I disable showing Multidelegation beta banner And I disable showing Multidelegation persistence banner When I navigate to Staking popup page Then I see Delegation title displayed for multidelegation And I see Delegation card displaying correct data Examples: - | walletName | - | MultidelegationDelegatedSingle | - | MultidelegationDelegatedMulti | + | walletName | + | MultidelegationDelegatedSingle | + | MultidelegationDelegatedMulti | @LW-8338 Scenario Outline: Popup View - Delegated pools cards are present @@ -31,9 +30,7 @@ Feature: Staking Page - Popup View @LW-8480 Scenario Outline: Popup View - Staking - Hover over currently staking element: - Given Lace is ready for test - And I disable showing Multidelegation beta banner - And I navigate to Staking popup page + Given I navigate to Staking popup page When I hover over in currently staking component Then I see tooltip for element in currently staking component Examples: diff --git a/packages/e2e-tests/src/features/NavigationMainExtended.feature b/packages/e2e-tests/src/features/NavigationMainExtended.feature index a12cae4da7..d9d7cd27ed 100644 --- a/packages/e2e-tests/src/features/NavigationMainExtended.feature +++ b/packages/e2e-tests/src/features/NavigationMainExtended.feature @@ -3,7 +3,6 @@ Feature: Main Navigation - Extended view Background: Given Lace is ready for test - And I disable showing Multidelegation beta banner @LW-2692 @Smoke Scenario: Extended view - Main navigation is displayed with all items @@ -38,13 +37,13 @@ Feature: Main Navigation - Extended view When I click on the logo icon Then I see Tokens counter with total number of tokens displayed Examples: - | section | validateIfSectionIsDisplayed | - | Tokens | I see Tokens counter with total number of tokens displayed | - | NFTs | I see NFTs counter with total number of NFTs displayed | - | Transactions | Transactions section is displayed | - | Staking | I see Delegation title displayed for multidelegation | - | Settings | I see settings page | - | Address Book | I see address book title | + | section | validateIfSectionIsDisplayed | + | Tokens | I see Tokens counter with total number of tokens displayed | + | NFTs | I see NFTs counter with total number of NFTs displayed | + | Transactions | Transactions section is displayed | + | Staking | I see Delegation title displayed for multidelegation | + | Settings | I see settings page | + | Address Book | I see address book title | @LW-6662 Scenario Outline: Extended view - Main Navigation - Right side panel not displayed in
section diff --git a/packages/e2e-tests/src/features/NavigationMainPopup.feature b/packages/e2e-tests/src/features/NavigationMainPopup.feature index 9aba459aaa..86acaab892 100644 --- a/packages/e2e-tests/src/features/NavigationMainPopup.feature +++ b/packages/e2e-tests/src/features/NavigationMainPopup.feature @@ -32,7 +32,6 @@ Feature: Main Navigation - Popup View @LW-2610 Scenario Outline: Extended view - Click Lace logo -
And Wallet is synced - And I disable showing Multidelegation beta banner And I navigate to
popup page And When I click on the logo icon diff --git a/packages/e2e-tests/src/features/analytics/AnalyticsSendExtended.feature b/packages/e2e-tests/src/features/analytics/AnalyticsSendExtended.feature index f159bf2ea8..4a7edbc963 100644 --- a/packages/e2e-tests/src/features/analytics/AnalyticsSendExtended.feature +++ b/packages/e2e-tests/src/features/analytics/AnalyticsSendExtended.feature @@ -15,6 +15,7 @@ Feature: Analytics - Posthog - Sending - Extended View | ADA | Cardano | tADA | 1.1234 | When I click "Add bundle" button on "Send" page And I enter "$test_handle_1" in the bundle 2 recipient's address + And Green tick icon is displayed next to ADA handle And I enter a value of: 1 to the "tADA" asset in bundle 2 And I click "Review transaction" button on "Send" page Then I validate latest analytics single event "send | transaction data | review transaction | click" @@ -29,7 +30,7 @@ Feature: Analytics - Posthog - Sending - Extended View And I click "View transaction" button on submitted transaction page And Local storage unconfirmedTransaction contains tx with type: "internal" And I validate latest analytics single event "send | all done | view transaction | click" - When the Sent transaction is displayed with value: "1.12 tADA" and tokens count 1 + When the Sent transaction is displayed with value: "2.12 tADA" and tokens count 1 Then I validate latest analytics single event "send | transaction confirmed" And I validate that the "send | transaction confirmed" event includes property "tx_creation_type" with value "internal" in posthog And I validate that 7 analytics event(s) have been sent diff --git a/packages/e2e-tests/src/features/e2e/MultidelegationSwitchingPoolsExtendedE2E.feature b/packages/e2e-tests/src/features/e2e/MultidelegationSwitchingPoolsExtendedE2E.feature index e30451b57e..f441fc755b 100644 --- a/packages/e2e-tests/src/features/e2e/MultidelegationSwitchingPoolsExtendedE2E.feature +++ b/packages/e2e-tests/src/features/e2e/MultidelegationSwitchingPoolsExtendedE2E.feature @@ -3,7 +3,6 @@ Feature: Staking Page - Switching pools - Extended Browser View - E2E Background: Given Wallet is synced - And I disable showing Multidelegation beta banner And I navigate to Staking extended page @LW-7819 @Testnet @Pending diff --git a/packages/e2e-tests/src/hooks/beforeTagHooks.ts b/packages/e2e-tests/src/hooks/beforeTagHooks.ts index b58e8583e9..760d72fdd3 100644 --- a/packages/e2e-tests/src/hooks/beforeTagHooks.ts +++ b/packages/e2e-tests/src/hooks/beforeTagHooks.ts @@ -30,22 +30,31 @@ Before( { tags: '@AddressBook-extended or @Transactions-Extended or @Tokens-extended or @Staking-Extended or @LockWallet-extended or @Top-Navigation-Extended or @NFTs-Extended or @NFT-Folders-Extended or @SendTx-Bundles-Extended or @SendTx-Simple-Extended or @MainNavigation-Extended or @Send-Transaction-Metadata-Extended or @Settings-Extended or @DAppConnector or @DAppConnector-Extended' }, - async () => await extendedViewWalletInitialization() + async () => { + await extendedViewWalletInitialization(); + await localStorageInitializer.disableShowingMultidelegationBetaBanner(); + } ); Before( { tags: '@Tokens-popup or @Transactions-Popup or @Staking-Popup or @LockWallet-popup or @Top-Navigation-Popup or @AddressBook-popup or @Common-Popup or @SendTx-Simple-Popup or @MainNavigation-Popup or @Settings-Popup or @NFTs-Popup or @NFT-Folders-Popup or @Send-Transaction-Metadata-Popup or @ForgotPassword or @DAppConnector-Popup' }, - async () => await popupViewWalletInitialization() + async () => { + await popupViewWalletInitialization(); + await localStorageInitializer.disableShowingMultidelegationBetaBanner(); + } ); -Before( - { tags: '@EmptyStates-Extended' }, - async () => await extendedViewWalletInitialization(TestWalletName.TAWalletNoFunds) -); +Before({ tags: '@EmptyStates-Extended' }, async () => { + await extendedViewWalletInitialization(TestWalletName.TAWalletNoFunds); + await localStorageInitializer.disableShowingMultidelegationBetaBanner(); +}); -Before({ tags: '@EmptyStates-Popup' }, async () => await popupViewWalletInitialization(TestWalletName.TAWalletNoFunds)); +Before({ tags: '@EmptyStates-Popup' }, async () => { + await popupViewWalletInitialization(TestWalletName.TAWalletNoFunds); + await localStorageInitializer.disableShowingMultidelegationBetaBanner(); +}); Before( { tags: '@SendTx-MultipleSelection-Popup' }, @@ -104,15 +113,15 @@ Before( async () => await extendedViewWalletInitialization(TestWalletName.TAWalletDelegatedFunds) ); -Before( - { tags: '@Staking-NonDelegatedFunds-Extended' }, - async () => await extendedViewWalletInitialization(TestWalletName.TAWalletNonDelegatedFunds) -); +Before({ tags: '@Staking-NonDelegatedFunds-Extended' }, async () => { + await extendedViewWalletInitialization(TestWalletName.TAWalletNonDelegatedFunds); + await localStorageInitializer.disableShowingMultidelegationBetaBanner(); +}); -Before( - { tags: '@Staking-NonDelegatedFunds-Popup' }, - async () => await popupViewWalletInitialization(TestWalletName.TAWalletNonDelegatedFunds) -); +Before({ tags: '@Staking-NonDelegatedFunds-Popup' }, async () => { + await popupViewWalletInitialization(TestWalletName.TAWalletNonDelegatedFunds); + await localStorageInitializer.disableShowingMultidelegationBetaBanner(); +}); Before( { tags: '@Staking-SwitchingPools-Extended-E2E' }, @@ -126,10 +135,10 @@ Before( Before({ tags: '@AdaHandle-popup' }, async () => await popupViewWalletInitialization(TestWalletName.WalletAdaHandle)); -Before( - { tags: '@Multidelegation-SwitchingPools-Extended-E2E' }, - async () => await extendedViewWalletInitialization(TestWalletName.WalletMultidelegationSwitchPoolsE2E) -); +Before({ tags: '@Multidelegation-SwitchingPools-Extended-E2E' }, async () => { + await extendedViewWalletInitialization(TestWalletName.WalletMultidelegationSwitchPoolsE2E); + await localStorageInitializer.disableShowingMultidelegationBetaBanner(); +}); Before( { tags: '@HdWallet-extended' }, @@ -141,12 +150,12 @@ Before( async () => await extendedViewWalletInitialization(TestWalletName.WalletSendNftHdWalletE2E) ); -Before( - { tags: '@Multidelegation-DelegatedFunds-Popup' }, - async () => await popupViewWalletInitialization(TestWalletName.MultidelegationDelegatedSingle) -); +Before({ tags: '@Multidelegation-DelegatedFunds-Popup' }, async () => { + await popupViewWalletInitialization(TestWalletName.MultidelegationDelegatedSingle); + await localStorageInitializer.disableShowingMultidelegationBetaBanner(); +}); -Before( - { tags: '@Multidelegation-DelegatedFunds-Extended' }, - async () => await extendedViewWalletInitialization(TestWalletName.MultidelegationDelegatedSingle) -); +Before({ tags: '@Multidelegation-DelegatedFunds-Extended' }, async () => { + await extendedViewWalletInitialization(TestWalletName.MultidelegationDelegatedSingle); + await localStorageInitializer.disableShowingMultidelegationBetaBanner(); +}); diff --git a/packages/e2e-tests/src/pageobject/dAppConnectorPageObject.ts b/packages/e2e-tests/src/pageobject/dAppConnectorPageObject.ts index b451bb89cd..fcbdf3c560 100644 --- a/packages/e2e-tests/src/pageobject/dAppConnectorPageObject.ts +++ b/packages/e2e-tests/src/pageobject/dAppConnectorPageObject.ts @@ -96,7 +96,7 @@ class DAppConnectorPageObject { } async saveDappTransactionFeeValue() { - let feeValue = await ConfirmTransactionPage.transactionAmountFee.getText(); + let feeValue = await ConfirmTransactionPage.transactionFeeValueAda.getText(); feeValue = feeValue.replace(' ADA', '').replace('Fee: ', ''); await testContext.save('feeValueDAppTx', feeValue); } diff --git a/packages/e2e-tests/src/utils/networkManager.ts b/packages/e2e-tests/src/utils/networkManager.ts index aa78c6b04e..0d3ebcee42 100644 --- a/packages/e2e-tests/src/utils/networkManager.ts +++ b/packages/e2e-tests/src/utils/networkManager.ts @@ -107,7 +107,10 @@ export class NetworkManager { const approximateTimestamp = new Date().toString(); const combinedFailedRequestInfo = `URL:\n${request.response.url}\n\nRESPONSE CODE:\n${request.response.status}\n\nAPPROXIMATE TIME:\n${approximateTimestamp}\n\nRESPONSE BODY:\n${responseBody}\n\nREQUEST PAYLOAD:\n${requestPayload}`; allure.addAttachment('Failed request', combinedFailedRequestInfo, 'text/plain'); - console.error('Failed request', combinedFailedRequestInfo); + console.error( + 'Failed request', + `URL: ${request.response.url} | RESPONSE CODE: ${request.response.status}` + ); } }); }); @@ -125,8 +128,8 @@ export class NetworkManager { let postData = ''; try { postData = JSON.stringify(await client.send('Network.getRequestPostData', { requestId })); - } catch (error) { - Logger.warn(`${error}`); + } catch { + /* empty */ } return postData; }; diff --git a/packages/e2e-tests/src/utils/utils.ts b/packages/e2e-tests/src/utils/utils.ts index 78dcd470b0..52f00d4979 100644 --- a/packages/e2e-tests/src/utils/utils.ts +++ b/packages/e2e-tests/src/utils/utils.ts @@ -42,7 +42,6 @@ class ExtensionUtils { break; } } - Logger.log(`Using network: ${network} with id: ${id}`); return { name: network, id }; } diff --git a/packages/e2e-tests/wdio.conf.base.ts b/packages/e2e-tests/wdio.conf.base.ts index 65cd4f434c..572e840109 100755 --- a/packages/e2e-tests/wdio.conf.base.ts +++ b/packages/e2e-tests/wdio.conf.base.ts @@ -22,7 +22,12 @@ export const config: WebdriverIO.Config = { connectionRetryCount: 3, framework: 'cucumber', reporters: [ - 'spec', + [ + 'spec', + { + realtimeReporting: true + } + ], [ 'allure', { diff --git a/packages/staking/package.json b/packages/staking/package.json index 4d44c00627..bc2f8734e9 100644 --- a/packages/staking/package.json +++ b/packages/staking/package.json @@ -59,11 +59,14 @@ "i18next": "^22.5.1", "immer": "^10.0.2", "lodash": "4.17.21", + "rambda": "^8.5.0", "react-copy-to-clipboard": "^5.1.0", "react-i18next": "^12.3.1", + "recharts": "^2.9.2", "zustand": "^4.4.1" }, "devDependencies": { + "@cardano-sdk/core": "0.21.0", "@cardano-sdk/input-selection": "0.12.4", "@cardano-sdk/tx-construction": "0.14.2", "@cardano-sdk/util": "0.14.2", diff --git a/packages/staking/src/features/BrowsePools/StakePoolsTable/StakePoolsTable.tsx b/packages/staking/src/features/BrowsePools/StakePoolsTable/StakePoolsTable.tsx index 610ceee531..5d30e2bcf7 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsTable/StakePoolsTable.tsx +++ b/packages/staking/src/features/BrowsePools/StakePoolsTable/StakePoolsTable.tsx @@ -2,6 +2,7 @@ import { Wallet } from '@lace/cardano'; import { PostHogAction, Search, getRandomIcon } from '@lace/common'; import { Box } from '@lace/ui'; import debounce from 'lodash/debounce'; +import uniqBy from 'lodash/uniqBy'; import { useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { StateStatus, useOutsideHandles } from '../../outside-handles-provider'; @@ -92,13 +93,26 @@ export const StakePoolsTable = ({ scrollableTargetId }: StakePoolsTableProps) => setSearchValue(searchString); }; + // imitates apps/browser-extension-wallet/src/stores/slices/stake-pool-search-slice.ts + const naiveSelectedPoolsSearch = (searchString: string, pools: Wallet.Cardano.StakePool[]) => { + const lowerCaseSearchString = searchString.toLowerCase(); + return pools.filter( + (pool) => + pool.metadata?.name.toLowerCase().includes(lowerCaseSearchString) || + pool.metadata?.ticker.toLowerCase().includes(lowerCaseSearchString) || + pool.id.toLowerCase() === lowerCaseSearchString + ); + }; + const combinedUnique = useMemo(() => { - const combinedStakePools = [...selectedPortfolioStakePools, ...stakePools]; - const combinedUniqueIds = [...new Set(combinedStakePools.map((pool) => pool.id))]; - return combinedUniqueIds.map((id) => - combinedStakePools.find((pool) => pool.id === id) - ) as Wallet.Cardano.StakePool[]; - }, [stakePools, selectedPortfolioStakePools]); + const combinedStakePools = [ + ...(searchValue + ? naiveSelectedPoolsSearch(searchValue, selectedPortfolioStakePools) + : selectedPortfolioStakePools), + ...stakePools, + ]; + return uniqBy(combinedStakePools, (p) => p.id); + }, [stakePools, selectedPortfolioStakePools, searchValue]); const list = useMemo( () => diff --git a/packages/staking/src/features/Drawer/StakePoolDetail.tsx b/packages/staking/src/features/Drawer/StakePoolDetail.tsx index 53ef0295c3..7582ca944c 100644 --- a/packages/staking/src/features/Drawer/StakePoolDetail.tsx +++ b/packages/staking/src/features/Drawer/StakePoolDetail.tsx @@ -209,6 +209,12 @@ const makeActionButtons = ( ): ActionButtonSpec[] => ( [ + manageDelegation && { + callback: tmpNoop, + dataTestId: 'stake-pool-details-manage-delegation-btn', + label: t('drawer.details.manageDelegation'), + ...getSpecOverride(manageDelegation), + }, stakeOnThisPool && { callback: tmpNoop, dataTestId: 'stake-pool-details-stake-btn', @@ -233,12 +239,6 @@ const makeActionButtons = ( label: t('drawer.details.unselectPool'), ...getSpecOverride(unselectPool), }, - manageDelegation && { - callback: tmpNoop, - dataTestId: 'stake-pool-details-manage-delegation-btn', - label: t('drawer.details.manageDelegation'), - ...getSpecOverride(manageDelegation), - }, ] as (ActionButtonSpec | false)[] ).filter(Boolean) as ActionButtonSpec[]; @@ -291,13 +291,19 @@ export const StakePoolDetailFooter = ({ popupView }: StakePoolDetailFooterProps) }); }, [viewedStakePool, analytics, portfolioMutators]); + const onManageDelegationClick = useCallback(() => { + if (!viewedStakePool) return; + analytics.sendEventToPostHog(PostHogAction.StakingBrowsePoolsStakePoolDetailManageDelegation); + portfolioMutators.executeCommand({ + type: 'ManageDelegationFromDetails', + }); + }, [viewedStakePool, analytics, portfolioMutators]); + const actionButtons = useMemo( () => makeActionButtons(t, { addStakingPool: ableToSelect && !selectionsEmpty && { callback: onSelectClick }, - // TODO: disabling this button for now - // eslint-disable-next-line sonarjs/no-redundant-boolean - manageDelegation: false && poolInCurrentPortfolio, + manageDelegation: poolInCurrentPortfolio && { callback: onManageDelegationClick }, selectForMultiStaking: ableToSelect && selectionsEmpty && { callback: onSelectClick }, stakeOnThisPool: selectionsEmpty && ableToStakeOnlyOnThisPool && { callback: onStakeOnThisPool }, unselectPool: poolSelected && { callback: onUnselectClick }, @@ -306,6 +312,7 @@ export const StakePoolDetailFooter = ({ popupView }: StakePoolDetailFooterProps) t, ableToSelect, selectionsEmpty, + onManageDelegationClick, onSelectClick, poolInCurrentPortfolio, ableToStakeOnlyOnThisPool, diff --git a/packages/staking/src/features/Drawer/StakePoolDetailsDrawer.tsx b/packages/staking/src/features/Drawer/StakePoolDetailsDrawer.tsx index 6675b0c912..3e0c481dcf 100644 --- a/packages/staking/src/features/Drawer/StakePoolDetailsDrawer.tsx +++ b/packages/staking/src/features/Drawer/StakePoolDetailsDrawer.tsx @@ -72,17 +72,20 @@ export const StakePoolDetailsDrawer = ({ }); }, [password, portfolioMutators, backgroundServiceAPIContextSetWalletPassword, removePassword]); + const shouldShowBackIcon = + activeDrawerStep && typeof showBackIcon === 'function' ? showBackIcon(activeDrawerStep) : showBackIcon; + useKeyboardShortcut(['Escape'], () => { - if (activeDrawerStep && typeof showBackIcon === 'function' ? showBackIcon(activeDrawerStep) : showBackIcon) { + if (shouldShowBackIcon) { onGoBack(); } else { closeDrawer(); } }); - const createArrowIconCallback = () => { - if (activeDrawerStep && typeof showBackIcon === 'function' ? showBackIcon(activeDrawerStep) : showBackIcon) { - return popupView ? closeDrawer : onGoBack; + const arrowIconCallback = () => { + if (shouldShowBackIcon) { + return popupView ? closeDrawer() : onGoBack(); } // eslint-disable-next-line consistent-return, unicorn/no-useless-undefined return undefined; @@ -97,10 +100,14 @@ export const StakePoolDetailsDrawer = ({ { - onBackButtonClick?.(); - createArrowIconCallback(); - }} + onArrowIconClick={ + !shouldShowBackIcon + ? undefined + : () => { + onBackButtonClick?.(); + arrowIconCallback(); + } + } onCloseIconClick={() => { if ( activeDrawerStep && typeof showCloseIcon === 'function' ? showCloseIcon(activeDrawerStep) : showCloseIcon diff --git a/packages/staking/src/features/Drawer/TransactionFail.tsx b/packages/staking/src/features/Drawer/TransactionFail.tsx index 149b5d8479..369f861b5c 100644 --- a/packages/staking/src/features/Drawer/TransactionFail.tsx +++ b/packages/staking/src/features/Drawer/TransactionFail.tsx @@ -99,8 +99,8 @@ export const TransactionFailFooter = ({ popupView }: TransactionFailProps): Reac ) : (