From 0870530cb8c0e4269ca44ab902e68c4bb11f7e9b Mon Sep 17 00:00:00 2001 From: Tarik Gul <47201679+TarikGul@users.noreply.github.com> Date: Tue, 2 Jul 2024 08:22:50 -0700 Subject: [PATCH] Adjust ui imports for deterministic bundling (#1383) * Adjust ui imports for deterministic bundling * Update instructions in docs --- README.md | 17 ++++++++++++++++- .../src/background/handlers/Extension.ts | 2 +- .../src/background/handlers/State.ts | 2 +- .../src/background/handlers/Tabs.ts | 2 +- .../extension-ui/src/Popup/ImportLedger.tsx | 2 +- packages/extension-ui/src/Popup/index.tsx | 10 +++++----- .../extension-ui/src/components/Identicon.tsx | 2 +- .../extension-ui/src/components/contexts.tsx | 2 +- packages/extension-ui/src/hooks/useLedger.ts | 4 ++-- packages/extension-ui/src/i18n/i18n.ts | 8 ++++---- .../extension-ui/src/partials/MenuSettings.tsx | 2 +- packages/extension/src/background.ts | 2 +- 12 files changed, 35 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index d68a636245..17457dfd71 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,22 @@ Find out more about how to use the extension as a Dapp developper, cookbook, as 2. Install dependencies via `yarn install` 3. Build all packages via `yarn build` - The `/packages/extension/build` will contain the exact code used in the add-on -4. To regenerate the dst, and src compressed files run: `yarn build:zip` +4. To regenerate the dst, and src compressed files run: `yarn build:zip` + +## Ensuring `master-build` and `master-src` dont have any diffs (For maintainers) + +Summary: These are the steps to ensure the following builds don't have any diffs so that the firefox review goes smoothly. + +1. Run `yarn build` +2. Run `yarn build:zip` - This will generate a `master-build.zip`, and `master-src.zip`. +3. Move `master-src.zip`, and `master-build.zip` to its own enviornment/folder. +4. Uncompress `master-src.zip` to `master-zrc` and inside of `master-src` run `yarn && yarn build`. +5. Uncompress `master-build.zip` to `master-build`. +6. Now we can compare the two builds using `diff`, and `comm` + - Run `diff -qr /master-build /packages/extension/build | sort` +7. To sanity check important files (`background.js`, and `extension.js`) you can also run: + - `comm -23 <(sort /background.js) <(sort /packages/extension/build/background.js) > diff` + - `comm -23 <(sort /extension.js) <(sort /packages/extension/build/extension.js) > diff` ## Development version diff --git a/packages/extension-base/src/background/handlers/Extension.ts b/packages/extension-base/src/background/handlers/Extension.ts index db1d61b804..c497782aa8 100644 --- a/packages/extension-base/src/background/handlers/Extension.ts +++ b/packages/extension-base/src/background/handlers/Extension.ts @@ -15,7 +15,7 @@ import type State from './State.js'; import { ALLOWED_PATH, PASSWORD_EXPIRY_MS } from '@polkadot/extension-base/defaults'; import { metadataExpand } from '@polkadot/extension-chains'; import { TypeRegistry } from '@polkadot/types'; -import keyring from '@polkadot/ui-keyring'; +import { keyring } from '@polkadot/ui-keyring'; import { accounts as accountsObservable } from '@polkadot/ui-keyring/observable/accounts'; import { assert, isHex } from '@polkadot/util'; import { keyExtractSuri, mnemonicGenerate, mnemonicValidate } from '@polkadot/util-crypto'; diff --git a/packages/extension-base/src/background/handlers/State.ts b/packages/extension-base/src/background/handlers/State.ts index 6f69bf7d96..e288cc4c50 100644 --- a/packages/extension-base/src/background/handlers/State.ts +++ b/packages/extension-base/src/background/handlers/State.ts @@ -11,7 +11,7 @@ import { BehaviorSubject } from 'rxjs'; import { addMetadata, knownMetadata } from '@polkadot/extension-chains'; import { knownGenesis } from '@polkadot/networks/defaults'; -import settings from '@polkadot/ui-settings'; +import { settings } from '@polkadot/ui-settings'; import { assert } from '@polkadot/util'; import { MetadataStore } from '../../stores/index.js'; diff --git a/packages/extension-base/src/background/handlers/Tabs.ts b/packages/extension-base/src/background/handlers/Tabs.ts index d469b01413..a8783507ca 100644 --- a/packages/extension-base/src/background/handlers/Tabs.ts +++ b/packages/extension-base/src/background/handlers/Tabs.ts @@ -14,7 +14,7 @@ import type { AuthResponse } from './State.js'; import type State from './State.js'; import { checkIfDenied } from '@polkadot/phishing'; -import keyring from '@polkadot/ui-keyring'; +import { keyring } from '@polkadot/ui-keyring'; import { accounts as accountsObservable } from '@polkadot/ui-keyring/observable/accounts'; import { assert, isNumber } from '@polkadot/util'; diff --git a/packages/extension-ui/src/Popup/ImportLedger.tsx b/packages/extension-ui/src/Popup/ImportLedger.tsx index 07d5e7449e..0c75c8dba3 100644 --- a/packages/extension-ui/src/Popup/ImportLedger.tsx +++ b/packages/extension-ui/src/Popup/ImportLedger.tsx @@ -7,7 +7,7 @@ import { faSync } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; -import settings from '@polkadot/ui-settings'; +import { settings } from '@polkadot/ui-settings'; import { ActionContext, Address, Button, ButtonArea, Dropdown, VerticalSpace, Warning } from '../components/index.js'; import { useLedger, useTranslation } from '../hooks/index.js'; diff --git a/packages/extension-ui/src/Popup/index.tsx b/packages/extension-ui/src/Popup/index.tsx index 41bc6431d3..a489029aca 100644 --- a/packages/extension-ui/src/Popup/index.tsx +++ b/packages/extension-ui/src/Popup/index.tsx @@ -9,7 +9,7 @@ import { Route, Switch, useHistory } from 'react-router'; import { PHISHING_PAGE_REDIRECT } from '@polkadot/extension-base/defaults'; import { canDerive } from '@polkadot/extension-base/utils'; -import uiSettings from '@polkadot/ui-settings'; +import { settings } from '@polkadot/ui-settings'; import { AccountContext, ActionContext, AuthorizeReqContext, MediaContext, MetadataReqContext, SettingsContext, SigningReqContext } from '../components/contexts.js'; import { ErrorBoundary, Loading } from '../components/index.js'; @@ -34,7 +34,7 @@ import PhishingDetected from './PhishingDetected.js'; import RestoreJson from './RestoreJson.js'; import Welcome from './Welcome.js'; -const startSettings = uiSettings.get(); +const startSettings = settings.get(); // Request permission for video, based on access we can hide/show import async function requestMediaAccess (cameraOn: boolean): Promise { @@ -105,9 +105,9 @@ export default function Popup (): React.ReactElement { subscribeSigningRequests(setSignRequests) ]).catch(console.error); - uiSettings.on('change', (settings): void => { - setSettingsCtx(settings); - setCameraOn(settings.camera === 'on'); + settings.on('change', (uiSettings): void => { + setSettingsCtx(uiSettings); + setCameraOn(uiSettings.camera === 'on'); }); _onAction(); diff --git a/packages/extension-ui/src/components/Identicon.tsx b/packages/extension-ui/src/components/Identicon.tsx index b956241b20..17d05f5252 100644 --- a/packages/extension-ui/src/components/Identicon.tsx +++ b/packages/extension-ui/src/components/Identicon.tsx @@ -5,7 +5,7 @@ import type { IconTheme } from '@polkadot/react-identicon/types'; import React from 'react'; -import Icon from '@polkadot/react-identicon'; +import { Identicon as Icon } from '@polkadot/react-identicon'; import { styled } from '../styled.js'; diff --git a/packages/extension-ui/src/components/contexts.tsx b/packages/extension-ui/src/components/contexts.tsx index 449ab6b9ef..57e9bb17dc 100644 --- a/packages/extension-ui/src/components/contexts.tsx +++ b/packages/extension-ui/src/components/contexts.tsx @@ -7,7 +7,7 @@ import type { Theme } from './themes.js'; import React from 'react'; -import settings from '@polkadot/ui-settings'; +import { settings } from '@polkadot/ui-settings'; const noop = (): void => undefined; diff --git a/packages/extension-ui/src/hooks/useLedger.ts b/packages/extension-ui/src/hooks/useLedger.ts index 908da91b7d..4239d0f660 100644 --- a/packages/extension-ui/src/hooks/useLedger.ts +++ b/packages/extension-ui/src/hooks/useLedger.ts @@ -6,7 +6,7 @@ import type { Network } from '@polkadot/networks/types'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { Ledger } from '@polkadot/hw-ledger'; -import uiSettings from '@polkadot/ui-settings'; +import { settings } from '@polkadot/ui-settings'; import { assert } from '@polkadot/util'; import ledgerChains from '../util/legerChains.js'; @@ -36,7 +36,7 @@ function getState (): StateBase { return { isLedgerCapable, - isLedgerEnabled: isLedgerCapable && uiSettings.ledgerConn !== 'none' + isLedgerEnabled: isLedgerCapable && settings.ledgerConn !== 'none' }; } diff --git a/packages/extension-ui/src/i18n/i18n.ts b/packages/extension-ui/src/i18n/i18n.ts index 2ad6d15e8d..c1e2b96476 100644 --- a/packages/extension-ui/src/i18n/i18n.ts +++ b/packages/extension-ui/src/i18n/i18n.ts @@ -4,7 +4,7 @@ import i18next from 'i18next'; import { initReactI18next } from 'react-i18next'; -import uiSettings from '@polkadot/ui-settings'; +import { settings } from '@polkadot/ui-settings'; import Backend from './Backend.js'; @@ -19,7 +19,7 @@ i18next escapeValue: false }, keySeparator: false, - lng: uiSettings.i18nLang, + lng: settings.i18nLang, load: 'languageOnly', nsSeparator: false, returnEmptyString: false, @@ -29,8 +29,8 @@ i18next console.log('i18n: failure', error) ); -uiSettings.on('change', (settings): void => { - i18next.changeLanguage(settings.i18nLang +settings.on('change', (uiSettings): void => { + i18next.changeLanguage(uiSettings.i18nLang ).catch(console.error); }); diff --git a/packages/extension-ui/src/partials/MenuSettings.tsx b/packages/extension-ui/src/partials/MenuSettings.tsx index d28e111572..265c8ee2e8 100644 --- a/packages/extension-ui/src/partials/MenuSettings.tsx +++ b/packages/extension-ui/src/partials/MenuSettings.tsx @@ -4,7 +4,7 @@ import { faExpand, faTasks } from '@fortawesome/free-solid-svg-icons'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; -import settings from '@polkadot/ui-settings'; +import { settings } from '@polkadot/ui-settings'; import { ActionContext, ActionText, Checkbox, chooseTheme, Dropdown, Menu, MenuDivider, MenuItem, Switch, ThemeSwitchContext } from '../components/index.js'; import { useIsPopup, useTranslation } from '../hooks/index.js'; diff --git a/packages/extension/src/background.ts b/packages/extension/src/background.ts index e9bf29ece0..26b691c8e8 100644 --- a/packages/extension/src/background.ts +++ b/packages/extension/src/background.ts @@ -12,7 +12,7 @@ import type { RequestSignatures, TransportRequestMessage } from '@polkadot/exten import { handlers, withErrorLog } from '@polkadot/extension-base/background'; import { PORT_CONTENT, PORT_EXTENSION } from '@polkadot/extension-base/defaults'; import { AccountsStore } from '@polkadot/extension-base/stores'; -import keyring from '@polkadot/ui-keyring'; +import { keyring } from '@polkadot/ui-keyring'; import { assert } from '@polkadot/util'; import { cryptoWaitReady } from '@polkadot/util-crypto';