From fac11ddf19f2d6dcb4bfb964a62e382fbfb0477c Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 15 Feb 2024 20:23:11 +0530 Subject: [PATCH 01/41] added badge status component --- .../multichain/badge-status/badge-status.js | 110 ++++++++++++++++++ .../badge-status/badge-status.stories.js | 51 ++++++++ .../multichain/badge-status/index.js | 1 + .../multichain/badge-status/index.scss | 3 +- 4 files changed, 164 insertions(+), 1 deletion(-) create mode 100644 ui/components/multichain/badge-status/badge-status.js create mode 100644 ui/components/multichain/badge-status/badge-status.stories.js create mode 100644 ui/components/multichain/badge-status/index.js diff --git a/ui/components/multichain/badge-status/badge-status.js b/ui/components/multichain/badge-status/badge-status.js new file mode 100644 index 000000000000..13a3758c9762 --- /dev/null +++ b/ui/components/multichain/badge-status/badge-status.js @@ -0,0 +1,110 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { useSelector } from 'react-redux'; +import { + AlignItems, + BackgroundColor, + BorderColor, + BorderRadius, + Display, + JustifyContent, + Size, +} from '../../../helpers/constants/design-system'; +import { + AvatarAccount, + AvatarAccountVariant, + BadgeWrapper, + Box, +} from '../../component-library'; +import { + getUseBlockie, +} from '../../../selectors'; +import Tooltip from '../../ui/tooltip'; + +export const BadgeStatus = ({ + className, + badgeBackgroundColor, + badgeBorderColor, + address, + isConnectedAndNotActive, + text, +}) => { + const useBlockie = useSelector(getUseBlockie); + + return ( + + + + } + > + + + + + ); +}; + +BadgeStatus.propTypes = { + /** + * Additional classNames to be added to the BadgeStatus + */ + className: PropTypes.string, + /** + * Border color based on the connection status + */ + badgeBorderColor: PropTypes.string.isRequired, + /** + * Background Color of Badge + */ + badgeBackgroundColor: PropTypes.string.isRequired, + /** + * Connection status message on Tooltip + */ + text: PropTypes.string, + /** + * To determine connection status + */ + isConnectedAndNotActive: PropTypes.bool, + /** + * Address for AvatarAccount + */ + address: PropTypes.string.isRequired, +}; diff --git a/ui/components/multichain/badge-status/badge-status.stories.js b/ui/components/multichain/badge-status/badge-status.stories.js new file mode 100644 index 000000000000..fa01d2d273ef --- /dev/null +++ b/ui/components/multichain/badge-status/badge-status.stories.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { BackgroundColor, BorderColor, Color } from '../../../helpers/constants/design-system'; +import { BadgeStatus } from "./badge-status"; + +export default { + title: 'Components/Multichain/BadgeStatus', + component: BadgeStatus, + argTypes: { + badgeBackgroundColor: { + control: 'text', + }, + badgeBorderColor: { + control: 'text', + }, + text: { + control: 'text', + }, + address: { + control: 'text', + }, + isConnectedAndNotActive: { + control: 'boolean', + }, + }, + args: { + badgeBackgroundColor: BackgroundColor.successDefault, + badgeBorderColor: BackgroundColor.backgroundDefault, + address: '0x1', + text: 'Tooltip' + }, +}; + +const Template = (args) => { + return ; +}; + +export const DefaultStory = Template.bind({}); + +export const NotConnectedStory = Template.bind({}); +NotConnectedStory.args = { + badgeBackgroundColor: Color.borderMuted, + badgeBorderColor: BackgroundColor.backgroundDefault, +}; + +export const ConnectedNotActiveStory = Template.bind({}); +ConnectedNotActiveStory.args = { + badgeBackgroundColor: BackgroundColor.backgroundDefault, + badgeBorderColor: BorderColor.successDefault, + isConnectedAndNotActive: true, +}; + diff --git a/ui/components/multichain/badge-status/index.js b/ui/components/multichain/badge-status/index.js new file mode 100644 index 000000000000..ad04f877e934 --- /dev/null +++ b/ui/components/multichain/badge-status/index.js @@ -0,0 +1 @@ +export { BadgeStatus } from './badge-status'; diff --git a/ui/components/multichain/badge-status/index.scss b/ui/components/multichain/badge-status/index.scss index 02e5d35efed3..89af9e6d49c5 100644 --- a/ui/components/multichain/badge-status/index.scss +++ b/ui/components/multichain/badge-status/index.scss @@ -7,7 +7,8 @@ z-index: 1; } - .mm-badge-wrapper__badge-container { //Need to override the zIndex, can't do it with badgeProps. + .mm-badge-wrapper__badge-container { + //Need to override the zIndex, can't do it with badgeProps. z-index: 1; } From 17216c55ae7a3c02885b49c7cb8084ee55758d08 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 15 Feb 2024 22:02:53 +0530 Subject: [PATCH 02/41] updated test --- .../badge-status/__snapshots__/badge-status.test.js.snap | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap b/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap index 8d83153212a4..e5d23ea37b70 100644 --- a/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap +++ b/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap @@ -31,10 +31,17 @@ exports[`Badge Status should render correctly 1`] = `
+
>>>>>> a57a8bd8ce (updated test) />
From c3d40e850888f1dbf41fa3034f11e100eed58508 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Fri, 16 Feb 2024 16:35:37 +0530 Subject: [PATCH 03/41] updated badge status default for non connected state --- ui/components/multichain/badge-status/badge-status.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/ui/components/multichain/badge-status/badge-status.js b/ui/components/multichain/badge-status/badge-status.js index 13a3758c9762..7fbd6f73ce4d 100644 --- a/ui/components/multichain/badge-status/badge-status.js +++ b/ui/components/multichain/badge-status/badge-status.js @@ -7,6 +7,7 @@ import { BackgroundColor, BorderColor, BorderRadius, + Color, Display, JustifyContent, Size, @@ -23,11 +24,11 @@ import { import Tooltip from '../../ui/tooltip'; export const BadgeStatus = ({ - className, - badgeBackgroundColor, - badgeBorderColor, + className = '', + badgeBackgroundColor = Color.borderMuted, + badgeBorderColor = BackgroundColor.backgroundDefault, address, - isConnectedAndNotActive, + isConnectedAndNotActive = false, text, }) => { const useBlockie = useSelector(getUseBlockie); From cb51a13d41e8da8b8733bf38c4dce59a41998087 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Fri, 16 Feb 2024 16:36:31 +0530 Subject: [PATCH 04/41] lint fix --- ui/components/multichain/badge-status/badge-status.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/ui/components/multichain/badge-status/badge-status.js b/ui/components/multichain/badge-status/badge-status.js index 7fbd6f73ce4d..4869a26b938d 100644 --- a/ui/components/multichain/badge-status/badge-status.js +++ b/ui/components/multichain/badge-status/badge-status.js @@ -18,9 +18,7 @@ import { BadgeWrapper, Box, } from '../../component-library'; -import { - getUseBlockie, -} from '../../../selectors'; +import { getUseBlockie } from '../../../selectors'; import Tooltip from '../../ui/tooltip'; export const BadgeStatus = ({ From f1ba90a44eee69252ac200857a6f9f0382b0d5bd Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Mon, 19 Feb 2024 21:04:22 +0530 Subject: [PATCH 05/41] lint fix --- .../multichain/badge-status/badge-status.stories.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/ui/components/multichain/badge-status/badge-status.stories.js b/ui/components/multichain/badge-status/badge-status.stories.js index fa01d2d273ef..b6cc485ef0e6 100644 --- a/ui/components/multichain/badge-status/badge-status.stories.js +++ b/ui/components/multichain/badge-status/badge-status.stories.js @@ -1,6 +1,10 @@ import React from 'react'; -import { BackgroundColor, BorderColor, Color } from '../../../helpers/constants/design-system'; -import { BadgeStatus } from "./badge-status"; +import { + BackgroundColor, + BorderColor, + Color, +} from '../../../helpers/constants/design-system'; +import { BadgeStatus } from './badge-status'; export default { title: 'Components/Multichain/BadgeStatus', @@ -26,7 +30,7 @@ export default { badgeBackgroundColor: BackgroundColor.successDefault, badgeBorderColor: BackgroundColor.backgroundDefault, address: '0x1', - text: 'Tooltip' + text: 'Tooltip', }, }; @@ -48,4 +52,3 @@ ConnectedNotActiveStory.args = { badgeBorderColor: BorderColor.successDefault, isConnectedAndNotActive: true, }; - From a00a31394d6f6c36ac158064a81741bd747055f7 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 21 Feb 2024 16:04:04 +0530 Subject: [PATCH 06/41] updated className --- ui/components/multichain/badge-status/badge-status.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/components/multichain/badge-status/badge-status.js b/ui/components/multichain/badge-status/badge-status.js index 4869a26b938d..421c193bc827 100644 --- a/ui/components/multichain/badge-status/badge-status.js +++ b/ui/components/multichain/badge-status/badge-status.js @@ -55,7 +55,8 @@ export const BadgeStatus = ({ badge={ Date: Wed, 21 Feb 2024 16:35:07 +0530 Subject: [PATCH 07/41] converted components to typescript --- .../__snapshots__/badge-status.test.js.snap | 7 ++ .../multichain/badge-status/badge-status.js | 110 ------------------ .../badge-status/badge-status.stories.js | 54 --------- .../multichain/badge-status/badge-status.tsx | 16 +++ .../badge-status/badge-status.types.tsx | 28 +++++ 5 files changed, 51 insertions(+), 164 deletions(-) delete mode 100644 ui/components/multichain/badge-status/badge-status.js delete mode 100644 ui/components/multichain/badge-status/badge-status.stories.js diff --git a/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap b/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap index e5d23ea37b70..2748f66b2e96 100644 --- a/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap +++ b/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap @@ -31,6 +31,7 @@ exports[`Badge Status should render correctly 1`] = `
@@ -42,6 +43,12 @@ exports[`Badge Status should render correctly 1`] = `
>>>>>> a57a8bd8ce (updated test) +======= + style="bottom: 2px; right: 5px;" + > +
>>>>>> f7380e849e (converted components to typescript) />
diff --git a/ui/components/multichain/badge-status/badge-status.js b/ui/components/multichain/badge-status/badge-status.js deleted file mode 100644 index 421c193bc827..000000000000 --- a/ui/components/multichain/badge-status/badge-status.js +++ /dev/null @@ -1,110 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { useSelector } from 'react-redux'; -import { - AlignItems, - BackgroundColor, - BorderColor, - BorderRadius, - Color, - Display, - JustifyContent, - Size, -} from '../../../helpers/constants/design-system'; -import { - AvatarAccount, - AvatarAccountVariant, - BadgeWrapper, - Box, -} from '../../component-library'; -import { getUseBlockie } from '../../../selectors'; -import Tooltip from '../../ui/tooltip'; - -export const BadgeStatus = ({ - className = '', - badgeBackgroundColor = Color.borderMuted, - badgeBorderColor = BackgroundColor.backgroundDefault, - address, - isConnectedAndNotActive = false, - text, -}) => { - const useBlockie = useSelector(getUseBlockie); - - return ( - - - - } - > - - - - - ); -}; - -BadgeStatus.propTypes = { - /** - * Additional classNames to be added to the BadgeStatus - */ - className: PropTypes.string, - /** - * Border color based on the connection status - */ - badgeBorderColor: PropTypes.string.isRequired, - /** - * Background Color of Badge - */ - badgeBackgroundColor: PropTypes.string.isRequired, - /** - * Connection status message on Tooltip - */ - text: PropTypes.string, - /** - * To determine connection status - */ - isConnectedAndNotActive: PropTypes.bool, - /** - * Address for AvatarAccount - */ - address: PropTypes.string.isRequired, -}; diff --git a/ui/components/multichain/badge-status/badge-status.stories.js b/ui/components/multichain/badge-status/badge-status.stories.js deleted file mode 100644 index b6cc485ef0e6..000000000000 --- a/ui/components/multichain/badge-status/badge-status.stories.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { - BackgroundColor, - BorderColor, - Color, -} from '../../../helpers/constants/design-system'; -import { BadgeStatus } from './badge-status'; - -export default { - title: 'Components/Multichain/BadgeStatus', - component: BadgeStatus, - argTypes: { - badgeBackgroundColor: { - control: 'text', - }, - badgeBorderColor: { - control: 'text', - }, - text: { - control: 'text', - }, - address: { - control: 'text', - }, - isConnectedAndNotActive: { - control: 'boolean', - }, - }, - args: { - badgeBackgroundColor: BackgroundColor.successDefault, - badgeBorderColor: BackgroundColor.backgroundDefault, - address: '0x1', - text: 'Tooltip', - }, -}; - -const Template = (args) => { - return ; -}; - -export const DefaultStory = Template.bind({}); - -export const NotConnectedStory = Template.bind({}); -NotConnectedStory.args = { - badgeBackgroundColor: Color.borderMuted, - badgeBorderColor: BackgroundColor.backgroundDefault, -}; - -export const ConnectedNotActiveStory = Template.bind({}); -ConnectedNotActiveStory.args = { - badgeBackgroundColor: BackgroundColor.backgroundDefault, - badgeBorderColor: BorderColor.successDefault, - isConnectedAndNotActive: true, -}; diff --git a/ui/components/multichain/badge-status/badge-status.tsx b/ui/components/multichain/badge-status/badge-status.tsx index bccc3d229669..bd3a4d23c8f9 100644 --- a/ui/components/multichain/badge-status/badge-status.tsx +++ b/ui/components/multichain/badge-status/badge-status.tsx @@ -6,8 +6,15 @@ import { BackgroundColor, BorderColor, BorderRadius, +<<<<<<< HEAD Display, JustifyContent, +======= + Color, + Display, + JustifyContent, + Size, +>>>>>>> f7380e849e (converted components to typescript) } from '../../../helpers/constants/design-system'; import { AvatarAccount, @@ -51,8 +58,13 @@ export const BadgeStatus: React.FC = ({ >>>>>> f7380e849e (converted components to typescript) } badge={ = ({ ); }; +<<<<<<< HEAD +======= + +>>>>>>> f7380e849e (converted components to typescript) diff --git a/ui/components/multichain/badge-status/badge-status.types.tsx b/ui/components/multichain/badge-status/badge-status.types.tsx index 5038148a370f..78b8bc9ade06 100644 --- a/ui/components/multichain/badge-status/badge-status.types.tsx +++ b/ui/components/multichain/badge-status/badge-status.types.tsx @@ -1,12 +1,17 @@ +<<<<<<< HEAD import { BackgroundColor, BorderColor, } from '../../../helpers/constants/design-system'; +======= +import { BackgroundColor, BorderColor } from 'ui/helpers/constants/design-system'; +>>>>>>> f7380e849e (converted components to typescript) import type { StyleUtilityProps } from '../../component-library/box'; export interface BadgeStatusProps extends StyleUtilityProps { /** * Additional class name for the ImportTokenLink component. */ className?: string; +<<<<<<< HEAD /** * Border color based on the connection status */ @@ -28,3 +33,26 @@ export interface BadgeStatusProps extends StyleUtilityProps { */ address: string; } +======= + /** + * Border color based on the connection status + */ + badgeBorderColor?: BorderColor, + /** + * Background Color of Badge + */ + badgeBackgroundColor?: BackgroundColor, + /** + * Connection status message on Tooltip + */ + text: string, + /** + * To determine connection status + */ + isConnectedAndNotActive: boolean, + /** + * Address for AvatarAccount + */ + address: string, +} +>>>>>>> f7380e849e (converted components to typescript) From f28f25f14adc58d5547c77b46ccb190d6e8cab96 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 21 Feb 2024 17:11:43 +0530 Subject: [PATCH 08/41] fixed story and lint errors --- .../__snapshots__/badge-status.test.js.snap | 14 --------- .../multichain/badge-status/badge-status.tsx | 18 +---------- .../badge-status/badge-status.types.tsx | 30 +------------------ 3 files changed, 2 insertions(+), 60 deletions(-) diff --git a/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap b/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap index 2748f66b2e96..8d83153212a4 100644 --- a/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap +++ b/ui/components/multichain/badge-status/__snapshots__/badge-status.test.js.snap @@ -31,24 +31,10 @@ exports[`Badge Status should render correctly 1`] = `
-
>>>>>> a57a8bd8ce (updated test) -======= - style="bottom: 2px; right: 5px;" - > -
>>>>>> f7380e849e (converted components to typescript) />
diff --git a/ui/components/multichain/badge-status/badge-status.tsx b/ui/components/multichain/badge-status/badge-status.tsx index bd3a4d23c8f9..7e782ffc2049 100644 --- a/ui/components/multichain/badge-status/badge-status.tsx +++ b/ui/components/multichain/badge-status/badge-status.tsx @@ -6,15 +6,8 @@ import { BackgroundColor, BorderColor, BorderRadius, -<<<<<<< HEAD Display, JustifyContent, -======= - Color, - Display, - JustifyContent, - Size, ->>>>>>> f7380e849e (converted components to typescript) } from '../../../helpers/constants/design-system'; import { AvatarAccount, @@ -58,13 +51,8 @@ export const BadgeStatus: React.FC = ({ >>>>>> f7380e849e (converted components to typescript) } badge={ = ({ ); -}; -<<<<<<< HEAD -======= - ->>>>>>> f7380e849e (converted components to typescript) +}; \ No newline at end of file diff --git a/ui/components/multichain/badge-status/badge-status.types.tsx b/ui/components/multichain/badge-status/badge-status.types.tsx index 78b8bc9ade06..91702e5480a2 100644 --- a/ui/components/multichain/badge-status/badge-status.types.tsx +++ b/ui/components/multichain/badge-status/badge-status.types.tsx @@ -1,17 +1,12 @@ -<<<<<<< HEAD import { BackgroundColor, BorderColor, } from '../../../helpers/constants/design-system'; -======= -import { BackgroundColor, BorderColor } from 'ui/helpers/constants/design-system'; ->>>>>>> f7380e849e (converted components to typescript) import type { StyleUtilityProps } from '../../component-library/box'; export interface BadgeStatusProps extends StyleUtilityProps { /** * Additional class name for the ImportTokenLink component. */ className?: string; -<<<<<<< HEAD /** * Border color based on the connection status */ @@ -32,27 +27,4 @@ export interface BadgeStatusProps extends StyleUtilityProps { * Address for AvatarAccount */ address: string; -} -======= - /** - * Border color based on the connection status - */ - badgeBorderColor?: BorderColor, - /** - * Background Color of Badge - */ - badgeBackgroundColor?: BackgroundColor, - /** - * Connection status message on Tooltip - */ - text: string, - /** - * To determine connection status - */ - isConnectedAndNotActive: boolean, - /** - * Address for AvatarAccount - */ - address: string, -} ->>>>>>> f7380e849e (converted components to typescript) +} \ No newline at end of file From 88547e4621cd38af15942b5bc9074c6feda8d73f Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 21 Feb 2024 22:06:34 +0530 Subject: [PATCH 09/41] converted js to ts --- ui/components/multichain/badge-status/index.js | 1 - 1 file changed, 1 deletion(-) delete mode 100644 ui/components/multichain/badge-status/index.js diff --git a/ui/components/multichain/badge-status/index.js b/ui/components/multichain/badge-status/index.js deleted file mode 100644 index ad04f877e934..000000000000 --- a/ui/components/multichain/badge-status/index.js +++ /dev/null @@ -1 +0,0 @@ -export { BadgeStatus } from './badge-status'; From c44b4040b820111b7fe27e8f3e15d87f72d15597 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Fri, 16 Feb 2024 21:15:50 +0530 Subject: [PATCH 10/41] added badge status in account list --- .../multichain/account-list-item/account-list-item.js | 11 ++--------- .../multichain/badge-status/badge-status.stories.tsx | 8 -------- 2 files changed, 2 insertions(+), 17 deletions(-) diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js index f207c20e7c26..a70e335d0b5a 100644 --- a/ui/components/multichain/account-list-item/account-list-item.js +++ b/ui/components/multichain/account-list-item/account-list-item.js @@ -56,6 +56,7 @@ import { } from '../../../selectors'; import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance'; import { TEST_NETWORKS } from '../../../../shared/constants/network'; +import { BadgeStatus } from '../badge-status/badge-status'; const MAXIMUM_CURRENCY_DECIMALS = 3; const MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP = 17; @@ -140,16 +141,8 @@ export const AccountListItem = ({ backgroundColor={Color.primaryDefault} /> )} - Date: Mon, 19 Feb 2024 16:40:35 +0530 Subject: [PATCH 11/41] updated tests --- app/_locales/en/messages.json | 3 + .../account-list-item/account-list-item.js | 34 ++++- .../account-list-item.test.js | 6 +- .../account-list-menu/account-list-menu.js | 1 + .../badge-status/badge-status.stories.js | 28 ++++ .../__snapshots__/your-accounts.test.tsx.snap | 130 +++++++++--------- ui/selectors/selectors.js | 12 ++ 7 files changed, 144 insertions(+), 70 deletions(-) create mode 100644 ui/components/multichain/badge-status/badge-status.stories.js diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 9993acb6840f..50c07e69fa1f 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -5275,6 +5275,9 @@ "tooltipSatusConnected": { "message": "connected" }, + "tooltipSatusConnectedUpperCase": { + "message": "Connected" + }, "tooltipSatusNotConnected": { "message": "not connected" }, diff --git a/ui/components/multichain/account-list-item/account-list-item.js b/ui/components/multichain/account-list-item/account-list-item.js index a70e335d0b5a..fdb5a3a2d242 100644 --- a/ui/components/multichain/account-list-item/account-list-item.js +++ b/ui/components/multichain/account-list-item/account-list-item.js @@ -1,6 +1,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; +import browser from 'webextension-polyfill'; import { useSelector } from 'react-redux'; import { toChecksumHexAddress } from '@metamask/controller-utils'; @@ -52,11 +53,14 @@ import { getCurrentNetwork, getNativeCurrencyImage, getShowFiatInTestnets, + getOriginOfCurrentTab, getUseBlockie, } from '../../../selectors'; import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance'; import { TEST_NETWORKS } from '../../../../shared/constants/network'; import { BadgeStatus } from '../badge-status/badge-status'; +import { getEnvironmentType } from '../../../../app/scripts/lib/util'; +import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app'; const MAXIMUM_CURRENCY_DECIMALS = 3; const MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP = 17; @@ -72,14 +76,20 @@ export const AccountListItem = ({ showOptions = false, isHidden = false, currentTabOrigin, + isActive = false, }) => { const t = useI18nContext(); const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false); const [accountListItemMenuElement, setAccountListItemMenuElement] = useState(); + const origin = useSelector(getOriginOfCurrentTab); + const useBlockie = useSelector(getUseBlockie); const currentNetwork = useSelector(getCurrentNetwork); - + const showBadge = + getEnvironmentType() === ENVIRONMENT_TYPE_POPUP && + origin && + origin !== browser.runtime.id; const setAccountListItemMenuRef = (ref) => { setAccountListItemMenuElement(ref); }; @@ -141,9 +151,21 @@ export const AccountListItem = ({ backgroundColor={Color.primaryDefault} /> )} - + {showBadge ? ( + + ) : ( + + )} { ...mockState.metamask, }, activeTab: { - origin: 'https://uniswap.org/', + id: 113, + title: 'E2E Test Dapp', + origin: 'https://metamask.github.io', + protocol: 'https:', + url: 'https://metamask.github.io/test-dapp/', }, }); const allProps = { ...DEFAULT_PROPS, ...props }; diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js index 2fb86bb248e3..8478bd1957a6 100644 --- a/ui/components/multichain/account-list-menu/account-list-menu.js +++ b/ui/components/multichain/account-list-menu/account-list-menu.js @@ -423,6 +423,7 @@ export const AccountListMenu = ({ isPinned={Boolean(account.pinned)} isHidden={Boolean(account.hidden)} currentTabOrigin={currentTabOrigin} + isActive={Boolean(account.active)} {...accountListItemProps} /> diff --git a/ui/components/multichain/badge-status/badge-status.stories.js b/ui/components/multichain/badge-status/badge-status.stories.js new file mode 100644 index 000000000000..9547c36a22ff --- /dev/null +++ b/ui/components/multichain/badge-status/badge-status.stories.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { BadgeStatus } from './badge-status'; + +export default { + title: 'Components/Multichain/BadgeStatus', + component: BadgeStatus, + argTypes: { + text: { + control: 'text', + }, + address: { + control: 'text', + }, + isActive: { + control: 'boolean', + }, + }, + args: { + address: '0x1', + isActive: false, + }, +}; + +const Template = (args) => { + return ; +}; + +export const DefaultStory = Template.bind({}); diff --git a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap index d213c98faec4..ea2d75c0d6ec 100644 --- a/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap +++ b/ui/components/multichain/pages/send/components/__snapshots__/your-accounts.test.tsx.snap @@ -9,41 +9,41 @@ exports[`SendPageYourAccounts render renders correctly 1`] = ` class="mm-box multichain-account-list-item mm-box--padding-4 mm-box--display-flex mm-box--background-color-transparent" >