From 3cdd94c12c6e7463e5b2358ff872ec6706757828 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Tue, 20 Feb 2024 18:05:58 +0530 Subject: [PATCH 1/7] added connections page --- .../multichain/app-header/app-header.js | 22 ++++++-- .../pages/connections/connections.js | 52 ++++++++++++++++++- ui/pages/routes/routes.component.js | 11 ++++ 3 files changed, 79 insertions(+), 6 deletions(-) diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js index 4c3580eef2f5..dd55e30300d1 100644 --- a/ui/components/multichain/app-header/app-header.js +++ b/ui/components/multichain/app-header/app-header.js @@ -14,6 +14,7 @@ import { BUILD_QUOTE_ROUTE, CONFIRM_TRANSACTION_ROUTE, CONNECTED_ACCOUNTS_ROUTE, + CONNECTIONS, DEFAULT_ROUTE, SWAPS_ROUTE, } from '../../../helpers/constants/routes'; @@ -364,11 +365,22 @@ export const AppHeader = ({ location }) => { { - history.push(CONNECTED_ACCOUNTS_ROUTE); - trackEvent({ - event: MetaMetricsEventName.NavConnectedSitesOpened, - category: MetaMetricsEventCategory.Navigation, - }); + if (process.env.MULTICHAIN) { + history.push(CONNECTIONS); + trackEvent({ + event: + MetaMetricsEventName.NavConnectedSitesOpened, + category: MetaMetricsEventCategory.Navigation, + }); + } + else { + history.push(CONNECTED_ACCOUNTS_ROUTE); + trackEvent({ + event: + MetaMetricsEventName.NavConnectedSitesOpened, + category: MetaMetricsEventCategory.Navigation, + }); + } }} /> diff --git a/ui/components/multichain/pages/connections/connections.js b/ui/components/multichain/pages/connections/connections.js index 78232d739663..a072899d90de 100644 --- a/ui/components/multichain/pages/connections/connections.js +++ b/ui/components/multichain/pages/connections/connections.js @@ -1,5 +1,55 @@ import React from 'react'; +import { useSelector } from 'react-redux'; +import { useHistory } from 'react-router-dom'; +import { + BackgroundColor, + Color, + TextAlign, + TextVariant, +} from '../../../../helpers/constants/design-system'; +import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'; +import { getURLHost } from '../../../../helpers/utils/util'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; +import { getOriginOfCurrentTab } from '../../../../selectors'; +import { ButtonIcon, ButtonIconSize, IconName, Text } from '../../../component-library'; +import { Content, Footer, Header, Page } from '../page'; export const Connections = () => { - return
; + const t = useI18nContext(); + const history = useHistory(); + const activeTabOrigin = useSelector(getOriginOfCurrentTab); + return ( + +
history.push(DEFAULT_ROUTE)} + size={ButtonIconSize.Sm} + /> + } + > + {/* TODO: Add an Icon */} + + {getURLHost(activeTabOrigin)} + +
+ + {/* TODO: When no accounts connected - use text */} + {/* TODO: When accounts connected - create a separate component - Separate Ticket */} + +
+ {/* TODO: When no accounts connected - Connect Accounts Button */} + {/* TODO: When accounts connected - Two Separate Buttons - Separate Ticket */} +
+ + ); }; diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index 57090aea3550..7d35698de00b 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -484,6 +484,17 @@ export default class Routes extends Component { return true; } + const isConnectionsPage = Boolean( + matchPath(location.pathname, { + path: CONNECTIONS, + exact: false, + }), + ); + + if (isConnectionsPage) { + return true; + } + if (windowType === ENVIRONMENT_TYPE_POPUP && this.onConfirmPage()) { return true; } From 6225ac3fa4cb817f8778b4197f6f6c890a93737f Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 21 Feb 2024 20:57:36 +0530 Subject: [PATCH 2/7] added component for no connections state --- app/_locales/en/messages.json | 9 ++ .../multichain/app-header/app-header.js | 17 ++- .../connections/components/no-connection.tsx | 34 ++++++ .../pages/connections/connections.js | 55 ---------- .../pages/connections/connections.tsx | 100 ++++++++++++++++++ .../multichain/pages/connections/index.scss | 5 + ui/components/multichain/pages/index.scss | 1 + ui/pages/routes/routes.component.js | 5 +- 8 files changed, 161 insertions(+), 65 deletions(-) create mode 100644 ui/components/multichain/pages/connections/components/no-connection.tsx delete mode 100644 ui/components/multichain/pages/connections/connections.js create mode 100644 ui/components/multichain/pages/connections/connections.tsx create mode 100644 ui/components/multichain/pages/connections/index.scss diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 11294aa50824..e8d26a536c16 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -806,6 +806,9 @@ "connectAccountOrCreate": { "message": "Connect account or create new" }, + "connectAccounts": { + "message": "Connect accounts" + }, "connectCustodialAccountMenu": { "message": "Connect Custodial Account" }, @@ -2810,6 +2813,12 @@ "noAddressForName": { "message": "No address has been set for this name." }, + "noConnectedAccountDescription": { + "message": "Select an account you want to use on this site to continue." + }, + "noConnectedAccountTitle": { + "message": "MetaMask isn’t connected to this site" + }, "noConversionDateAvailable": { "message": "No currency conversion date available" }, diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js index dd55e30300d1..8da8f544ed12 100644 --- a/ui/components/multichain/app-header/app-header.js +++ b/ui/components/multichain/app-header/app-header.js @@ -76,7 +76,7 @@ import { SEND_STAGES, getSendStage } from '../../../ducks/send'; import Tooltip from '../../ui/tooltip'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; import { MINUTE } from '../../../../shared/constants/time'; -import { shortenAddress } from '../../../helpers/utils/util'; +import { getURLHost, shortenAddress } from '../../../helpers/utils/util'; export const AppHeader = ({ location }) => { const trackEvent = useContext(MetaMetricsContext); @@ -174,6 +174,11 @@ export const AppHeader = ({ location }) => { }); }, [chainId, dispatch, trackEvent]); + const handleConnectionsRoute = () => { + const hostName = getURLHost(origin); + + history.push(`${CONNECTIONS}/${encodeURIComponent(hostName)}`); + }; // This is required to ensure send and confirmation screens // look as desired const headerBottomMargin = !popupStatus && disableNetworkPicker ? 4 : 0; @@ -366,14 +371,8 @@ export const AppHeader = ({ location }) => { { if (process.env.MULTICHAIN) { - history.push(CONNECTIONS); - trackEvent({ - event: - MetaMetricsEventName.NavConnectedSitesOpened, - category: MetaMetricsEventCategory.Navigation, - }); - } - else { + handleConnectionsRoute(); + } else { history.push(CONNECTED_ACCOUNTS_ROUTE); trackEvent({ event: diff --git a/ui/components/multichain/pages/connections/components/no-connection.tsx b/ui/components/multichain/pages/connections/components/no-connection.tsx new file mode 100644 index 000000000000..b9ddb1eaf8e3 --- /dev/null +++ b/ui/components/multichain/pages/connections/components/no-connection.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { + AlignItems, + Display, + FlexDirection, + JustifyContent, + TextVariant, +} from '../../../../../helpers/constants/design-system'; +import { useI18nContext } from '../../../../../hooks/useI18nContext'; +import { Box, Text } from '../../../../component-library'; + +export const NoConnectionContent = () => { + const t = useI18nContext(); + return ( + + + {t('noConnectedAccountTitle')} + + + + {t('noConnectedAccountDescription')} + + + ); +}; diff --git a/ui/components/multichain/pages/connections/connections.js b/ui/components/multichain/pages/connections/connections.js deleted file mode 100644 index a072899d90de..000000000000 --- a/ui/components/multichain/pages/connections/connections.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; -import { - BackgroundColor, - Color, - TextAlign, - TextVariant, -} from '../../../../helpers/constants/design-system'; -import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'; -import { getURLHost } from '../../../../helpers/utils/util'; -import { useI18nContext } from '../../../../hooks/useI18nContext'; -import { getOriginOfCurrentTab } from '../../../../selectors'; -import { ButtonIcon, ButtonIconSize, IconName, Text } from '../../../component-library'; -import { Content, Footer, Header, Page } from '../page'; - -export const Connections = () => { - const t = useI18nContext(); - const history = useHistory(); - const activeTabOrigin = useSelector(getOriginOfCurrentTab); - return ( - -
history.push(DEFAULT_ROUTE)} - size={ButtonIconSize.Sm} - /> - } - > - {/* TODO: Add an Icon */} - - {getURLHost(activeTabOrigin)} - -
- - {/* TODO: When no accounts connected - use text */} - {/* TODO: When accounts connected - create a separate component - Separate Ticket */} - -
- {/* TODO: When no accounts connected - Connect Accounts Button */} - {/* TODO: When accounts connected - Two Separate Buttons - Separate Ticket */} -
- - ); -}; diff --git a/ui/components/multichain/pages/connections/connections.tsx b/ui/components/multichain/pages/connections/connections.tsx new file mode 100644 index 000000000000..1bbfa4727459 --- /dev/null +++ b/ui/components/multichain/pages/connections/connections.tsx @@ -0,0 +1,100 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import { useHistory, useLocation } from 'react-router-dom'; +import { + AlignItems, + BackgroundColor, + Display, + IconColor, + JustifyContent, + TextAlign, + TextVariant, +} from '../../../../helpers/constants/design-system'; +import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'; +import { getURLHost } from '../../../../helpers/utils/util'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; +import { + getOriginOfCurrentTab, + getSubjectMetadata, +} from '../../../../selectors'; +import { + AvatarFavicon, + AvatarFaviconSize, + Box, + ButtonIcon, + ButtonIconSize, + ButtonPrimary, + ButtonPrimarySize, + Icon, + IconName, + IconSize, + Text, +} from '../../../component-library'; +import { Content, Footer, Header, Page } from '../page'; +import { NoConnectionContent } from './components/no-connection'; + +export const Connections = () => { + const t = useI18nContext(); + const history = useHistory(); + const activeTabOrigin = useSelector(getOriginOfCurrentTab); + const subjectMetadata = useSelector(getSubjectMetadata); + const connectedSubjectsMetadata = subjectMetadata[activeTabOrigin]; + return ( + +
history.push(DEFAULT_ROUTE)} + size={ButtonIconSize.Sm} + /> + } + > + + {connectedSubjectsMetadata?.iconUrl ? ( + + ) : ( + + )} + + {getURLHost(activeTabOrigin)} + + +
+ + {/* TODO: Replace null When accounts connected - create a separate component - Separate Ticket */} + + {connectedSubjectsMetadata ? null : } + +
+ {/* TODO: When accounts connected - Two Separate Buttons - Separate Ticket */} + + + {t('connectAccounts')} + +
+ + ); +}; diff --git a/ui/components/multichain/pages/connections/index.scss b/ui/components/multichain/pages/connections/index.scss new file mode 100644 index 000000000000..0452f92353aa --- /dev/null +++ b/ui/components/multichain/pages/connections/index.scss @@ -0,0 +1,5 @@ +.connections-page { + &__no-site-connected-content { + height: 100%; //Box Props doesn't have height as a utility prop + } +} diff --git a/ui/components/multichain/pages/index.scss b/ui/components/multichain/pages/index.scss index 5bc43557f0bf..f867526ce960 100644 --- a/ui/components/multichain/pages/index.scss +++ b/ui/components/multichain/pages/index.scss @@ -1,3 +1,4 @@ @import 'page/'; @import 'send/'; +@import 'connections/'; @import 'permissions-page/permissions-page'; diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index 7d35698de00b..6d2ea1c5e423 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -378,7 +378,10 @@ export default class Routes extends Component { ///: END:ONLY_INCLUDE_IF } {process.env.MULTICHAIN && ( - + )} {process.env.MULTICHAIN && ( From e0928afc7ab954d0d2d1aa94084a86287ef3c9ff Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 21 Feb 2024 21:23:49 +0530 Subject: [PATCH 3/7] added no connections page --- .../no-connections.test.tsx.snap | 20 +++++++++++++++++++ .../connections/components/no-connection.tsx | 5 +++-- .../components/no-connections.test.tsx | 16 +++++++++++++++ .../pages/connections/connections.tsx | 2 +- 4 files changed, 40 insertions(+), 3 deletions(-) create mode 100644 ui/components/multichain/pages/connections/components/__snapshots__/no-connections.test.tsx.snap create mode 100644 ui/components/multichain/pages/connections/components/no-connections.test.tsx diff --git a/ui/components/multichain/pages/connections/components/__snapshots__/no-connections.test.tsx.snap b/ui/components/multichain/pages/connections/components/__snapshots__/no-connections.test.tsx.snap new file mode 100644 index 000000000000..90139835245a --- /dev/null +++ b/ui/components/multichain/pages/connections/components/__snapshots__/no-connections.test.tsx.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`No Connections Content should render correctly 1`] = ` +
+
+

+ MetaMask isn’t connected to this site +

+

+ Select an account you want to use on this site to continue. +

+
+
+`; diff --git a/ui/components/multichain/pages/connections/components/no-connection.tsx b/ui/components/multichain/pages/connections/components/no-connection.tsx index b9ddb1eaf8e3..3f5e812274da 100644 --- a/ui/components/multichain/pages/connections/components/no-connection.tsx +++ b/ui/components/multichain/pages/connections/components/no-connection.tsx @@ -4,6 +4,7 @@ import { Display, FlexDirection, JustifyContent, + TextAlign, TextVariant, } from '../../../../../helpers/constants/design-system'; import { useI18nContext } from '../../../../../hooks/useI18nContext'; @@ -22,11 +23,11 @@ export const NoConnectionContent = () => { paddingLeft={4} paddingRight={4} > - + {t('noConnectedAccountTitle')} - + {t('noConnectedAccountDescription')} diff --git a/ui/components/multichain/pages/connections/components/no-connections.test.tsx b/ui/components/multichain/pages/connections/components/no-connections.test.tsx new file mode 100644 index 000000000000..5466a03c007c --- /dev/null +++ b/ui/components/multichain/pages/connections/components/no-connections.test.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { renderWithProvider } from '../../../../../../test/jest'; +import {NoConnectionContent} from './no-connection'; + +describe('No Connections Content', () => { + const render = (props = {}, state = {}) => { + + return renderWithProvider( + + ); + }; + it('should render correctly', () => { + const { container } = render({}); + expect(container).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/ui/components/multichain/pages/connections/connections.tsx b/ui/components/multichain/pages/connections/connections.tsx index 1bbfa4727459..12d5d93cae51 100644 --- a/ui/components/multichain/pages/connections/connections.tsx +++ b/ui/components/multichain/pages/connections/connections.tsx @@ -91,7 +91,7 @@ export const Connections = () => {
{/* TODO: When accounts connected - Two Separate Buttons - Separate Ticket */} - + {t('connectAccounts')}
From a3b3c2ffed629ed0c08e2f93200369f25adc99ea Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 21 Feb 2024 21:28:52 +0530 Subject: [PATCH 4/7] lint fix --- ui/components/multichain/pages/connections/connections.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/multichain/pages/connections/connections.tsx b/ui/components/multichain/pages/connections/connections.tsx index 12d5d93cae51..0623fe1dac72 100644 --- a/ui/components/multichain/pages/connections/connections.tsx +++ b/ui/components/multichain/pages/connections/connections.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { useSelector } from 'react-redux'; -import { useHistory, useLocation } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { AlignItems, BackgroundColor, From 97690795c826f42fc52910d92b54353b70ca61d6 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Fri, 23 Feb 2024 16:48:41 +0530 Subject: [PATCH 5/7] updated logic for dapps --- .../pages/connections/components/no-connections.test.tsx | 4 ++-- ui/components/multichain/pages/connections/connections.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/components/multichain/pages/connections/components/no-connections.test.tsx b/ui/components/multichain/pages/connections/components/no-connections.test.tsx index 5466a03c007c..220a773d660b 100644 --- a/ui/components/multichain/pages/connections/components/no-connections.test.tsx +++ b/ui/components/multichain/pages/connections/components/no-connections.test.tsx @@ -3,14 +3,14 @@ import { renderWithProvider } from '../../../../../../test/jest'; import {NoConnectionContent} from './no-connection'; describe('No Connections Content', () => { - const render = (props = {}, state = {}) => { + const render = () => { return renderWithProvider( ); }; it('should render correctly', () => { - const { container } = render({}); + const { container } = render(); expect(container).toMatchSnapshot(); }); }); \ No newline at end of file diff --git a/ui/components/multichain/pages/connections/connections.tsx b/ui/components/multichain/pages/connections/connections.tsx index 0623fe1dac72..1a94dd6ec95d 100644 --- a/ui/components/multichain/pages/connections/connections.tsx +++ b/ui/components/multichain/pages/connections/connections.tsx @@ -14,8 +14,8 @@ import { DEFAULT_ROUTE } from '../../../../helpers/constants/routes'; import { getURLHost } from '../../../../helpers/utils/util'; import { useI18nContext } from '../../../../hooks/useI18nContext'; import { + getConnectedSitesList, getOriginOfCurrentTab, - getSubjectMetadata, } from '../../../../selectors'; import { AvatarFavicon, @@ -37,7 +37,7 @@ export const Connections = () => { const t = useI18nContext(); const history = useHistory(); const activeTabOrigin = useSelector(getOriginOfCurrentTab); - const subjectMetadata = useSelector(getSubjectMetadata); + const subjectMetadata: { [key: string]: any } = useSelector(getConnectedSitesList); const connectedSubjectsMetadata = subjectMetadata[activeTabOrigin]; return ( From aa5f29fa7a6471d2f084fc4f01f053ba1fcbcdc1 Mon Sep 17 00:00:00 2001 From: Victor Thomas <10986371+vthomas13@users.noreply.github.com> Date: Fri, 23 Feb 2024 09:44:29 -0500 Subject: [PATCH 6/7] fix: lintfix --- ui/components/multichain/pages/connections/connections.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/components/multichain/pages/connections/connections.tsx b/ui/components/multichain/pages/connections/connections.tsx index 1a94dd6ec95d..3282dd823d5c 100644 --- a/ui/components/multichain/pages/connections/connections.tsx +++ b/ui/components/multichain/pages/connections/connections.tsx @@ -37,7 +37,9 @@ export const Connections = () => { const t = useI18nContext(); const history = useHistory(); const activeTabOrigin = useSelector(getOriginOfCurrentTab); - const subjectMetadata: { [key: string]: any } = useSelector(getConnectedSitesList); + const subjectMetadata: { [key: string]: any } = useSelector( + getConnectedSitesList, + ); const connectedSubjectsMetadata = subjectMetadata[activeTabOrigin]; return ( From 496b134284c283efee285a6af1430ab58acba1d1 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Mon, 26 Feb 2024 10:56:21 -0600 Subject: [PATCH 7/7] Ellipsize long text --- ui/components/multichain/pages/connections/connections.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/components/multichain/pages/connections/connections.tsx b/ui/components/multichain/pages/connections/connections.tsx index 3282dd823d5c..6d96d7f69c97 100644 --- a/ui/components/multichain/pages/connections/connections.tsx +++ b/ui/components/multichain/pages/connections/connections.tsx @@ -80,6 +80,7 @@ export const Connections = () => { as="span" variant={TextVariant.headingMd} textAlign={TextAlign.Center} + ellipsis > {getURLHost(activeTabOrigin)}