diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a7eab9804be..4e2ed30bbbd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,109 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [10.28.1] +### Changed +- Fix release automation ([#18427](https://github.com/MetaMask/metamask-extension/pull/18427)) + +## [10.28.0] +### Added +- Adding NFT autodetection to "What's New" Announcements ([#17653](https://github.com/MetaMask/metamask-extension/pull/17653)) +- [FLASK] Add WebAssembly endowment ([#17694](https://github.com/MetaMask/metamask-extension/pull/17694)) +- Bridge tokens by redirecting to Portfolio from wallet overview page ([#17952](https://github.com/MetaMask/metamask-extension/pull/17952)) +- [MMI] Adds the MMI support link and the mmi_website link as well ([#17853](https://github.com/MetaMask/metamask-extension/pull/17853)) +- What's new - OpenSea security provider ([#16831](https://github.com/MetaMask/metamask-extension/pull/16831)) +- Open sea security provider warning message ([#17662](https://github.com/MetaMask/metamask-extension/pull/17662)) +- SRP hold to reveal ([#17232](https://github.com/MetaMask/metamask-extension/pull/17232)) +- Additional incoming transactions support ([#14219](https://github.com/MetaMask/metamask-extension/pull/14219)) + +### Changed +- UX: Loaclize the avatar-favicon description text ([#18132](https://github.com/MetaMask/metamask-extension/pull/18132)) +- 17921 Update TransactionAlerts with BannerAlert ([#17940](https://github.com/MetaMask/metamask-extension/pull/17940)) +- Part of 17670: Replace Typography with Text confirm-approve-content.component.js and home.component.js ([#18049](https://github.com/MetaMask/metamask-extension/pull/18049)) +- UX: Icon: Update buy icon ([#18123](https://github.com/MetaMask/metamask-extension/pull/18123)) +- Display internet protocol on the domain in SIWE screen ([#18052](https://github.com/MetaMask/metamask-extension/pull/18052)) +- Wrap balance and portfolio button ([#18109](https://github.com/MetaMask/metamask-extension/pull/18109)) +- UX Icon: Updated Icon for Disclosure ([#17877](https://github.com/MetaMask/metamask-extension/pull/17877)) +- Updating AvatarWithBage to BadgeWrapper ([#17851](https://github.com/MetaMask/metamask-extension/pull/17851)) +- [FLASK] BREAKING - snaps-monorepo@0.30.0 ([#17718](https://github.com/MetaMask/metamask-extension/pull/17718)) +- increment keyring controller version ([#18036](https://github.com/MetaMask/metamask-extension/pull/18036)) +- Bump Snow 1.5.0 ([#17985](https://github.com/MetaMask/metamask-extension/pull/17985)) +- Avoid blob url for files downloads ([#17986](https://github.com/MetaMask/metamask-extension/pull/17986)) +- Upgrading the Import Account modal ([#17763](https://github.com/MetaMask/metamask-extension/pull/17763)) +- identify desktop is paired in the metrics event ([#17892](https://github.com/MetaMask/metamask-extension/pull/17892)) +- [MMI] Conditional change title in home if buildType is MMI ([#17898](https://github.com/MetaMask/metamask-extension/pull/17898)) +- [MMI] Prevent multiple instances of MM at the same browser ([#17856](https://github.com/MetaMask/metamask-extension/pull/17856)) +- Buy crypto by redirecting to onramp experience on pdapp instead of deposit popover ([#17689](https://github.com/MetaMask/metamask-extension/pull/17689)) +- Update snaps locale messages for casing and content ([#17915](https://github.com/MetaMask/metamask-extension/pull/17915)) +- Ux: Icon: Update fa-eye with ICON_NAMES.EYE ([#17800](https://github.com/MetaMask/metamask-extension/pull/17800)) +- UX: Icon: Stop using fa-times ([#17811](https://github.com/MetaMask/metamask-extension/pull/17811)) +- Selector performance improvements ([#17410](https://github.com/MetaMask/metamask-extension/pull/17410)) +- UX: Update Settings Icon ([#17561](https://github.com/MetaMask/metamask-extension/pull/17561)) +- UX Icon: updated fa-exclamation-circle ([#17879](https://github.com/MetaMask/metamask-extension/pull/17879)) +- Update minimum browser versions ([#12847](https://github.com/MetaMask/metamask-extension/pull/12847)) +- UX: Icon: Remove fa-exclamation-triangle usages ([#17691](https://github.com/MetaMask/metamask-extension/pull/17691)) +- UX: Icons: Remove icon-import ([#17816](https://github.com/MetaMask/metamask-extension/pull/17816)) +- UX: Icons: Remove IconCheck and fa-check ([#17787](https://github.com/MetaMask/metamask-extension/pull/17787)) +- UX Icon: updated fas-question icon ([#17828](https://github.com/MetaMask/metamask-extension/pull/17828)) +- UX: Icons: Stop using FA in TransactionActivityLog ([#17667](https://github.com/MetaMask/metamask-extension/pull/17667)) +- Ux: Icon: Improve alignment of asset list chevron ([#17791](https://github.com/MetaMask/metamask-extension/pull/17791)) +- UX: Icons: Remove IconWithLabel ([#17815](https://github.com/MetaMask/metamask-extension/pull/17815)) +- UX: Move Portfolio link to its own button ([#17722](https://github.com/MetaMask/metamask-extension/pull/17722)) +- UX Icon: Replace fa-user ([#17809](https://github.com/MetaMask/metamask-extension/pull/17809)) +- UX: Icons: Fix alignment of settings icons in full screen ([#17783](https://github.com/MetaMask/metamask-extension/pull/17783)) +- Cleanup: clearTimeout on useEffect for gas estimation and prevent state update on unmounted ConfirmTransactionBase ([#17804](https://github.com/MetaMask/metamask-extension/pull/17804)) +- Part of 17670: Replace Typography with Text approve-content-card ([#17753](https://github.com/MetaMask/metamask-extension/pull/17753)) +- UX: Icons: Remove lock icon ([#17739](https://github.com/MetaMask/metamask-extension/pull/17739)) +- Update HelpText component ([#17705](https://github.com/MetaMask/metamask-extension/pull/17705)) +- Change transaction type for send with approve transaction ([#17777](https://github.com/MetaMask/metamask-extension/pull/17777)) +- UX: Icon: Remove Plus icon ([#17666](https://github.com/MetaMask/metamask-extension/pull/17666)) +- Updating TextField component ([#17732](https://github.com/MetaMask/metamask-extension/pull/17732)) +- UX: Update three-dot icon for settings ([#17558](https://github.com/MetaMask/metamask-extension/pull/17558)) +- Updating Label component ([#17731](https://github.com/MetaMask/metamask-extension/pull/17731)) +- Pass `excludedPermissions` to `SnapController` ([#17321](https://github.com/MetaMask/metamask-extension/pull/17321)) +- UX: Update fa-search icon ([#17527](https://github.com/MetaMask/metamask-extension/pull/17527)) +- UX: Icons: Remove legacy connect icon ([#17673](https://github.com/MetaMask/metamask-extension/pull/17673)) +- UX: Icons: Remove usage of pencil icon ([#17676](https://github.com/MetaMask/metamask-extension/pull/17676)) +- Rename reset account settings ([#17457](https://github.com/MetaMask/metamask-extension/pull/17457)) +- Make username mandatory in the edit contact screen ([#17425](https://github.com/MetaMask/metamask-extension/pull/17425)) +- New Crowdin translations by Github Action ([#17082](https://github.com/MetaMask/metamask-extension/pull/17082)) + +### Removed +- NFTs: Remove feature flag for release ([#17401](https://github.com/MetaMask/metamask-extension/pull/17401)) +- Removed a feature flag ([#17922](https://github.com/MetaMask/metamask-extension/pull/17922)) +- UX: Remove legacy metametrics modal ([#17817](https://github.com/MetaMask/metamask-extension/pull/17817)) +- UX: Icons: Remove unused overview icons ([#17671](https://github.com/MetaMask/metamask-extension/pull/17671)) +- Remove CancelTransaction modal ([#17819](https://github.com/MetaMask/metamask-extension/pull/17819)) + +### Fixed +- Fix ThemeType casing issue ([#18039](https://github.com/MetaMask/metamask-extension/pull/18039)) +- Fix #17948 - Allow editing of NFT sends ([#17970](https://github.com/MetaMask/metamask-extension/pull/17970)) +- Fix #17848 - Ensure NFT collections toggle appropriately ([#17972](https://github.com/MetaMask/metamask-extension/pull/17972)) +- Force update mock state and render nfts item test fix ([#18044](https://github.com/MetaMask/metamask-extension/pull/18044)) +- fix network dropdown bug ([#18079](https://github.com/MetaMask/metamask-extension/pull/18079)) +- Fix #17932 - Ensure NFT last sold price is formatted correctly ([#17983](https://github.com/MetaMask/metamask-extension/pull/17983)) +- Use tokenList to get token details, when available, in getTokenStanda… ([#17891](https://github.com/MetaMask/metamask-extension/pull/17891)) +- delay chain validation ([#17413](https://github.com/MetaMask/metamask-extension/pull/17413)) +- fix(17542): fix fiat currency display in few txn actions ([#18011](https://github.com/MetaMask/metamask-extension/pull/18011)) +- fix(17716): increase threshold to include all options for nonce search ([#17999](https://github.com/MetaMask/metamask-extension/pull/17999)) +- fix issue with fragment messageIds ([#17949](https://github.com/MetaMask/metamask-extension/pull/17949)) +- UX: Icons: Fix Chevrons in Settings Tabs ([#17971](https://github.com/MetaMask/metamask-extension/pull/17971)) +- fix(17857): show correctly converted account balance in sign&encrypt windows ([#17973](https://github.com/MetaMask/metamask-extension/pull/17973)) +- Edit Token Transfer displays mixed info with regular Send Tx (ETH) ([#17507](https://github.com/MetaMask/metamask-extension/pull/17507)) +- fix(17855): persist popup when sw is restarted ([#17855](https://github.com/MetaMask/metamask-extension/pull/17855)) +- Fix incorrect balance in signature request header ([#17829](https://github.com/MetaMask/metamask-extension/pull/17829)) +- fix keeping the user login after the first login ([#17950](https://github.com/MetaMask/metamask-extension/pull/17950)) +- Fixed accounts auto scrolling ([#17075](https://github.com/MetaMask/metamask-extension/pull/17075)) +- Fix a bug where non-address types would be rendered as addresses in EIP-712 ([#17846](https://github.com/MetaMask/metamask-extension/pull/17846)) +- Transaction-list-item-details pop up to display the correct token information on token approve item ([#17422](https://github.com/MetaMask/metamask-extension/pull/17422)) +- ConfirmDecryptMessage: avoid mutation of state in decryptMsg/completedTx action ([#17895](https://github.com/MetaMask/metamask-extension/pull/17895)) +- Fix GetEncryptionKey TypeError Cannot destructure property 'msgParams' of 'txData' ([#17808](https://github.com/MetaMask/metamask-extension/pull/17808)) +- Fix state in confirm transaction ([#17838](https://github.com/MetaMask/metamask-extension/pull/17838)) +- window open noopener ([#17882](https://github.com/MetaMask/metamask-extension/pull/17882)) +- avoid mutation of state in signTransaction action ([#17772](https://github.com/MetaMask/metamask-extension/pull/17772)) +- MenuItem: Fix layout of menu item with subtitle ([#17650](https://github.com/MetaMask/metamask-extension/pull/17650)) +- fix: fix url for flask build ([#17784](https://github.com/MetaMask/metamask-extension/pull/17784)) + ## [10.27.0] ### Added - feat: add the ConsenSys zkEVM (Linea) as a default network ([#17875](https://github.com/MetaMask/metamask-extension/pull/17875)) @@ -227,7 +330,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [FLASK] **BREAKING**: Snap RPC methods now use `@metamask/key-tree@6.0.0` ([#16394](https://github.com/MetaMask/metamask-extension/pull/16394)) - In the new version, all hexadecimal values are prefixed with `0x` - All fields containing the word `Buffer` has also been renamed to `Bytes` - - Please update your snap to use the latest version + - Please update your snap to use the latest version ### Fixed - Fix Settings Search pointing into the incorrect row for Token Detection entry ([#16407](https://github.com/MetaMask/metamask-extension/pull/16407)) @@ -3540,7 +3643,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Uncategorized - Added the ability to restore accounts from seed words. -[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.27.0...HEAD +[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.28.1...HEAD +[10.28.1]: https://github.com/MetaMask/metamask-extension/compare/v10.28.0...v10.28.1 +[10.28.0]: https://github.com/MetaMask/metamask-extension/compare/v10.27.0...v10.28.0 [10.27.0]: https://github.com/MetaMask/metamask-extension/compare/v10.26.2...v10.27.0 [10.26.2]: https://github.com/MetaMask/metamask-extension/compare/v10.26.1...v10.26.2 [10.26.1]: https://github.com/MetaMask/metamask-extension/compare/v10.26.0...v10.26.1 diff --git a/app/scripts/controllers/network/network-controller.js b/app/scripts/controllers/network/network-controller.js index ad8ded74b1b4..4449bc68342f 100644 --- a/app/scripts/controllers/network/network-controller.js +++ b/app/scripts/controllers/network/network-controller.js @@ -5,7 +5,7 @@ import log from 'loglevel'; import { createSwappableProxy, createEventEmitterProxy, -} from 'swappable-obj-proxy'; +} from '@metamask/swappable-obj-proxy'; import EthQuery from 'eth-query'; // ControllerMessenger is referred to in the JSDocs // eslint-disable-next-line no-unused-vars diff --git a/app/scripts/controllers/sign.test.ts b/app/scripts/controllers/sign.test.ts index 7212df2ae926..36dddf65bf37 100644 --- a/app/scripts/controllers/sign.test.ts +++ b/app/scripts/controllers/sign.test.ts @@ -8,7 +8,6 @@ import { OriginalRequest, } from '@metamask/message-manager/dist/AbstractMessageManager'; import { MetaMetricsEventCategory } from '../../../shared/constants/metametrics'; -import { detectSIWE } from '../../../shared/modules/siwe'; import SignController, { SignControllerMessenger, SignControllerOptions, @@ -20,10 +19,6 @@ jest.mock('@metamask/message-manager', () => ({ TypedMessageManager: jest.fn(), })); -jest.mock('../../../shared/modules/siwe', () => ({ - detectSIWE: jest.fn(), -})); - const messageIdMock = '123'; const messageIdMock2 = '456'; const versionMock = '1'; @@ -69,13 +64,6 @@ const requestMock = { origin: 'http://test2.com', } as OriginalRequest; -const siweMockFound = { - isSIWEMessage: true, - parsedMessage: { domain: 'test.com', test: 'value' }, -}; - -const siweMockNotFound = { isSIWEMessage: false }; - const createMessengerMock = () => ({ registerActionHandler: jest.fn(), @@ -128,7 +116,6 @@ describe('SignController', () => { const messengerMock = createMessengerMock(); const preferencesControllerMock = createPreferencesControllerMock(); const keyringControllerMock = createKeyringControllerMock(); - const detectSIWEMock = detectSIWE as jest.MockedFunction; const getStateMock = jest.fn(); const securityProviderRequestMock = jest.fn(); const metricsEventMock = jest.fn(); @@ -147,8 +134,6 @@ describe('SignController', () => { disabledRpcMethodPreferences: { eth_sign: true }, }); - detectSIWEMock.mockReturnValue(siweMockNotFound); - signController = new SignController({ messenger: messengerMock as any, preferencesController: preferencesControllerMock as any, @@ -354,29 +339,6 @@ describe('SignController', () => { requestMock, ); }); - - it('adds message to personal message manager including Ethereum sign in data', async () => { - detectSIWEMock.mockReturnValueOnce(siweMockFound); - - await signController.newUnsignedPersonalMessage( - messageParamsMock, - requestMock, - ); - - expect( - personalMessageManagerMock.addUnapprovedMessageAsync, - ).toHaveBeenCalledTimes(1); - - expect( - personalMessageManagerMock.addUnapprovedMessageAsync, - ).toHaveBeenCalledWith( - { - ...messageParamsMock, - siwe: siweMockFound, - }, - requestMock, - ); - }); }); describe('newUnsignedTypedMessage', () => { diff --git a/app/scripts/controllers/sign.ts b/app/scripts/controllers/sign.ts index afaeaa4993ce..e04d70c099a7 100644 --- a/app/scripts/controllers/sign.ts +++ b/app/scripts/controllers/sign.ts @@ -33,7 +33,6 @@ import { RejectRequest, } from '@metamask/approval-controller'; import { MetaMetricsEventCategory } from '../../../shared/constants/metametrics'; -import { detectSIWE } from '../../../shared/modules/siwe'; import PreferencesController from './preferences'; const controllerName = 'SignController'; @@ -321,11 +320,8 @@ export default class SignController extends BaseControllerV2< msgParams: PersonalMessageParams, req: OriginalRequest, ): Promise { - const ethereumSignInData = this._getEthereumSignInData(msgParams); - const finalMsgParams = { ...msgParams, siwe: ethereumSignInData }; - return this._personalMessageManager.addUnapprovedMessageAsync( - finalMsgParams, + msgParams, req, ); } @@ -618,10 +614,6 @@ export default class SignController extends BaseControllerV2< }[messageId]; } - private _getEthereumSignInData(messgeParams: PersonalMessageParams): any { - return detectSIWE(messgeParams); - } - private _requestApproval( msgParams: AbstractMessageParamsMetamask, type: string, diff --git a/app/scripts/lib/createRPCMethodTrackingMiddleware.js b/app/scripts/lib/createRPCMethodTrackingMiddleware.js index cd3b9720ad30..c0fc09e24e67 100644 --- a/app/scripts/lib/createRPCMethodTrackingMiddleware.js +++ b/app/scripts/lib/createRPCMethodTrackingMiddleware.js @@ -1,8 +1,9 @@ import { errorCodes } from 'eth-rpc-errors'; +import { detectSIWE } from '@metamask/controller-utils'; import { MESSAGE_TYPE, ORIGIN_METAMASK } from '../../../shared/constants/app'; import { TransactionStatus } from '../../../shared/constants/transaction'; import { SECOND } from '../../../shared/constants/time'; -import { detectSIWE } from '../../../shared/modules/siwe'; + import { MetaMetricsEventCategory, MetaMetricsEventName, diff --git a/app/scripts/lib/createRPCMethodTrackingMiddleware.test.js b/app/scripts/lib/createRPCMethodTrackingMiddleware.test.js index 342fd320aea0..070ad12b2ac8 100644 --- a/app/scripts/lib/createRPCMethodTrackingMiddleware.test.js +++ b/app/scripts/lib/createRPCMethodTrackingMiddleware.test.js @@ -1,11 +1,11 @@ import { errorCodes } from 'eth-rpc-errors'; +import { detectSIWE } from '@metamask/controller-utils'; import { MESSAGE_TYPE } from '../../../shared/constants/app'; import { MetaMetricsEventName, MetaMetricsEventUiCustomization, } from '../../../shared/constants/metametrics'; import { SECOND } from '../../../shared/constants/time'; -import { detectSIWE } from '../../../shared/modules/siwe'; import createRPCMethodTrackingMiddleware from './createRPCMethodTrackingMiddleware'; const trackEvent = jest.fn(); @@ -56,7 +56,7 @@ function getNext(timeout = 500) { const waitForSeconds = async (seconds) => await new Promise((resolve) => setTimeout(resolve, SECOND * seconds)); -jest.mock('../../../shared/modules/siwe', () => ({ +jest.mock('@metamask/controller-utils', () => ({ detectSIWE: jest.fn().mockImplementation(() => { return { isSIWEMessage: false }; }), diff --git a/development/build/config.js b/development/build/config.js index e07707caa05c..ef053a7acc29 100644 --- a/development/build/config.js +++ b/development/build/config.js @@ -20,6 +20,7 @@ const configurationPropertyNames = [ 'DISABLE_WEB_SOCKET_ENCRYPTION', 'METAMASK_DEBUG', 'SKIP_OTP_PAIRING_FLOW', + 'ENABLE_MV3', ]; const productionConfigurationPropertyNames = [ diff --git a/development/build/scripts.js b/development/build/scripts.js index 7d66260504c2..55323a454280 100644 --- a/development/build/scripts.js +++ b/development/build/scripts.js @@ -52,7 +52,7 @@ const { } = require('./transforms/remove-fenced-code'); // map dist files to bag of needed native APIs against LM scuttling -const scuttlingConfig = { +const scuttlingConfigBase = { 'sentry-install.js': { // globals sentry need to function window: '', @@ -70,7 +70,6 @@ const scuttlingConfig = { Number: '', Request: '', Date: '', - document: '', JSON: '', encodeURIComponent: '', crypto: '', @@ -87,6 +86,16 @@ const scuttlingConfig = { }, }; +const mv3ScuttlingConfig = { ...scuttlingConfigBase }; + +const standardScuttlingConfig = { + ...scuttlingConfigBase, + 'sentry-install.js': { + ...scuttlingConfigBase['sentry-install.js'], + document: '', + }, +}; + /** * Get the appropriate Infura project ID. * @@ -932,9 +941,8 @@ function setupBundlerDefaults( // Setup source maps setupSourcemaps(buildConfiguration, { buildTarget }); - // Setup wrapping of code against scuttling (before sourcemaps generation) - setupScuttlingWrapping(buildConfiguration, applyLavaMoat); + setupScuttlingWrapping(buildConfiguration, applyLavaMoat, envVars); } } @@ -988,7 +996,11 @@ function setupMinification(buildConfiguration) { }); } -function setupScuttlingWrapping(buildConfiguration, applyLavaMoat) { +function setupScuttlingWrapping(buildConfiguration, applyLavaMoat, envVars) { + const scuttlingConfig = + envVars.ENABLE_MV3 === 'true' + ? mv3ScuttlingConfig + : standardScuttlingConfig; const { events } = buildConfiguration; events.on('configurePipeline', ({ pipeline }) => { pipeline.get('scuttle').push( @@ -1111,6 +1123,7 @@ async function getEnvironmentVariables({ buildTarget, buildType, version }) { ICON_NAMES: iconNames, MULTICHAIN: config.MULTICHAIN === '1', CONF: devMode ? config : {}, + ENABLE_MV3: config.ENABLE_MV3, IN_TEST: testing, INFURA_PROJECT_ID: getInfuraProjectId({ buildType, diff --git a/lavamoat/browserify/beta/policy.json b/lavamoat/browserify/beta/policy.json index 98b889720187..dd174c63d024 100644 --- a/lavamoat/browserify/beta/policy.json +++ b/lavamoat/browserify/beta/policy.json @@ -661,7 +661,7 @@ "@metamask/address-book-controller": { "packages": { "@metamask/address-book-controller>@metamask/base-controller": true, - "@metamask/controller-utils": true + "@metamask/address-book-controller>@metamask/controller-utils": true } }, "@metamask/address-book-controller>@metamask/base-controller": { @@ -669,6 +669,21 @@ "immer": true } }, + "@metamask/address-book-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/announcement-controller": { "packages": { "@metamask/announcement-controller>@metamask/base-controller": true @@ -680,6 +695,9 @@ } }, "@metamask/approval-controller": { + "globals": { + "console.log": true + }, "packages": { "@metamask/approval-controller>nanoid": true, "@metamask/base-controller": true, @@ -747,7 +765,7 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -791,7 +809,8 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/controller-utils>@metamask/utils": true, + "@metamask/controller-utils>@spruceid/siwe-parser": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -799,23 +818,34 @@ "ethjs>ethjs-unit": true } }, - "@metamask/controller-utils>isomorphic-fetch": { + "@metamask/controller-utils>@metamask/utils": { "globals": { - "fetch.bind": true + "TextDecoder": true, + "TextEncoder": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch>whatwg-fetch": true + "@metamask/utils>superstruct": true, + "browserify>buffer": true, + "nock>debug": true, + "semver": true } }, - "@metamask/controller-utils>isomorphic-fetch>whatwg-fetch": { + "@metamask/controller-utils>@spruceid/siwe-parser": { "globals": { - "Blob": true, - "FileReader": true, - "FormData": true, - "URLSearchParams.prototype.isPrototypeOf": true, - "XMLHttpRequest": true, - "define": true, - "setTimeout": true + "console.error": true, + "console.log": true + }, + "packages": { + "@metamask/controller-utils>@spruceid/siwe-parser>apg-js": true + } + }, + "@metamask/controller-utils>@spruceid/siwe-parser>apg-js": { + "globals": { + "mode": true + }, + "packages": { + "browserify>buffer": true, + "browserify>insert-module-globals>is-buffer": true } }, "@metamask/controllers>nanoid": { @@ -1171,8 +1201,8 @@ "setInterval": true }, "packages": { - "@metamask/controller-utils": true, "@metamask/gas-fee-controller>@metamask/base-controller": true, + "@metamask/gas-fee-controller>@metamask/controller-utils": true, "eth-query": true, "ethereumjs-util": true, "ethjs>ethjs-unit": true, @@ -1184,6 +1214,21 @@ "immer": true } }, + "@metamask/gas-fee-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/jazzicon": { "globals": { "document.createElement": true, @@ -1282,8 +1327,8 @@ }, "@metamask/message-manager": { "packages": { + "@metamask/controller-utils": true, "@metamask/message-manager>@metamask/base-controller": true, - "@metamask/message-manager>@metamask/controller-utils": true, "@metamask/message-manager>jsonschema": true, "browserify>buffer": true, "browserify>events": true, @@ -1297,34 +1342,6 @@ "immer": true } }, - "@metamask/message-manager>@metamask/controller-utils": { - "globals": { - "console.error": true, - "fetch": true, - "setTimeout": true - }, - "packages": { - "@metamask/message-manager>@metamask/controller-utils>@metamask/utils": true, - "@spruceid/siwe-parser": true, - "browserify>buffer": true, - "eslint>fast-deep-equal": true, - "eth-ens-namehash": true, - "ethereumjs-util": true, - "ethjs>ethjs-unit": true - } - }, - "@metamask/message-manager>@metamask/controller-utils>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>superstruct": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, "@metamask/message-manager>jsonschema": { "packages": { "browserify>url": true @@ -1355,8 +1372,8 @@ "console.error": true }, "packages": { + "@metamask/controller-utils": true, "@metamask/permission-controller>@metamask/base-controller": true, - "@metamask/permission-controller>@metamask/controller-utils": true, "@metamask/permission-controller>nanoid": true, "deep-freeze-strict": true, "eth-rpc-errors": true, @@ -1369,34 +1386,6 @@ "immer": true } }, - "@metamask/permission-controller>@metamask/controller-utils": { - "globals": { - "console.error": true, - "fetch": true, - "setTimeout": true - }, - "packages": { - "@metamask/permission-controller>@metamask/controller-utils>@metamask/utils": true, - "@spruceid/siwe-parser": true, - "browserify>buffer": true, - "eslint>fast-deep-equal": true, - "eth-ens-namehash": true, - "ethereumjs-util": true, - "ethjs>ethjs-unit": true - } - }, - "@metamask/permission-controller>@metamask/controller-utils>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>superstruct": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, "@metamask/permission-controller>nanoid": { "globals": { "crypto.getRandomValues": true @@ -1408,8 +1397,8 @@ }, "packages": { "@metamask/base-controller": true, - "@metamask/controller-utils>isomorphic-fetch": true, "@metamask/phishing-controller>@metamask/controller-utils": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "@metamask/phishing-warning>eth-phishing-detect": true, "punycode": true } @@ -1421,7 +1410,7 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -1429,6 +1418,25 @@ "ethjs>ethjs-unit": true } }, + "@metamask/phishing-controller>isomorphic-fetch": { + "globals": { + "fetch.bind": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch>whatwg-fetch": true + } + }, + "@metamask/phishing-controller>isomorphic-fetch>whatwg-fetch": { + "globals": { + "Blob": true, + "FileReader": true, + "FormData": true, + "URLSearchParams.prototype.isPrototypeOf": true, + "XMLHttpRequest": true, + "define": true, + "setTimeout": true + } + }, "@metamask/phishing-warning>eth-phishing-detect": { "packages": { "eslint>optionator>fast-levenshtein": true @@ -1492,13 +1500,28 @@ "@ethersproject/bignumber": true, "@ethersproject/providers": true, "@metamask/base-controller": true, - "@metamask/controller-utils": true, - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, + "@metamask/smart-transactions-controller>@metamask/controller-utils": true, "@metamask/smart-transactions-controller>bignumber.js": true, "fast-json-patch": true, "lodash": true } }, + "@metamask/smart-transactions-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/smart-transactions-controller>@metamask/controllers>nanoid": { "globals": { "crypto.getRandomValues": true @@ -1770,24 +1793,6 @@ "define": true } }, - "@spruceid/siwe-parser": { - "globals": { - "console.error": true, - "console.log": true - }, - "packages": { - "@spruceid/siwe-parser>apg-js": true - } - }, - "@spruceid/siwe-parser>apg-js": { - "globals": { - "mode": true - }, - "packages": { - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true - } - }, "@storybook/api>regenerator-runtime": { "globals": { "regeneratorRuntime": "write" diff --git a/lavamoat/browserify/desktop/policy.json b/lavamoat/browserify/desktop/policy.json index 167424fd40a2..fa9312ae50ea 100644 --- a/lavamoat/browserify/desktop/policy.json +++ b/lavamoat/browserify/desktop/policy.json @@ -661,7 +661,7 @@ "@metamask/address-book-controller": { "packages": { "@metamask/address-book-controller>@metamask/base-controller": true, - "@metamask/controller-utils": true + "@metamask/address-book-controller>@metamask/controller-utils": true } }, "@metamask/address-book-controller>@metamask/base-controller": { @@ -669,6 +669,21 @@ "immer": true } }, + "@metamask/address-book-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/announcement-controller": { "packages": { "@metamask/announcement-controller>@metamask/base-controller": true @@ -680,6 +695,9 @@ } }, "@metamask/approval-controller": { + "globals": { + "console.log": true + }, "packages": { "@metamask/approval-controller>nanoid": true, "@metamask/base-controller": true, @@ -747,7 +765,7 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -791,7 +809,8 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/controller-utils>@metamask/utils": true, + "@metamask/controller-utils>@spruceid/siwe-parser": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -799,23 +818,34 @@ "ethjs>ethjs-unit": true } }, - "@metamask/controller-utils>isomorphic-fetch": { + "@metamask/controller-utils>@metamask/utils": { "globals": { - "fetch.bind": true + "TextDecoder": true, + "TextEncoder": true + }, + "packages": { + "@metamask/utils>superstruct": true, + "browserify>buffer": true, + "nock>debug": true, + "semver": true + } + }, + "@metamask/controller-utils>@spruceid/siwe-parser": { + "globals": { + "console.error": true, + "console.log": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch>whatwg-fetch": true + "@metamask/controller-utils>@spruceid/siwe-parser>apg-js": true } }, - "@metamask/controller-utils>isomorphic-fetch>whatwg-fetch": { + "@metamask/controller-utils>@spruceid/siwe-parser>apg-js": { "globals": { - "Blob": true, - "FileReader": true, - "FormData": true, - "URLSearchParams.prototype.isPrototypeOf": true, - "XMLHttpRequest": true, - "define": true, - "setTimeout": true + "mode": true + }, + "packages": { + "browserify>buffer": true, + "browserify>insert-module-globals>is-buffer": true } }, "@metamask/controllers>nanoid": { @@ -878,8 +908,8 @@ }, "packages": { "@metamask/desktop>@metamask/obs-store>through2": true, - "browserify>stream-browserify": true, - "json-rpc-engine>@metamask/safe-event-emitter": true + "@metamask/safe-event-emitter": true, + "browserify>stream-browserify": true } }, "@metamask/desktop>@metamask/obs-store>through2": { @@ -1243,8 +1273,8 @@ "setInterval": true }, "packages": { - "@metamask/controller-utils": true, "@metamask/gas-fee-controller>@metamask/base-controller": true, + "@metamask/gas-fee-controller>@metamask/controller-utils": true, "eth-query": true, "ethereumjs-util": true, "ethjs>ethjs-unit": true, @@ -1256,6 +1286,21 @@ "immer": true } }, + "@metamask/gas-fee-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/jazzicon": { "globals": { "document.createElement": true, @@ -1354,8 +1399,8 @@ }, "@metamask/message-manager": { "packages": { + "@metamask/controller-utils": true, "@metamask/message-manager>@metamask/base-controller": true, - "@metamask/message-manager>@metamask/controller-utils": true, "@metamask/message-manager>jsonschema": true, "browserify>buffer": true, "browserify>events": true, @@ -1369,34 +1414,6 @@ "immer": true } }, - "@metamask/message-manager>@metamask/controller-utils": { - "globals": { - "console.error": true, - "fetch": true, - "setTimeout": true - }, - "packages": { - "@metamask/message-manager>@metamask/controller-utils>@metamask/utils": true, - "@spruceid/siwe-parser": true, - "browserify>buffer": true, - "eslint>fast-deep-equal": true, - "eth-ens-namehash": true, - "ethereumjs-util": true, - "ethjs>ethjs-unit": true - } - }, - "@metamask/message-manager>@metamask/controller-utils>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>superstruct": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, "@metamask/message-manager>jsonschema": { "packages": { "browserify>url": true @@ -1404,8 +1421,8 @@ }, "@metamask/notification-controller": { "packages": { - "@metamask/controller-utils": true, "@metamask/notification-controller>@metamask/base-controller": true, + "@metamask/notification-controller>@metamask/controller-utils": true, "@metamask/notification-controller>nanoid": true } }, @@ -1414,6 +1431,21 @@ "immer": true } }, + "@metamask/notification-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/notification-controller>nanoid": { "globals": { "crypto.getRandomValues": true @@ -1439,8 +1471,8 @@ "console.error": true }, "packages": { + "@metamask/controller-utils": true, "@metamask/permission-controller>@metamask/base-controller": true, - "@metamask/permission-controller>@metamask/controller-utils": true, "@metamask/permission-controller>nanoid": true, "deep-freeze-strict": true, "eth-rpc-errors": true, @@ -1453,34 +1485,6 @@ "immer": true } }, - "@metamask/permission-controller>@metamask/controller-utils": { - "globals": { - "console.error": true, - "fetch": true, - "setTimeout": true - }, - "packages": { - "@metamask/permission-controller>@metamask/controller-utils>@metamask/utils": true, - "@spruceid/siwe-parser": true, - "browserify>buffer": true, - "eslint>fast-deep-equal": true, - "eth-ens-namehash": true, - "ethereumjs-util": true, - "ethjs>ethjs-unit": true - } - }, - "@metamask/permission-controller>@metamask/controller-utils>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>superstruct": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, "@metamask/permission-controller>nanoid": { "globals": { "crypto.getRandomValues": true @@ -1492,8 +1496,8 @@ }, "packages": { "@metamask/base-controller": true, - "@metamask/controller-utils>isomorphic-fetch": true, "@metamask/phishing-controller>@metamask/controller-utils": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "@metamask/phishing-warning>eth-phishing-detect": true, "punycode": true } @@ -1505,7 +1509,7 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -1513,6 +1517,25 @@ "ethjs>ethjs-unit": true } }, + "@metamask/phishing-controller>isomorphic-fetch": { + "globals": { + "fetch.bind": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch>whatwg-fetch": true + } + }, + "@metamask/phishing-controller>isomorphic-fetch>whatwg-fetch": { + "globals": { + "Blob": true, + "FileReader": true, + "FormData": true, + "URLSearchParams.prototype.isPrototypeOf": true, + "XMLHttpRequest": true, + "define": true, + "setTimeout": true + } + }, "@metamask/phishing-warning>eth-phishing-detect": { "packages": { "eslint>optionator>fast-levenshtein": true @@ -1665,13 +1688,28 @@ "@ethersproject/bignumber": true, "@ethersproject/providers": true, "@metamask/base-controller": true, - "@metamask/controller-utils": true, - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, + "@metamask/smart-transactions-controller>@metamask/controller-utils": true, "@metamask/smart-transactions-controller>bignumber.js": true, "fast-json-patch": true, "lodash": true } }, + "@metamask/smart-transactions-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/smart-transactions-controller>@metamask/controllers>nanoid": { "globals": { "crypto.getRandomValues": true @@ -2183,24 +2221,6 @@ "define": true } }, - "@spruceid/siwe-parser": { - "globals": { - "console.error": true, - "console.log": true - }, - "packages": { - "@spruceid/siwe-parser>apg-js": true - } - }, - "@spruceid/siwe-parser>apg-js": { - "globals": { - "mode": true - }, - "packages": { - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true - } - }, "@storybook/api>regenerator-runtime": { "globals": { "regeneratorRuntime": "write" diff --git a/lavamoat/browserify/flask/policy.json b/lavamoat/browserify/flask/policy.json index 167424fd40a2..fa9312ae50ea 100644 --- a/lavamoat/browserify/flask/policy.json +++ b/lavamoat/browserify/flask/policy.json @@ -661,7 +661,7 @@ "@metamask/address-book-controller": { "packages": { "@metamask/address-book-controller>@metamask/base-controller": true, - "@metamask/controller-utils": true + "@metamask/address-book-controller>@metamask/controller-utils": true } }, "@metamask/address-book-controller>@metamask/base-controller": { @@ -669,6 +669,21 @@ "immer": true } }, + "@metamask/address-book-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/announcement-controller": { "packages": { "@metamask/announcement-controller>@metamask/base-controller": true @@ -680,6 +695,9 @@ } }, "@metamask/approval-controller": { + "globals": { + "console.log": true + }, "packages": { "@metamask/approval-controller>nanoid": true, "@metamask/base-controller": true, @@ -747,7 +765,7 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -791,7 +809,8 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/controller-utils>@metamask/utils": true, + "@metamask/controller-utils>@spruceid/siwe-parser": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -799,23 +818,34 @@ "ethjs>ethjs-unit": true } }, - "@metamask/controller-utils>isomorphic-fetch": { + "@metamask/controller-utils>@metamask/utils": { "globals": { - "fetch.bind": true + "TextDecoder": true, + "TextEncoder": true + }, + "packages": { + "@metamask/utils>superstruct": true, + "browserify>buffer": true, + "nock>debug": true, + "semver": true + } + }, + "@metamask/controller-utils>@spruceid/siwe-parser": { + "globals": { + "console.error": true, + "console.log": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch>whatwg-fetch": true + "@metamask/controller-utils>@spruceid/siwe-parser>apg-js": true } }, - "@metamask/controller-utils>isomorphic-fetch>whatwg-fetch": { + "@metamask/controller-utils>@spruceid/siwe-parser>apg-js": { "globals": { - "Blob": true, - "FileReader": true, - "FormData": true, - "URLSearchParams.prototype.isPrototypeOf": true, - "XMLHttpRequest": true, - "define": true, - "setTimeout": true + "mode": true + }, + "packages": { + "browserify>buffer": true, + "browserify>insert-module-globals>is-buffer": true } }, "@metamask/controllers>nanoid": { @@ -878,8 +908,8 @@ }, "packages": { "@metamask/desktop>@metamask/obs-store>through2": true, - "browserify>stream-browserify": true, - "json-rpc-engine>@metamask/safe-event-emitter": true + "@metamask/safe-event-emitter": true, + "browserify>stream-browserify": true } }, "@metamask/desktop>@metamask/obs-store>through2": { @@ -1243,8 +1273,8 @@ "setInterval": true }, "packages": { - "@metamask/controller-utils": true, "@metamask/gas-fee-controller>@metamask/base-controller": true, + "@metamask/gas-fee-controller>@metamask/controller-utils": true, "eth-query": true, "ethereumjs-util": true, "ethjs>ethjs-unit": true, @@ -1256,6 +1286,21 @@ "immer": true } }, + "@metamask/gas-fee-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/jazzicon": { "globals": { "document.createElement": true, @@ -1354,8 +1399,8 @@ }, "@metamask/message-manager": { "packages": { + "@metamask/controller-utils": true, "@metamask/message-manager>@metamask/base-controller": true, - "@metamask/message-manager>@metamask/controller-utils": true, "@metamask/message-manager>jsonschema": true, "browserify>buffer": true, "browserify>events": true, @@ -1369,34 +1414,6 @@ "immer": true } }, - "@metamask/message-manager>@metamask/controller-utils": { - "globals": { - "console.error": true, - "fetch": true, - "setTimeout": true - }, - "packages": { - "@metamask/message-manager>@metamask/controller-utils>@metamask/utils": true, - "@spruceid/siwe-parser": true, - "browserify>buffer": true, - "eslint>fast-deep-equal": true, - "eth-ens-namehash": true, - "ethereumjs-util": true, - "ethjs>ethjs-unit": true - } - }, - "@metamask/message-manager>@metamask/controller-utils>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>superstruct": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, "@metamask/message-manager>jsonschema": { "packages": { "browserify>url": true @@ -1404,8 +1421,8 @@ }, "@metamask/notification-controller": { "packages": { - "@metamask/controller-utils": true, "@metamask/notification-controller>@metamask/base-controller": true, + "@metamask/notification-controller>@metamask/controller-utils": true, "@metamask/notification-controller>nanoid": true } }, @@ -1414,6 +1431,21 @@ "immer": true } }, + "@metamask/notification-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/notification-controller>nanoid": { "globals": { "crypto.getRandomValues": true @@ -1439,8 +1471,8 @@ "console.error": true }, "packages": { + "@metamask/controller-utils": true, "@metamask/permission-controller>@metamask/base-controller": true, - "@metamask/permission-controller>@metamask/controller-utils": true, "@metamask/permission-controller>nanoid": true, "deep-freeze-strict": true, "eth-rpc-errors": true, @@ -1453,34 +1485,6 @@ "immer": true } }, - "@metamask/permission-controller>@metamask/controller-utils": { - "globals": { - "console.error": true, - "fetch": true, - "setTimeout": true - }, - "packages": { - "@metamask/permission-controller>@metamask/controller-utils>@metamask/utils": true, - "@spruceid/siwe-parser": true, - "browserify>buffer": true, - "eslint>fast-deep-equal": true, - "eth-ens-namehash": true, - "ethereumjs-util": true, - "ethjs>ethjs-unit": true - } - }, - "@metamask/permission-controller>@metamask/controller-utils>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>superstruct": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, "@metamask/permission-controller>nanoid": { "globals": { "crypto.getRandomValues": true @@ -1492,8 +1496,8 @@ }, "packages": { "@metamask/base-controller": true, - "@metamask/controller-utils>isomorphic-fetch": true, "@metamask/phishing-controller>@metamask/controller-utils": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "@metamask/phishing-warning>eth-phishing-detect": true, "punycode": true } @@ -1505,7 +1509,7 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -1513,6 +1517,25 @@ "ethjs>ethjs-unit": true } }, + "@metamask/phishing-controller>isomorphic-fetch": { + "globals": { + "fetch.bind": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch>whatwg-fetch": true + } + }, + "@metamask/phishing-controller>isomorphic-fetch>whatwg-fetch": { + "globals": { + "Blob": true, + "FileReader": true, + "FormData": true, + "URLSearchParams.prototype.isPrototypeOf": true, + "XMLHttpRequest": true, + "define": true, + "setTimeout": true + } + }, "@metamask/phishing-warning>eth-phishing-detect": { "packages": { "eslint>optionator>fast-levenshtein": true @@ -1665,13 +1688,28 @@ "@ethersproject/bignumber": true, "@ethersproject/providers": true, "@metamask/base-controller": true, - "@metamask/controller-utils": true, - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, + "@metamask/smart-transactions-controller>@metamask/controller-utils": true, "@metamask/smart-transactions-controller>bignumber.js": true, "fast-json-patch": true, "lodash": true } }, + "@metamask/smart-transactions-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/smart-transactions-controller>@metamask/controllers>nanoid": { "globals": { "crypto.getRandomValues": true @@ -2183,24 +2221,6 @@ "define": true } }, - "@spruceid/siwe-parser": { - "globals": { - "console.error": true, - "console.log": true - }, - "packages": { - "@spruceid/siwe-parser>apg-js": true - } - }, - "@spruceid/siwe-parser>apg-js": { - "globals": { - "mode": true - }, - "packages": { - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true - } - }, "@storybook/api>regenerator-runtime": { "globals": { "regeneratorRuntime": "write" diff --git a/lavamoat/browserify/main/policy.json b/lavamoat/browserify/main/policy.json index 98b889720187..dd174c63d024 100644 --- a/lavamoat/browserify/main/policy.json +++ b/lavamoat/browserify/main/policy.json @@ -661,7 +661,7 @@ "@metamask/address-book-controller": { "packages": { "@metamask/address-book-controller>@metamask/base-controller": true, - "@metamask/controller-utils": true + "@metamask/address-book-controller>@metamask/controller-utils": true } }, "@metamask/address-book-controller>@metamask/base-controller": { @@ -669,6 +669,21 @@ "immer": true } }, + "@metamask/address-book-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/announcement-controller": { "packages": { "@metamask/announcement-controller>@metamask/base-controller": true @@ -680,6 +695,9 @@ } }, "@metamask/approval-controller": { + "globals": { + "console.log": true + }, "packages": { "@metamask/approval-controller>nanoid": true, "@metamask/base-controller": true, @@ -747,7 +765,7 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -791,7 +809,8 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/controller-utils>@metamask/utils": true, + "@metamask/controller-utils>@spruceid/siwe-parser": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -799,23 +818,34 @@ "ethjs>ethjs-unit": true } }, - "@metamask/controller-utils>isomorphic-fetch": { + "@metamask/controller-utils>@metamask/utils": { "globals": { - "fetch.bind": true + "TextDecoder": true, + "TextEncoder": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch>whatwg-fetch": true + "@metamask/utils>superstruct": true, + "browserify>buffer": true, + "nock>debug": true, + "semver": true } }, - "@metamask/controller-utils>isomorphic-fetch>whatwg-fetch": { + "@metamask/controller-utils>@spruceid/siwe-parser": { "globals": { - "Blob": true, - "FileReader": true, - "FormData": true, - "URLSearchParams.prototype.isPrototypeOf": true, - "XMLHttpRequest": true, - "define": true, - "setTimeout": true + "console.error": true, + "console.log": true + }, + "packages": { + "@metamask/controller-utils>@spruceid/siwe-parser>apg-js": true + } + }, + "@metamask/controller-utils>@spruceid/siwe-parser>apg-js": { + "globals": { + "mode": true + }, + "packages": { + "browserify>buffer": true, + "browserify>insert-module-globals>is-buffer": true } }, "@metamask/controllers>nanoid": { @@ -1171,8 +1201,8 @@ "setInterval": true }, "packages": { - "@metamask/controller-utils": true, "@metamask/gas-fee-controller>@metamask/base-controller": true, + "@metamask/gas-fee-controller>@metamask/controller-utils": true, "eth-query": true, "ethereumjs-util": true, "ethjs>ethjs-unit": true, @@ -1184,6 +1214,21 @@ "immer": true } }, + "@metamask/gas-fee-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/jazzicon": { "globals": { "document.createElement": true, @@ -1282,8 +1327,8 @@ }, "@metamask/message-manager": { "packages": { + "@metamask/controller-utils": true, "@metamask/message-manager>@metamask/base-controller": true, - "@metamask/message-manager>@metamask/controller-utils": true, "@metamask/message-manager>jsonschema": true, "browserify>buffer": true, "browserify>events": true, @@ -1297,34 +1342,6 @@ "immer": true } }, - "@metamask/message-manager>@metamask/controller-utils": { - "globals": { - "console.error": true, - "fetch": true, - "setTimeout": true - }, - "packages": { - "@metamask/message-manager>@metamask/controller-utils>@metamask/utils": true, - "@spruceid/siwe-parser": true, - "browserify>buffer": true, - "eslint>fast-deep-equal": true, - "eth-ens-namehash": true, - "ethereumjs-util": true, - "ethjs>ethjs-unit": true - } - }, - "@metamask/message-manager>@metamask/controller-utils>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>superstruct": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, "@metamask/message-manager>jsonschema": { "packages": { "browserify>url": true @@ -1355,8 +1372,8 @@ "console.error": true }, "packages": { + "@metamask/controller-utils": true, "@metamask/permission-controller>@metamask/base-controller": true, - "@metamask/permission-controller>@metamask/controller-utils": true, "@metamask/permission-controller>nanoid": true, "deep-freeze-strict": true, "eth-rpc-errors": true, @@ -1369,34 +1386,6 @@ "immer": true } }, - "@metamask/permission-controller>@metamask/controller-utils": { - "globals": { - "console.error": true, - "fetch": true, - "setTimeout": true - }, - "packages": { - "@metamask/permission-controller>@metamask/controller-utils>@metamask/utils": true, - "@spruceid/siwe-parser": true, - "browserify>buffer": true, - "eslint>fast-deep-equal": true, - "eth-ens-namehash": true, - "ethereumjs-util": true, - "ethjs>ethjs-unit": true - } - }, - "@metamask/permission-controller>@metamask/controller-utils>@metamask/utils": { - "globals": { - "TextDecoder": true, - "TextEncoder": true - }, - "packages": { - "@metamask/utils>superstruct": true, - "browserify>buffer": true, - "nock>debug": true, - "semver": true - } - }, "@metamask/permission-controller>nanoid": { "globals": { "crypto.getRandomValues": true @@ -1408,8 +1397,8 @@ }, "packages": { "@metamask/base-controller": true, - "@metamask/controller-utils>isomorphic-fetch": true, "@metamask/phishing-controller>@metamask/controller-utils": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "@metamask/phishing-warning>eth-phishing-detect": true, "punycode": true } @@ -1421,7 +1410,7 @@ "setTimeout": true }, "packages": { - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, "browserify>buffer": true, "eslint>fast-deep-equal": true, "eth-ens-namehash": true, @@ -1429,6 +1418,25 @@ "ethjs>ethjs-unit": true } }, + "@metamask/phishing-controller>isomorphic-fetch": { + "globals": { + "fetch.bind": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch>whatwg-fetch": true + } + }, + "@metamask/phishing-controller>isomorphic-fetch>whatwg-fetch": { + "globals": { + "Blob": true, + "FileReader": true, + "FormData": true, + "URLSearchParams.prototype.isPrototypeOf": true, + "XMLHttpRequest": true, + "define": true, + "setTimeout": true + } + }, "@metamask/phishing-warning>eth-phishing-detect": { "packages": { "eslint>optionator>fast-levenshtein": true @@ -1492,13 +1500,28 @@ "@ethersproject/bignumber": true, "@ethersproject/providers": true, "@metamask/base-controller": true, - "@metamask/controller-utils": true, - "@metamask/controller-utils>isomorphic-fetch": true, + "@metamask/phishing-controller>isomorphic-fetch": true, + "@metamask/smart-transactions-controller>@metamask/controller-utils": true, "@metamask/smart-transactions-controller>bignumber.js": true, "fast-json-patch": true, "lodash": true } }, + "@metamask/smart-transactions-controller>@metamask/controller-utils": { + "globals": { + "console.error": true, + "fetch": true, + "setTimeout": true + }, + "packages": { + "@metamask/phishing-controller>isomorphic-fetch": true, + "browserify>buffer": true, + "eslint>fast-deep-equal": true, + "eth-ens-namehash": true, + "ethereumjs-util": true, + "ethjs>ethjs-unit": true + } + }, "@metamask/smart-transactions-controller>@metamask/controllers>nanoid": { "globals": { "crypto.getRandomValues": true @@ -1770,24 +1793,6 @@ "define": true } }, - "@spruceid/siwe-parser": { - "globals": { - "console.error": true, - "console.log": true - }, - "packages": { - "@spruceid/siwe-parser>apg-js": true - } - }, - "@spruceid/siwe-parser>apg-js": { - "globals": { - "mode": true - }, - "packages": { - "browserify>buffer": true, - "browserify>insert-module-globals>is-buffer": true - } - }, "@storybook/api>regenerator-runtime": { "globals": { "regeneratorRuntime": "write" diff --git a/package.json b/package.json index d53e20a061ce..6dc22b4daa26 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "metamask-crx", - "version": "10.27.0", + "version": "10.28.1", "private": true, "repository": { "type": "git", @@ -231,7 +231,7 @@ "@metamask/assets-controllers": "^4.0.1", "@metamask/base-controller": "^1.0.0", "@metamask/contract-metadata": "^2.3.1", - "@metamask/controller-utils": "^1.0.0", + "@metamask/controller-utils": "^3.1.0", "@metamask/design-tokens": "^1.9.0", "@metamask/desktop": "^0.3.0", "@metamask/eth-json-rpc-infura": "^8.0.0", @@ -245,7 +245,7 @@ "@metamask/jazzicon": "^2.0.0", "@metamask/key-tree": "^7.0.0", "@metamask/logo": "^3.1.1", - "@metamask/message-manager": "^2.0.0", + "@metamask/message-manager": "^2.1.0", "@metamask/metamask-eth-abis": "^3.0.0", "@metamask/notification-controller": "^1.0.0", "@metamask/obs-store": "^8.0.0", @@ -263,6 +263,7 @@ "@metamask/snaps-ui": "^0.32.2", "@metamask/snaps-utils": "^0.32.2", "@metamask/subject-metadata-controller": "^1.0.0", + "@metamask/swappable-obj-proxy": "^2.1.0", "@metamask/utils": "^5.0.0", "@ngraveio/bc-ur": "^1.1.6", "@popperjs/core": "^2.4.0", @@ -272,7 +273,6 @@ "@sentry/integrations": "^6.0.0", "@sentry/types": "^6.0.1", "@sentry/utils": "^6.0.1", - "@spruceid/siwe-parser": "^1.1.3", "@truffle/codec": "^0.14.12", "@truffle/decoder": "^5.3.5", "@zxing/browser": "^0.0.10", @@ -351,7 +351,6 @@ "reselect": "^3.0.1", "ses": "^0.12.4", "single-call-balance-checker-abi": "^1.0.0", - "swappable-obj-proxy": "^1.1.0", "unicode-confusables": "^0.1.1", "uuid": "^8.3.2", "valid-url": "^1.0.9", diff --git a/shared/modules/siwe.js b/shared/modules/siwe.js index 6edbc7d7592b..5d719d2437b4 100644 --- a/shared/modules/siwe.js +++ b/shared/modules/siwe.js @@ -1,55 +1,3 @@ -import { ParsedMessage } from '@spruceid/siwe-parser'; -import log from 'loglevel'; -import { stripHexPrefix } from './hexstring-utils'; - -const msgHexToText = (hex) => { - try { - const stripped = stripHexPrefix(hex); - const buff = Buffer.from(stripped, 'hex'); - return buff.length === 32 ? hex : buff.toString('utf8'); - } catch (e) { - log.error(e); - return hex; - } -}; - -/** - * A locally defined object used to provide data to identify a Sign-In With Ethereum (SIWE)(EIP-4361) message and provide the parsed message - * - * @typedef localSIWEObject - * @param {boolean} isSIWEMessage - Does the intercepted message conform to the SIWE specification? - * @param {ParsedMessage} parsedMessage - The data parsed out of the message - */ - -/** - * This function intercepts a sign message, detects if it's a - * Sign-In With Ethereum (SIWE)(EIP-4361) message, and returns an object with - * relevant SIWE data. - * - * {@see {@link https://eips.ethereum.org/EIPS/eip-4361}} - * - * @param {object} msgParams - The params of the message to sign - * @returns {localSIWEObject} - */ -export const detectSIWE = (msgParams) => { - try { - const { data } = msgParams; - const message = msgHexToText(data); - const parsedMessage = new ParsedMessage(message); - - return { - isSIWEMessage: true, - parsedMessage, - }; - } catch (error) { - // ignore error, it's not a valid SIWE message - return { - isSIWEMessage: false, - parsedMessage: null, - }; - } -}; - /** * Takes in a parsed Sign-In with Ethereum Message (EIP-4361) * and generates an array of label-value pairs diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index c20b83e5c45c..e1198048950c 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -37,7 +37,11 @@ import Button from '../../ui/button'; import SearchIcon from '../../ui/icon/search-icon'; import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils'; import { IconColor } from '../../../helpers/constants/design-system'; -import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../component-library/icon/deprecated'; import KeyRingLabel from './keyring-label'; export function AccountMenuItem(props) { diff --git a/ui/components/app/add-network/add-network.js b/ui/components/app/add-network/add-network.js index 48eaa711d6a7..83ec791b97b3 100644 --- a/ui/components/app/add-network/add-network.js +++ b/ui/components/app/add-network/add-network.js @@ -36,7 +36,12 @@ import { FEATURED_RPCS } from '../../../../shared/constants/network'; import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes'; import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; -import { Icon, ICON_NAMES, ICON_SIZES, Text } from '../../component-library'; +import { Text } from '../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../component-library/icon/deprecated'; import { MetaMetricsNetworkEventSource } from '../../../../shared/constants/metametrics'; const AddNetwork = () => { diff --git a/ui/components/app/add-network/add-network.stories.js b/ui/components/app/add-network/add-network.stories.js index 02d1904feed8..37e61398bf31 100644 --- a/ui/components/app/add-network/add-network.stories.js +++ b/ui/components/app/add-network/add-network.stories.js @@ -10,7 +10,6 @@ const BSC_IMAGE_URL = './images/bsc-filled.svg'; export default { title: 'Components/App/AddNetwork', - argTypes: { onBackClick: { action: 'onBackClick', diff --git a/ui/components/app/approve-content-card/approve-content-card.stories.js b/ui/components/app/approve-content-card/approve-content-card.stories.js index ba8e7a3ba8f5..6ae43c22ce62 100644 --- a/ui/components/app/approve-content-card/approve-content-card.stories.js +++ b/ui/components/app/approve-content-card/approve-content-card.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon, ICON_NAMES } from '../../component-library'; +import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import ApproveContentCard from './approve-content-card'; export default { diff --git a/ui/components/app/asset-list-item/asset-list-item.js b/ui/components/app/asset-list-item/asset-list-item.js index a5cc5051f7d6..3070308b32fa 100644 --- a/ui/components/app/asset-list-item/asset-list-item.js +++ b/ui/components/app/asset-list-item/asset-list-item.js @@ -16,7 +16,11 @@ import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys'; import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics'; import { AssetType } from '../../../../shared/constants/transaction'; import { MetaMetricsContext } from '../../../contexts/metametrics'; -import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../component-library/icon/deprecated'; import Box from '../../ui/box/box'; const AssetListItem = ({ diff --git a/ui/components/app/beta-header/index.js b/ui/components/app/beta-header/index.js index 72dffa0062cf..12c922be646d 100644 --- a/ui/components/app/beta-header/index.js +++ b/ui/components/app/beta-header/index.js @@ -14,7 +14,11 @@ import { import { BETA_BUGS_URL } from '../../../helpers/constants/beta'; import { hideBetaHeader } from '../../../store/actions'; -import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../component-library'; +import { ButtonIcon } from '../../component-library'; +import { + ICON_NAMES, + ICON_SIZES, +} from '../../component-library/icon/deprecated'; const BetaHeader = () => { const t = useI18nContext(); diff --git a/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js b/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js index f4574b468866..1142c2558510 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js @@ -10,7 +10,7 @@ import Identicon from '../../../ui/identicon'; import { shortenAddress } from '../../../../helpers/utils/util'; import AccountMismatchWarning from '../../../ui/account-mismatch-warning/account-mismatch-warning.component'; import { useI18nContext } from '../../../../hooks/useI18nContext'; -import { Icon, ICON_NAMES } from '../../../component-library'; +import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated'; export default function ConfirmPageContainerHeader({ onEdit, diff --git a/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js b/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js index d17c03b16084..da40e850d455 100644 --- a/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js +++ b/ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js @@ -14,7 +14,12 @@ import { AlignItems, IconColor, } from '../../../helpers/constants/design-system'; -import { Text, Icon, ICON_NAMES, ICON_SIZES } from '../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../component-library/icon/deprecated'; +import { Text } from '../../component-library'; const ConfirmationWarningModal = ({ onSubmit, onCancel }) => { const t = useI18nContext(); diff --git a/ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js b/ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js index c304a08877e4..522de00977dd 100644 --- a/ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js +++ b/ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js @@ -1,7 +1,8 @@ import PropTypes from 'prop-types'; import React, { useRef } from 'react'; import { Menu } from '../../../ui/menu'; -import { ButtonIcon, ICON_NAMES } from '../../../component-library'; +import { ICON_NAMES } from '../../../component-library/icon/deprecated'; +import { ButtonIcon } from '../../../component-library'; import { useI18nContext } from '../../../../hooks/useI18nContext'; const ConnectedAccountsListOptions = ({ diff --git a/ui/components/app/connected-accounts-list/connected-accounts-list.component.js b/ui/components/app/connected-accounts-list/connected-accounts-list.component.js index fb580740a24c..e1c4750c77ea 100644 --- a/ui/components/app/connected-accounts-list/connected-accounts-list.component.js +++ b/ui/components/app/connected-accounts-list/connected-accounts-list.component.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { PureComponent } from 'react'; -import { ICON_NAMES } from '../../component-library'; +import { ICON_NAMES } from '../../component-library/icon/deprecated'; import { MenuItem } from '../../ui/menu'; import ConnectedAccountsListItem from './connected-accounts-list-item'; import ConnectedAccountsListOptions from './connected-accounts-list-options'; diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js index 6d1792fdc98b..b9113b2c19b0 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js @@ -8,7 +8,11 @@ import { DISPLAY, TypographyVariant, } from '../../../helpers/constants/design-system'; -import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../component-library/icon/deprecated'; export const CustomSpendingCapTooltip = ({ tooltipContentText, diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js index be49b040988e..0271403bbb22 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js @@ -7,7 +7,8 @@ import { I18nContext } from '../../../contexts/i18n'; import Box from '../../ui/box'; import FormField from '../../ui/form-field'; import Typography from '../../ui/typography'; -import { ButtonLink, Icon, ICON_NAMES } from '../../component-library'; +import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; +import { ButtonLink } from '../../component-library'; import { AlignItems, DISPLAY, diff --git a/ui/components/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.js b/ui/components/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.js index 4ae5204fc221..0f80fea92467 100644 --- a/ui/components/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.js +++ b/ui/components/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.js @@ -63,6 +63,7 @@ const DetectedTokenSelectionPopover = ({ className="detected-token-selection-popover__import-button" type="primary" onClick={onImport} + disabled={selectedTokens.length === 0} > {t('importWithCount', [numOfTokensImporting])} diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js index d101e5769b10..33f95e3b4225 100644 --- a/ui/components/app/dropdowns/network-dropdown.js +++ b/ui/components/app/dropdowns/network-dropdown.js @@ -32,12 +32,13 @@ import { ADD_POPULAR_CUSTOM_NETWORK, ADVANCED_ROUTE, } from '../../../helpers/constants/routes'; +import { ButtonIcon } from '../../component-library'; import { Icon, - ButtonIcon, ICON_NAMES, ICON_SIZES, -} from '../../component-library'; +} from '../../component-library/icon/deprecated'; + import { Dropdown, DropdownMenuItem } from './dropdown'; // classes from nodes of the toggle element. diff --git a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js index e7b16d903b16..378be5480ab9 100644 --- a/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js +++ b/ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js @@ -14,7 +14,11 @@ import { useTransactionEventFragment } from '../../../hooks/useTransactionEventF import { useTransactionModalContext } from '../../../contexts/transaction-modal'; import InfoTooltip from '../../ui/info-tooltip/info-tooltip'; import Typography from '../../ui/typography/typography'; -import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../component-library/icon/deprecated'; export default function EditGasFeeButton({ userAcknowledgedGasMissing }) { const t = useI18nContext(); diff --git a/ui/components/app/flask/copyable/copyable.js b/ui/components/app/flask/copyable/copyable.js index e682cdba36fe..2741fd6c4406 100644 --- a/ui/components/app/flask/copyable/copyable.js +++ b/ui/components/app/flask/copyable/copyable.js @@ -14,7 +14,11 @@ import { Color, } from '../../../../helpers/constants/design-system'; import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'; -import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../../component-library/icon/deprecated'; export const Copyable = ({ text }) => { const [copied, handleCopy] = useCopyToClipboard(); diff --git a/ui/components/app/flask/snap-authorship/snap-authorship.js b/ui/components/app/flask/snap-authorship/snap-authorship.js index 996c01b77461..760d420961fd 100644 --- a/ui/components/app/flask/snap-authorship/snap-authorship.js +++ b/ui/components/app/flask/snap-authorship/snap-authorship.js @@ -20,12 +20,11 @@ import { getSnapName, removeSnapIdPrefix, } from '../../../../helpers/utils/util'; +import { Text, ButtonIcon } from '../../../component-library'; import { ICON_NAMES, ICON_SIZES, - Text, - ButtonIcon, -} from '../../../component-library'; +} from '../../../component-library/icon/deprecated'; import { getTargetSubjectMetadata } from '../../../../selectors'; import SnapAvatar from '../snap-avatar'; diff --git a/ui/components/app/flask/snap-avatar/snap-avatar.js b/ui/components/app/flask/snap-avatar/snap-avatar.js index 9a96527ccbc5..81e101b814ae 100644 --- a/ui/components/app/flask/snap-avatar/snap-avatar.js +++ b/ui/components/app/flask/snap-avatar/snap-avatar.js @@ -15,11 +15,13 @@ import { AvatarFavicon, BadgeWrapper, BadgeWrapperPosition, - ICON_NAMES, - ICON_SIZES, AvatarIcon, AvatarBase, } from '../../../component-library'; +import { + ICON_NAMES, + ICON_SIZES, +} from '../../../component-library/icon/deprecated'; import { getTargetSubjectMetadata } from '../../../../selectors'; const SnapAvatar = ({ snapId, className }) => { diff --git a/ui/components/app/flask/snap-content-footer/snap-content-footer.js b/ui/components/app/flask/snap-content-footer/snap-content-footer.js index d2c66b60e9b8..aa5f385d1ddf 100644 --- a/ui/components/app/flask/snap-content-footer/snap-content-footer.js +++ b/ui/components/app/flask/snap-content-footer/snap-content-footer.js @@ -16,7 +16,7 @@ import { } from '../../../../helpers/constants/design-system'; import Button from '../../../ui/button'; import Box from '../../../ui/box/box'; -import { Icon, ICON_NAMES } from '../../../component-library'; +import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated'; export default function SnapContentFooter({ snapName, snapId }) { const t = useI18nContext(); diff --git a/ui/components/app/flask/snap-delineator/snap-delineator.js b/ui/components/app/flask/snap-delineator/snap-delineator.js index a397f5bc9bdb..de149ed6b7c6 100644 --- a/ui/components/app/flask/snap-delineator/snap-delineator.js +++ b/ui/components/app/flask/snap-delineator/snap-delineator.js @@ -12,12 +12,11 @@ import { TextColor, } from '../../../../helpers/constants/design-system'; import Box from '../../../ui/box'; +import { AvatarIcon, Text } from '../../../component-library'; import { - AvatarIcon, ICON_NAMES, ICON_SIZES, - Text, -} from '../../../component-library'; +} from '../../../component-library/icon/deprecated'; import { DelineatorType, getDelineatorTitle, diff --git a/ui/components/app/flask/snap-install-warning/snap-install-warning.js b/ui/components/app/flask/snap-install-warning/snap-install-warning.js index 15c593c74a9c..31365909f042 100644 --- a/ui/components/app/flask/snap-install-warning/snap-install-warning.js +++ b/ui/components/app/flask/snap-install-warning/snap-install-warning.js @@ -15,7 +15,8 @@ import { } from '../../../../helpers/constants/design-system'; import Popover from '../../../ui/popover'; import Button from '../../../ui/button'; -import { AvatarIcon, ICON_NAMES, Text } from '../../../component-library'; +import { AvatarIcon, Text } from '../../../component-library'; +import { ICON_NAMES } from '../../../component-library/icon/deprecated'; import Box from '../../../ui/box/box'; /** diff --git a/ui/components/app/menu-bar/account-options-menu.js b/ui/components/app/menu-bar/account-options-menu.js index b5469687b75a..076b5bc94737 100644 --- a/ui/components/app/menu-bar/account-options-menu.js +++ b/ui/components/app/menu-bar/account-options-menu.js @@ -28,7 +28,7 @@ import { MetaMetricsEventName, } from '../../../../shared/constants/metametrics'; import { MetaMetricsContext } from '../../../contexts/metametrics'; -import { ICON_NAMES } from '../../component-library'; +import { ICON_NAMES } from '../../component-library/icon/deprecated'; export default function AccountOptionsMenu({ anchorElement, onClose }) { const t = useI18nContext(); diff --git a/ui/components/app/menu-bar/menu-bar.js b/ui/components/app/menu-bar/menu-bar.js index 99afdf1c6f40..32ce255b3f8b 100644 --- a/ui/components/app/menu-bar/menu-bar.js +++ b/ui/components/app/menu-bar/menu-bar.js @@ -14,7 +14,8 @@ import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { getOriginOfCurrentTab } from '../../../selectors'; import { MetaMetricsContext } from '../../../contexts/metametrics'; -import { ButtonIcon, ICON_NAMES } from '../../component-library'; +import { ButtonIcon } from '../../component-library'; +import { ICON_NAMES } from '../../component-library/icon/deprecated'; import { GlobalMenu } from '../../multichain/global-menu'; import AccountOptionsMenu from './account-options-menu'; diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js index c5d424841d64..6c6a5e7ec643 100644 --- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js +++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js @@ -25,7 +25,8 @@ import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard'; import { getAddressBookEntry } from '../../../../selectors'; import { TokenStandard } from '../../../../../shared/constants/transaction'; import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image'; -import { ButtonIcon, ICON_NAMES } from '../../../component-library'; +import { ButtonIcon } from '../../../component-library'; +import { ICON_NAMES } from '../../../component-library/icon/deprecated'; export default function ContractDetailsModal({ onClose, diff --git a/ui/components/app/modals/customize-nonce/customize-nonce.component.js b/ui/components/app/modals/customize-nonce/customize-nonce.component.js index 9aa370eb9a67..0c4f8b4cbf02 100644 --- a/ui/components/app/modals/customize-nonce/customize-nonce.component.js +++ b/ui/components/app/modals/customize-nonce/customize-nonce.component.js @@ -15,7 +15,11 @@ import Box from '../../../ui/box'; import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'; import { useI18nContext } from '../../../../hooks/useI18nContext'; import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url'; -import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../../component-library'; +import { ButtonIcon } from '../../../component-library'; +import { + ICON_NAMES, + ICON_SIZES, +} from '../../../component-library/icon/deprecated'; const CustomizeNonce = ({ hideModal, diff --git a/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js b/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js index bb4552e54478..43602ba42af8 100644 --- a/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js +++ b/ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js @@ -10,7 +10,11 @@ import { calcTokenAmount, toPrecisionWithoutTrailingZeros, } from '../../../../../shared/lib/transactions-controller-utils'; -import { ButtonIcon, ICON_SIZES, ICON_NAMES } from '../../../component-library'; +import { ButtonIcon } from '../../../component-library'; +import { + ICON_SIZES, + ICON_NAMES, +} from '../../../component-library/icon/deprecated'; const MAX_UNSIGNED_256_INT = new BigNumber(2).pow(256).minus(1).toString(10); diff --git a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js index 9d93d9da3a48..3368017e333a 100644 --- a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js +++ b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js @@ -7,8 +7,8 @@ import { Button, BUTTON_TYPES, ButtonIcon, - ICON_NAMES, } from '../../../component-library'; +import { ICON_NAMES } from '../../../component-library/icon/deprecated'; import { AlignItems, DISPLAY, diff --git a/ui/components/app/modals/new-account-modal/new-account-modal.component.js b/ui/components/app/modals/new-account-modal/new-account-modal.component.js index 113e08058994..5e05df4ea18d 100644 --- a/ui/components/app/modals/new-account-modal/new-account-modal.component.js +++ b/ui/components/app/modals/new-account-modal/new-account-modal.component.js @@ -1,7 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Button from '../../../ui/button/button.component'; -import { ButtonIcon, ICON_NAMES } from '../../../component-library'; +import { ButtonIcon } from '../../../component-library'; +import { ICON_NAMES } from '../../../component-library/icon/deprecated'; export default class NewAccountModal extends Component { static contextTypes = { diff --git a/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js index e5863bf483a0..5899562d48a5 100644 --- a/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js +++ b/ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js @@ -1,7 +1,11 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import Modal from '../../modal'; -import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../../component-library/icon/deprecated'; import { IconColor } from '../../../../helpers/constants/design-system'; export default class TransactionConfirmed extends PureComponent { diff --git a/ui/components/app/network-display/network-display.js b/ui/components/app/network-display/network-display.js index 39ed11f9b703..24519801bc90 100644 --- a/ui/components/app/network-display/network-display.js +++ b/ui/components/app/network-display/network-display.js @@ -18,7 +18,11 @@ import { import Chip from '../../ui/chip/chip'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { isNetworkLoading } from '../../../selectors'; -import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../component-library/icon/deprecated'; export default function NetworkDisplay({ indicatorSize, diff --git a/ui/components/app/nft-details/nft-details.js b/ui/components/app/nft-details/nft-details.js index 116d0da35c6d..3885126ddacb 100644 --- a/ui/components/app/nft-details/nft-details.js +++ b/ui/components/app/nft-details/nft-details.js @@ -53,7 +53,8 @@ import { TokenStandard, } from '../../../../shared/constants/transaction'; import NftDefaultImage from '../nft-default-image'; -import { ButtonIcon, ICON_NAMES } from '../../component-library'; +import { ButtonIcon } from '../../component-library'; +import { ICON_NAMES } from '../../component-library/icon/deprecated'; import Tooltip from '../../ui/tooltip'; import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils'; diff --git a/ui/components/app/nft-options/nft-options.js b/ui/components/app/nft-options/nft-options.js index a73ec1fd671e..2241da905ee8 100644 --- a/ui/components/app/nft-options/nft-options.js +++ b/ui/components/app/nft-options/nft-options.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types'; import { I18nContext } from '../../../contexts/i18n'; import { Menu, MenuItem } from '../../ui/menu'; -import { ButtonIcon, ICON_NAMES } from '../../component-library'; +import { ButtonIcon } from '../../component-library'; +import { ICON_NAMES } from '../../component-library/icon/deprecated'; import { Color } from '../../../helpers/constants/design-system'; const NftOptions = ({ onRemove, onViewOnOpensea }) => { diff --git a/ui/components/app/nfts-items/nfts-items.js b/ui/components/app/nfts-items/nfts-items.js index e2ce133d74d2..0e865b1b8d27 100644 --- a/ui/components/app/nfts-items/nfts-items.js +++ b/ui/components/app/nfts-items/nfts-items.js @@ -30,7 +30,7 @@ import { updateNftDropDownState } from '../../../store/actions'; import { usePrevious } from '../../../hooks/usePrevious'; import { getNftsDropdownState } from '../../../ducks/metamask/metamask'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { Icon, ICON_NAMES } from '../../component-library'; +import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import NftDefaultImage from '../nft-default-image'; const width = diff --git a/ui/components/app/permission-cell/permission-cell.js b/ui/components/app/permission-cell/permission-cell.js index 1090b3958799..ea87a381e16a 100644 --- a/ui/components/app/permission-cell/permission-cell.js +++ b/ui/components/app/permission-cell/permission-cell.js @@ -11,13 +11,12 @@ import { TextColor, TextVariant, } from '../../../helpers/constants/design-system'; +import { AvatarIcon, Text } from '../../component-library'; import { - AvatarIcon, Icon, ICON_NAMES, ICON_SIZES, - Text, -} from '../../component-library'; +} from '../../component-library/icon/deprecated'; import { formatDate } from '../../../helpers/utils/util'; import { useI18nContext } from '../../../hooks/useI18nContext'; import Tooltip from '../../ui/tooltip'; diff --git a/ui/components/app/selected-account/selected-account.component.js b/ui/components/app/selected-account/selected-account.component.js index fd1e5b835483..08746392ef8e 100644 --- a/ui/components/app/selected-account/selected-account.component.js +++ b/ui/components/app/selected-account/selected-account.component.js @@ -6,7 +6,11 @@ import { shortenAddress } from '../../../helpers/utils/util'; import Tooltip from '../../ui/tooltip'; import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils'; import { SECOND } from '../../../../shared/constants/time'; -import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../component-library/icon/deprecated'; import { IconColor } from '../../../helpers/constants/design-system'; class SelectedAccount extends Component { diff --git a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js index 93812f90462d..83baa2bde127 100644 --- a/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js +++ b/ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js @@ -16,7 +16,7 @@ import { } from '../../../helpers/constants/design-system'; import Identicon from '../../ui/identicon'; import { shortenAddress } from '../../../helpers/utils/util'; -import { Icon, ICON_NAMES } from '../../component-library'; +import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; const SetApproveForAllWarning = ({ collectionName, diff --git a/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js b/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js index 05b4f2965201..fc8ffc21d829 100644 --- a/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js +++ b/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js @@ -17,7 +17,7 @@ import { } from '../../../../helpers/constants/design-system'; import Identicon from '../../../ui/identicon'; import { shortenAddress } from '../../../../helpers/utils/util'; -import { Icon, ICON_NAMES } from '../../../component-library'; +import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated'; const SignatureRequestOriginalWarning = ({ senderAddress, diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js index ea34e3dc2ad3..7ef015ab57ca 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js +++ b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js @@ -6,7 +6,7 @@ import { JustifyContent, } from '../../../../helpers/constants/design-system'; import Box from '../../../ui/box'; -import { Icon, ICON_NAMES } from '../../../component-library'; +import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated'; const SignatureRequestSIWEIcon = () => { return ( diff --git a/ui/components/app/tab-bar/tab-bar.js b/ui/components/app/tab-bar/tab-bar.js index c76fba3718a6..bcb97b80bd05 100644 --- a/ui/components/app/tab-bar/tab-bar.js +++ b/ui/components/app/tab-bar/tab-bar.js @@ -2,7 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../component-library/icon/deprecated'; const TabBar = (props) => { const { tabs = [], onSelect, isActive } = props; diff --git a/ui/components/app/tab-bar/tab-bar.stories.js b/ui/components/app/tab-bar/tab-bar.stories.js index fb304c6eee26..d7e08ed7cf6a 100644 --- a/ui/components/app/tab-bar/tab-bar.stories.js +++ b/ui/components/app/tab-bar/tab-bar.stories.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Icon, ICON_NAMES } from '../../component-library'; +import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import TabBar from '.'; export default { diff --git a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js index 23a79ee7c2a2..3e253e62127a 100644 --- a/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js +++ b/ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js @@ -12,7 +12,11 @@ import { TRANSACTION_CANCEL_ATTEMPTED_EVENT, TRANSACTION_CANCEL_SUCCESS_EVENT, } from '../transaction-activity-log.constants'; -import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library'; +import { + Icon, + ICON_NAMES, + ICON_SIZES, +} from '../../../component-library/icon/deprecated'; import { Color } from '../../../../helpers/constants/design-system'; export const ACTIVITY_ICONS = { diff --git a/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js b/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js index a84003d757c2..8e1f62d9341d 100644 --- a/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js +++ b/ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js @@ -4,7 +4,10 @@ import Tooltip from '../../../../../ui/tooltip/tooltip'; import { I18nContext } from '../../../../../../contexts/i18n'; import { useCopyToClipboard } from '../../../../../../hooks/useCopyToClipboard'; -import { Icon, ICON_NAMES } from '../../../../../component-library'; +import { + Icon, + ICON_NAMES, +} from '../../../../../component-library/icon/deprecated'; import { IconColor } from '../../../../../../helpers/constants/design-system'; const CopyRawData = ({ data }) => { diff --git a/ui/components/app/wallet-overview/eth-overview.js b/ui/components/app/wallet-overview/eth-overview.js index e3be1754ff23..0d3b37d81786 100644 --- a/ui/components/app/wallet-overview/eth-overview.js +++ b/ui/components/app/wallet-overview/eth-overview.js @@ -37,12 +37,8 @@ import { import Spinner from '../../ui/spinner'; import { startNewDraftTransaction } from '../../../ducks/send'; import { AssetType } from '../../../../shared/constants/transaction'; -import { - ButtonIcon, - BUTTON_ICON_SIZES, - Icon, - ICON_NAMES, -} from '../../component-library'; +import { ButtonIcon, BUTTON_ICON_SIZES } from '../../component-library'; +import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import { IconColor } from '../../../helpers/constants/design-system'; import useRamps from '../../../hooks/experiences/useRamps'; import WalletOverview from './wallet-overview'; diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js index 5f7d2cc05446..c83a17f3baae 100644 --- a/ui/components/app/wallet-overview/token-overview.js +++ b/ui/components/app/wallet-overview/token-overview.js @@ -35,7 +35,7 @@ import { import { AssetType } from '../../../../shared/constants/transaction'; import useRamps from '../../../hooks/experiences/useRamps'; -import { Icon, ICON_NAMES } from '../../component-library'; +import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; import { IconColor } from '../../../helpers/constants/design-system'; import WalletOverview from './wallet-overview'; diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.js b/ui/components/component-library/avatar-base/avatar-base.stories.js index 9515ca09f36a..e30109eae754 100644 --- a/ui/components/component-library/avatar-base/avatar-base.stories.js +++ b/ui/components/component-library/avatar-base/avatar-base.stories.js @@ -10,7 +10,7 @@ import { import Box from '../../ui/box/box'; -import { Icon, ICON_NAMES } from '../icon'; +import { Icon, ICON_NAMES } from '../icon/deprecated'; import README from './README.mdx'; import { AvatarBase } from './avatar-base'; import { AVATAR_BASE_SIZES } from './avatar-base.constants'; diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.js b/ui/components/component-library/avatar-favicon/avatar-favicon.js index 8400d0dfe051..d7833298f3a2 100644 --- a/ui/components/component-library/avatar-favicon/avatar-favicon.js +++ b/ui/components/component-library/avatar-favicon/avatar-favicon.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { AvatarBase } from '../avatar-base'; import Box from '../../ui/box/box'; -import { ICON_NAMES, Icon } from '../icon'; +import { ICON_NAMES, Icon } from '../icon/deprecated'; import { BorderColor, Size, diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js index 415cd1bfa165..1c63eb48bfb7 100644 --- a/ui/components/component-library/avatar-icon/avatar-icon.js +++ b/ui/components/component-library/avatar-icon/avatar-icon.js @@ -14,7 +14,7 @@ import { import Box from '../../ui/box/box'; -import { Icon, ICON_NAMES } from '../icon'; +import { Icon, ICON_NAMES } from '../icon/deprecated'; import { AvatarBase } from '../avatar-base'; import { AVATAR_ICON_SIZES } from './avatar-icon.constants'; diff --git a/ui/components/component-library/avatar-icon/avatar-icon.stories.js b/ui/components/component-library/avatar-icon/avatar-icon.stories.js index ba5c276a9e4c..d7fa0194faa5 100644 --- a/ui/components/component-library/avatar-icon/avatar-icon.stories.js +++ b/ui/components/component-library/avatar-icon/avatar-icon.stories.js @@ -10,7 +10,7 @@ import { import Box from '../../ui/box/box'; -import { ICON_NAMES } from '..'; +import { ICON_NAMES } from '../icon/deprecated'; import README from './README.mdx'; import { AvatarIcon, AVATAR_ICON_SIZES } from '.'; diff --git a/ui/components/component-library/avatar-icon/avatar-icon.test.js b/ui/components/component-library/avatar-icon/avatar-icon.test.js index 73d7fbbcc029..8c81baa3f22c 100644 --- a/ui/components/component-library/avatar-icon/avatar-icon.test.js +++ b/ui/components/component-library/avatar-icon/avatar-icon.test.js @@ -2,7 +2,7 @@ import { render } from '@testing-library/react'; import React from 'react'; -import { ICON_NAMES } from '..'; +import { ICON_NAMES } from '../icon/deprecated'; import { BackgroundColor, IconColor, diff --git a/ui/components/component-library/badge-wrapper/README.mdx b/ui/components/component-library/badge-wrapper/README.mdx index f75c81115e17..f1fffdb3bda0 100644 --- a/ui/components/component-library/badge-wrapper/README.mdx +++ b/ui/components/component-library/badge-wrapper/README.mdx @@ -113,7 +113,8 @@ import { BadgeWrapper, BadgeWrapperAnchorElementShape, Icon, - ICON_NAMES, + IconSize, + IconName, Tag, } from '../../component-library'; @@ -141,8 +142,8 @@ import { } > diff --git a/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx b/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx index e2cf48034e73..35fc575c0fca 100644 --- a/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx +++ b/ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx @@ -19,7 +19,8 @@ import { AvatarNetwork, AvatarToken, Icon, - ICON_NAMES, + IconName, + IconSize, Tag, } from '..'; import { @@ -165,8 +166,8 @@ export const Badge = () => ( } > diff --git a/ui/components/component-library/banner-alert/banner-alert.js b/ui/components/component-library/banner-alert/banner-alert.js index 65668504663b..31a248c59a57 100644 --- a/ui/components/component-library/banner-alert/banner-alert.js +++ b/ui/components/component-library/banner-alert/banner-alert.js @@ -2,7 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { BannerBase, Icon, ICON_NAMES } from '..'; +import { Icon, ICON_NAMES } from '../icon/deprecated'; +import { BannerBase } from '..'; import { BackgroundColor, diff --git a/ui/components/component-library/banner-alert/banner-alert.stories.js b/ui/components/component-library/banner-alert/banner-alert.stories.js index 96a8fcee3289..757a2792ab0f 100644 --- a/ui/components/component-library/banner-alert/banner-alert.stories.js +++ b/ui/components/component-library/banner-alert/banner-alert.stories.js @@ -7,7 +7,8 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ICON_NAMES, ButtonLink, ButtonPrimary } from '..'; +import { ButtonLink, ButtonPrimary } from '..'; +import { ICON_NAMES } from '../icon/deprecated'; import README from './README.mdx'; import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.'; diff --git a/ui/components/component-library/banner-base/README.mdx b/ui/components/component-library/banner-base/README.mdx index b02b7594c601..3fce695a74b1 100644 --- a/ui/components/component-library/banner-base/README.mdx +++ b/ui/components/component-library/banner-base/README.mdx @@ -128,7 +128,8 @@ Use the `startAccessory` prop to add components such as icons or fox image to th ```jsx import { Size } from '../../../helpers/constants/design-system'; -import { BannerBase, Icon, ICON_NAMES } from '../../component-library'; +import { BannerBase } from '../../component-library'; +import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; { diff --git a/ui/components/component-library/banner-tip/banner-tip.stories.js b/ui/components/component-library/banner-tip/banner-tip.stories.js index fe6ec1ffb294..30180e0cc436 100644 --- a/ui/components/component-library/banner-tip/banner-tip.stories.js +++ b/ui/components/component-library/banner-tip/banner-tip.stories.js @@ -5,7 +5,8 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ButtonLink, ButtonPrimary, Icon, ICON_NAMES } from '..'; +import { Icon, ICON_NAMES } from '../icon/deprecated'; +import { ButtonLink, ButtonPrimary } from '..'; import README from './README.mdx'; import { BannerTip, BannerTipLogoType } from '.'; diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js index c79a757e91b5..a9b60a265b51 100644 --- a/ui/components/component-library/button-base/button-base.js +++ b/ui/components/component-library/button-base/button-base.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import Box from '../../ui/box'; -import { Icon, ICON_NAMES } from '../icon'; +import { Icon, ICON_NAMES } from '../icon/deprecated'; import { Text } from '../text'; import { diff --git a/ui/components/component-library/button-base/button-base.stories.js b/ui/components/component-library/button-base/button-base.stories.js index 94db0c02a3c3..302aed58e22d 100644 --- a/ui/components/component-library/button-base/button-base.stories.js +++ b/ui/components/component-library/button-base/button-base.stories.js @@ -7,7 +7,8 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ICON_NAMES, TextDirection } from '..'; +import { TextDirection } from '..'; +import { ICON_NAMES } from '../icon/deprecated'; import { BUTTON_BASE_SIZES } from './button-base.constants'; import { ButtonBase } from './button-base'; import README from './README.mdx'; diff --git a/ui/components/component-library/button-base/button-base.test.js b/ui/components/component-library/button-base/button-base.test.js index 8561432738d2..6008ed167625 100644 --- a/ui/components/component-library/button-base/button-base.test.js +++ b/ui/components/component-library/button-base/button-base.test.js @@ -1,7 +1,7 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { ICON_NAMES } from '..'; +import { ICON_NAMES } from '../icon/deprecated'; import { BUTTON_BASE_SIZES } from './button-base.constants'; import { ButtonBase } from './button-base'; diff --git a/ui/components/component-library/button-icon/button-icon.js b/ui/components/component-library/button-icon/button-icon.js index 6f878c0ade38..043d596554a3 100644 --- a/ui/components/component-library/button-icon/button-icon.js +++ b/ui/components/component-library/button-icon/button-icon.js @@ -13,7 +13,7 @@ import { } from '../../../helpers/constants/design-system'; import Box from '../../ui/box'; -import { Icon, ICON_NAMES } from '../icon'; +import { Icon, ICON_NAMES } from '../icon/deprecated'; import { BUTTON_ICON_SIZES } from './button-icon.constants'; diff --git a/ui/components/component-library/button-icon/button-icon.stories.js b/ui/components/component-library/button-icon/button-icon.stories.js index 9a9a8b749d05..4c07aac7ee40 100644 --- a/ui/components/component-library/button-icon/button-icon.stories.js +++ b/ui/components/component-library/button-icon/button-icon.stories.js @@ -7,7 +7,7 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ICON_NAMES } from '../icon'; +import { ICON_NAMES } from '../icon/deprecated'; import { BUTTON_ICON_SIZES } from './button-icon.constants'; import { ButtonIcon } from './button-icon'; import README from './README.mdx'; diff --git a/ui/components/component-library/button-icon/button-icon.test.js b/ui/components/component-library/button-icon/button-icon.test.js index b6b32aa774be..a9e4fd6d97b4 100644 --- a/ui/components/component-library/button-icon/button-icon.test.js +++ b/ui/components/component-library/button-icon/button-icon.test.js @@ -2,7 +2,7 @@ import { render } from '@testing-library/react'; import React from 'react'; import { IconColor } from '../../../helpers/constants/design-system'; -import { ICON_NAMES } from '..'; +import { ICON_NAMES } from '../icon/deprecated'; import { BUTTON_ICON_SIZES } from './button-icon.constants'; import { ButtonIcon } from './button-icon'; diff --git a/ui/components/component-library/button-link/button-link.stories.js b/ui/components/component-library/button-link/button-link.stories.js index bda5a27f4083..b9eacd3edcdf 100644 --- a/ui/components/component-library/button-link/button-link.stories.js +++ b/ui/components/component-library/button-link/button-link.stories.js @@ -9,7 +9,7 @@ import { TextColor, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ICON_NAMES } from '../icon'; +import { ICON_NAMES } from '../icon/deprecated'; import { Text } from '../text'; import { ButtonLink } from './button-link'; import { BUTTON_LINK_SIZES } from './button-link.constants'; diff --git a/ui/components/component-library/button-link/button-link.test.js b/ui/components/component-library/button-link/button-link.test.js index 841975329f33..5c1b685797e9 100644 --- a/ui/components/component-library/button-link/button-link.test.js +++ b/ui/components/component-library/button-link/button-link.test.js @@ -2,7 +2,7 @@ import { render } from '@testing-library/react'; import React from 'react'; import { Size } from '../../../helpers/constants/design-system'; -import { ICON_NAMES } from '..'; +import { ICON_NAMES } from '../icon/deprecated'; import { ButtonLink } from './button-link'; import { BUTTON_LINK_SIZES } from './button-link.constants'; diff --git a/ui/components/component-library/button-primary/button-primary.stories.js b/ui/components/component-library/button-primary/button-primary.stories.js index 5e650bd0ea4f..d3a0bb3ffe76 100644 --- a/ui/components/component-library/button-primary/button-primary.stories.js +++ b/ui/components/component-library/button-primary/button-primary.stories.js @@ -5,7 +5,7 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ICON_NAMES } from '../icon'; +import { ICON_NAMES } from '../icon/deprecated'; import { ButtonPrimary } from './button-primary'; import README from './README.mdx'; diff --git a/ui/components/component-library/button-primary/button-primary.test.js b/ui/components/component-library/button-primary/button-primary.test.js index e8aaf3191bba..b16c7c36f14b 100644 --- a/ui/components/component-library/button-primary/button-primary.test.js +++ b/ui/components/component-library/button-primary/button-primary.test.js @@ -1,7 +1,7 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { ICON_NAMES } from '..'; +import { ICON_NAMES } from '../icon/deprecated'; import { ButtonPrimary } from './button-primary'; import { BUTTON_PRIMARY_SIZES } from './button-primary.constants'; diff --git a/ui/components/component-library/button-secondary/button-secondary.stories.js b/ui/components/component-library/button-secondary/button-secondary.stories.js index 2dd3d41382d7..6e4a0c445916 100644 --- a/ui/components/component-library/button-secondary/button-secondary.stories.js +++ b/ui/components/component-library/button-secondary/button-secondary.stories.js @@ -5,7 +5,7 @@ import { Size, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; -import { ICON_NAMES } from '../icon'; +import { ICON_NAMES } from '../icon/deprecated'; import { ButtonSecondary } from './button-secondary'; import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants'; import README from './README.mdx'; diff --git a/ui/components/component-library/button-secondary/button-secondary.test.js b/ui/components/component-library/button-secondary/button-secondary.test.js index 14fc8fd8506c..06a331a59035 100644 --- a/ui/components/component-library/button-secondary/button-secondary.test.js +++ b/ui/components/component-library/button-secondary/button-secondary.test.js @@ -1,7 +1,7 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { ICON_NAMES } from '..'; +import { ICON_NAMES } from '../icon/deprecated'; import { ButtonSecondary } from './button-secondary'; import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants'; diff --git a/ui/components/component-library/button/button.stories.js b/ui/components/component-library/button/button.stories.js index e1e90c7f2e22..0e80573ce99e 100644 --- a/ui/components/component-library/button/button.stories.js +++ b/ui/components/component-library/button/button.stories.js @@ -6,7 +6,7 @@ import { Size, TextVariant, } from '../../../helpers/constants/design-system'; -import { ICON_NAMES } from '../icon'; +import { ICON_NAMES } from '../icon/deprecated'; import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants'; import Box from '../../ui/box/box'; import { Text } from '../text'; diff --git a/ui/components/component-library/button/button.test.js b/ui/components/component-library/button/button.test.js index be0fbe283728..af974d796b3b 100644 --- a/ui/components/component-library/button/button.test.js +++ b/ui/components/component-library/button/button.test.js @@ -1,7 +1,7 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { ICON_NAMES } from '..'; +import { ICON_NAMES } from '../icon/deprecated'; import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants'; import { Button } from './button'; diff --git a/ui/components/component-library/form-text-field/README.mdx b/ui/components/component-library/form-text-field/README.mdx index e5a22994167d..ddc30a7defbe 100644 --- a/ui/components/component-library/form-text-field/README.mdx +++ b/ui/components/component-library/form-text-field/README.mdx @@ -264,12 +264,11 @@ import { import Box from '../../ui/box/box'; +import { Icon, ICON_NAMES } from '../icon/deprecated' import { ButtonLink, FormTextField, HelpText, - ICON_NAMES, - Icon, Label, TEXT_FIELD_TYPES, Text, diff --git a/ui/components/component-library/form-text-field/form-text-field.stories.js b/ui/components/component-library/form-text-field/form-text-field.stories.js index a18b1f1e77b8..e09965177a5d 100644 --- a/ui/components/component-library/form-text-field/form-text-field.stories.js +++ b/ui/components/component-library/form-text-field/form-text-field.stories.js @@ -12,14 +12,12 @@ import { } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; - +import { Icon, ICON_NAMES } from '../icon/deprecated'; import { ButtonLink, ButtonPrimary, ButtonSecondary, HelpText, - Icon, - ICON_NAMES, Label, Text, TEXT_FIELD_SIZES, diff --git a/ui/components/component-library/header-base/README.mdx b/ui/components/component-library/header-base/README.mdx index ab8c671a5467..9b7ea11c10b9 100644 --- a/ui/components/component-library/header-base/README.mdx +++ b/ui/components/component-library/header-base/README.mdx @@ -52,7 +52,12 @@ Use the `startAccessoryWrapperProps` prop to customize the wrapper element aroun ```jsx -import { HeaderBase, Text } from '../../component-library'; +import { + HeaderBase, + Text, + ButtonIcon, + IconName, +} from '../../component-library'; import { TEXT_ALIGN, TextVariant, @@ -62,7 +67,7 @@ import { startAccessory={ } @@ -84,7 +89,13 @@ Use the `endAccessoryWrapperProps` prop to customize the wrapper element around ```jsx -import { HeaderBase, Text } from '../../component-library'; +import { + ButtonIcon, + BUTTON_ICON_SIZES, + HeaderBase, + IconName, + Text, +} from '../../component-library'; import { TEXT_ALIGN, TextVariant, @@ -94,7 +105,7 @@ import { endAccessory={ } diff --git a/ui/components/component-library/header-base/header-base.stories.tsx b/ui/components/component-library/header-base/header-base.stories.tsx index be26fe8741ca..8ca56d49b9e9 100644 --- a/ui/components/component-library/header-base/header-base.stories.tsx +++ b/ui/components/component-library/header-base/header-base.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; import Box from '../../ui/box'; import { - ICON_NAMES, + IconName, Button, ButtonIcon, BUTTON_ICON_SIZES, @@ -43,14 +43,14 @@ DefaultStory.args = { startAccessory: ( ), endAccessory: ( ), @@ -75,7 +75,7 @@ export const StartAccessory = (args) => { startAccessory={ } @@ -95,7 +95,7 @@ export const EndAccessory = (args) => { endAccessory={ } @@ -130,7 +130,7 @@ export const UseCaseDemos = (args) => ( } @@ -153,7 +153,7 @@ export const UseCaseDemos = (args) => ( } @@ -176,7 +176,7 @@ export const UseCaseDemos = (args) => ( } @@ -184,7 +184,7 @@ export const UseCaseDemos = (args) => ( } @@ -216,7 +216,7 @@ export const UseCaseDemos = (args) => ( } @@ -243,7 +243,7 @@ export const UseCaseDemos = (args) => ( } @@ -282,7 +282,7 @@ export const UseCaseDemos = (args) => ( } diff --git a/ui/components/component-library/header-base/header-base.test.tsx b/ui/components/component-library/header-base/header-base.test.tsx index 9d4ccec69f26..00171ab95c11 100644 --- a/ui/components/component-library/header-base/header-base.test.tsx +++ b/ui/components/component-library/header-base/header-base.test.tsx @@ -1,7 +1,7 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { Icon, ICON_NAMES } from '..'; +import { Icon, IconName } from '..'; import { HeaderBase } from './header-base'; describe('HeaderBase', () => { @@ -39,7 +39,7 @@ describe('HeaderBase', () => { const { getByTestId } = render( + } />, ); @@ -51,7 +51,7 @@ describe('HeaderBase', () => { const { getByTestId } = render( + } />, ); diff --git a/ui/components/component-library/help-text/README.mdx b/ui/components/component-library/help-text/README.mdx index 9652fb21afa6..5dd6b31a3a6b 100644 --- a/ui/components/component-library/help-text/README.mdx +++ b/ui/components/component-library/help-text/README.mdx @@ -28,7 +28,8 @@ The `HelpText` accepts all props below as well as all [Box](/docs/components-ui- ```jsx import { Size, IconColor } from '../../../helpers/constants/design-system'; -import { HelpText, Icon, ICON_NAMES } from '../../component-library'; +import { Icon, ICON_NAMES } from '../../icon/deprecated'; +import { HelpText } from '../../component-library'; Plain text // renders as

Plain text

diff --git a/ui/components/component-library/help-text/help-text.stories.js b/ui/components/component-library/help-text/help-text.stories.js index 5f7a0d47f133..86792b73a1dd 100644 --- a/ui/components/component-library/help-text/help-text.stories.js +++ b/ui/components/component-library/help-text/help-text.stories.js @@ -10,7 +10,7 @@ import { import Box from '../../ui/box'; -import { Icon, ICON_NAMES } from '..'; +import { Icon, ICON_NAMES } from '../icon/deprecated'; import { HelpText } from './help-text'; diff --git a/ui/components/component-library/help-text/help-text.test.js b/ui/components/component-library/help-text/help-text.test.js index d5a52c670289..c76dec6f54b5 100644 --- a/ui/components/component-library/help-text/help-text.test.js +++ b/ui/components/component-library/help-text/help-text.test.js @@ -2,7 +2,7 @@ import { render } from '@testing-library/react'; import React from 'react'; import { Color, SEVERITIES } from '../../../helpers/constants/design-system'; -import { Icon, ICON_NAMES } from '../icon'; +import { Icon, ICON_NAMES } from '../icon/deprecated'; import { HelpText } from './help-text'; diff --git a/ui/components/component-library/icon/README.mdx b/ui/components/component-library/icon/README.mdx index c6bfad966ec9..0cd319058b45 100644 --- a/ui/components/component-library/icon/README.mdx +++ b/ui/components/component-library/icon/README.mdx @@ -4,7 +4,7 @@ import { Icon } from './icon'; # Icon -The `Icon` component in conjunction with `ICON_NAMES` can be used for all icons in the extension +The `Icon` component in conjunction with `IconName` can be used for all icons in the extension @@ -18,7 +18,7 @@ The `Icon` accepts all props below as well as all [Box](/docs/components-ui-box- ### Name -Use the `name` prop and the `ICON_NAMES` object to change the icon. +Use the `name` prop and the `IconName` enum to change the icon. Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use. @@ -27,50 +27,50 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto ```jsx -import { Icon, ICON_NAMES } from '../../component-library'; +import { Icon, IconName } from '../../component-library'; - - - - + + + + // etc... ``` ### Size -Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `Size.SM` +Use the `size` prop and the `IconSize` enum to change the size of `Icon`. Defaults to `IconSize.Sm` Possible sizes include: -- `Size.XS` 12px -- `Size.SM` 16px -- `Size.MD` 20px -- `Size.LG` 24px -- `Size.XL` 32px -- `Size.inherit` inherits the font-size from parent element. This is useful for inline icons in text. +- `IconSize.Xs` 12px +- `IconSize.Sm` 16px +- `IconSize.Md` 20px +- `IconSize.Lg` 24px +- `IconSize.Xl` 32px +- `IconSize.Inherit` inherits the font-size from parent element. This is useful for inline icons in text. ```jsx -import { Size，TextVariant } from '../../../helpers/constants/design-system'; -import { Icon, ICON_NAMES } from '../../component-library'; - - - - - - +import { TextVariant } from '../../../helpers/constants/design-system'; +import { Icon, IconName, IconSize, Text } from '../../component-library'; + + + + + + - inherits the + inherits the font-size of the parent element. ``` ### Color -Use the `color` prop and the `Color` object from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `Color.inherit` which will use the text color of the parent element. This is useful for inline icons. +Use the `color` prop and the `IconColor` enum from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `IconColor.inherit` which will use the text color of the parent element. This is useful for inline icons. @@ -78,23 +78,23 @@ Use the `color` prop and the `Color` object from `./ui/helpers/constants/design- ```jsx import { IconColor } from '../../../helpers/constants/design-system'; -import { Icon, ICON_NAMES } from '../../component-library'; - - - - - - - - - - - - - - - - +import { Icon, IconName } from '../../component-library'; + + + + + + + + + + + + + + + + ``` ### Layout & Spacing @@ -119,12 +119,12 @@ import { import Box from '../../ui/box/box'; -import { ICON_NAMES, Icon, Text, Label } from '../../component-library'; +import { IconName, Icon, IconSize, Text, Label } from '../../component-library'; @@ -142,7 +142,7 @@ import { ICON_NAMES, Icon, Text, Label } from '../../component-library'; 0x79fAaFe7B6D5DB5D8c63FE88DFF0AF1Fe53358db @@ -155,18 +155,18 @@ import { ICON_NAMES, Icon, Text, Label } from '../../component-library'; borderColor={BorderColor.borderMuted} backgroundColor={BackgroundColor.backgroundDefault} > - + Create account
{' '} @@ -178,17 +178,17 @@ import { ICON_NAMES, Icon, Text, Label } from '../../component-library'; ### Adding a new icon -To add a new icon the only thing you need to do is add the icon svg file to `app/images/icons`. To ensure that the icon is added correctly follow these steps: +In order to ensure that a new icon is added correctly, there are a few steps that need to be followed: #### Step 1. Optimize the svg using [Fontastic](https://fontastic.me/). This will remove any unnecessary code from the svg. Your svg should only contain a single path. -Example of a correctly optimized svg: +Example of a correctly optimized svg `add-square-filled.svg`: -``` - - +```xml + + ``` @@ -200,6 +200,6 @@ Add your optimized svg file to to `app/images/icons` #### Step 3. -Run `yarn start` to generate the `ICON_NAMES` with your added icon. +Add your icon to the `IconName` enum in `./ui/components/ui/icon/icon.types.ts` If you have any questions please reach out to the design system team in the [#metamask-design-system](https://consensys.slack.com/archives/C0354T27M5M) channel on slack. diff --git a/ui/components/component-library/icon/__snapshots__/icon.test.js.snap b/ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap similarity index 100% rename from ui/components/component-library/icon/__snapshots__/icon.test.js.snap rename to ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap diff --git a/ui/components/component-library/icon/deprecated/__snapshots__/icon.test.js.snap b/ui/components/component-library/icon/deprecated/__snapshots__/icon.test.js.snap new file mode 100644 index 000000000000..a99ac639395b --- /dev/null +++ b/ui/components/component-library/icon/deprecated/__snapshots__/icon.test.js.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Icon should render correctly 1`] = ` +
+ +
+`; diff --git a/ui/components/component-library/icon/deprecated/icon.constants.js b/ui/components/component-library/icon/deprecated/icon.constants.js new file mode 100644 index 000000000000..6899c77bee85 --- /dev/null +++ b/ui/components/component-library/icon/deprecated/icon.constants.js @@ -0,0 +1,23 @@ +import { Size } from '../../../../helpers/constants/design-system'; + +/** + * @deprecated `ICON_NAMES` has been deprecated in favour of the `IconName` enum + * + * import { Icon, IconName } from '../../component-library'; + */ +/* eslint-disable prefer-destructuring*/ // process.env is not a standard JavaScript object, so we are not able to use object destructuring +export const ICON_NAMES = JSON.parse(process.env.ICON_NAMES); + +/** + * @deprecated `ICON_SIZES` has been deprecated in favour of the `IconSize` enum + * + * import { Icon, IconSize, IconName } from '../../component-library'; + */ +export const ICON_SIZES = { + XS: Size.XS, + SM: Size.SM, + MD: Size.MD, + LG: Size.LG, + XL: Size.XL, + AUTO: Size.inherit, +}; diff --git a/ui/components/component-library/icon/icon.js b/ui/components/component-library/icon/deprecated/icon.js similarity index 94% rename from ui/components/component-library/icon/icon.js rename to ui/components/component-library/icon/deprecated/icon.js index 52616dfcfb87..b3d66379ff04 100644 --- a/ui/components/component-library/icon/icon.js +++ b/ui/components/component-library/icon/deprecated/icon.js @@ -2,13 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import Box from '../../ui/box/box'; +import Box from '../../../ui/box/box'; import { Size, IconColor, DISPLAY, -} from '../../../helpers/constants/design-system'; +} from '../../../../helpers/constants/design-system'; import { ICON_SIZES, ICON_NAMES } from './icon.constants'; diff --git a/ui/components/component-library/icon/icon.test.js b/ui/components/component-library/icon/deprecated/icon.test.js similarity index 98% rename from ui/components/component-library/icon/icon.test.js rename to ui/components/component-library/icon/deprecated/icon.test.js index 1800e8486c21..854c69bb0266 100644 --- a/ui/components/component-library/icon/icon.test.js +++ b/ui/components/component-library/icon/deprecated/icon.test.js @@ -1,7 +1,7 @@ /* eslint-disable jest/require-top-level-describe */ import { render } from '@testing-library/react'; import React from 'react'; -import { Size, IconColor } from '../../../helpers/constants/design-system'; +import { Size, IconColor } from '../../../../helpers/constants/design-system'; import { ICON_NAMES } from './icon.constants'; import { Icon } from './icon'; diff --git a/ui/components/component-library/icon/index.js b/ui/components/component-library/icon/deprecated/index.js similarity index 100% rename from ui/components/component-library/icon/index.js rename to ui/components/component-library/icon/deprecated/index.js diff --git a/ui/components/component-library/icon/icon.constants.js b/ui/components/component-library/icon/icon.constants.js deleted file mode 100644 index 8053fa2b5bd4..000000000000 --- a/ui/components/component-library/icon/icon.constants.js +++ /dev/null @@ -1,24 +0,0 @@ -import { Size } from '../../../helpers/constants/design-system'; - -/** - * The ICON_NAMES object contains all the possible icon names. - * - * Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-icon--default-story - * - * Add an icon: https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#adding-a-new-icon - * - * ICON_NAMES is generated using svgs in app/images/icons and - * the generateIconNames script in development/generate-icon-names.js - * then stored as an environment variable - */ - -/* eslint-disable prefer-destructuring*/ // process.env is not a standard JavaScript object, so we are not able to use object destructuring -export const ICON_NAMES = JSON.parse(process.env.ICON_NAMES); -export const ICON_SIZES = { - XS: Size.XS, - SM: Size.SM, - MD: Size.MD, - LG: Size.LG, - XL: Size.XL, - AUTO: Size.inherit, -}; diff --git a/ui/components/component-library/icon/icon.stories.js b/ui/components/component-library/icon/icon.stories.tsx similarity index 78% rename from ui/components/component-library/icon/icon.stories.js rename to ui/components/component-library/icon/icon.stories.tsx index 9054245205b8..b3523d2df125 100644 --- a/ui/components/component-library/icon/icon.stories.js +++ b/ui/components/component-library/icon/icon.stories.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; + import { - Size, AlignItems, DISPLAY, IconColor, @@ -20,91 +21,38 @@ import Box from '../../ui/box/box'; import { ButtonIcon, ButtonLink, - ICON_NAMES, - ICON_SIZES, - Icon, Label, Text, TextField, TextFieldSearch, + TEXT_FIELD_SIZES, + BUTTON_ICON_SIZES, + BUTTON_LINK_SIZES, } from '..'; -import README from './README.mdx'; +import { Icon } from './icon'; +import { IconName, IconSize } from './icon.types'; -const marginSizeControlOptions = [ - undefined, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11, - 12, - 'auto', -]; +import README from './README.mdx'; export default { title: 'Components/ComponentLibrary/Icon', - component: Icon, parameters: { docs: { page: README, }, }, - argTypes: { - name: { - control: 'select', - options: Object.values(ICON_NAMES), - }, - size: { - control: 'select', - options: Object.values(ICON_SIZES), - }, - color: { - control: 'select', - options: Object.values(IconColor), - }, - className: { - control: 'text', - }, - marginTop: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - marginRight: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - marginBottom: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - marginLeft: { - options: marginSizeControlOptions, - control: 'select', - table: { category: 'box props' }, - }, - }, args: { - name: ICON_NAMES.ADD_SQUARE, + name: IconName.AddSquare, color: IconColor.inherit, - size: Size.MD, + size: IconSize.Md, }, -}; +} as ComponentMeta; -export const DefaultStory = (args) => { +export const DefaultStory: ComponentStory = (args) => { const [search, setSearch] = useState(''); - const iconList = Object.keys(ICON_NAMES) + const iconList = Object.keys(IconName) .filter( (item) => search === '' || @@ -138,7 +86,7 @@ export const DefaultStory = (args) => { flexDirection={FLEX_DIRECTION.COLUMN} > {/* TODO replace with FormTextField */} - + { return ( { padding={4} key={item} > - + { backgroundColor={BackgroundColor.backgroundAlternative} endAccessory={ { No matches. Please try again or ask in the{' '} { }; DefaultStory.storyName = 'Default'; -export const Name = (args) => ( +export const Name: ComponentStory = (args) => ( <> - {Object.keys(ICON_NAMES).map((item) => { + {Object.keys(IconName).map((item) => { return ( ( padding={4} key={item} > - + ); })} @@ -244,7 +192,7 @@ export const Name = (args) => ( ); -export const SizeStory = (args) => ( +export const SizeStory: ComponentStory = (args) => ( <> ( gap={1} marginBottom={4} > - - - - - + + + + + inherits the font-size of the parent element.{' '} - + inherits the font-size of the parent element.{' '} - + inherits the font-size of the parent element.{' '} - + inherits the font-size of the parent element.{' '} - + inherits the font-size of the parent element.{' '} - + inherits the font-size of the parent element.{' '} - + inherits the font-size of the parent element.{' '} - + inherits the font-size of the parent element.{' '} - + ); SizeStory.storyName = 'Size'; -export const ColorStory = (args) => ( +export const ColorStory: ComponentStory = (args) => ( @@ -379,7 +327,7 @@ export const LayoutAndSpacing = () => ( @@ -397,7 +345,7 @@ export const LayoutAndSpacing = () => ( 0x79fAaFe7B6D5DB5D8c63FE88DFF0AF1Fe53358db @@ -410,22 +358,18 @@ export const LayoutAndSpacing = () => ( borderColor={BorderColor.borderMuted} backgroundColor={BackgroundColor.backgroundDefault} > - + Create account
{' '} diff --git a/ui/components/component-library/icon/icon.test.tsx b/ui/components/component-library/icon/icon.test.tsx new file mode 100644 index 000000000000..32174a8a472c --- /dev/null +++ b/ui/components/component-library/icon/icon.test.tsx @@ -0,0 +1,141 @@ +/* eslint-disable jest/require-top-level-describe */ +import { render } from '@testing-library/react'; +import React from 'react'; +import { IconColor } from '../../../helpers/constants/design-system'; +import { IconName, IconSize } from './icon.types'; +import { Icon } from './icon'; + +describe('Icon', () => { + it('should render correctly', () => { + const { getByTestId, container } = render( + , + ); + expect(getByTestId('icon')).toBeDefined(); + expect(container.querySelector('svg')).toBeDefined(); + expect(container).toMatchSnapshot(); + }); + it('should render with a custom class', () => { + const { getByTestId } = render( + , + ); + expect(getByTestId('icon')).toHaveClass('test-class'); + }); + it('should render with an aria-label attribute', () => { + /** + * We aren't specifically adding an ariaLabel prop because in most cases + * the icon should be decorative or be accompanied by text. Also if the icon + * is to be used as a button in most cases ButtonIcon should be used. However + * we should test if it's possible to pass an aria-label attribute to the + * root html element. + */ + const { getByTestId } = render( + , + ); + expect(getByTestId('icon')).toHaveAttribute( + 'aria-label', + 'test aria label', + ); + }); + it('should render with different icons using mask-image and image urls', () => { + const { getByTestId } = render( + <> + + + + + , + ); + expect(window.getComputedStyle(getByTestId('add-square')).maskImage).toBe( + `url('./images/icons/add-square.svg')`, + ); + expect(window.getComputedStyle(getByTestId('bank')).maskImage).toBe( + `url('./images/icons/bank.svg')`, + ); + expect(window.getComputedStyle(getByTestId('bookmark')).maskImage).toBe( + `url('./images/icons/bookmark.svg')`, + ); + expect(window.getComputedStyle(getByTestId('calculator')).maskImage).toBe( + `url('./images/icons/calculator.svg')`, + ); + }); + it('should render with different size classes', () => { + const { getByTestId } = render( + <> + + + + + + + , + ); + expect(getByTestId('icon-xs')).toHaveClass('mm-icon--size-xs'); + expect(getByTestId('icon-sm')).toHaveClass('mm-icon--size-sm'); + expect(getByTestId('icon-md')).toHaveClass('mm-icon--size-md'); + expect(getByTestId('icon-lg')).toHaveClass('mm-icon--size-lg'); + expect(getByTestId('icon-xl')).toHaveClass('mm-icon--size-xl'); + expect(getByTestId('icon-inherit')).toHaveClass('mm-icon--size-inherit'); + }); + it('should render with icon colors', () => { + const { getByTestId } = render( + <> + + + + , + ); + expect(getByTestId('icon-color-default')).toHaveClass( + 'box--color-icon-default', + ); + expect(getByTestId('icon-color-alternative')).toHaveClass( + 'box--color-icon-alternative', + ); + expect(getByTestId('icon-color-muted')).toHaveClass( + 'box--color-icon-muted', + ); + }); +}); diff --git a/ui/components/component-library/icon/icon.tsx b/ui/components/component-library/icon/icon.tsx new file mode 100644 index 000000000000..1140aae3fe8e --- /dev/null +++ b/ui/components/component-library/icon/icon.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import classnames from 'classnames'; + +import Box from '../../ui/box/box'; + +import { IconColor, DISPLAY } from '../../../helpers/constants/design-system'; + +import { IconProps, IconSize } from './icon.types'; + +export const Icon = ({ + name, + size = IconSize.Md, + color = IconColor.inherit, + className = '', + style, + ...props +}: IconProps) => ( + +); diff --git a/ui/components/component-library/icon/icon.types.ts b/ui/components/component-library/icon/icon.types.ts new file mode 100644 index 000000000000..80bfea9b9134 --- /dev/null +++ b/ui/components/component-library/icon/icon.types.ts @@ -0,0 +1,178 @@ +import type { BoxProps } from '../../ui/box/box.d'; +import { IconColor } from '../../../helpers/constants/design-system'; + +export enum IconSize { + Xs = 'xs', + Sm = 'sm', + Md = 'md', + Lg = 'lg', + Xl = 'xl', + Inherit = 'inherit', +} + +/** + * The IconName enum contains all the possible icon names. + * + * Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-icon--default-story + * + * Add an icon: https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#adding-a-new-icon + * + */ + +export enum IconName { + AddSquare = 'add-square', + Add = 'add', + Arrow2Down = 'arrow-2-down', + Arrow2Left = 'arrow-2-left', + Arrow2Right = 'arrow-2-right', + Arrow2Up = 'arrow-2-up', + ArrowDoubleLeft = 'arrow-double-left', + ArrowDoubleRight = 'arrow-double-right', + ArrowDown = 'arrow-down', + ArrowLeft = 'arrow-left', + ArrowRight = 'arrow-right', + ArrowUp = 'arrow-up', + BankToken = 'bank-token', + Bank = 'bank', + Book = 'book', + Bookmark = 'bookmark', + Bridge = 'bridge', + Calculator = 'calculator', + CardPos = 'card-pos', + CardToken = 'card-token', + Card = 'card', + Category = 'category', + Chart = 'chart', + Check = 'check', + Clock = 'clock', + Close = 'close', + CodeCircle = 'code-circle', + Coin = 'coin', + Confirmation = 'confirmation', + Connect = 'connect', + CopySuccess = 'copy-success', + Copy = 'copy', + Danger = 'danger', + Dark = 'dark', + Data = 'data', + Diagram = 'diagram', + DocumentCode = 'document-code', + Edit = 'edit', + Eraser = 'eraser', + Ethereum = 'ethereum', + Expand = 'expand', + Explore = 'explore', + Export = 'export', + EyeSlash = 'eye-slash', + Eye = 'eye', + Filter = 'filter', + Flag = 'flag', + FlashSlash = 'flash-slash', + Flash = 'flash', + FullCircle = 'full-circle', + Gas = 'gas', + GlobalSearch = 'global-search', + Global = 'global', + Graph = 'graph', + Hardware = 'hardware', + Heart = 'heart', + Hierarchy = 'hierarchy', + Home = 'home', + Import = 'import', + Info = 'info', + Key = 'key', + Light = 'light', + Link = 'link', + Loading = 'loading', + LockCircle = 'lock-circle', + LockSlash = 'lock-slash', + Lock = 'lock', + Login = 'login', + Logout = 'logout', + Menu = 'menu', + MessageQuestion = 'message-question', + Messages = 'messages', + MinusSquare = 'minus-square', + Minus = 'minus', + Mobile = 'mobile', + Money = 'money', + Monitor = 'monitor', + MoreHorizontal = 'more-horizontal', + MoreVertical = 'more-vertical', + NotificationCircle = 'notification-circle', + Notification = 'notification', + PasswordCheck = 'password-check', + People = 'people', + ProgrammingArrows = 'programming-arrows', + Question = 'question', + Received = 'received', + Refresh = 'refresh', + Save = 'save', + ScanBarcode = 'scan-barcode', + ScanFocus = 'scan-focus', + Scan = 'scan', + Scroll = 'scroll', + Search = 'search', + SecurityCard = 'security-card', + SecurityCross = 'security-cross', + SecurityKey = 'security-key', + SecuritySearch = 'security-search', + SecuritySlash = 'security-slash', + SecurityTick = 'security-tick', + SecurityTime = 'security-time', + SecurityUser = 'security-user', + Security = 'security', + Send1 = 'send-1', + Send2 = 'send-2', + Setting = 'setting', + Slash = 'slash', + SnapsMobile = 'snaps-mobile', + SnapsPlus = 'snaps-plus', + Snaps = 'snaps', + Speedometer = 'speedometer', + Star = 'star', + Student = 'student', + SwapHorizontal = 'swap-horizontal', + SwapVertical = 'swap-vertical', + Tag = 'tag', + Tilde = 'tilde', + Timer = 'timer', + Trash = 'trash', + TrendDown = 'trend-down', + TrendUp = 'trend-up', + UserCircleAdd = 'user-circle-add', + UserCircle = 'user-circle', + User = 'user', + WalletCard = 'wallet-card', + WalletMoney = 'wallet-money', + Wallet = 'wallet', + Warning = 'warning', +} + +export interface IconProps extends BoxProps { + /** + * The name of the icon to display. Use the IconName enum + * Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-icon--default-story + */ + name: IconName; + /** + * The size of the Icon. + * Possible values could be IconSize.Xs (12px), IconSize.Sm (16px), IconSize.Md (20px), IconSize.Lg (24px), IconSize.Xl (32px), IconSize.Inherit (inherits font-size). + * Default value is IconSize.Md (20px). + */ + size?: IconSize; + /** + * The color of the icon. + * Defaults to IconColor.inherit. + */ + color?: IconColor; + /** + * An additional className to apply to the icon. + */ + className?: string; + /** + * Addition style properties to apply to the icon. + * The Icon component uses inline styles to apply the icon's mask-image so be wary of overriding + */ + style?: React.CSSProperties; +} diff --git a/ui/components/component-library/icon/index.ts b/ui/components/component-library/icon/index.ts new file mode 100644 index 000000000000..d122b469668b --- /dev/null +++ b/ui/components/component-library/icon/index.ts @@ -0,0 +1,3 @@ +export { Icon } from './icon'; +export { IconName, IconSize } from './icon.types'; +export type { IconProps } from './icon.types'; diff --git a/ui/components/component-library/index.js b/ui/components/component-library/index.js index f9ad8d34b499..623ff7ca2ace 100644 --- a/ui/components/component-library/index.js +++ b/ui/components/component-library/index.js @@ -23,7 +23,7 @@ export { ButtonSecondary, BUTTON_SECONDARY_SIZES } from './button-secondary'; export { FormTextField } from './form-text-field'; export { HeaderBase } from './header-base'; export { HelpText } from './help-text'; -export { Icon, ICON_NAMES, ICON_SIZES } from './icon'; +export { Icon, IconName, IconSize } from './icon'; export { Label } from './label'; export { PickerNetwork } from './picker-network'; export { Tag } from './tag'; diff --git a/ui/components/component-library/label/README.mdx b/ui/components/component-library/label/README.mdx index 1d1ca3259c37..8e518775b3d2 100644 --- a/ui/components/component-library/label/README.mdx +++ b/ui/components/component-library/label/README.mdx @@ -32,7 +32,8 @@ The `children` of the label can be text or a react node ```jsx import { DISPLAY, AlignItems, FLEX_DIRECTION, Size, IconColor } from '../../../helpers/constants/design-system'; -import { Label, TextField, Icon, ICON_NAMES } from '../../component-library'; +import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated'; +import { Label, TextField } from '../../component-library';