diff --git a/.circleci/config.yml b/.circleci/config.yml index ffccc0900..de4e04d33 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -283,9 +283,25 @@ jobs: - checkout - attach_workspace: at: . - - run: - name: build:dist - command: yarn build --build-type beta dist + - when: + condition: + not: + matches: + pattern: /^master$/ + value: << pipeline.git.branch >> + steps: + - run: + name: build:dist + command: yarn build --build-type beta dist + - when: + condition: + matches: + pattern: /^master$/ + value: << pipeline.git.branch >> + steps: + - run: + name: build:prod + command: yarn build --build-type beta prod - run: name: build:debug command: find dist/ -type f -exec md5sum {} \; | sort -k 2 diff --git a/CHANGELOG.md b/CHANGELOG.md index bda7a501c..9146cec16 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [FLASK] Fix an issue with updating snaps that require certain permissions ([#16473](https://github.com/MetaMask/metamask-extension/pull/16473)) - [FLASK] Fix some issues with installing snaps that request `eth_accounts` ([#16365](https://github.com/MetaMask/metamask-extension/pull/16365)) - [FLASK] Catch and display errors in snaps insight ([#16416](https://github.com/MetaMask/metamask-extension/pull/16416)) +## [10.22.3] +### Added +- [Beta]: Add Beta banner to all screens ([#16307](https://github.com/MetaMask/metamask-extension/pull/16307)) + +### Changed +- [Beta]: Update MetaMask logo imagery ([#16304](https://github.com/MetaMask/metamask-extension/pull/16304)) +- [Beta]: Update MetaMask long logo to new imagery ([#16505](https://github.com/MetaMask/metamask-extension/pull/16505)) ## [10.22.2] ### Changed @@ -3331,6 +3338,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 [Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.23.0...HEAD [10.23.0]: https://github.com/MetaMask/metamask-extension/compare/v10.22.2...v10.23.0 +[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.22.3...HEAD +[10.22.3]: https://github.com/MetaMask/metamask-extension/compare/v10.22.2...v10.22.3 [10.22.2]: https://github.com/MetaMask/metamask-extension/compare/v10.22.1...v10.22.2 [10.22.1]: https://github.com/MetaMask/metamask-extension/compare/v10.22.0...v10.22.1 [10.22.0]: https://github.com/MetaMask/metamask-extension/compare/v10.21.2...v10.22.0 diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 5c82e6c69..0c0d85078 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -437,6 +437,10 @@ "beta": { "message": "Beta" }, + "betaHeaderText": { + "message": "This is a BETA version. Please report bugs $1", + "description": "$1 represents the word 'here' in a hyperlink" + }, "betaMetamaskDescription": { "message": "Trusted by millions, MetaMask is a secure wallet making the world of web3 accessible to all." }, diff --git a/app/scripts/controllers/app-state.js b/app/scripts/controllers/app-state.js index b63ff11ad..9b62cf3e2 100644 --- a/app/scripts/controllers/app-state.js +++ b/app/scripts/controllers/app-state.js @@ -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 { /** @@ -36,6 +37,7 @@ export default class AppStateController extends EventEmitter { enableEIP1559V2NoticeDismissed: false, showTestnetMessageInDropdown: true, showPortfolioTooltip: true, + showBetaHeader: isBeta(), trezorModel: null, ...initState, qrHardware: {}, @@ -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 * diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 770b16ef6..bcb755b2f 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -1720,6 +1720,8 @@ export default class MetamaskController extends EventEmitter { ), setShowPortfolioTooltip: appStateController.setShowPortfolioTooltip.bind(appStateController), + setShowBetaHeader: + appStateController.setShowBetaHeader.bind(appStateController), setCollectiblesDetectionNoticeDismissed: appStateController.setCollectiblesDetectionNoticeDismissed.bind( appStateController, diff --git a/test/data/mock-state.json b/test/data/mock-state.json index 963c88d42..a83d6bb87 100644 --- a/test/data/mock-state.json +++ b/test/data/mock-state.json @@ -22,6 +22,7 @@ "usePhishDetect": true, "participateInMetaMetrics": false, "gasEstimateType": "fee-market", + "showBetaHeader": false, "gasFeeEstimates": { "low": { "minWaitTimeEstimate": 180000, diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss index ed008d5f0..0b457c66c 100644 --- a/ui/components/app/app-components.scss +++ b/ui/components/app/app-components.scss @@ -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'; diff --git a/ui/components/app/app-header/app-header.component.js b/ui/components/app/app-header/app-header.component.js index 7f1bbc253..f5e7d57c5 100644 --- a/ui/components/app/app-header/app-header.component.js +++ b/ui/components/app/app-header/app-header.component.js @@ -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, @@ -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, }; @@ -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 ( -
-
- { - if (onClick) { - await onClick(); - } - history.push(DEFAULT_ROUTE); - }} - /> -
- {!hideNetworkIndicator && ( -
- this.handleNetworkIndicatorClick(event)} - disabled={disabled || disableNetworkIndicator} - /> -
- )} - {this.renderAccountMenu()} + <> + { + ///: BEGIN:ONLY_INCLUDE_IN(beta) + showBetaHeader ? : null + ///: END:ONLY_INCLUDE_IN(beta) + } + +
+
+ { + if (onClick) { + await onClick(); + } + history.push(DEFAULT_ROUTE); + }} + /> +
+ {!hideNetworkIndicator && ( +
+ this.handleNetworkIndicatorClick(event)} + disabled={disabled || disableNetworkIndicator} + /> +
+ )} + {this.renderAccountMenu()} +
-
+ ); } } diff --git a/ui/components/app/app-header/app-header.container.js b/ui/components/app/app-header/app-header.container.js index e30049bc3..04b9c47c4 100644 --- a/ui/components/app/app-header/app-header.container.js +++ b/ui/components/app/app-header/app-header.container.js @@ -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'; @@ -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, @@ -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 }; }; diff --git a/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap b/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap new file mode 100644 index 000000000..24c327ba4 --- /dev/null +++ b/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Beta Header should match snapshot 1`] = ` +
+
+
+ + + This is a BETA version. Please report bugs + + here + + + + +
+ +
+
+`; diff --git a/ui/components/app/beta-header/beta-header.stories.js b/ui/components/app/beta-header/beta-header.stories.js new file mode 100644 index 000000000..4a4480090 --- /dev/null +++ b/ui/components/app/beta-header/beta-header.stories.js @@ -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) => {story()}], + id: __filename, +}; + +export const DefaultStory = () => ( + <> + + +); + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/beta-header/beta-header.test.js b/ui/components/app/beta-header/beta-header.test.js new file mode 100644 index 000000000..2036b23e0 --- /dev/null +++ b/ui/components/app/beta-header/beta-header.test.js @@ -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(, store); + expect(container).toMatchSnapshot(); + }); + + describe('Beta Header', () => { + it('gets hidden when close button is clicked', () => { + const { queryByTestId } = renderWithProvider(, store); + + const closeButton = queryByTestId('beta-header-close'); + fireEvent.click(closeButton); + + expect(mockHideBetaHeader).toHaveBeenCalledTimes(1); + }); + }); +}); diff --git a/ui/components/app/beta-header/index.js b/ui/components/app/beta-header/index.js new file mode 100644 index 000000000..dd1884339 --- /dev/null +++ b/ui/components/app/beta-header/index.js @@ -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 ( + + + {t('betaHeaderText', [ + + {t('here')} + , + ])} + + + + ); +}; + +export default BetaHeader; diff --git a/ui/components/app/beta-header/index.scss b/ui/components/app/beta-header/index.scss new file mode 100644 index 000000000..6d143af97 --- /dev/null +++ b/ui/components/app/beta-header/index.scss @@ -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); + } + } +} diff --git a/ui/components/ui/metafox-logo/horizontal-logo.js b/ui/components/ui/metafox-logo/horizontal-logo.js index 5c5de90e3..2229bffb4 100644 --- a/ui/components/ui/metafox-logo/horizontal-logo.js +++ b/ui/components/ui/metafox-logo/horizontal-logo.js @@ -23,55 +23,55 @@ export default function MetaFoxHorizontalLogo({ className }) { >