From 3655909489e7ac49494d3247229dfa32dd416c1a Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 6 Sep 2023 14:24:21 +0530 Subject: [PATCH 01/10] aligned footer to the bottom --- .../__snapshots__/app-footer.test.js.snap | 59 ++++ .../multichain/app-footer/app-footer.js | 273 ++++++++++-------- .../multichain/app-footer/app-footer.scss | 37 ++- .../multichain/app-footer/app-footer.test.js | 23 ++ ui/css/itcss/components/newui-sections.scss | 1 - ui/pages/routes/routes.component.js | 3 + 6 files changed, 269 insertions(+), 127 deletions(-) create mode 100644 ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap create mode 100644 ui/components/multichain/app-footer/app-footer.test.js diff --git a/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap b/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap new file mode 100644 index 000000000000..37795b9afdfe --- /dev/null +++ b/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`App Footer should match snapshot 1`] = ` +
+
+
+ + +

+ Wallet +

+ +
+ +
+ + +

+ Connections +

+ +
+
+
+`; diff --git a/ui/components/multichain/app-footer/app-footer.js b/ui/components/multichain/app-footer/app-footer.js index fe536945d5de..eac46c72666c 100644 --- a/ui/components/multichain/app-footer/app-footer.js +++ b/ui/components/multichain/app-footer/app-footer.js @@ -1,10 +1,7 @@ import React from 'react'; -import { useLocation } from 'react-router-dom'; +import { useHistory, useLocation } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; -import { - CONNECTED_ROUTE, - DEFAULT_ROUTE, -} from '../../../helpers/constants/routes'; +import { CONNECTIONS, DEFAULT_ROUTE } from '../../../helpers/constants/routes'; import { AvatarFavicon, AvatarNetwork, @@ -46,11 +43,11 @@ export const AppFooter = () => { const t = useI18nContext(); const location = useLocation(); const dispatch = useDispatch(); + const history = useHistory(); - const walletRoute = `#${DEFAULT_ROUTE}`; - const connectedRoute = `#${CONNECTED_ROUTE}`; const activeWallet = location.pathname === DEFAULT_ROUTE; - const activeConnections = location.pathname === CONNECTED_ROUTE; + const activeConnections = location.pathname === CONNECTIONS; + const isUnlocked = useSelector((state) => state.metamask.isUnlocked); const selectedAddress = useSelector(getSelectedAddress); @@ -67,124 +64,152 @@ export const AppFooter = () => { const currentChain = useSelector(getCurrentNetwork); return ( - - - - - {t('wallet')} - - - - dispatch(showSelectActionModal())} - /> - - - {connectedSite ? ( - - + {isUnlocked ? ( + <> + + - } + alignItems={AlignItems.center} + justifyContent={JustifyContent.spaceBetween} + backgroundColor={BackgroundColor.backgroundDefault} + flexDirection={FlexDirection.Row} + padding={2} + paddingLeft={4} + paddingRight={4} + gap={2} > - - + { + e.preventDefault(); + history.push(DEFAULT_ROUTE); + }} + className="app-footer__button" + width={BlockSize.OneThird} + padding={2} + display={Display.Flex} + flexDirection={FlexDirection.Column} + alignItems={AlignItems.center} + tabIndex={0} + > + + + {t('wallet')} + + + + dispatch(showSelectActionModal())} + /> + + { + e.preventDefault(); + history.push(CONNECTIONS); + }} + className="app-footer__button" + width={BlockSize.OneThird} + padding={2} + display={Display.Flex} + flexDirection={FlexDirection.Column} + alignItems={AlignItems.center} + tabIndex={0} + > + {connectedSite ? ( + + + } + > + + + + ) : ( + + )} + + {t('connections')} + + + - ) : ( - - )} - - {t('connections')} - - - + + ) : null} + ); }; diff --git a/ui/components/multichain/app-footer/app-footer.scss b/ui/components/multichain/app-footer/app-footer.scss index c36d1a046659..8c702e998bb0 100644 --- a/ui/components/multichain/app-footer/app-footer.scss +++ b/ui/components/multichain/app-footer/app-footer.scss @@ -1,8 +1,41 @@ .app-footer { + $height-screen-sm-max: 100%; + $width-screen-sm-min: 85vw; + $width-screen-md-min: 80vw; + $width-screen-lg-min: 62vw; + bottom: 0; position: sticky; + z-index: 55; // we are applying same z-index for header as well + margin-bottom: 10vh; // this is to keep the margin as what we have currently for main-container + min-height: 64px; + flex-flow: column nowrap; + + &__contents { + height: 64px; + box-shadow: var(--shadow-size-md) var(--color-shadow-default); + + @include screen-sm-max { + height: $height-screen-sm-max; + } + + @include screen-sm-min { + width: $width-screen-sm-min; + } + + @include screen-md-min { + width: $width-screen-md-min; + } + + @include screen-lg-min { + width: $width-screen-lg-min; + } + } - &__button { - cursor: pointer; + &__actions-button { + &:hover, + &:focus { + background-color: var(--color-primary-default); + } } } diff --git a/ui/components/multichain/app-footer/app-footer.test.js b/ui/components/multichain/app-footer/app-footer.test.js new file mode 100644 index 000000000000..7cc8615baa7d --- /dev/null +++ b/ui/components/multichain/app-footer/app-footer.test.js @@ -0,0 +1,23 @@ +import React from 'react'; +import configureStore from '../../../store/store'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import mockState from '../../../../test/data/mock-state.json'; +import { AppFooter } from '.'; + +const render = (stateChanges = {}, location = {}) => { + const store = configureStore({ + ...mockState, + activeTab: { + origin: 'https://remix.ethereum.org', + }, + ...stateChanges, + }); + return renderWithProvider(, store); +}; + +describe('App Footer', () => { + it('should match snapshot', () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/ui/css/itcss/components/newui-sections.scss b/ui/css/itcss/components/newui-sections.scss index f0462fd5d091..1226492d64fd 100644 --- a/ui/css/itcss/components/newui-sections.scss +++ b/ui/css/itcss/components/newui-sections.scss @@ -58,7 +58,6 @@ .main-container { width: 85vw; - margin-bottom: 10vh; min-height: 90vh; box-shadow: var(--shadow-size-xs) var(--color-shadow-default); } diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index deb2f0986835..c720730600c9 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -35,6 +35,7 @@ import { ImportNftsModal, ImportTokensModal, SelectActionModal, + AppFooter, } from '../../components/multichain'; import UnlockPage from '../unlock-page'; import Alerts from '../../components/app/alerts'; @@ -122,6 +123,7 @@ import { ToggleIpfsModal } from '../../components/app/nft-default-image/toggle-i ///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps) import KeyringSnapRemovalResult from '../../components/app/modals/keyring-snap-removal-modal'; ///: END:ONLY_INCLUDE_IN +import { Display, FlexDirection } from '../../helpers/constants/design-system'; export default class Routes extends Component { static propTypes = { @@ -619,6 +621,7 @@ export default class Routes extends Component { {!isLoading && isNetworkLoading ? : null} {this.renderRoutes()} + {!this.hideAppHeader() && } {isUnlocked ? : null} ); From 836eb9b4a16e43b24303eb259e1be58cb82283ca Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 6 Sep 2023 14:35:54 +0530 Subject: [PATCH 02/10] updated snapshot --- ui/components/multichain/app-footer/app-footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/multichain/app-footer/app-footer.scss b/ui/components/multichain/app-footer/app-footer.scss index 8c702e998bb0..dac248d579e4 100644 --- a/ui/components/multichain/app-footer/app-footer.scss +++ b/ui/components/multichain/app-footer/app-footer.scss @@ -7,7 +7,6 @@ bottom: 0; position: sticky; z-index: 55; // we are applying same z-index for header as well - margin-bottom: 10vh; // this is to keep the margin as what we have currently for main-container min-height: 64px; flex-flow: column nowrap; @@ -21,6 +20,7 @@ @include screen-sm-min { width: $width-screen-sm-min; + margin-bottom: 10vh; // same as main container } @include screen-md-min { From d21df707c2f3b3df98d9fc0ecce6499afb124a41 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 6 Sep 2023 14:48:38 +0530 Subject: [PATCH 03/10] updated button --- .../__snapshots__/app-footer.test.js.snap | 58 +------------------ 1 file changed, 1 insertion(+), 57 deletions(-) diff --git a/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap b/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap index 37795b9afdfe..4af08d508c70 100644 --- a/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap +++ b/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap @@ -1,59 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`App Footer should match snapshot 1`] = ` - -`; +exports[`App Footer should match snapshot 1`] = `
`; From 9637582446ef0914393eca708e8b5fc6bbc7356e Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Wed, 6 Sep 2023 17:57:56 +0530 Subject: [PATCH 04/10] updated tests and controlled rendering of footer based on routes --- .../__snapshots__/app-footer.test.js.snap | 60 ++++++++++++++++++- .../multichain/app-footer/app-footer.test.js | 24 ++++---- ui/pages/routes/routes.component.js | 37 +++++++++++- ui/pages/routes/routes.container.js | 2 + 4 files changed, 109 insertions(+), 14 deletions(-) diff --git a/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap b/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap index 4af08d508c70..80d67318a51d 100644 --- a/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap +++ b/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap @@ -1,3 +1,61 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`App Footer should match snapshot 1`] = `
`; +exports[`App Footer should match snapshot 1`] = ` + +`; diff --git a/ui/components/multichain/app-footer/app-footer.test.js b/ui/components/multichain/app-footer/app-footer.test.js index 7cc8615baa7d..d6b3e82a5146 100644 --- a/ui/components/multichain/app-footer/app-footer.test.js +++ b/ui/components/multichain/app-footer/app-footer.test.js @@ -4,20 +4,22 @@ import { renderWithProvider } from '../../../../test/lib/render-helpers'; import mockState from '../../../../test/data/mock-state.json'; import { AppFooter } from '.'; -const render = (stateChanges = {}, location = {}) => { - const store = configureStore({ - ...mockState, - activeTab: { - origin: 'https://remix.ethereum.org', - }, - ...stateChanges, - }); - return renderWithProvider(, store); -}; +const store = configureStore({ + ...mockState, + activeTab: { + origin: 'https://remix.ethereum.org', + }, +}); describe('App Footer', () => { it('should match snapshot', () => { - const { container } = render(); + const { container } = renderWithProvider(, store); expect(container).toMatchSnapshot(); }); + + it('should render correctly', () => { + const { queryByTestId } = renderWithProvider(, store); + + expect(queryByTestId('app-footer')).toBeDefined(); + }); }); diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index c720730600c9..f55182b42b54 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -123,7 +123,6 @@ import { ToggleIpfsModal } from '../../components/app/nft-default-image/toggle-i ///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps) import KeyringSnapRemovalResult from '../../components/app/modals/keyring-snap-removal-modal'; ///: END:ONLY_INCLUDE_IN -import { Display, FlexDirection } from '../../helpers/constants/design-system'; export default class Routes extends Component { static propTypes = { @@ -152,6 +151,7 @@ export default class Routes extends Component { theme: PropTypes.string, sendStage: PropTypes.string, isNetworkUsed: PropTypes.bool, + unapprovedTransactions: PropTypes.object, allAccountsOnNetworkAreEmpty: PropTypes.bool, isTestNet: PropTypes.bool, currentChainId: PropTypes.string, @@ -480,6 +480,39 @@ export default class Routes extends Component { return isHandlingPermissionsRequest || isHandlingAddEthereumChainRequest; } + hideFooter() { + const { location, sendStage, unapprovedTransactions } = this.props; + const isTransactionEditPage = [ + SEND_STAGES.EDIT, + SEND_STAGES.DRAFT, + SEND_STAGES.ADD_RECIPIENT, + ].includes(sendStage); + const isConfirmationPage = Boolean( + matchPath(location.pathname, { + path: CONFIRM_TRANSACTION_ROUTE, + exact: false, + }), + ); + const isSwapsPage = Boolean( + matchPath(location.pathname, { path: SWAPS_ROUTE, exact: false }), + ); + const isSwapsBuildQuotePage = Boolean( + matchPath(location.pathname, { path: BUILD_QUOTE_ROUTE, exact: false }), + ); + + const hasUnapprovedTransactions = + Object.keys(unapprovedTransactions).length > 0; + + const hideFooterOnPages = + isSwapsPage || + isTransactionEditPage || + isConfirmationPage || + isSwapsBuildQuotePage || + hasUnapprovedTransactions; + + return hideFooterOnPages; + } + showOnboardingHeader() { const { location } = this.props; @@ -621,7 +654,7 @@ export default class Routes extends Component { {!isLoading && isNetworkLoading ? : null} {this.renderRoutes()} - {!this.hideAppHeader() && } + {!this.hideFooter() && } {isUnlocked ? : null}
); diff --git a/ui/pages/routes/routes.container.js b/ui/pages/routes/routes.container.js index 8e53215fc4d7..72d4241c4c71 100644 --- a/ui/pages/routes/routes.container.js +++ b/ui/pages/routes/routes.container.js @@ -12,6 +12,7 @@ import { getCurrentChainId, getShouldShowSeedPhraseReminder, isCurrentProviderCustom, + getUnapprovedTransactions, } from '../../selectors'; import { lockMetamask, @@ -62,6 +63,7 @@ function mapStateToProps(state) { isNetworkUsed: getIsNetworkUsed(state), allAccountsOnNetworkAreEmpty: getAllAccountsOnNetworkAreEmpty(state), isTestNet: getIsTestnet(state), + unapprovedTransactions: getUnapprovedTransactions(state), currentChainId: getCurrentChainId(state), shouldShowSeedPhraseReminder: getShouldShowSeedPhraseReminder(state), forgottenPassword: state.metamask.forgottenPassword, From 921507c0a2490943d20a8ff940d63625704b5bad Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Thu, 7 Sep 2023 15:55:18 +0530 Subject: [PATCH 05/10] show on wallet and connections view --- ui/pages/routes/routes.component.js | 38 +++++++---------------------- ui/pages/routes/routes.container.js | 2 -- 2 files changed, 9 insertions(+), 31 deletions(-) diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index f55182b42b54..94b8f4f17fac 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -151,7 +151,6 @@ export default class Routes extends Component { theme: PropTypes.string, sendStage: PropTypes.string, isNetworkUsed: PropTypes.bool, - unapprovedTransactions: PropTypes.object, allAccountsOnNetworkAreEmpty: PropTypes.bool, isTestNet: PropTypes.bool, currentChainId: PropTypes.string, @@ -480,37 +479,18 @@ export default class Routes extends Component { return isHandlingPermissionsRequest || isHandlingAddEthereumChainRequest; } - hideFooter() { - const { location, sendStage, unapprovedTransactions } = this.props; - const isTransactionEditPage = [ - SEND_STAGES.EDIT, - SEND_STAGES.DRAFT, - SEND_STAGES.ADD_RECIPIENT, - ].includes(sendStage); - const isConfirmationPage = Boolean( - matchPath(location.pathname, { - path: CONFIRM_TRANSACTION_ROUTE, - exact: false, - }), - ); - const isSwapsPage = Boolean( - matchPath(location.pathname, { path: SWAPS_ROUTE, exact: false }), + showFooter() { + const { location } = this.props; + const isHomePage = Boolean( + matchPath(location.pathname, { path: DEFAULT_ROUTE, exact: true }), ); - const isSwapsBuildQuotePage = Boolean( - matchPath(location.pathname, { path: BUILD_QUOTE_ROUTE, exact: false }), + const isConnectionsPage = Boolean( + matchPath(location.pathname, { path: CONNECTIONS, exact: true }), ); - const hasUnapprovedTransactions = - Object.keys(unapprovedTransactions).length > 0; - - const hideFooterOnPages = - isSwapsPage || - isTransactionEditPage || - isConfirmationPage || - isSwapsBuildQuotePage || - hasUnapprovedTransactions; + const showFooterOnPages = isHomePage || isConnectionsPage; - return hideFooterOnPages; + return showFooterOnPages; } showOnboardingHeader() { @@ -654,7 +634,7 @@ export default class Routes extends Component { {!isLoading && isNetworkLoading ? : null} {this.renderRoutes()} - {!this.hideFooter() && } + {this.showFooter() && } {isUnlocked ? : null}
); diff --git a/ui/pages/routes/routes.container.js b/ui/pages/routes/routes.container.js index 72d4241c4c71..8e53215fc4d7 100644 --- a/ui/pages/routes/routes.container.js +++ b/ui/pages/routes/routes.container.js @@ -12,7 +12,6 @@ import { getCurrentChainId, getShouldShowSeedPhraseReminder, isCurrentProviderCustom, - getUnapprovedTransactions, } from '../../selectors'; import { lockMetamask, @@ -63,7 +62,6 @@ function mapStateToProps(state) { isNetworkUsed: getIsNetworkUsed(state), allAccountsOnNetworkAreEmpty: getAllAccountsOnNetworkAreEmpty(state), isTestNet: getIsTestnet(state), - unapprovedTransactions: getUnapprovedTransactions(state), currentChainId: getCurrentChainId(state), shouldShowSeedPhraseReminder: getShouldShowSeedPhraseReminder(state), forgottenPassword: state.metamask.forgottenPassword, From eec61e4dff38ea08d2d57de4bc539e33daab5726 Mon Sep 17 00:00:00 2001 From: NidhiKJha Date: Mon, 18 Sep 2023 14:34:46 +0530 Subject: [PATCH 06/10] updated snapshot --- .../multichain/app-footer/__snapshots__/app-footer.test.js.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap b/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap index 80d67318a51d..1cdeceae3c5a 100644 --- a/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap +++ b/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap @@ -46,7 +46,6 @@ exports[`App Footer should match snapshot 1`] = ` >

Date: Fri, 22 Sep 2023 17:00:47 +0530 Subject: [PATCH 07/10] test to verify --- ui/pages/home/home.component.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index cc23bf2d25ae..952fab00ccaf 100644 --- a/ui/pages/home/home.component.js +++ b/ui/pages/home/home.component.js @@ -602,7 +602,7 @@ export default class Home extends PureComponent { key="home-web3ShimUsageNotification" /> ) : null} - { + {/* { ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) shouldShowSeedPhraseReminder ? ( ) : null ///: END:ONLY_INCLUDE_IN - } + } */} {infuraBlocked && this.state.canShowBlockageNotification ? ( Date: Fri, 22 Sep 2023 17:15:42 +0530 Subject: [PATCH 08/10] lint fix --- ui/pages/home/home.component.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index 952fab00ccaf..23542aeb2bc9 100644 --- a/ui/pages/home/home.component.js +++ b/ui/pages/home/home.component.js @@ -63,9 +63,6 @@ import { BUILD_QUOTE_ROUTE, VIEW_QUOTE_ROUTE, CONFIRMATION_V_NEXT_ROUTE, - ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) - ONBOARDING_SECURE_YOUR_WALLET_ROUTE, - ///: END:ONLY_INCLUDE_IN ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) CONFIRM_ADD_CUSTODIAN_TOKEN, INTERACTIVE_REPLACEMENT_TOKEN_PAGE, @@ -126,7 +123,6 @@ export default class Home extends PureComponent { hasWatchNftPendingApprovals: PropTypes.bool, setConnectedStatusPopoverHasBeenShown: PropTypes.func, ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) - shouldShowSeedPhraseReminder: PropTypes.bool.isRequired, isPopup: PropTypes.bool, connectedStatusPopoverHasBeenShown: PropTypes.bool, showRecoveryPhraseReminder: PropTypes.bool.isRequired, @@ -403,11 +399,6 @@ export default class Home extends PureComponent { const { t } = this.context; const { - ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) - history, - shouldShowSeedPhraseReminder, - isPopup, - ///: END:ONLY_INCLUDE_IN shouldShowWeb3ShimUsageNotification, setWeb3ShimUsageAlertDismissed, originOfCurrentTab, From b7379af1a010c52b397a4248ca29e999ee250c79 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 10 Oct 2023 12:49:17 -0500 Subject: [PATCH 09/10] Show footer on the assets screen --- ui/pages/routes/routes.component.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index 94b8f4f17fac..1a5c525d5661 100644 --- a/ui/pages/routes/routes.component.js +++ b/ui/pages/routes/routes.component.js @@ -480,6 +480,10 @@ export default class Routes extends Component { } showFooter() { + if (Boolean(process.env.MULTICHAIN) === false) { + return false; + } + const { location } = this.props; const isHomePage = Boolean( matchPath(location.pathname, { path: DEFAULT_ROUTE, exact: true }), @@ -487,10 +491,11 @@ export default class Routes extends Component { const isConnectionsPage = Boolean( matchPath(location.pathname, { path: CONNECTIONS, exact: true }), ); + const isAssetPage = Boolean( + matchPath(location.pathname, { path: ASSET_ROUTE, exact: false }), + ); - const showFooterOnPages = isHomePage || isConnectionsPage; - - return showFooterOnPages; + return isAssetPage || isHomePage || isConnectionsPage; } showOnboardingHeader() { From d1d5e419997fd604f04c6ea31980e58d84757bf7 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Tue, 10 Oct 2023 13:17:52 -0500 Subject: [PATCH 10/10] Restore the shouldShowSeedPhraseReminder prop --- ui/components/app/multiple-notifications/index.scss | 5 +++++ .../multiple-notifications.component.js | 3 +++ ui/pages/home/home.component.js | 13 +++++++++++-- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/ui/components/app/multiple-notifications/index.scss b/ui/components/app/multiple-notifications/index.scss index af939b884c64..100857d0fe01 100644 --- a/ui/components/app/multiple-notifications/index.scss +++ b/ui/components/app/multiple-notifications/index.scss @@ -59,6 +59,11 @@ visibility: hidden; } + /* accommodates for the home "Wallet" / "Connections" footer */ + &.home-notification-wrapper--multichain > div { + bottom: 88px; + } + > div:first-of-type { visibility: visible; } diff --git a/ui/components/app/multiple-notifications/multiple-notifications.component.js b/ui/components/app/multiple-notifications/multiple-notifications.component.js index 96abbf4a2bf4..d2ca8e7be25d 100644 --- a/ui/components/app/multiple-notifications/multiple-notifications.component.js +++ b/ui/components/app/multiple-notifications/multiple-notifications.component.js @@ -31,6 +31,9 @@ export default class MultipleNotifications extends PureComponent { className={classnames(...classNames, { 'home-notification-wrapper--show-all': showAll, 'home-notification-wrapper--show-first': !showAll, + 'home-notification-wrapper--multichain': Boolean( + process.env.MULTICHAIN, + ), })} > {childrenToRender} diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index 23542aeb2bc9..cc23bf2d25ae 100644 --- a/ui/pages/home/home.component.js +++ b/ui/pages/home/home.component.js @@ -63,6 +63,9 @@ import { BUILD_QUOTE_ROUTE, VIEW_QUOTE_ROUTE, CONFIRMATION_V_NEXT_ROUTE, + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + ONBOARDING_SECURE_YOUR_WALLET_ROUTE, + ///: END:ONLY_INCLUDE_IN ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) CONFIRM_ADD_CUSTODIAN_TOKEN, INTERACTIVE_REPLACEMENT_TOKEN_PAGE, @@ -123,6 +126,7 @@ export default class Home extends PureComponent { hasWatchNftPendingApprovals: PropTypes.bool, setConnectedStatusPopoverHasBeenShown: PropTypes.func, ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + shouldShowSeedPhraseReminder: PropTypes.bool.isRequired, isPopup: PropTypes.bool, connectedStatusPopoverHasBeenShown: PropTypes.bool, showRecoveryPhraseReminder: PropTypes.bool.isRequired, @@ -399,6 +403,11 @@ export default class Home extends PureComponent { const { t } = this.context; const { + ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) + history, + shouldShowSeedPhraseReminder, + isPopup, + ///: END:ONLY_INCLUDE_IN shouldShowWeb3ShimUsageNotification, setWeb3ShimUsageAlertDismissed, originOfCurrentTab, @@ -593,7 +602,7 @@ export default class Home extends PureComponent { key="home-web3ShimUsageNotification" /> ) : null} - {/* { + { ///: BEGIN:ONLY_INCLUDE_IN(build-main,build-beta,build-flask) shouldShowSeedPhraseReminder ? ( ) : null ///: END:ONLY_INCLUDE_IN - } */} + } {infuraBlocked && this.state.canShowBlockageNotification ? (