Skip to content

Commit

Permalink
Merge branch 'develop' into beta-welcome-messaging
Browse files Browse the repository at this point in the history
  • Loading branch information
darkwing authored Nov 16, 2022
2 parents 9b31b2f + 4ce6487 commit 04fc2db
Show file tree
Hide file tree
Showing 16 changed files with 276 additions and 38 deletions.
4 changes: 4 additions & 0 deletions app/_locales/en/messages.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 11 additions & 0 deletions app/scripts/controllers/app-state.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { METAMASK_CONTROLLER_EVENTS } from '../metamask-controller';
import { MINUTE } from '../../../shared/constants/time';
import { AUTO_LOCK_TIMEOUT_ALARM } from '../../../shared/constants/alarms';
import { isManifestV3 } from '../../../shared/modules/mv3.utils';
import { isBeta } from '../../../ui/helpers/utils/build-types';

export default class AppStateController extends EventEmitter {
/**
Expand Down Expand Up @@ -36,6 +37,7 @@ export default class AppStateController extends EventEmitter {
enableEIP1559V2NoticeDismissed: false,
showTestnetMessageInDropdown: true,
showPortfolioTooltip: true,
showBetaHeader: isBeta(),
trezorModel: null,
...initState,
qrHardware: {},
Expand Down Expand Up @@ -284,6 +286,15 @@ export default class AppStateController extends EventEmitter {
this.store.updateState({ showPortfolioTooltip });
}

/**
* Sets whether the beta notification heading on the home page
*
* @param showBetaHeader
*/
setShowBetaHeader(showBetaHeader) {
this.store.updateState({ showBetaHeader });
}

/**
* Sets a property indicating the model of the user's Trezor hardware wallet
*
Expand Down
2 changes: 2 additions & 0 deletions app/scripts/metamask-controller.js
Original file line number Diff line number Diff line change
Expand Up @@ -1700,6 +1700,8 @@ export default class MetamaskController extends EventEmitter {
),
setShowPortfolioTooltip:
appStateController.setShowPortfolioTooltip.bind(appStateController),
setShowBetaHeader:
appStateController.setShowBetaHeader.bind(appStateController),
setCollectiblesDetectionNoticeDismissed:
appStateController.setCollectiblesDetectionNoticeDismissed.bind(
appStateController,
Expand Down
1 change: 1 addition & 0 deletions test/data/mock-state.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"usePhishDetect": true,
"participateInMetaMetrics": false,
"gasEstimateType": "fee-market",
"showBetaHeader": false,
"gasFeeEstimates": {
"low": {
"minWaitTimeEstimate": 180000,
Expand Down
1 change: 1 addition & 0 deletions ui/components/app/app-components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@import 'alerts/alerts';
@import 'app-header/index';
@import 'asset-list-item/asset-list-item';
@import 'beta-header/index';
@import 'cancel-speedup-popover/index';
@import 'confirm-page-container/index';
@import 'confirm-page-container/enableEIP1559V2-notice';
Expand Down
62 changes: 40 additions & 22 deletions ui/components/app/app-header/app-header.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
import NetworkDisplay from '../network-display';

///: BEGIN:ONLY_INCLUDE_IN(beta)
import BetaHeader from '../beta-header';
///: END:ONLY_INCLUDE_IN(beta)

export default class AppHeader extends PureComponent {
static propTypes = {
history: PropTypes.object,
Expand All @@ -23,6 +27,9 @@ export default class AppHeader extends PureComponent {
///: BEGIN:ONLY_INCLUDE_IN(flask)
unreadNotificationsCount: PropTypes.number,
///: END:ONLY_INCLUDE_IN
///: BEGIN:ONLY_INCLUDE_IN(beta)
showBetaHeader: PropTypes.bool,
///: END:ONLY_INCLUDE_IN
onClick: PropTypes.func,
};

Expand Down Expand Up @@ -112,33 +119,44 @@ export default class AppHeader extends PureComponent {
disableNetworkIndicator,
disabled,
onClick,
///: BEGIN:ONLY_INCLUDE_IN(beta)
showBetaHeader,
///: END:ONLY_INCLUDE_IN(beta)
} = this.props;

return (
<div className="app-header">
<div className="app-header__contents">
<MetaFoxLogo
unsetIconHeight
onClick={async () => {
if (onClick) {
await onClick();
}
history.push(DEFAULT_ROUTE);
}}
/>
<div className="app-header__account-menu-container">
{!hideNetworkIndicator && (
<div className="app-header__network-component-wrapper">
<NetworkDisplay
onClick={(event) => this.handleNetworkIndicatorClick(event)}
disabled={disabled || disableNetworkIndicator}
/>
</div>
)}
{this.renderAccountMenu()}
<>
{
///: BEGIN:ONLY_INCLUDE_IN(beta)
showBetaHeader ? <BetaHeader /> : null
///: END:ONLY_INCLUDE_IN(beta)
}

<div className="app-header">
<div className="app-header__contents">
<MetaFoxLogo
unsetIconHeight
onClick={async () => {
if (onClick) {
await onClick();
}
history.push(DEFAULT_ROUTE);
}}
/>
<div className="app-header__account-menu-container">
{!hideNetworkIndicator && (
<div className="app-header__network-component-wrapper">
<NetworkDisplay
onClick={(event) => this.handleNetworkIndicatorClick(event)}
disabled={disabled || disableNetworkIndicator}
/>
</div>
)}
{this.renderAccountMenu()}
</div>
</div>
</div>
</div>
</>
);
}
}
18 changes: 15 additions & 3 deletions ui/components/app/app-header/app-header.container.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { compose } from 'redux';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import { getUnreadNotificationsCount } from '../../../selectors';
///: END:ONLY_INCLUDE_IN
import {
///: BEGIN:ONLY_INCLUDE_IN(flask)
getUnreadNotificationsCount,
///: END:ONLY_INCLUDE_IN
///: BEGIN:ONLY_INCLUDE_IN(beta)
getShowBetaHeader,
///: END:ONLY_INCLUDE_IN
} from '../../../selectors';

import * as actions from '../../../store/actions';
import AppHeader from './app-header.component';
Expand All @@ -17,6 +22,10 @@ const mapStateToProps = (state) => {
const unreadNotificationsCount = getUnreadNotificationsCount(state);
///: END:ONLY_INCLUDE_IN

///: BEGIN:ONLY_INCLUDE_IN(beta)
const showBetaHeader = getShowBetaHeader(state);
///: END:ONLY_INCLUDE_IN

return {
networkDropdownOpen,
selectedAddress,
Expand All @@ -25,6 +34,9 @@ const mapStateToProps = (state) => {
///: BEGIN:ONLY_INCLUDE_IN(flask)
unreadNotificationsCount,
///: END:ONLY_INCLUDE_IN
///: BEGIN:ONLY_INCLUDE_IN(beta)
showBetaHeader,
///: END:ONLY_INCLUDE_IN
};
};

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Beta Header should match snapshot 1`] = `
<div>
<div
class="box beta-header box--padding-2 box--display-flex box--flex-direction-row box--width-full box--background-color-warning-default"
>
<h6
class="box box--flex-direction-row typography beta-header__message typography--h7 typography--weight-normal typography--style-normal typography--color-warning-inverse"
>
<span>
This is a BETA version. Please report bugs
<a
href="https://metamask.zendesk.com/hc/en-us"
rel="noreferrer noopener"
target="_blank"
>
here
</a>
</span>
</h6>
<button
aria-label="Close"
class="beta-header__button"
data-testid="beta-header-close"
>
<i
class="fa fa-times"
/>
</button>
</div>
</div>
`;
24 changes: 24 additions & 0 deletions ui/components/app/beta-header/beta-header.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import { Provider } from 'react-redux';
import testData from '../../../../.storybook/test-data';
import configureStore from '../../../store/store';
import BetaHeader from '.';

const store = configureStore({
...testData,
metamask: { ...testData.metamask, isUnlocked: true, showBetaHeader: true },
});

export default {
title: 'Components/App/BetaHeader',
decorators: [(story) => <Provider store={store}>{story()}</Provider>],
id: __filename,
};

export const DefaultStory = () => (
<>
<BetaHeader />
</>
);

DefaultStory.storyName = 'Default';
45 changes: 45 additions & 0 deletions ui/components/app/beta-header/beta-header.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React from 'react';
import { fireEvent } from '@testing-library/react';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import mockState from '../../../../test/data/mock-state.json';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
import BetaHeader from '.';

const mockHideBetaHeader = jest.fn();

jest.mock('../../../store/actions', () => {
return {
hideBetaHeader: () => {
mockHideBetaHeader();
},
};
});

describe('Beta Header', () => {
let store;

beforeEach(() => {
store = configureMockStore([thunk])(mockState);
});

afterEach(() => {
mockHideBetaHeader.mockClear();
});

it('should match snapshot', () => {
const { container } = renderWithProvider(<BetaHeader />, store);
expect(container).toMatchSnapshot();
});

describe('Beta Header', () => {
it('gets hidden when close button is clicked', () => {
const { queryByTestId } = renderWithProvider(<BetaHeader />, store);

const closeButton = queryByTestId('beta-header-close');
fireEvent.click(closeButton);

expect(mockHideBetaHeader).toHaveBeenCalledTimes(1);
});
});
});
59 changes: 59 additions & 0 deletions ui/components/app/beta-header/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React from 'react';
import { useI18nContext } from '../../../hooks/useI18nContext';

import Box from '../../ui/box/box';
import Typography from '../../ui/typography/typography';
import {
TYPOGRAPHY,
COLORS,
BLOCK_SIZES,
DISPLAY,
} from '../../../helpers/constants/design-system';
import { BETA_BUGS_URL } from '../../../helpers/constants/beta';

import { hideBetaHeader } from '../../../store/actions';

const BetaHeader = () => {
const t = useI18nContext();

return (
<Box
display={DISPLAY.FLEX}
width={BLOCK_SIZES.FULL}
backgroundColor={COLORS.WARNING_DEFAULT}
padding={2}
className="beta-header"
>
<Typography
variant={TYPOGRAPHY.H7}
marginTop={0}
marginBottom={0}
className="beta-header__message"
color={COLORS.WARNING_INVERSE}
>
{t('betaHeaderText', [
<a
href={BETA_BUGS_URL}
key="link"
target="_blank"
rel="noreferrer noopener"
>
{t('here')}
</a>,
])}
</Typography>
<button
className="beta-header__button"
data-testid="beta-header-close"
onClick={() => {
hideBetaHeader();
}}
aria-label={t('close')}
>
<i className="fa fa-times" />
</button>
</Box>
);
};

export default BetaHeader;
16 changes: 16 additions & 0 deletions ui/components/app/beta-header/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.beta-header {
&__message {
text-align: center;
flex-grow: 1;
}

&__button {
background: transparent;
padding: 0 6px;
margin: 0;

i {
color: var(--color-warning-inverse);
}
}
}
Loading

0 comments on commit 04fc2db

Please sign in to comment.