[4.13.100] Optimize initialization speed

packages/yoroi-extension/.eslintrc.js

@@ -105,6 +105,7 @@ module.exports = {
     'no-floating-promise/no-floating-promise': 2,
     'flowtype/no-primitive-constructor-types': 2,
     'flowtype/no-dupe-keys': 2,
+    'no-extra-boolean-cast': 0,
     'no-restricted-properties': [
       2,
       { object: 'TrezorConnect', message: 'Use TrezorWrapper instead to minimize Trezor iframe lifespan', },

packages/yoroi-extension/.flowconfig

@@ -34,6 +34,6 @@ module.ignore_non_literal_requires=true
 module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flow/mappers/CSSModule.js.flow'
 module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/mappers/WebpackAsset.js.flow'
 module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/mappers/WebpackAsset.js.flow'
-module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/flow/mappers/WebpackAsset.js.flow'
+module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/flow/mappers/InlineSVG.js.flow'
 module.name_mapper.extension='md' -> '<PROJECT_ROOT>/flow/mappers/Markdown.js.flow'
 react.runtime=automatic

packages/yoroi-extension/app/App.js

@@ -20,6 +20,7 @@ import it from 'react-intl/locale-data/it';
 import tr from 'react-intl/locale-data/tr';
 import cs from 'react-intl/locale-data/cs';
 import sk from 'react-intl/locale-data/sk';
+import { observable, autorun, runInAction } from 'mobx';
 import { Routes } from './Routes';
 import { translations } from './i18n/translations';
 import type { StoresMap } from './stores';
@@ -65,6 +66,20 @@ type State = {|
 
 @observer
 class App extends Component<Props, State> {
+  @observable mergedMessages: null | {| [key: string]: string, |} = null;
+
+  componentDidMount: () => void = () => {
+    autorun(async () => {
+      const _mergedMessages = {
+        ...await translations['en-US'],
+        ...await translations[this.props.stores.profile.currentLocale]
+      };
+      runInAction(() => {
+        this.mergedMessages = _mergedMessages;
+      });
+    });
+  }
+
   state: State = {
     crashed: false,
   };
@@ -79,19 +94,14 @@ class App extends Component<Props, State> {
   }
 
   render(): Node {
+    const mergedMessages = this.mergedMessages;
+    if (mergedMessages === null) {
+      return null;
+    }
+
     const { stores } = this.props;
     const locale = stores.profile.currentLocale;
 
-    // Merged english messages with selected by user locale messages
-    // In this case all english data would be overridden to user selected locale, but untranslated
-    // (missed in object keys) just stay in english
-    // eslint-disable-next-line prefer-object-spread
-    const mergedMessages: { [key: string]: string, ... } = Object.assign(
-      {},
-      translations['en-US'],
-      translations[locale]
-    );
-
     Logger.debug(`[yoroi] messages merged`);
 
     const themeVars = Object.assign(stores.profile.currentThemeVars, {

packages/yoroi-extension/app/api/ada/lib/cardanoCrypto/rustLoader.js

@@ -11,25 +11,32 @@ import typeof * as WasmMessageSigning from '@emurgo/cardano-message-signing-brow
 const MAX_VALUE_BYTES = 5000;
 const MAX_TX_BYTES = 16384;
 
+type RustModuleLoadFlags = 'dontLoadMessagesSigning';
+
 class Module {
   _wasmv2: WasmV2;
   _wasmv3: WasmV3;
   _wasmv4: WasmV4;
   _ergo: SigmaRust;
   _messageSigning: WasmMessageSigning;
 
-  async load(): Promise<void> {
+  async load(flags: Array<RustModuleLoadFlags> = []): Promise<void> {
     if (
       this._wasmv2 != null
         || this._wasmv3 != null
         || this._wasmv4 != null
         || this._messageSigning != null
     ) return;
     this._wasmv2 = await import('cardano-wallet-browser');
-    this._wasmv3 = await import('@emurgo/js-chain-libs/js_chain_libs');
+    // this is used only by the now defunct jormungandr wallet
+    this._wasmv3 = ((null: any): WasmV3);
     this._wasmv4 = await import('@emurgo/cardano-serialization-lib-browser/cardano_serialization_lib');
     this._ergo = await import('ergo-lib-wasm-browser');
-    this._messageSigning = await import('@emurgo/cardano-message-signing-browser/cardano_message_signing');
+    if (flags.includes('dontLoadMessagesSigning')) {
+      this._messageSigning = ((null: any): WasmMessageSigning);
+    } else {
+      this._messageSigning = await import('@emurgo/cardano-message-signing-browser/cardano_message_signing');
+    }
   }
 
   // Need to expose through a getter to get Flow to detect the type correctly

packages/yoroi-extension/app/api/ada/paperWallet/paperWalletPdf.js

@@ -1,5 +1,5 @@
 // @flow
-import Pdf from 'jspdf';
+import type Pdf from 'jspdf';
 import qr from 'qr-image';
 import paperWalletPage1Path from '../../../assets/images/paper-wallet/paper-wallet-certificate.front-min.png';
 import paperWalletPage2Path from '../../../assets/images/paper-wallet/paper-wallet-certificate.back-min.png';
@@ -39,7 +39,10 @@ export const generateAdaPaperPdf = async (
 
   const width = 595.28;
   const height = 841.98;
-  const doc = new Pdf({
+
+  const JsPdf = (await import('jspdf')).default;
+
+  const doc = new JsPdf({
     format: [width, height],
     compressPdf: true,
   });

packages/yoroi-extension/app/api/common/lib/crypto/keys/keyRepository.js

@@ -23,10 +23,10 @@ import { decode, encode } from 'bs58check';
 // ================
 
 export class BIP32ED25519PublicKey implements IKey, IKeyDerivation, IPublic {
-  key: RustModule.WalletV3.Bip32PublicKey;
+  key: RustModule.WalletV4.Bip32PublicKey;
 
   // warning: don't use this function as it's won't decorate the object correctly
-  constructor(key: RustModule.WalletV3.Bip32PublicKey) {
+  constructor(key: RustModule.WalletV4.Bip32PublicKey) {
     this.key = key;
   }
 
@@ -39,14 +39,14 @@ export class BIP32ED25519PublicKey implements IKey, IKeyDerivation, IPublic {
   verify(data: Buffer, signature: Buffer): boolean {
     return this.key.to_raw_key().verify(
       data,
-      RustModule.WalletV3.Ed25519Signature.from_bytes(signature)
+      RustModule.WalletV4.Ed25519Signature.from_bytes(signature)
     );
   }
   static fromBuffer(buff: Buffer): BIP32ED25519PublicKey {
-    const key = RustModule.WalletV3.Bip32PublicKey.from_bytes(buff);
+    const key = RustModule.WalletV4.Bip32PublicKey.from_bytes(buff);
     return BIP32ED25519PublicKey.fromV3Key(key);
   }
-  static fromV3Key(key: RustModule.WalletV3.Bip32PublicKey): BIP32ED25519PublicKey {
+  static fromV3Key(key: RustModule.WalletV4.Bip32PublicKey): BIP32ED25519PublicKey {
     const newKey = annotateBIP32ED25519PublicKey(BIP32ED25519PublicKey);
     return new newKey(key);
   }
@@ -58,10 +58,10 @@ function annotateBIP32ED25519PublicKey(
 }
 
 export class BIP32ED25519PrivateKey implements IKey, IKeyDerivation, IPrivate {
-  key: RustModule.WalletV3.Bip32PrivateKey;
+  key: RustModule.WalletV4.Bip32PrivateKey;
 
   // warning: don't use this function as it's won't decorate the object correctly
-  constructor(key: RustModule.WalletV3.Bip32PrivateKey) {
+  constructor(key: RustModule.WalletV4.Bip32PrivateKey) {
     this.key = key;
   }
 
@@ -79,10 +79,10 @@ export class BIP32ED25519PrivateKey implements IKey, IKeyDerivation, IPrivate {
     return BIP32ED25519PublicKey.fromV3Key(pubKey);
   }
   static fromBuffer(buff: Buffer): BIP32ED25519PrivateKey {
-    const key = RustModule.WalletV3.Bip32PrivateKey.from_bytes(buff);
+    const key = RustModule.WalletV4.Bip32PrivateKey.from_bytes(buff);
     return BIP32ED25519PrivateKey.fromV3Key(key);
   }
-  static fromV3Key(key: RustModule.WalletV3.Bip32PrivateKey): BIP32ED25519PrivateKey {
+  static fromV3Key(key: RustModule.WalletV4.Bip32PrivateKey): BIP32ED25519PrivateKey {
     const newKey = annotateBIP32ED25519PrivateKey(BIP32ED25519PrivateKey);
     return new newKey(key);
   }

packages/yoroi-extension/app/api/verify.js

@@ -14,17 +14,17 @@ function verify(
   obj: any,
   serializer: any => Buffer,
   signatureHex: string,
-  publicKey: RustModule.WalletV3.PublicKey
+  publicKey: RustModule.WalletV4.PublicKey
 ): boolean {
   return publicKey.verify(
     serializer(obj),
-    RustModule.WalletV3.Ed25519Signature.from_hex(signatureHex)
+    RustModule.WalletV4.Ed25519Signature.from_hex(signatureHex)
   );
 }
 
 export function verifyTicker(
   ticker: ResponseTicker,
-  pubKeyData: RustModule.WalletV3.PublicKey
+  pubKeyData: RustModule.WalletV4.PublicKey
 ): boolean {
   if (ticker.signature == null) {
     throw new Error('ticker has no signature');
@@ -41,6 +41,6 @@ export function verifyPubKeyDataReplacement(
     pubKeyData,
     s => Buffer.from(s),
     pubKeyDataSignature,
-    RustModule.WalletV3.PublicKey.from_bytes(Buffer.from(pubKeyMaster, 'hex'))
+    RustModule.WalletV4.PublicKey.from_bytes(Buffer.from(pubKeyMaster, 'hex'))
   );
 }

packages/yoroi-extension/app/components/buySell/BuySellDialog.js

@@ -11,7 +11,7 @@ import DialogCloseButton from '../widgets/DialogCloseButton';
 import ChangellyFetcher from './ChangellyFetcher'
 
 import styles from './BuySellDialog.scss';
-import VerifyIcon from '../../assets/images/verify-icon.inline.svg'
+import { ReactComponent as VerifyIcon }  from '../../assets/images/verify-icon.inline.svg'
 import VerticalFlexContainer from '../layout/VerticalFlexContainer'
 import LoadingSpinner from '../widgets/LoadingSpinner'
 import globalMessages from '../../i18n/global-messages';

packages/yoroi-extension/app/components/common/Autocomplete.js

@@ -7,9 +7,9 @@ import { useCombobox, useMultipleSelection } from 'downshift';
 import { Input, Box, InputLabel, FormControl, FormHelperText, Chip, useTheme } from '@mui/material';
 import { styled } from '@mui/system';
 import { slice } from 'lodash';
-import SuccessIcon from '../../assets/images/forms/done.inline.svg';
-import ErrorIcon from '../../assets/images/forms/error.inline.svg';
-import CloseIcon from '../../assets/images/close-chip.inline.svg';
+import { ReactComponent as SuccessIcon }  from '../../assets/images/forms/done.inline.svg';
+import { ReactComponent as ErrorIcon }  from '../../assets/images/forms/error.inline.svg';
+import { ReactComponent as CloseIcon }  from '../../assets/images/close-chip.inline.svg';
 
 type Props = {|
   +options: Array<string>,

packages/yoroi-extension/app/components/common/CheckboxLabel.js

@@ -2,8 +2,8 @@
 import type { Node } from 'react';
 import { Checkbox, FormControlLabel, Typography } from '@mui/material';
 
-import OutlineIcon from '../../assets/images/forms/checkbox-outline.inline.svg';
-import CheckedIcon from '../../assets/images/forms/checkbox-checked.inline.svg';
+import { ReactComponent as OutlineIcon }  from '../../assets/images/forms/checkbox-outline.inline.svg';
+import { ReactComponent as CheckedIcon }  from '../../assets/images/forms/checkbox-checked.inline.svg';
 import { Box } from '@mui/system';
 import ReactMarkdown from 'react-markdown';
 

packages/yoroi-extension/app/components/common/NumericInputRP.js

@@ -427,7 +427,7 @@ class NumericInputRP extends Component<NumericInputProps, State> {
         onChange={this.onChange}
         onBlur={this.onBlur}
         value={inputValue}
-        error={amountFieldRevamp ? '' : error}
+        error={Boolean(amountFieldRevamp) ? '' : error}
         revamp={amountFieldRevamp}
         {...rest}
       />

packages/yoroi-extension/app/components/common/Select.js

@@ -1,7 +1,7 @@
 // @flow
 import type { Node } from 'react';
 import { FormControl, FormHelperText, InputLabel, Select as SelectBase } from '@mui/material';
-import ArrowIcon from '../../assets/images/forms/arrow-dropdown.inline.svg';
+import { ReactComponent as ArrowIcon }  from '../../assets/images/forms/arrow-dropdown.inline.svg';
 
 type Props = {|
   label: string,

packages/yoroi-extension/app/components/common/TextField.js

@@ -2,10 +2,10 @@
 // @flow
 import type { ElementRef, Node } from 'react';
 import { IconButton, InputAdornment, TextField as TextFieldBase, useTheme } from '@mui/material';
-import ErrorIcon from '../../assets/images/forms/error.inline.svg';
-import DoneIcon from '../../assets/images/forms/done.inline.svg';
-import EyeIcon from '../../assets/images/forms/password-eye-close.inline.svg';
-import CloseEyeIcon from '../../assets/images/forms/password-eye.inline.svg';
+import { ReactComponent as ErrorIcon }  from '../../assets/images/forms/error.inline.svg';
+import { ReactComponent as DoneIcon }  from '../../assets/images/forms/done.inline.svg';
+import { ReactComponent as EyeIcon }  from '../../assets/images/forms/password-eye-close.inline.svg';
+import { ReactComponent as CloseEyeIcon }  from '../../assets/images/forms/password-eye.inline.svg';
 import React from 'react';
 
 type Props = {|
@@ -39,6 +39,7 @@ function TextField({
   onChange,
   autoFocus,
   revamp,
+  placeholder,
   ...props
 }: Props): Node {
   const theme = useTheme();
@@ -54,7 +55,7 @@ function TextField({
     <TextFieldBase
       className={className}
       error={Boolean(error)}
-      label={!revamp && label}
+      label={!Boolean(revamp) && label}
       value={value}
       disabled={disabled}
       autoFocus={autoFocus}
@@ -63,7 +64,7 @@ function TextField({
       onBlur={onBlur}
       onChange={onChange}
       type={type !== 'password' ? type : showPassword ? 'text' : 'password'}
-      variant={revamp === true ? 'standard' : 'outlined'}
+      variant={Boolean(revamp) ? 'standard' : 'outlined'}
       /*
         In order to show placeholders for classic theme we dont' need to override
         'shrink' and 'notched' prop status so we pass an empty object
@@ -95,7 +96,7 @@ function TextField({
             </InputAdornment>
           ),
           disableUnderline: revamp,
-          placeholder: revamp ? '0.0' : '',
+          placeholder: placeholder != null ? placeholder : (Boolean(revamp) ? '0.0' : ''),
       }}
       {...props}
     />
@@ -114,6 +115,7 @@ TextField.defaultProps = {
   type: 'text',
   autoFocus: false,
   revamp: false,
+  placeholder: undefined,
 };
 
 export default TextField;

packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js

@@ -4,7 +4,7 @@ import { Component } from 'react';
 import { observer } from 'mobx-react';
 import type { WhitelistEntry } from '../../../../chrome/extension/ergo-connector/types'
 import styles from './ConnectedWebsitesPage.scss'
-import NoItemsFoundImg from '../../../assets/images/dapp-connector/no-websites-connected.inline.svg'
+import { ReactComponent as NoItemsFoundImg }  from '../../../assets/images/dapp-connector/no-websites-connected.inline.svg'
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import { defineMessages, intlShape } from 'react-intl';
 import { connectorMessages } from '../../../i18n/global-messages';

packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js

@@ -7,8 +7,8 @@ import type { MultiToken, TokenLookupKey } from '../../../api/common/lib/MultiTo
 import type { TokenRow } from '../../../api/ada/lib/storage/database/primitives/tables';
 import { getTokenName } from '../../../stores/stateless/tokenHelpers';
 import { hiddenAmount } from '../../../utils/strings';
-import DeleteIcon from '../../../assets/images/dapp-connector/delete.inline.svg';
-import NoDappImage from '../../../assets/images/dapp-connector/no-dapp.inline.svg';
+import { ReactComponent as DeleteIcon }  from '../../../assets/images/dapp-connector/delete.inline.svg';
+import { ReactComponent as NoDappImage }  from '../../../assets/images/dapp-connector/no-dapp.inline.svg';
 import WalletType from '../../widgets/WalletType';
 import NavPlate from '../../topbar/NavPlate'
 import type { ConceptualWalletSettingsCache } from '../../../stores/toplevel/WalletSettingsStore';

packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js

@@ -6,7 +6,7 @@ import type { Node } from 'react';
 import { classicTheme } from '../../../styles/themes/classic-theme'
 import {  modernTheme } from '../../../styles/themes/modern-theme'
 import classNames from 'classnames';
-import ArrowDown from '../../../assets/images/down-arrow.inline.svg';
+import { ReactComponent as ArrowDown }  from '../../../assets/images/down-arrow.inline.svg';
 import { getMainYoroiPalette, formatPalette } from '../../../styles/globalStyles';
 import type { DesignToken } from '../../../styles/globalStyles'
 
@@ -77,8 +77,8 @@ export default class YoroiPalettePage extends Component<Props, State> {
           </div>
 
           <h1 className={styles.nameToHexHeader}>Colors Direct Hex Colors</h1>
-          {nameToHex.map((color, idx) => (
-            <div className={styles.row} key={idx}>
+          {nameToHex.map((color) => (
+            <div className={styles.row} key={color.name}>
               <span
                 className={styles.colorBox}
                 style={{

packages/yoroi-extension/app/components/loading/Maintenance.js

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, } from 'react-intl';
-import ExternalLinkSVG from '../../assets/images/link-external.inline.svg';
+import { ReactComponent as ExternalLinkSVG }  from '../../assets/images/link-external.inline.svg';
 import styles from './Maintenance.scss';
 import globalMessages from '../../i18n/global-messages';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';

packages/yoroi-extension/app/components/notice-board/NoNotice.js

@@ -4,8 +4,8 @@ import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { intlShape, defineMessages, FormattedHTMLMessage } from 'react-intl';
 
-import NoNoticeClassicSvg from '../../assets/images/transaction/no-transactions-yet.classic.inline.svg';
-import NoNoticeModernSvg from '../../assets/images/transaction/no-transactions-yet.modern.inline.svg';
+import { ReactComponent as NoNoticeClassicSvg }  from '../../assets/images/transaction/no-transactions-yet.classic.inline.svg';
+import { ReactComponent as NoNoticeModernSvg }  from '../../assets/images/transaction/no-transactions-yet.modern.inline.svg';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 import styles from './NoNotice.scss';