Adjust ui imports for deterministic bundling (#1383)

* Adjust ui imports for deterministic bundling

* Update instructions in docs

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 <path-to-master-build>/master-build <path-to-master-src>/packages/extension/build | sort`
+7. To sanity check important files (`background.js`, and `extension.js`) you can also run: 
+  - `comm -23 <(sort <path-to-master-build>/background.js) <(sort <path-to-master-src>/packages/extension/build/background.js) > diff`
+  - `comm -23 <(sort <path-to-master-build>/extension.js) <(sort <path-to-master-src>/packages/extension/build/extension.js) > diff`
 
 ## Development version
 

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';

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';

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';
 

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';

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<boolean> {
@@ -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();

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';
 

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;
 

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'
   };
 }
 

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);
 });
 

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';

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';