From 7a8d0273a07081696f9512d9c41419742a46c7b3 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 4 Apr 2023 08:15:50 -0700 Subject: [PATCH 1/7] Don't include document in scuttling config for mv3 builds (#18356) * Don't include document in scuttling config for mv3 builds * Fix env var comparison * lint fix --- development/build/config.js | 1 + development/build/scripts.js | 23 ++++++++++++++++++----- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/development/build/config.js b/development/build/config.js index e07707caa..ef053a7ac 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 7d6626050..55323a454 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, From 6e40a0eb7ec48889815ea9691e1d389f7677b2c4 Mon Sep 17 00:00:00 2001 From: OGPoyraz Date: Tue, 4 Apr 2023 17:25:57 +0200 Subject: [PATCH 2/7] feat: use siwe detection from @metamask/controller-utils (#18409) --- app/scripts/controllers/sign.test.ts | 38 ---- app/scripts/controllers/sign.ts | 10 +- .../lib/createRPCMethodTrackingMiddleware.js | 3 +- .../createRPCMethodTrackingMiddleware.test.js | 4 +- lavamoat/browserify/beta/policy.json | 195 ++++++++-------- lavamoat/browserify/desktop/policy.json | 212 ++++++++++-------- lavamoat/browserify/flask/policy.json | 212 ++++++++++-------- lavamoat/browserify/main/policy.json | 195 ++++++++-------- package.json | 5 +- shared/modules/siwe.js | 52 ----- yarn.lock | 17 +- 11 files changed, 447 insertions(+), 496 deletions(-) diff --git a/app/scripts/controllers/sign.test.ts b/app/scripts/controllers/sign.test.ts index 7212df2ae..36dddf65b 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 afaeaa499..e04d70c09 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 cd3b9720a..c0fc09e24 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 342fd320a..070ad12b2 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/lavamoat/browserify/beta/policy.json b/lavamoat/browserify/beta/policy.json index 98b889720..dd174c63d 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 5967ac0ac..fa9312ae5 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/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": { @@ -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 5967ac0ac..fa9312ae5 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/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": { @@ -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 98b889720..dd174c63d 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 95d04fb04..6dc22b4da 100644 --- a/package.json +++ b/package.json @@ -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", @@ -273,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", diff --git a/shared/modules/siwe.js b/shared/modules/siwe.js index 6edbc7d75..5d719d243 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/yarn.lock b/yarn.lock index da88ae8bb..31bf1eb1b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4036,18 +4036,18 @@ __metadata: languageName: node linkType: hard -"@metamask/message-manager@npm:^2.0.0": - version: 2.0.0 - resolution: "@metamask/message-manager@npm:2.0.0" +"@metamask/message-manager@npm:^2.1.0": + version: 2.1.0 + resolution: "@metamask/message-manager@npm:2.1.0" dependencies: "@metamask/base-controller": ^2.0.0 - "@metamask/controller-utils": ^3.0.0 + "@metamask/controller-utils": ^3.1.0 "@types/uuid": ^8.3.0 eth-sig-util: ^3.0.0 ethereumjs-util: ^7.0.10 jsonschema: ^1.2.4 uuid: ^8.3.2 - checksum: f130b5c58fbbb5ccd69da32cfa43839a09dec906974c6d0f6e2d46f15d1a872c564b0c880aac2979b7ffc8d00bcf328bf1989cb133cc41bc612e1e6e16ef9ef5 + checksum: f3a233a84aec73051f8f1183dab32c4d9a976edaa3c6461b118a8e6f20cf43f8757827ad6c877aed635ef850944ce054af03b34592f5b72f5d0667fa8b179dc9 languageName: node linkType: hard @@ -5117,7 +5117,7 @@ __metadata: languageName: node linkType: hard -"@spruceid/siwe-parser@npm:1.1.3, @spruceid/siwe-parser@npm:^1.1.3": +"@spruceid/siwe-parser@npm:1.1.3": version: 1.1.3 resolution: "@spruceid/siwe-parser@npm:1.1.3" dependencies: @@ -24283,7 +24283,7 @@ __metadata: "@metamask/auto-changelog": ^2.1.0 "@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/eslint-config": ^9.0.0 @@ -24303,7 +24303,7 @@ __metadata: "@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 @@ -24334,7 +24334,6 @@ __metadata: "@sentry/integrations": ^6.0.0 "@sentry/types": ^6.0.1 "@sentry/utils": ^6.0.1 - "@spruceid/siwe-parser": ^1.1.3 "@storybook/addon-a11y": ^6.5.13 "@storybook/addon-actions": ^6.5.13 "@storybook/addon-essentials": ^6.5.13 From 739075662cf7ee295f397091fa5a2ee69702d639 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Tue, 4 Apr 2023 09:48:04 -0700 Subject: [PATCH 3/7] Migrating Icon to typescript and deprecating JS component (#18431) * Migrating Icon to typescript and deprecating JS component * gw suggestions (#18434) --------- Co-authored-by: Garrett Bear --- .../account-menu/account-menu.component.js | 6 +- ui/components/app/add-network/add-network.js | 7 +- .../app/add-network/add-network.stories.js | 1 - .../approve-content-card.stories.js | 2 +- .../app/asset-list-item/asset-list-item.js | 6 +- ui/components/app/beta-header/index.js | 6 +- ...confirm-page-container-header.component.js | 2 +- .../confirmation-warning-modal.js | 7 +- ...nnected-accounts-list-options.component.js | 3 +- .../connected-accounts-list.component.js | 2 +- .../custom-spending-cap-tooltip.js | 6 +- .../custom-spending-cap.js | 3 +- .../app/dropdowns/network-dropdown.js | 5 +- .../edit-gas-fee-button.js | 6 +- ui/components/app/flask/copyable/copyable.js | 6 +- .../flask/snap-authorship/snap-authorship.js | 5 +- .../app/flask/snap-avatar/snap-avatar.js | 6 +- .../snap-content-footer.js | 2 +- .../flask/snap-delineator/snap-delineator.js | 5 +- .../snap-install-warning.js | 3 +- .../app/menu-bar/account-options-menu.js | 2 +- ui/components/app/menu-bar/menu-bar.js | 3 +- .../contract-details-modal.js | 3 +- .../customize-nonce.component.js | 6 +- .../edit-approval-permission.component.js | 6 +- .../hold-to-reveal-modal.js | 2 +- .../new-account-modal.component.js | 3 +- .../transaction-confirmed.component.js | 6 +- .../app/network-display/network-display.js | 6 +- ui/components/app/nft-details/nft-details.js | 3 +- ui/components/app/nft-options/nft-options.js | 3 +- ui/components/app/nfts-items/nfts-items.js | 2 +- .../app/permission-cell/permission-cell.js | 5 +- .../selected-account.component.js | 6 +- .../set-approval-for-all-warning.js | 2 +- .../signature-request-original-warning.js | 2 +- .../signature-request-siwe-icon/index.js | 2 +- ui/components/app/tab-bar/tab-bar.js | 6 +- ui/components/app/tab-bar/tab-bar.stories.js | 2 +- ...transaction-activity-log-icon.component.js | 6 +- .../copy-raw-data/copy-raw-data.component.js | 5 +- .../app/wallet-overview/eth-overview.js | 8 +- .../app/wallet-overview/token-overview.js | 2 +- .../avatar-base/avatar-base.stories.js | 2 +- .../avatar-favicon/avatar-favicon.js | 2 +- .../avatar-icon/avatar-icon.js | 2 +- .../avatar-icon/avatar-icon.stories.js | 2 +- .../avatar-icon/avatar-icon.test.js | 2 +- .../badge-wrapper/README.mdx | 7 +- .../badge-wrapper/badge-wrapper.stories.tsx | 7 +- .../banner-alert/banner-alert.js | 3 +- .../banner-alert/banner-alert.stories.js | 3 +- .../component-library/banner-base/README.mdx | 3 +- .../banner-base/banner-base.js | 4 +- .../banner-base/banner-base.stories.js | 3 +- .../banner-base/banner-base.test.js | 2 +- .../banner-tip/banner-tip.stories.js | 3 +- .../button-base/button-base.js | 2 +- .../button-base/button-base.stories.js | 3 +- .../button-base/button-base.test.js | 2 +- .../button-icon/button-icon.js | 2 +- .../button-icon/button-icon.stories.js | 2 +- .../button-icon/button-icon.test.js | 2 +- .../button-link/button-link.stories.js | 2 +- .../button-link/button-link.test.js | 2 +- .../button-primary/button-primary.stories.js | 2 +- .../button-primary/button-primary.test.js | 2 +- .../button-secondary.stories.js | 2 +- .../button-secondary/button-secondary.test.js | 2 +- .../button/button.stories.js | 2 +- .../component-library/button/button.test.js | 2 +- .../form-text-field/README.mdx | 3 +- .../form-text-field.stories.js | 4 +- .../component-library/header-base/README.mdx | 19 +- .../header-base/header-base.stories.tsx | 24 +-- .../header-base/header-base.test.tsx | 6 +- .../component-library/help-text/README.mdx | 3 +- .../help-text/help-text.stories.js | 2 +- .../help-text/help-text.test.js | 2 +- .../component-library/icon/README.mdx | 104 +++++----- .../{icon.test.js.snap => icon.test.tsx.snap} | 0 .../__snapshots__/icon.test.js.snap | 11 ++ .../icon/deprecated/icon.constants.js | 23 +++ .../icon/{ => deprecated}/icon.js | 4 +- .../icon/{ => deprecated}/icon.test.js | 2 +- .../icon/{ => deprecated}/index.js | 0 .../component-library/icon/icon.constants.js | 24 --- .../{icon.stories.js => icon.stories.tsx} | 146 +++++--------- .../component-library/icon/icon.test.tsx | 141 ++++++++++++++ ui/components/component-library/icon/icon.tsx | 35 ++++ .../component-library/icon/icon.types.ts | 178 ++++++++++++++++++ ui/components/component-library/icon/index.ts | 3 + ui/components/component-library/index.js | 2 +- .../component-library/label/README.mdx | 3 +- .../component-library/label/label.stories.js | 3 +- .../component-library/label/label.test.js | 2 +- .../picker-network/picker-network.js | 2 +- .../component-library/tag-url/tag-url.js | 2 +- .../text-field-search/text-field-search.js | 2 +- .../component-library/text-field/README.mdx | 3 +- .../text-field/text-field.stories.js | 4 +- .../account-list-item-menu.js | 3 +- .../account-list-item/account-list-item.js | 6 +- .../account-list-menu/account-list-menu.js | 8 +- .../account-picker/account-picker.js | 3 +- .../address-copy-button.js | 3 +- .../multichain/global-menu/global-menu.js | 2 +- .../multichain-connected-site-menu.js | 3 +- .../multichain-import-token-link.js | 3 +- .../network-list-item/network-list-item.js | 8 +- ui/components/ui/callout/callout.js | 6 +- .../contract-token-values.js | 3 +- ui/components/ui/disclosure/disclosure.js | 2 +- ui/components/ui/dropdown/dropdown.js | 6 +- .../ui/editable-label/editable-label.js | 3 +- .../error-message/error-message.component.js | 2 +- .../ui/form-field/form-field.stories.js | 2 +- ui/components/ui/menu/menu-item.js | 3 +- ui/components/ui/menu/menu.stories.js | 2 +- .../ui/new-network-info/new-network-info.js | 2 +- .../nickname-popover.component.js | 6 +- ui/components/ui/popover/popover.component.js | 5 +- ui/components/ui/qr-code/qr-code.js | 6 +- .../review-spending-cap.js | 4 +- .../sender-to-recipient.component.js | 2 +- ui/helpers/constants/settings.js | 2 +- ui/helpers/utils/permission.js | 2 +- ui/pages/add-nft/add-nft.js | 4 +- ui/pages/asset/components/asset-breadcrumb.js | 2 +- ui/pages/asset/components/asset-options.js | 3 +- .../confirm-approve-content.component.js | 5 +- .../confirm-decrypt-message.component.js | 5 +- ui/pages/confirmation/confirmation.js | 5 +- ui/pages/home/home.component.js | 5 +- .../compliance-feature-page.js | 5 +- ui/pages/notifications/notifications.js | 4 +- .../create-password/create-password.js | 5 +- .../metametrics/metametrics.js | 2 +- .../privacy-settings/privacy-settings.js | 3 +- .../recovery-phrase/review-recovery-phrase.js | 5 +- .../skip-srp-backup-popover.js | 2 +- .../permissions-connect.component.js | 2 +- .../permissions-redirect.component.js | 2 +- .../add-recipient/add-recipient.component.js | 5 +- .../add-recipient/domain-input.component.js | 4 +- .../contact-list-tab.component.js | 2 +- .../view-contact/view-contact.component.js | 5 +- .../flask/snaps-list-tab/snap-list-tab.js | 8 +- .../custom-content-search.js | 5 +- .../networks-list-item/networks-list-item.js | 2 +- .../settings-search-list.js | 5 +- .../settings-search/settings-search.js | 5 +- ui/pages/settings/settings.component.js | 4 +- ui/pages/token-allowance/token-allowance.js | 5 +- ui/pages/token-details/token-details-page.js | 4 +- 155 files changed, 832 insertions(+), 389 deletions(-) rename ui/components/component-library/icon/__snapshots__/{icon.test.js.snap => icon.test.tsx.snap} (100%) create mode 100644 ui/components/component-library/icon/deprecated/__snapshots__/icon.test.js.snap create mode 100644 ui/components/component-library/icon/deprecated/icon.constants.js rename ui/components/component-library/icon/{ => deprecated}/icon.js (94%) rename ui/components/component-library/icon/{ => deprecated}/icon.test.js (98%) rename ui/components/component-library/icon/{ => deprecated}/index.js (100%) delete mode 100644 ui/components/component-library/icon/icon.constants.js rename ui/components/component-library/icon/{icon.stories.js => icon.stories.tsx} (78%) create mode 100644 ui/components/component-library/icon/icon.test.tsx create mode 100644 ui/components/component-library/icon/icon.tsx create mode 100644 ui/components/component-library/icon/icon.types.ts create mode 100644 ui/components/component-library/icon/index.ts diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index c20b83e5c..e11980489 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 48eaa711d..83ec791b9 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 02d1904fe..37e61398b 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 ba8e7a3ba..6ae43c22c 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 a5cc5051f..3070308b3 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 72dffa006..12c922be6 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 f4574b468..1142c2558 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 d17c03b16..da40e850d 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 c304a0887..522de0097 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 fb580740a..e1c4750c7 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 6d1792fdc..b9113b2c1 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 be49b0409..0271403bb 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/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js index d101e5769..33f95e3b4 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 e7b16d903..378be5480 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 e682cdba3..2741fd6c4 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 996c01b77..760d42096 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 9a96527cc..81e101b81 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 d2c66b60e..aa5f385d1 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 a397f5bc9..de149ed6b 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 15c593c74..31365909f 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 b5469687b..076b5bc94 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 99afdf1c6..32ce255b3 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 c5d424841..6c6a5e7ec 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 9aa370eb9..0c4f8b4cb 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 bb4552e54..43602ba42 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 9d93d9da3..3368017e3 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 113e08058..5e05df4ea 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 e5863bf48..5899562d4 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 39ed11f9b..24519801b 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 116d0da35..3885126dd 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 a73ec1fd6..2241da905 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 e2ce133d7..0e865b1b8 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 1090b3958..ea87a381e 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 fd1e5b835..08746392e 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 93812f904..83baa2bde 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 05b4f2965..fc8ffc21d 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 ea34e3dc2..7ef015ab5 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 c76fba371..bcb97b80b 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 fb304c6ee..d7e08ed7c 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 23a79ee7c..3e253e621 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 a84003d75..8e1f62d93 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 e3be1754f..0d3b37d81 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 5f7d2cc05..c83a17f3b 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 9515ca09f..e30109eae 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 8400d0dfe..d7833298f 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 415cd1bfa..1c63eb48b 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 ba5c276a9..d7fa0194f 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 73d7fbbcc..8c81baa3f 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 f75c81115..f1fffdb3b 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 e2cf48034..35fc575c0 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 656685046..31a248c59 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 96a8fcee3..757a2792a 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 b02b7594c..3fce695a7 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 fe6ec1ffb..30180e0cc 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 c79a757e9..a9b60a265 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 94db0c02a..302aed58e 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 856143273..6008ed167 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 6f878c0ad..043d59655 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 9a9a8b749..4c07aac7e 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 b6b32aa77..a9e4fd6d9 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 bda5a27f4..b9eacd3ed 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 841975329..5c1b68579 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 5e650bd0e..d3a0bb3ff 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 e8aaf3191..b16c7c36f 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 2dd3d4138..6e4a0c445 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 14fc8fd85..06a331a59 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 e1e90c7f2..0e80573ce 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 be0fbe283..af974d796 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 e5a229941..ddc30a7de 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 a18b1f1e7..e09965177 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 ab8c671a5..9b7ea11c1 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 be26fe874..8ca56d49b 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 9d4ccec69..00171ab95 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 9652fb21a..5dd6b31a3 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 5f7a0d47f..86792b73a 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 d5a52c670..c76dec6f5 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 c6bfad966..0cd319058 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 000000000..a99ac6393 --- /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 000000000..6899c77be --- /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 52616dfcf..b3d66379f 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 1800e8486..854c69bb0 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 8053fa2b5..000000000 --- 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 905424520..b3523d2df 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 { Icon } from './icon'; +import { IconName, IconSize } from './icon.types'; + import README from './README.mdx'; -const marginSizeControlOptions = [ - undefined, - 0, - 1, - 2, - 3, - 4, - 5, - 6, - 7, - 8, - 9, - 10, - 11, - 12, - 'auto', -]; - 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 000000000..32174a8a4 --- /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 000000000..1140aae3f --- /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 000000000..80bfea9b9 --- /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 000000000..d122b4696 --- /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 f9ad8d34b..623ff7ca2 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 1d1ca3259..8e518775b 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'; )} diff --git a/ui/pages/permissions-connect/flask/snap-update/snap-update.js b/ui/pages/permissions-connect/flask/snap-update/snap-update.js index e6d6d7920..f31aabf09 100644 --- a/ui/pages/permissions-connect/flask/snap-update/snap-update.js +++ b/ui/pages/permissions-connect/flask/snap-update/snap-update.js @@ -135,6 +135,7 @@ export default function SnapUpdate({ approvedPermissions={approvedPermissions} revokedPermissions={revokedPermissions} newPermissions={newPermissions} + targetSubjectMetadata={targetSubjectMetadata} /> )} diff --git a/ui/pages/permissions-connect/flask/util.js b/ui/pages/permissions-connect/flask/util.js index 6711b98a5..0ded62e40 100644 --- a/ui/pages/permissions-connect/flask/util.js +++ b/ui/pages/permissions-connect/flask/util.js @@ -1,29 +1,18 @@ -import { isObject } from '@metamask/utils'; -import { PERMISSION_DESCRIPTIONS } from '../../../helpers/utils/permission'; +import { getPermissionDescription } from '../../../helpers/utils/permission'; export function getSnapInstallWarnings(permissions, targetSubjectMetadata, t) { const weightOneWarnings = Object.entries(permissions).reduce( (filteredWarnings, [permissionName, permissionValue]) => { - const permissionDescription = PERMISSION_DESCRIPTIONS[permissionName]({ + const permissionDescription = getPermissionDescription({ t, + permissionName, permissionValue, targetSubjectMetadata, }); - if (Array.isArray(permissionDescription)) { - permissionDescription.forEach((description) => { - if (description.weight === 1) { - const { id, message } = description; - filteredWarnings.push({ id, message }); - } - }); - } else if ( - isObject(permissionDescription) && - permissionDescription.weight === 1 - ) { - const { id, message } = permissionDescription; - filteredWarnings.push({ id, message }); - } - return filteredWarnings; + + return filteredWarnings.concat( + permissionDescription.filter((description) => description.weight === 1), + ); }, [], ); diff --git a/ui/pages/settings/flask/view-snap/view-snap.js b/ui/pages/settings/flask/view-snap/view-snap.js index d8f5b6e93..3261652d9 100644 --- a/ui/pages/settings/flask/view-snap/view-snap.js +++ b/ui/pages/settings/flask/view-snap/view-snap.js @@ -35,6 +35,7 @@ import { getSubjectsWithSnapPermission, getPermissions, getPermissionSubjects, + getTargetSubjectMetadata, } from '../../../../selectors'; import { formatDate } from '../../../../helpers/utils/util'; @@ -65,6 +66,9 @@ function ViewSnap() { (state) => snap && getPermissions(state, snap.id), ); const subjects = useSelector((state) => getPermissionSubjects(state)); + const targetSubjectMetadata = useSelector((state) => + getTargetSubjectMetadata(state, snap?.id), + ); const dispatch = useDispatch(); const onToggle = () => { @@ -180,6 +184,7 @@ function ViewSnap() {