diff --git a/packages/yoroi-extension/.eslintrc.js b/packages/yoroi-extension/.eslintrc.js index cb8a8b48a8..cc31d07c84 100644 --- a/packages/yoroi-extension/.eslintrc.js +++ b/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', }, diff --git a/packages/yoroi-extension/.flowconfig b/packages/yoroi-extension/.flowconfig index e2dc83b13d..ffa74a6c38 100644 --- a/packages/yoroi-extension/.flowconfig +++ b/packages/yoroi-extension/.flowconfig @@ -34,6 +34,6 @@ module.ignore_non_literal_requires=true module.name_mapper.extension='scss' -> '/flow/mappers/CSSModule.js.flow' module.name_mapper.extension='png' -> '/flow/mappers/WebpackAsset.js.flow' module.name_mapper.extension='jpg' -> '/flow/mappers/WebpackAsset.js.flow' -module.name_mapper.extension='svg' -> '/flow/mappers/WebpackAsset.js.flow' +module.name_mapper.extension='svg' -> '/flow/mappers/InlineSVG.js.flow' module.name_mapper.extension='md' -> '/flow/mappers/Markdown.js.flow' react.runtime=automatic \ No newline at end of file diff --git a/packages/yoroi-extension/app/App.js b/packages/yoroi-extension/app/App.js index 22c21ba976..e50e6bb286 100644 --- a/packages/yoroi-extension/app/App.js +++ b/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 { + @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 { } 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, { diff --git a/packages/yoroi-extension/app/Routes.js b/packages/yoroi-extension/app/Routes.js index 384297a9a3..ba514584bd 100644 --- a/packages/yoroi-extension/app/Routes.js +++ b/packages/yoroi-extension/app/Routes.js @@ -1,61 +1,143 @@ // @flow +import React, { Suspense } from 'react'; import type { Node } from 'react'; import { Route, Redirect, Switch } from 'react-router-dom'; import { ROUTES } from './routes-config'; import type { StoresMap } from './stores/index'; import type { ActionsMap } from './actions/index'; import type { InjectedOrGenerated } from './types/injectedPropsType'; +import type { GeneratedData as SettingsData } from './containers/settings/Settings'; +import type { GeneratedData as WalletData } from './containers/wallet/Wallet'; +import type { GeneratedData as ReceiveData } from './containers/wallet/Receive'; +import type { ConfigType } from '../config/config-types'; +import type { GeneratedData as AssetsData } from './containers/wallet/AssetsWrapper'; // PAGES -import WalletAddPage from './containers/wallet/WalletAddPage'; -import LanguageSelectionPage from './containers/profile/LanguageSelectionPage'; -import TermsOfUsePage from './containers/profile/TermsOfUsePage'; -import UriPromptPage from './containers/profile/UriPromptPage'; +const WalletAddPagePromise = () => import('./containers/wallet/WalletAddPage'); +const WalletAddPage = React.lazy(WalletAddPagePromise); +const LanguageSelectionPagePromise = () => import('./containers/profile/LanguageSelectionPage'); +const LanguageSelectionPage = React.lazy(LanguageSelectionPagePromise); +const TermsOfUsePagePromise = () => import('./containers/profile/TermsOfUsePage'); +const TermsOfUsePage = React.lazy(TermsOfUsePagePromise); +const UriPromptPagePromise = () => import('./containers/profile/UriPromptPage'); +const UriPromptPage = React.lazy(UriPromptPagePromise); // SETTINGS -import Settings from './containers/settings/Settings'; -import type { GeneratedData as SettingsData } from './containers/settings/Settings'; -import GeneralSettingsPage from './containers/settings/categories/GeneralSettingsPage'; -import WalletSettingsPage from './containers/settings/categories/WalletSettingsPage'; -import ExternalStorageSettingsPage from './containers/settings/categories/ExternalStorageSettingsPage'; -import OAuthDropboxPage from './containers/settings/categories/OAuthDropboxPage'; -import TermsOfUseSettingsPage from './containers/settings/categories/TermsOfUseSettingsPage'; -import SupportSettingsPage from './containers/settings/categories/SupportSettingsPage'; +const SettingsPromise = () => import('./containers/settings/Settings'); +const Settings = React.lazy(SettingsPromise); +const GeneralSettingsPagePromise = () => import('./containers/settings/categories/GeneralSettingsPage'); +const GeneralSettingsPage = React.lazy(GeneralSettingsPagePromise); +const WalletSettingsPagePromise = () => import('./containers/settings/categories/WalletSettingsPage'); +const WalletSettingsPage = React.lazy(WalletSettingsPagePromise); +const ExternalStorageSettingsPagePromise = () => import('./containers/settings/categories/ExternalStorageSettingsPage'); +const ExternalStorageSettingsPage = React.lazy(ExternalStorageSettingsPagePromise); +const OAuthDropboxPagePromise = () => import('./containers/settings/categories/OAuthDropboxPage'); +const OAuthDropboxPage = React.lazy(OAuthDropboxPagePromise); +const TermsOfUseSettingsPagePromise = () => import('./containers/settings/categories/TermsOfUseSettingsPage'); +const TermsOfUseSettingsPage = React.lazy(TermsOfUseSettingsPagePromise); +const SupportSettingsPagePromise = () => import('./containers/settings/categories/SupportSettingsPage'); +const SupportSettingsPage = React.lazy(SupportSettingsPagePromise); // Dynamic container loading - resolver loads file relative to '/app/' directory -import LoadingPage from './containers/LoadingPage'; -import NightlyPage from './containers/profile/NightlyPage'; -import Wallet from './containers/wallet/Wallet'; -import type { GeneratedData as WalletData } from './containers/wallet/Wallet'; -import MyWalletsPage from './containers/wallet/MyWalletsPage'; -import WalletSummaryPage from './containers/wallet/WalletSummaryPage'; -import WalletSendPage from './containers/wallet/WalletSendPage'; -import WalletAssetsPage from './containers/wallet/WalletAssetsPage'; -import WalletReceivePage from './containers/wallet/WalletReceivePage'; -import URILandingPage from './containers/uri/URILandingPage'; -import Transfer from './containers/transfer/Transfer'; -import Receive from './containers/wallet/Receive'; -import type { GeneratedData as ReceiveData } from './containers/wallet/Receive'; -import StakingDashboardPage from './containers/wallet/staking/StakingDashboardPage'; -import CardanoStakingPage from './containers/wallet/staking/CardanoStakingPage'; -import NoticeBoardPage from './containers/notice-board/NoticeBoardPage'; -import VotingPage from './containers/wallet/voting/VotingPage'; +const LoadingPagePromise = () => import('./containers/LoadingPage'); +const LoadingPage = React.lazy(LoadingPagePromise); +const NightlyPagePromise = () => import('./containers/profile/NightlyPage'); +const NightlyPage = React.lazy(NightlyPagePromise); +const WalletPromise = () => import('./containers/wallet/Wallet'); +const Wallet = React.lazy(WalletPromise); +const MyWalletsPagePromise = () => import('./containers/wallet/MyWalletsPage'); +const MyWalletsPage = React.lazy(MyWalletsPagePromise); +const WalletSummaryPagePromise = () => import('./containers/wallet/WalletSummaryPage'); +const WalletSummaryPage = React.lazy(WalletSummaryPagePromise); +const WalletSendPagePromise = () => import('./containers/wallet/WalletSendPage'); +const WalletSendPage = React.lazy(WalletSendPagePromise); +const WalletAssetsPagePromise = () => import('./containers/wallet/WalletAssetsPage'); +const WalletAssetsPage = React.lazy(WalletAssetsPagePromise); +const WalletReceivePagePromise = () => import('./containers/wallet/WalletReceivePage'); +const WalletReceivePage = React.lazy(WalletReceivePagePromise); +const URILandingPagePromise = () => import('./containers/uri/URILandingPage'); +const URILandingPage = React.lazy(URILandingPagePromise); +const TransferPromise = () => import('./containers/transfer/Transfer'); +const Transfer = React.lazy(TransferPromise); +const ReceivePromise = () => import('./containers/wallet/Receive'); +const Receive = React.lazy(ReceivePromise); +const StakingDashboardPagePromise = () => import('./containers/wallet/staking/StakingDashboardPage'); +const StakingDashboardPage = React.lazy(StakingDashboardPagePromise); +const CardanoStakingPagePromise = () => import('./containers/wallet/staking/CardanoStakingPage'); +const CardanoStakingPage = React.lazy(CardanoStakingPagePromise); +const NoticeBoardPagePromise = () => import('./containers/notice-board/NoticeBoardPage'); +const NoticeBoardPage = React.lazy(NoticeBoardPagePromise); +const VotingPagePromise = () => import('./containers/wallet/voting/VotingPage'); +const VotingPage = React.lazy(VotingPagePromise); -import type { ConfigType } from '../config/config-types'; -import ComplexityLevelSettingsPage from './containers/settings/categories/ComplexityLevelSettingsPage'; -import ComplexityLevelPage from './containers/profile/ComplexityLevelPage'; -import BlockchainSettingsPage from './containers/settings/categories/BlockchainSettingsPage'; -import WalletSwitch from './containers/WalletSwitch'; -import StakingPage from './containers/wallet/staking/StakingPage'; -import type { GeneratedData as AssetsData } from './containers/wallet/AssetsWrapper'; -import AssetsWrapper from './containers/wallet/AssetsWrapper'; -import TokensPageRevamp from './containers/wallet/TokensPageRevamp'; -import TokensDetailPageRevamp from './containers/wallet/TokenDetailPageRevamp'; -import NFTsPageRevamp from './containers/wallet/NFTsPageRevamp'; -import NFTDetailPageRevamp from './containers/wallet/NFTDetailPageRevamp'; -import ConnectedWebsitesPage from './containers/dapp-connector/ConnectedWebsitesContainer'; -import YoroiPalettePage from './containers/experimental/YoroiPalette'; -import YoroiThemesPage from './containers/experimental/yoroiThemes'; +const ComplexityLevelSettingsPagePromise = () => import('./containers/settings/categories/ComplexityLevelSettingsPage'); +const ComplexityLevelSettingsPage = React.lazy(ComplexityLevelSettingsPagePromise); +const ComplexityLevelPagePromise = () => import('./containers/profile/ComplexityLevelPage'); +const ComplexityLevelPage = React.lazy(ComplexityLevelPagePromise); +const BlockchainSettingsPagePromise = () => import('./containers/settings/categories/BlockchainSettingsPage'); +const BlockchainSettingsPage = React.lazy(BlockchainSettingsPagePromise); +const WalletSwitchPromise = () => import('./containers/WalletSwitch'); +const WalletSwitch = React.lazy(WalletSwitchPromise); +const StakingPagePromise = () => import('./containers/wallet/staking/StakingPage'); +const StakingPage = React.lazy(StakingPagePromise); +const AssetsWrapperPromise = () => import('./containers/wallet/AssetsWrapper'); +const AssetsWrapper = React.lazy(AssetsWrapperPromise); +const TokensPageRevampPromise = () => import('./containers/wallet/TokensPageRevamp'); +const TokensPageRevamp = React.lazy(TokensPageRevampPromise); +const TokensDetailPageRevampPromise = () => import('./containers/wallet/TokenDetailPageRevamp'); +const TokensDetailPageRevamp = React.lazy(TokensDetailPageRevampPromise); +const NFTsPageRevampPromise = () => import('./containers/wallet/NFTsPageRevamp'); +const NFTsPageRevamp = React.lazy(NFTsPageRevampPromise); +const NFTDetailPageRevampPromise = () => import('./containers/wallet/NFTDetailPageRevamp'); +const NFTDetailPageRevamp = React.lazy(NFTDetailPageRevampPromise); +const ConnectedWebsitesPagePromise = () => import('./containers/dapp-connector/ConnectedWebsitesContainer'); +const ConnectedWebsitesPage = React.lazy(ConnectedWebsitesPagePromise); +const YoroiPalettePagePromise = () => import('./containers/experimental/YoroiPalette'); +const YoroiPalettePage = React.lazy(YoroiPalettePagePromise); +const YoroiThemesPagePromise = () => import('./containers/experimental/yoroiThemes'); +const YoroiThemesPage = React.lazy(YoroiThemesPagePromise); + +export const LazyLoadPromises: Array<() => any> = [ + WalletAddPagePromise, + LanguageSelectionPagePromise, + TermsOfUsePagePromise, + UriPromptPagePromise, + SettingsPromise, + GeneralSettingsPagePromise, + WalletSettingsPagePromise, + ExternalStorageSettingsPagePromise, + OAuthDropboxPagePromise, + TermsOfUseSettingsPagePromise, + SupportSettingsPagePromise, + LoadingPagePromise, + NightlyPagePromise, + WalletPromise, + MyWalletsPagePromise, + WalletSummaryPagePromise, + WalletSendPagePromise, + WalletAssetsPagePromise, + WalletReceivePagePromise, + URILandingPagePromise, + TransferPromise, + ReceivePromise, + StakingDashboardPagePromise, + CardanoStakingPagePromise, + NoticeBoardPagePromise, + VotingPagePromise, + ComplexityLevelSettingsPagePromise, + ComplexityLevelPagePromise, + BlockchainSettingsPagePromise, + WalletSwitchPromise, + StakingPagePromise, + AssetsWrapperPromise, + TokensPageRevampPromise, + TokensDetailPageRevampPromise, + NFTsPageRevampPromise, + NFTDetailPageRevampPromise, + ConnectedWebsitesPagePromise, + YoroiPalettePagePromise, + YoroiThemesPagePromise, +]; // populated by ConfigWebpackPlugin declare var CONFIG: ConfigType; @@ -66,120 +148,122 @@ export const Routes = ( actions: ActionsMap ): Node => (
- - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - } - /> - ( - wrapAssets( - { ...props, stores, actions }, - AssetsSubpages(stores, actions) - ) - )} - /> - } - /> - } - /> - } - /> - } - /> - ( - wrapWallet( - { ...props, stores, actions }, - WalletsSubpages(stores, actions) - ) - )} - /> - ( - wrapSettings( - { ...props, stores, actions }, - SettingsSubpages(stores, actions) - ) - )} - /> - } - /> - } - /> - } - /> - } - /> - } - /> - - + + + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + } + /> + ( + wrapAssets( + { ...props, stores, actions }, + AssetsSubpages(stores, actions) + ) + )} + /> + } + /> + } + /> + } + /> + } + /> + ( + wrapWallet( + { ...props, stores, actions }, + WalletsSubpages(stores, actions) + ) + )} + /> + ( + wrapSettings( + { ...props, stores, actions }, + SettingsSubpages(stores, actions) + ) + )} + /> + } + /> + } + /> + } + /> + } + /> + } + /> + + +
); diff --git a/packages/yoroi-extension/app/api/ada/lib/cardanoCrypto/rustLoader.js b/packages/yoroi-extension/app/api/ada/lib/cardanoCrypto/rustLoader.js index d7140df875..d95f032e73 100644 --- a/packages/yoroi-extension/app/api/ada/lib/cardanoCrypto/rustLoader.js +++ b/packages/yoroi-extension/app/api/ada/lib/cardanoCrypto/rustLoader.js @@ -11,6 +11,8 @@ 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; @@ -18,7 +20,7 @@ class Module { _ergo: SigmaRust; _messageSigning: WasmMessageSigning; - async load(): Promise { + async load(flags: Array = []): Promise { if ( this._wasmv2 != null || this._wasmv3 != null @@ -26,10 +28,15 @@ class Module { || 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 diff --git a/packages/yoroi-extension/app/api/ada/paperWallet/paperWalletPdf.js b/packages/yoroi-extension/app/api/ada/paperWallet/paperWalletPdf.js index da2879c8c7..310ee2eba8 100644 --- a/packages/yoroi-extension/app/api/ada/paperWallet/paperWalletPdf.js +++ b/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, }); diff --git a/packages/yoroi-extension/app/api/common/lib/crypto/keys/keyRepository.js b/packages/yoroi-extension/app/api/common/lib/crypto/keys/keyRepository.js index 5779fba108..d7fa5d6db9 100644 --- a/packages/yoroi-extension/app/api/common/lib/crypto/keys/keyRepository.js +++ b/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); } diff --git a/packages/yoroi-extension/app/api/verify.js b/packages/yoroi-extension/app/api/verify.js index 44ee11fefb..16514418fe 100644 --- a/packages/yoroi-extension/app/api/verify.js +++ b/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')) ); } diff --git a/packages/yoroi-extension/app/components/buySell/BuySellDialog.js b/packages/yoroi-extension/app/components/buySell/BuySellDialog.js index d2abb863b1..fe8a5749ff 100644 --- a/packages/yoroi-extension/app/components/buySell/BuySellDialog.js +++ b/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'; diff --git a/packages/yoroi-extension/app/components/common/Autocomplete.js b/packages/yoroi-extension/app/components/common/Autocomplete.js index 889ad9d277..5c2ac24b33 100644 --- a/packages/yoroi-extension/app/components/common/Autocomplete.js +++ b/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, diff --git a/packages/yoroi-extension/app/components/common/CheckboxLabel.js b/packages/yoroi-extension/app/components/common/CheckboxLabel.js index b4afc74cf0..9e92857a99 100644 --- a/packages/yoroi-extension/app/components/common/CheckboxLabel.js +++ b/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'; diff --git a/packages/yoroi-extension/app/components/common/NumericInputRP.js b/packages/yoroi-extension/app/components/common/NumericInputRP.js index 5fb366c3a2..ee417cc210 100644 --- a/packages/yoroi-extension/app/components/common/NumericInputRP.js +++ b/packages/yoroi-extension/app/components/common/NumericInputRP.js @@ -427,7 +427,7 @@ class NumericInputRP extends Component { onChange={this.onChange} onBlur={this.onBlur} value={inputValue} - error={amountFieldRevamp ? '' : error} + error={Boolean(amountFieldRevamp) ? '' : error} revamp={amountFieldRevamp} {...rest} /> diff --git a/packages/yoroi-extension/app/components/common/Select.js b/packages/yoroi-extension/app/components/common/Select.js index 5b1c926f9f..8932043e76 100644 --- a/packages/yoroi-extension/app/components/common/Select.js +++ b/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, diff --git a/packages/yoroi-extension/app/components/common/TextField.js b/packages/yoroi-extension/app/components/common/TextField.js index 7c7b99c7c0..382fd8bbd3 100644 --- a/packages/yoroi-extension/app/components/common/TextField.js +++ b/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({ ), 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; diff --git a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js index cc166b2268..87520d40f6 100644 --- a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js +++ b/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'; diff --git a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js index bebd8bc332..a540b36645 100644 --- a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js +++ b/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'; diff --git a/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js b/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js index b71174c704..711d492f9b 100644 --- a/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js +++ b/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 {

Colors Direct Hex Colors

- {nameToHex.map((color, idx) => ( -
+ {nameToHex.map((color) => ( +
, diff --git a/packages/yoroi-extension/app/components/wallet/my-wallets/WalletCurrency.js b/packages/yoroi-extension/app/components/wallet/my-wallets/WalletCurrency.js index f7a7b5b59e..85655cb428 100644 --- a/packages/yoroi-extension/app/components/wallet/my-wallets/WalletCurrency.js +++ b/packages/yoroi-extension/app/components/wallet/my-wallets/WalletCurrency.js @@ -4,11 +4,11 @@ import { Component } from 'react'; import type { Node } from 'react'; import styles from './WalletCurrency.scss'; -import SymbolADA from '../../../assets/images/my-wallets/symbol_ada.inline.svg'; -import SymbolTADA from '../../../assets/images/my-wallets/symbol_adaTestnet.inline.svg'; -import SymbolERG from '../../../assets/images/my-wallets/symbol_ergo.inline.svg'; -import SymbolBTC from '../../../assets/images/my-wallets/symbol_bitcoin.inline.svg'; -import SymbolETH from '../../../assets/images/my-wallets/symbol_ethereum.inline.svg'; +import { ReactComponent as SymbolADA } from '../../../assets/images/my-wallets/symbol_ada.inline.svg'; +import { ReactComponent as SymbolTADA } from '../../../assets/images/my-wallets/symbol_adaTestnet.inline.svg'; +import { ReactComponent as SymbolERG } from '../../../assets/images/my-wallets/symbol_ergo.inline.svg'; +import { ReactComponent as SymbolBTC } from '../../../assets/images/my-wallets/symbol_bitcoin.inline.svg'; +import { ReactComponent as SymbolETH } from '../../../assets/images/my-wallets/symbol_ethereum.inline.svg'; type Props = {| +currency: string, diff --git a/packages/yoroi-extension/app/components/wallet/my-wallets/WalletDetails.js b/packages/yoroi-extension/app/components/wallet/my-wallets/WalletDetails.js index ad39d82c6c..b47dbe82ad 100644 --- a/packages/yoroi-extension/app/components/wallet/my-wallets/WalletDetails.js +++ b/packages/yoroi-extension/app/components/wallet/my-wallets/WalletDetails.js @@ -6,8 +6,8 @@ import { intlShape } from 'react-intl'; import globalMessages from '../../../i18n/global-messages'; import { splitAmount, truncateToken } from '../../../utils/formatters'; import styles from './WalletDetails.scss'; -import IconEyeOpen from '../../../assets/images/my-wallets/icon_eye_open.inline.svg'; -import IconEyeClosed from '../../../assets/images/my-wallets/icon_eye_closed.inline.svg'; +import { ReactComponent as IconEyeOpen } from '../../../assets/images/my-wallets/icon_eye_open.inline.svg'; +import { ReactComponent as IconEyeClosed } from '../../../assets/images/my-wallets/icon_eye_closed.inline.svg'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { hiddenAmount } from '../../../utils/strings'; import { MultiToken } from '../../../api/common/lib/MultiToken'; diff --git a/packages/yoroi-extension/app/components/wallet/my-wallets/WalletRow.js b/packages/yoroi-extension/app/components/wallet/my-wallets/WalletRow.js index 144b2a20db..2c38b6ddd4 100644 --- a/packages/yoroi-extension/app/components/wallet/my-wallets/WalletRow.js +++ b/packages/yoroi-extension/app/components/wallet/my-wallets/WalletRow.js @@ -6,9 +6,8 @@ import classnames from 'classnames'; import styles from './WalletRow.scss'; -import ToggleIcon from '../../../assets/images/my-wallets/arrow_down.inline.svg'; -import SettingsIcon from '../../../assets/images/sidebar/wallet-settings-2-ic.inline.svg'; -// import PlusIcon from '../../../assets/images/my-wallets/icon_plus.inline.svg'; +import { ReactComponent as ToggleIcon } from '../../../assets/images/my-wallets/arrow_down.inline.svg'; +import { ReactComponent as SettingsIcon } from '../../../assets/images/sidebar/wallet-settings-2-ic.inline.svg'; type Props = {| +walletSumDetails: Node, diff --git a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavigation.js b/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavigation.js index f43cdba742..73e7872b2d 100644 --- a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavigation.js +++ b/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavigation.js @@ -5,7 +5,7 @@ import { observer } from 'mobx-react'; import { intlShape } from 'react-intl'; import styles from './ReceiveNavigation.scss'; -import AttentionIcon from '../../../assets/images/attention-modern.inline.svg'; +import { ReactComponent as AttentionIcon } from '../../../assets/images/attention-modern.inline.svg'; import ReceiveNavButton from './ReceiveNavButton'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { @@ -17,7 +17,7 @@ import { AddressSubgroup, } from '../../../types/AddressFilterTypes'; import Accordion from '../../widgets/Accordion'; -import InfoIcon from '../../../assets/images/attention-big-light.inline.svg'; +import { ReactComponent as InfoIcon } from '../../../assets/images/attention-big-light.inline.svg'; import type { AddressTypeName, AddressFilterKind } from '../../../types/AddressFilterTypes'; import classNames from 'classnames'; diff --git a/packages/yoroi-extension/app/components/wallet/receive/WarningHeader.js b/packages/yoroi-extension/app/components/wallet/receive/WarningHeader.js index 1ee7177904..cabf3fed47 100644 --- a/packages/yoroi-extension/app/components/wallet/receive/WarningHeader.js +++ b/packages/yoroi-extension/app/components/wallet/receive/WarningHeader.js @@ -4,7 +4,7 @@ import type { Node } from 'react'; import { observer } from 'mobx-react'; import { intlShape } from 'react-intl'; import styles from './WarningHeader.scss'; -import InvalidURIImg from '../../../assets/images/uri/invalid-uri.inline.svg'; +import { ReactComponent as InvalidURIImg } from '../../../assets/images/uri/invalid-uri.inline.svg'; import VerticallyCenteredLayout from '../../layout/VerticallyCenteredLayout'; import globalMessages from '../../../i18n/global-messages'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; diff --git a/packages/yoroi-extension/app/components/wallet/restore/LegacyExplanation.js b/packages/yoroi-extension/app/components/wallet/restore/LegacyExplanation.js index e94c440946..e16e5b3c55 100644 --- a/packages/yoroi-extension/app/components/wallet/restore/LegacyExplanation.js +++ b/packages/yoroi-extension/app/components/wallet/restore/LegacyExplanation.js @@ -10,7 +10,7 @@ import DialogCloseButton from '../../widgets/DialogCloseButton'; import WalletRecoveryInstructions from '../backup-recovery/WalletRecoveryInstructions'; import globalMessages from '../../../i18n/global-messages'; import styles from './LegacyExplanation.scss'; -import RecoveryWatchingSvg from '../../../assets/images/recovery-watching.inline.svg'; +import { ReactComponent as RecoveryWatchingSvg } from '../../../assets/images/recovery-watching.inline.svg'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; const messages = defineMessages({ diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js index 1b837a8c99..8f0066c195 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendForm.js @@ -10,7 +10,7 @@ import { isValidMemoOptional, isValidMemo, } from '../../../utils/validations'; import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm'; import vjf from 'mobx-react-form/lib/validators/VJF'; import { AmountInput } from '../../common/NumericInputRP'; -import AddMemoSvg from '../../../assets/images/add-memo.inline.svg'; +import { ReactComponent as AddMemoSvg } from '../../../assets/images/add-memo.inline.svg'; import BorderedBox from '../../widgets/BorderedBox'; import styles from './WalletSendForm.scss'; import globalMessages, { memoMessages, } from '../../../i18n/global-messages'; diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AssetsDropdown.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AssetsDropdown.js index 2cf343fb3e..6f64efd41e 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AssetsDropdown.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/AssetsDropdown.js @@ -2,9 +2,9 @@ import { Component } from 'react'; import type { Node } from 'react' import styles from './AssetsDropdown.scss' -import DefaultAssetIcon from '../../../../assets/images/assets-page/asset-no.inline.svg' -import ArrowUpIcon from '../../../../assets/images/arrow-up.inline.svg' -import ArrowDownIcon from '../../../../assets/images/arrow-down.inline.svg' +import { ReactComponent as DefaultAssetIcon } from '../../../../assets/images/assets-page/asset-no.inline.svg' +import { ReactComponent as ArrowUpIcon } from '../../../../assets/images/arrow-up.inline.svg' +import { ReactComponent as ArrowDownIcon } from '../../../../assets/images/arrow-down.inline.svg' import type { Asset } from '../../assets/AssetsList' type Props = {| diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakePool/StakePool.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakePool/StakePool.js index d07a153e0b..1ca3b82988 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakePool/StakePool.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakePool/StakePool.js @@ -1,17 +1,17 @@ // @flow import type { Node } from 'react'; -import TwitterIcon from '../../../../../assets/images/social/revamp/twitter.inline.svg'; -import TelegramIcon from '../../../../../assets/images/social/revamp/telegram.inline.svg'; -import FbIcon from '../../../../../assets/images/social/revamp/facebook.inline.svg'; -import YoutubeIcon from '../../../../../assets/images/social/revamp/youtube.inline.svg'; -import TwitchIcon from '../../../../../assets/images/social/revamp/twitch.inline.svg'; -import DiscordIcon from '../../../../../assets/images/social/revamp/discord.inline.svg'; -import GithubIcon from '../../../../../assets/images/social/revamp/github.inline.svg'; -import PersonalIcon from '../../../../../assets/images/social/revamp/personal.inline.svg'; +import { ReactComponent as TwitterIcon } from '../../../../../assets/images/social/revamp/twitter.inline.svg'; +import { ReactComponent as TelegramIcon } from '../../../../../assets/images/social/revamp/telegram.inline.svg'; +import { ReactComponent as FbIcon } from '../../../../../assets/images/social/revamp/facebook.inline.svg'; +import { ReactComponent as YoutubeIcon } from '../../../../../assets/images/social/revamp/youtube.inline.svg'; +import { ReactComponent as TwitchIcon } from '../../../../../assets/images/social/revamp/twitch.inline.svg'; +import { ReactComponent as DiscordIcon } from '../../../../../assets/images/social/revamp/discord.inline.svg'; +import { ReactComponent as GithubIcon } from '../../../../../assets/images/social/revamp/github.inline.svg'; +import { ReactComponent as PersonalIcon } from '../../../../../assets/images/social/revamp/personal.inline.svg'; import { List, StyledLink } from './StakePool.styles'; import { Tooltip, Typography } from '@mui/material'; import { Box } from '@mui/system'; -import QuestionMarkIcon from '../../../../../assets/images/question-mark.inline.svg'; +import { ReactComponent as QuestionMarkIcon } from '../../../../../assets/images/question-mark.inline.svg'; import type { SocialLinks } from '../../../../../containers/wallet/staking/SeizaFetcher'; // eslint-disable-next-line react/require-default-props diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakingTabs.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakingTabs.js index 1772547c78..a7876075f8 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakingTabs.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/StakingTabs.js @@ -5,8 +5,8 @@ import { Box, styled } from '@mui/system'; import { TabContext, TabList, TabPanel } from '@mui/lab'; import { IconButton, Tab, Typography } from '@mui/material'; import { observer } from 'mobx-react'; -import InfoIconSVG from '../../../../assets/images/info-icon.inline.svg'; -import CloseIcon from '../../../../assets/images/forms/close.inline.svg'; +import { ReactComponent as InfoIconSVG } from '../../../../assets/images/info-icon.inline.svg'; +import { ReactComponent as CloseIcon } from '../../../../assets/images/forms/close.inline.svg'; import DelegatedStakePoolCard from './DelegatedStakePoolCard'; import { defineMessages, injectIntl } from 'react-intl'; import type { $npm$ReactIntl$IntlShape } from 'react-intl'; diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/SummaryCard.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/SummaryCard.js index 06c896aa9c..c33acfd3bd 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/SummaryCard.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/SummaryCard.js @@ -7,8 +7,8 @@ import { observer } from 'mobx-react'; import { defineMessages, injectIntl } from 'react-intl'; import type { $npm$ReactIntl$IntlShape } from 'react-intl'; import globalMessages from '../../../../i18n/global-messages'; -import StakingIcon from '../../../../assets/images/dashboard/staking-active.inline.svg'; -import TotalDelegatedIcon from '../../../../assets/images/dashboard/total-delegated.inline.svg'; +import { ReactComponent as StakingIcon } from '../../../../assets/images/dashboard/staking-active.inline.svg'; +import { ReactComponent as TotalDelegatedIcon } from '../../../../assets/images/dashboard/total-delegated.inline.svg'; import { MultiToken } from '../../../../api/common/lib/MultiToken'; import styles from '../dashboard/UserSummary.scss'; import LoadingSpinner from '../../../widgets/LoadingSpinner'; diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/FirstRewardTooltip.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard/FirstRewardTooltip.js index 5669b7e9b1..416f8250ca 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard/FirstRewardTooltip.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard/FirstRewardTooltip.js @@ -4,7 +4,7 @@ import type { Node } from 'react'; import { observer } from 'mobx-react'; import styles from './FirstRewardTooltip.scss'; -import WarningIcon from '../../../../assets/images/dashboard/exclamation-mark.inline.svg'; +import { ReactComponent as WarningIcon } from '../../../../assets/images/dashboard/exclamation-mark.inline.svg'; type Props = {| text: string, diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js index 576db690de..c1a266afa9 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakePool.js @@ -17,7 +17,7 @@ import styles from './StakePool.scss'; import { SelectedExplorer } from '../../../../domain/SelectedExplorer'; import type { ReputationObject } from '../../../../api/jormungandr/lib/state-fetch/types'; import globalMessages from '../../../../i18n/global-messages'; -import WarningIcon from '../../../../assets/images/attention-modern.inline.svg'; +import { ReactComponent as WarningIcon } from '../../../../assets/images/attention-modern.inline.svg'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { truncateStakePool } from '../../../../utils/formatters'; diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakingDashboard.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakingDashboard.js index 0528c31429..e293a806e1 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakingDashboard.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard/StakingDashboard.js @@ -14,7 +14,7 @@ import InformativeError from '../../../widgets/InformativeError'; import LoadingSpinner from '../../../widgets/LoadingSpinner'; import VerticallyCenteredLayout from '../../../layout/VerticallyCenteredLayout'; import LocalizableError from '../../../../i18n/LocalizableError'; -import InvalidURIImg from '../../../../assets/images/uri/invalid-uri.inline.svg'; +import { ReactComponent as InvalidURIImg } from '../../../../assets/images/uri/invalid-uri.inline.svg'; import ErrorBlock from '../../../widgets/ErrorBlock'; import type { CertificateForKey } from '../../../../api/ada/lib/storage/database/primitives/api/read'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/UpcomingRewards.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard/UpcomingRewards.js index a412ab4f8d..2b99f9bea9 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard/UpcomingRewards.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard/UpcomingRewards.js @@ -10,7 +10,7 @@ import type { PoolTuples } from '../../../../api/jormungandr/lib/state-fetch/typ import CustomTooltip from '../../../widgets/CustomTooltip'; import LoadingSpinner from '../../../widgets/LoadingSpinner'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; -import AttentionIcon from '../../../../assets/images/attention-modern.inline.svg'; +import { ReactComponent as AttentionIcon } from '../../../../assets/images/attention-modern.inline.svg'; import { truncateStakePool } from '../../../../utils/formatters'; import Card from './Card'; diff --git a/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.js b/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.js index 4cedde710e..c3c652e1a1 100644 --- a/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.js +++ b/packages/yoroi-extension/app/components/wallet/staking/dashboard/UserSummary.js @@ -8,12 +8,12 @@ import type { $npm$ReactIntl$MessageDescriptor, $npm$ReactIntl$IntlFormat } from import { Button } from '@mui/material'; import Card from './Card'; import styles from './UserSummary.scss'; -import IconAda from '../../../../assets/images/dashboard/grey-total-ada.inline.svg'; -import IconRewards from '../../../../assets/images/dashboard/grey-total-reward.inline.svg'; -import IconDelegated from '../../../../assets/images/dashboard/grey-total-delegated.inline.svg'; +import { ReactComponent as IconAda } from '../../../../assets/images/dashboard/grey-total-ada.inline.svg'; +import { ReactComponent as IconRewards } from '../../../../assets/images/dashboard/grey-total-reward.inline.svg'; +import { ReactComponent as IconDelegated } from '../../../../assets/images/dashboard/grey-total-delegated.inline.svg'; import globalMessages from '../../../../i18n/global-messages'; import TooltipBox from '../../../widgets/TooltipBox'; -import WarningIcon from '../../../../assets/images/attention-modern.inline.svg'; +import { ReactComponent as WarningIcon } from '../../../../assets/images/attention-modern.inline.svg'; import LoadingSpinner from '../../../widgets/LoadingSpinner'; import { MultiToken, diff --git a/packages/yoroi-extension/app/components/wallet/summary/WalletSummary.js b/packages/yoroi-extension/app/components/wallet/summary/WalletSummary.js index 61b544ffb8..4d6b04eaef 100644 --- a/packages/yoroi-extension/app/components/wallet/summary/WalletSummary.js +++ b/packages/yoroi-extension/app/components/wallet/summary/WalletSummary.js @@ -4,7 +4,7 @@ import type { Node } from 'react'; import { observer } from 'mobx-react'; import classnames from 'classnames'; import { defineMessages, intlShape } from 'react-intl'; -import ExportTxToFileSvg from '../../../assets/images/transaction/export-tx-to-file.inline.svg'; +import { ReactComponent as ExportTxToFileSvg } from '../../../assets/images/transaction/export-tx-to-file.inline.svg'; import BorderedBox from '../../widgets/BorderedBox'; import type { UnconfirmedAmount } from '../../../types/unconfirmedAmountType'; import globalMessages from '../../../i18n/global-messages'; diff --git a/packages/yoroi-extension/app/components/wallet/summary/WalletSummaryRevamp.js b/packages/yoroi-extension/app/components/wallet/summary/WalletSummaryRevamp.js index 2eb63ccfd7..4551abf139 100644 --- a/packages/yoroi-extension/app/components/wallet/summary/WalletSummaryRevamp.js +++ b/packages/yoroi-extension/app/components/wallet/summary/WalletSummaryRevamp.js @@ -3,7 +3,7 @@ import { Component } from 'react'; import type { Node } from 'react'; import { observer } from 'mobx-react'; import { intlShape } from 'react-intl'; -import ExportTxToFileSvg from '../../../assets/images/transaction/export.inline.svg'; +import { ReactComponent as ExportTxToFileSvg } from '../../../assets/images/transaction/export.inline.svg'; import type { UnconfirmedAmount } from '../../../types/unconfirmedAmountType'; import globalMessages from '../../../i18n/global-messages'; import styles from './WalletSummary.scss'; diff --git a/packages/yoroi-extension/app/components/wallet/transactions/Transaction.js b/packages/yoroi-extension/app/components/wallet/transactions/Transaction.js index 9b417137ce..13bfe6b750 100644 --- a/packages/yoroi-extension/app/components/wallet/transactions/Transaction.js +++ b/packages/yoroi-extension/app/components/wallet/transactions/Transaction.js @@ -7,8 +7,8 @@ import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import moment from 'moment'; import classnames from 'classnames'; import styles from './Transaction.scss'; -import AddMemoSvg from '../../../assets/images/add-memo.inline.svg'; -import EditSvg from '../../../assets/images/edit.inline.svg'; +import { ReactComponent as AddMemoSvg } from '../../../assets/images/add-memo.inline.svg'; +import { ReactComponent as EditSvg } from '../../../assets/images/edit.inline.svg'; import WalletTransaction from '../../../domain/WalletTransaction'; import JormungandrTransaction from '../../../domain/JormungandrTransaction'; import CardanoShelleyTransaction from '../../../domain/CardanoShelleyTransaction'; @@ -17,7 +17,7 @@ import type { TransactionDirectionType } from '../../../api/ada/transactions/typ import { transactionTypes } from '../../../api/ada/transactions/types'; import type { AssuranceLevel } from '../../../types/transactionAssuranceTypes'; import { Logger } from '../../../utils/logging'; -import ExpandArrow from '../../../assets/images/expand-arrow-grey.inline.svg'; +import { ReactComponent as ExpandArrow } from '../../../assets/images/expand-arrow-grey.inline.svg'; import ExplorableHashContainer from '../../../containers/widgets/ExplorableHashContainer'; import { SelectedExplorer } from '../../../domain/SelectedExplorer'; import { calculateAndFormatValue } from '../../../utils/unit-of-account'; diff --git a/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js b/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js index 9ca3175b4b..591a3524a9 100644 --- a/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js +++ b/packages/yoroi-extension/app/components/wallet/transactions/TransactionRevamp.js @@ -8,8 +8,8 @@ import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import moment from 'moment'; import classnames from 'classnames'; import styles from './Transaction.scss'; -import AddMemoSvg from '../../../assets/images/add-memo.inline.svg'; -import EditSvg from '../../../assets/images/edit.inline.svg'; +import { ReactComponent as AddMemoSvg } from '../../../assets/images/add-memo.inline.svg'; +import { ReactComponent as EditSvg } from '../../../assets/images/edit.inline.svg'; import WalletTransaction from '../../../domain/WalletTransaction'; import JormungandrTransaction from '../../../domain/JormungandrTransaction'; import CardanoShelleyTransaction from '../../../domain/CardanoShelleyTransaction'; @@ -18,7 +18,7 @@ import type { TransactionDirectionType } from '../../../api/ada/transactions/typ import { transactionTypes } from '../../../api/ada/transactions/types'; import type { AssuranceLevel } from '../../../types/transactionAssuranceTypes'; import { Logger } from '../../../utils/logging'; -import ExpandArrow from '../../../assets/images/expand-arrow-grey.inline.svg'; +import { ReactComponent as ExpandArrow } from '../../../assets/images/expand-arrow-grey.inline.svg'; import ExplorableHashContainer from '../../../containers/widgets/ExplorableHashContainer'; import { SelectedExplorer } from '../../../domain/SelectedExplorer'; import { calculateAndFormatValue } from '../../../utils/unit-of-account'; diff --git a/packages/yoroi-extension/app/components/wallet/transactions/TransactionTypeIcon.js b/packages/yoroi-extension/app/components/wallet/transactions/TransactionTypeIcon.js index 5507e763ea..dc23bca052 100644 --- a/packages/yoroi-extension/app/components/wallet/transactions/TransactionTypeIcon.js +++ b/packages/yoroi-extension/app/components/wallet/transactions/TransactionTypeIcon.js @@ -3,10 +3,10 @@ import { Component } from 'react'; import type { Node } from 'react'; import { observer } from 'mobx-react'; import classNames from 'classnames'; -import ExpendIcon from '../../../assets/images/transaction/send-ic.inline.svg'; -import IncomeIcon from '../../../assets/images/transaction/receive-ic.inline.svg'; -import ExchangeIcon from '../../../assets/images/exchange-ic.inline.svg'; -import FailedIcon from '../../../assets/images/transaction/deny-ic.inline.svg'; +import { ReactComponent as ExpendIcon } from '../../../assets/images/transaction/send-ic.inline.svg'; +import { ReactComponent as IncomeIcon } from '../../../assets/images/transaction/receive-ic.inline.svg'; +import { ReactComponent as ExchangeIcon } from '../../../assets/images/exchange-ic.inline.svg'; +import { ReactComponent as FailedIcon } from '../../../assets/images/transaction/deny-ic.inline.svg'; import styles from './TransactionTypeIcon.scss'; type Props = {| diff --git a/packages/yoroi-extension/app/components/wallet/transactions/WalletNoTransactions.js b/packages/yoroi-extension/app/components/wallet/transactions/WalletNoTransactions.js index e1d69f53bc..3964d0db8f 100644 --- a/packages/yoroi-extension/app/components/wallet/transactions/WalletNoTransactions.js +++ b/packages/yoroi-extension/app/components/wallet/transactions/WalletNoTransactions.js @@ -3,8 +3,8 @@ import { Component } from 'react'; import type { Node } from 'react'; import { observer } from 'mobx-react'; import styles from './WalletNoTransactions.scss'; -import NoTransactionClassicSvg from '../../../assets/images/transaction/no-transactions-yet.classic.inline.svg'; -import NoTransactionModernSvg from '../../../assets/images/transaction/no-transactions-yet.modern.inline.svg'; +import { ReactComponent as NoTransactionClassicSvg } from '../../../assets/images/transaction/no-transactions-yet.classic.inline.svg'; +import { ReactComponent as NoTransactionModernSvg } from '../../../assets/images/transaction/no-transactions-yet.modern.inline.svg'; type Props = {| +label: string, diff --git a/packages/yoroi-extension/app/components/wallet/transactions/WalletNoTransactionsRevamp.js b/packages/yoroi-extension/app/components/wallet/transactions/WalletNoTransactionsRevamp.js index 4352ae57f4..e2f17717c6 100644 --- a/packages/yoroi-extension/app/components/wallet/transactions/WalletNoTransactionsRevamp.js +++ b/packages/yoroi-extension/app/components/wallet/transactions/WalletNoTransactionsRevamp.js @@ -2,8 +2,8 @@ import { Component } from 'react'; import type { Node } from 'react'; import { observer } from 'mobx-react'; -import NoTransactionClassicSvg from '../../../assets/images/transaction/no-transactions-yet.classic.inline.svg'; -import NoTransactionModernSvg from '../../../assets/images/transaction/no-transactions-yet.modern.inline.svg'; +import { ReactComponent as NoTransactionClassicSvg } from '../../../assets/images/transaction/no-transactions-yet.classic.inline.svg'; +import { ReactComponent as NoTransactionModernSvg } from '../../../assets/images/transaction/no-transactions-yet.modern.inline.svg'; import { Box, Typography } from '@mui/material'; type Props = {| diff --git a/packages/yoroi-extension/app/components/wallet/voting/Voting.js b/packages/yoroi-extension/app/components/wallet/voting/Voting.js index eac557c23e..72148e60e3 100644 --- a/packages/yoroi-extension/app/components/wallet/voting/Voting.js +++ b/packages/yoroi-extension/app/components/wallet/voting/Voting.js @@ -7,8 +7,8 @@ import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl'; import globalMessages from '../../../i18n/global-messages'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import { Button } from '@mui/material'; -import AppStoreBadge from '../../../assets/images/app-store-badge.inline.svg'; -import PlayStoreBadge from '../../../assets/images/google-play-badge.inline.svg'; +import { ReactComponent as AppStoreBadge } from '../../../assets/images/app-store-badge.inline.svg'; +import { ReactComponent as PlayStoreBadge } from '../../../assets/images/google-play-badge.inline.svg'; import WarningBox from '../../widgets/WarningBox'; import styles from './Voting.scss'; diff --git a/packages/yoroi-extension/app/components/widgets/Accordion.js b/packages/yoroi-extension/app/components/widgets/Accordion.js index e0f9093212..5b83e5da4a 100644 --- a/packages/yoroi-extension/app/components/widgets/Accordion.js +++ b/packages/yoroi-extension/app/components/widgets/Accordion.js @@ -4,7 +4,7 @@ import type { Node } from 'react'; import { observer } from 'mobx-react'; import classnames from 'classnames'; -import ArrowDownSVG from '../../assets/images/expand-arrow-grey.inline.svg'; +import { ReactComponent as ArrowDownSVG } from '../../assets/images/expand-arrow-grey.inline.svg'; import styles from './Accordion.scss'; type Props = {| diff --git a/packages/yoroi-extension/app/components/widgets/CopyableAddress.js b/packages/yoroi-extension/app/components/widgets/CopyableAddress.js index 4c4288a197..187dee9448 100644 --- a/packages/yoroi-extension/app/components/widgets/CopyableAddress.js +++ b/packages/yoroi-extension/app/components/widgets/CopyableAddress.js @@ -5,8 +5,8 @@ import classnames from 'classnames'; import { defineMessages, intlShape } from 'react-intl'; import type { Node } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; -import IconCopy from '../../assets/images/copy.inline.svg'; -import IconCopied from '../../assets/images/copied.inline.svg'; +import { ReactComponent as IconCopy } from '../../assets/images/copy.inline.svg'; +import { ReactComponent as IconCopied } from '../../assets/images/copied.inline.svg'; import styles from './CopyableAddress.scss'; import { Tooltip, Typography } from '@mui/material'; import type { Notification } from '../../types/notificationType'; diff --git a/packages/yoroi-extension/app/components/widgets/CustomTooltip.js b/packages/yoroi-extension/app/components/widgets/CustomTooltip.js index 8b9d7ed67e..b8ae186e1d 100644 --- a/packages/yoroi-extension/app/components/widgets/CustomTooltip.js +++ b/packages/yoroi-extension/app/components/widgets/CustomTooltip.js @@ -3,7 +3,7 @@ import { Component } from 'react'; import type { Node } from 'react'; import { observer } from 'mobx-react'; import { Typography, Tooltip } from '@mui/material' -import InfoIcon from '../../assets/images/info-icon.inline.svg'; +import { ReactComponent as InfoIcon } from '../../assets/images/info-icon.inline.svg'; import styles from './CustomTooltip.scss'; import classnames from 'classnames'; diff --git a/packages/yoroi-extension/app/components/widgets/DialogBackButton.js b/packages/yoroi-extension/app/components/widgets/DialogBackButton.js index 343c3d441f..459c113609 100644 --- a/packages/yoroi-extension/app/components/widgets/DialogBackButton.js +++ b/packages/yoroi-extension/app/components/widgets/DialogBackButton.js @@ -2,7 +2,7 @@ import { Component } from 'react'; import type { Node } from 'react'; import { observer } from 'mobx-react'; -import BackArrow from '../../assets/images/back-arrow-ic.inline.svg'; +import { ReactComponent as BackArrow } from '../../assets/images/back-arrow-ic.inline.svg'; import { IconButton } from '@mui/material'; type Props = {| diff --git a/packages/yoroi-extension/app/components/widgets/DialogCloseButton.js b/packages/yoroi-extension/app/components/widgets/DialogCloseButton.js index be2438ae99..ba3f3e7694 100644 --- a/packages/yoroi-extension/app/components/widgets/DialogCloseButton.js +++ b/packages/yoroi-extension/app/components/widgets/DialogCloseButton.js @@ -3,7 +3,7 @@ import { Component } from 'react'; import type { Node } from 'react'; import { observer } from 'mobx-react'; -import CloseCross from '../../assets/images/cross-dark.inline.svg'; +import { ReactComponent as CloseCross } from '../../assets/images/cross-dark.inline.svg'; import { IconButton } from '@mui/material'; type Props = {| diff --git a/packages/yoroi-extension/app/components/widgets/InformativeError.js b/packages/yoroi-extension/app/components/widgets/InformativeError.js index e2e94569e8..2319cd7a90 100644 --- a/packages/yoroi-extension/app/components/widgets/InformativeError.js +++ b/packages/yoroi-extension/app/components/widgets/InformativeError.js @@ -4,7 +4,7 @@ import { Component } from 'react'; import type { Node } from 'react'; import { observer } from 'mobx-react'; -import EmptyIllustration from '../../assets/images/dashboard/empty-dashboard.inline.svg'; +import { ReactComponent as EmptyIllustration } from '../../assets/images/dashboard/empty-dashboard.inline.svg'; import styles from './InformativeError.scss'; type Props = {| diff --git a/packages/yoroi-extension/app/components/widgets/PageSelect.js b/packages/yoroi-extension/app/components/widgets/PageSelect.js index 87a133a222..fb676b9ce1 100644 --- a/packages/yoroi-extension/app/components/widgets/PageSelect.js +++ b/packages/yoroi-extension/app/components/widgets/PageSelect.js @@ -4,8 +4,8 @@ import type { Node } from 'react'; import classnames from 'classnames'; import { observer } from 'mobx-react'; import styles from './PageSelect.scss'; -import NavAll from '../../assets/images/widget/page-nav/arrow-all.inline.svg'; -import NavSingle from '../../assets/images/widget/page-nav/arrow-single.inline.svg'; +import { ReactComponent as NavAll } from '../../assets/images/widget/page-nav/arrow-all.inline.svg'; +import { ReactComponent as NavSingle } from '../../assets/images/widget/page-nav/arrow-single.inline.svg'; type Props = {| +currentPage: number; diff --git a/packages/yoroi-extension/app/components/widgets/ProgressSteps.js b/packages/yoroi-extension/app/components/widgets/ProgressSteps.js index c4171801ba..1924a2276e 100644 --- a/packages/yoroi-extension/app/components/widgets/ProgressSteps.js +++ b/packages/yoroi-extension/app/components/widgets/ProgressSteps.js @@ -4,10 +4,10 @@ import type { Element, Node } from 'react'; import { observer } from 'mobx-react'; import classNames from 'classnames'; -import IconTickSVG from '../../assets/images/widget/tick.inline.svg'; -import IconTickGreenSVG from '../../assets/images/widget/tick-green.inline.svg'; -import IconCrossSVG from '../../assets/images/widget/cross.inline.svg'; -import IconCrossGreenSVG from '../../assets/images/widget/cross-green.inline.svg'; +import { ReactComponent as IconTickSVG } from '../../assets/images/widget/tick.inline.svg'; +import { ReactComponent as IconTickGreenSVG } from '../../assets/images/widget/tick-green.inline.svg'; +import { ReactComponent as IconCrossSVG } from '../../assets/images/widget/cross.inline.svg'; +import { ReactComponent as IconCrossGreenSVG } from '../../assets/images/widget/cross-green.inline.svg'; import styles from './ProgressSteps.scss'; // TODO: move to type folder? diff --git a/packages/yoroi-extension/app/components/widgets/TooltipBox.js b/packages/yoroi-extension/app/components/widgets/TooltipBox.js index b423aa1cf0..5737bd11cf 100644 --- a/packages/yoroi-extension/app/components/widgets/TooltipBox.js +++ b/packages/yoroi-extension/app/components/widgets/TooltipBox.js @@ -5,8 +5,8 @@ import { observer } from 'mobx-react'; import { intlShape } from 'react-intl'; import styles from './TooltipBox.scss'; import globalMessages from '../../i18n/global-messages'; -import WarningIcon from '../../assets/images/attention-modern.inline.svg'; -import CloseCross from '../../assets/images/small-cross.inline.svg'; +import { ReactComponent as WarningIcon } from '../../assets/images/attention-modern.inline.svg'; +import { ReactComponent as CloseCross } from '../../assets/images/small-cross.inline.svg'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; type Props = {| diff --git a/packages/yoroi-extension/app/components/widgets/UnavailableDialog.js b/packages/yoroi-extension/app/components/widgets/UnavailableDialog.js index 0d7acc901b..d7104012db 100644 --- a/packages/yoroi-extension/app/components/widgets/UnavailableDialog.js +++ b/packages/yoroi-extension/app/components/widgets/UnavailableDialog.js @@ -2,7 +2,7 @@ import { Component } from 'react'; import type { Node } from 'react'; import { observer } from 'mobx-react'; -import ErrorInfo from '../../assets/images/error-info.inline.svg'; +import { ReactComponent as ErrorInfo } from '../../assets/images/error-info.inline.svg'; import styles from './UnavailableDialog.scss'; import VerticallyCenteredLayout from '../layout/VerticallyCenteredLayout'; diff --git a/packages/yoroi-extension/app/components/widgets/forms/ReadOnlyInput.js b/packages/yoroi-extension/app/components/widgets/forms/ReadOnlyInput.js index efc608f8c5..2c78e1e577 100644 --- a/packages/yoroi-extension/app/components/widgets/forms/ReadOnlyInput.js +++ b/packages/yoroi-extension/app/components/widgets/forms/ReadOnlyInput.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; import { intlShape } from 'react-intl'; import TextField from '../../common/TextField'; import globalMessages from '../../../i18n/global-messages'; -import EditSvg from '../../../assets/images/edit.inline.svg'; +import { ReactComponent as EditSvg } from '../../../assets/images/edit.inline.svg'; import styles from './ReadOnlyInput.scss'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; diff --git a/packages/yoroi-extension/app/components/widgets/options/OptionBlock.js b/packages/yoroi-extension/app/components/widgets/options/OptionBlock.js index 1b867ebade..18bad04a6b 100644 --- a/packages/yoroi-extension/app/components/widgets/options/OptionBlock.js +++ b/packages/yoroi-extension/app/components/widgets/options/OptionBlock.js @@ -6,7 +6,7 @@ import { intlShape } from 'react-intl'; import classnames from 'classnames'; import globalMessages from '../../../i18n/global-messages'; -import ArrowDownSVG from '../../../assets/images/expand-arrow-grey.inline.svg'; +import { ReactComponent as ArrowDownSVG } from '../../../assets/images/expand-arrow-grey.inline.svg'; import styles from './OptionBlock.scss'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; diff --git a/packages/yoroi-extension/app/config/unitOfAccount.js b/packages/yoroi-extension/app/config/unitOfAccount.js index 352999984f..8a619a0153 100644 --- a/packages/yoroi-extension/app/config/unitOfAccount.js +++ b/packages/yoroi-extension/app/config/unitOfAccount.js @@ -1,12 +1,12 @@ // @flow -import USD from '../assets/images/currencies/USD.inline.svg'; -import JPY from '../assets/images/currencies/JPY.inline.svg'; -import EUR from '../assets/images/currencies/EUR.inline.svg'; -import CNY from '../assets/images/currencies/CNY.inline.svg'; -import KRW from '../assets/images/currencies/KRW.inline.svg'; -import BTC from '../assets/images/currencies/BTC.inline.svg'; -import ETH from '../assets/images/currencies/ETH.inline.svg'; +import { ReactComponent as USD } from '../assets/images/currencies/USD.inline.svg'; +import { ReactComponent as JPY } from '../assets/images/currencies/JPY.inline.svg'; +import { ReactComponent as EUR } from '../assets/images/currencies/EUR.inline.svg'; +import { ReactComponent as CNY } from '../assets/images/currencies/CNY.inline.svg'; +import { ReactComponent as KRW } from '../assets/images/currencies/KRW.inline.svg'; +import { ReactComponent as BTC } from '../assets/images/currencies/BTC.inline.svg'; +import { ReactComponent as ETH } from '../assets/images/currencies/ETH.inline.svg'; export const SUPPORTED_CURRENCIES = [ { symbol: 'USD', svg: USD }, diff --git a/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.js b/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.js index 9e19d34cb7..50689ca13e 100644 --- a/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.js +++ b/packages/yoroi-extension/app/containers/settings/categories/BlockchainSettingsPage.js @@ -11,7 +11,7 @@ import UriSettingsBlock from '../../../components/settings/categories/general-se import registerProtocols from '../../../uri-protocols'; import environment from '../../../environment'; import { unitOfAccountDisabledValue } from '../../../types/unitOfAccountType'; -import AdaCurrency from '../../../assets/images/currencies/ADA.inline.svg'; +import { ReactComponent as AdaCurrency } from '../../../assets/images/currencies/ADA.inline.svg'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import type { UnitOfAccountSettingType } from '../../../types/unitOfAccountType'; import LocalizableError from '../../../i18n/LocalizableError'; diff --git a/packages/yoroi-extension/app/containers/wallet/WalletDelegationBanner.js b/packages/yoroi-extension/app/containers/wallet/WalletDelegationBanner.js index 9adce8b39a..1f21e661cd 100644 --- a/packages/yoroi-extension/app/containers/wallet/WalletDelegationBanner.js +++ b/packages/yoroi-extension/app/containers/wallet/WalletDelegationBanner.js @@ -4,7 +4,7 @@ import { Box, styled } from '@mui/system'; import { Stack, Button, IconButton, Typography, Link } from '@mui/material'; import { injectIntl, defineMessages } from 'react-intl'; -import CloseIcon from '../../assets/images/close.inline.svg'; +import { ReactComponent as CloseIcon } from '../../assets/images/close.inline.svg'; import type { $npm$ReactIntl$IntlShape } from 'react-intl'; import globalMessages from '../../i18n/global-messages'; import { observer } from 'mobx-react'; diff --git a/packages/yoroi-extension/app/containers/wallet/WalletEmptyBanner.js b/packages/yoroi-extension/app/containers/wallet/WalletEmptyBanner.js index 6821e0fe74..a4b8edc1f8 100644 --- a/packages/yoroi-extension/app/containers/wallet/WalletEmptyBanner.js +++ b/packages/yoroi-extension/app/containers/wallet/WalletEmptyBanner.js @@ -3,8 +3,8 @@ import type { Node, ComponentType } from 'react'; import { Box } from '@mui/system'; import { Button, IconButton, Typography } from '@mui/material'; import { injectIntl, defineMessages } from 'react-intl'; -import CloseIcon from '../../assets/images/close.inline.svg'; -import CoverBg from '../../assets/images/transaction/wallet-empty-banner.inline.svg'; +import { ReactComponent as CloseIcon } from '../../assets/images/close.inline.svg'; +import { ReactComponent as CoverBg } from '../../assets/images/transaction/wallet-empty-banner.inline.svg'; import type { $npm$ReactIntl$IntlShape } from 'react-intl'; import globalMessages from '../../i18n/global-messages'; import { observer } from 'mobx-react'; diff --git a/packages/yoroi-extension/app/containers/wallet/WalletSummaryPage.js b/packages/yoroi-extension/app/containers/wallet/WalletSummaryPage.js index 4a2f04da88..653976a0fc 100644 --- a/packages/yoroi-extension/app/containers/wallet/WalletSummaryPage.js +++ b/packages/yoroi-extension/app/containers/wallet/WalletSummaryPage.js @@ -10,7 +10,7 @@ import NotificationMessage from '../../components/widgets/NotificationMessage'; import Dialog from '../../components/widgets/Dialog'; import LoadingSpinner from '../../components/widgets/LoadingSpinner'; import globalMessages from '../../i18n/global-messages'; -import successIcon from '../../assets/images/success-small.inline.svg'; +import { ReactComponent as successIcon } from '../../assets/images/success-small.inline.svg'; import type { InjectedOrGenerated } from '../../types/injectedPropsType'; import WalletTransactionsList from '../../components/wallet/transactions/WalletTransactionsList'; import WalletTransactionsListRevamp from '../../components/wallet/transactions/WalletTransactionsListRevamp'; diff --git a/packages/yoroi-extension/app/containers/wallet/staking/CardanoStakingPage.js b/packages/yoroi-extension/app/containers/wallet/staking/CardanoStakingPage.js index 31ce1c7521..799f27f896 100644 --- a/packages/yoroi-extension/app/containers/wallet/staking/CardanoStakingPage.js +++ b/packages/yoroi-extension/app/containers/wallet/staking/CardanoStakingPage.js @@ -20,7 +20,7 @@ import { import DialogCloseButton from '../../../components/widgets/DialogCloseButton'; import { PublicDeriver } from '../../../api/ada/lib/storage/models/PublicDeriver/index'; import globalMessages from '../../../i18n/global-messages'; -import InvalidURIImg from '../../../assets/images/uri/invalid-uri.inline.svg'; +import { ReactComponent as InvalidURIImg } from '../../../assets/images/uri/invalid-uri.inline.svg'; import ErrorBlock from '../../../components/widgets/ErrorBlock'; import AnnotatedLoader from '../../../components/transfer/AnnotatedLoader'; import DelegationSuccessDialog from '../../../components/wallet/staking/DelegationSuccessDialog'; diff --git a/packages/yoroi-extension/app/containers/wallet/staking/StakingDashboardPage.js b/packages/yoroi-extension/app/containers/wallet/staking/StakingDashboardPage.js index ce381681de..2a1e719df3 100644 --- a/packages/yoroi-extension/app/containers/wallet/staking/StakingDashboardPage.js +++ b/packages/yoroi-extension/app/containers/wallet/staking/StakingDashboardPage.js @@ -16,7 +16,7 @@ import Dialog from '../../../components/widgets/Dialog'; import { getJormungandrTxFee } from '../../../api/jormungandr/lib/transactions/JormungandrTxSignRequest'; import DialogCloseButton from '../../../components/widgets/DialogCloseButton'; import ErrorBlock from '../../../components/widgets/ErrorBlock'; -import InvalidURIImg from '../../../assets/images/uri/invalid-uri.inline.svg'; +import { ReactComponent as InvalidURIImg } from '../../../assets/images/uri/invalid-uri.inline.svg'; import UpcomingRewards from '../../../components/wallet/staking/dashboard/UpcomingRewards'; import type { BoxInfo } from '../../../components/wallet/staking/dashboard/UpcomingRewards'; import LessThanExpectedDialog from '../../../components/wallet/staking/dashboard/LessThanExpectedDialog'; diff --git a/packages/yoroi-extension/app/ergo-connector/App.js b/packages/yoroi-extension/app/ergo-connector/App.js index 94f3d68351..80420cb7d4 100644 --- a/packages/yoroi-extension/app/ergo-connector/App.js +++ b/packages/yoroi-extension/app/ergo-connector/App.js @@ -17,6 +17,7 @@ import id from 'react-intl/locale-data/id'; import es from 'react-intl/locale-data/es'; import it from 'react-intl/locale-data/it'; import tr from 'react-intl/locale-data/tr'; +import { observable, autorun, runInAction } from 'mobx'; import { Routes } from './Routes'; import { translations } from '../i18n/translations'; import type { StoresMap } from './stores'; @@ -58,6 +59,20 @@ type State = {| @observer class App extends Component { + @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, }; @@ -76,14 +91,13 @@ class App extends Component { } render(): Node { + const mergedMessages = this.mergedMessages; + if (mergedMessages === null) { + return null; + } + const { stores } = this.props; const locale = stores.profile.currentLocale; - // eslint-disable-next-line prefer-object-spread - const mergedMessages: { [key: string]: string, ... } = Object.assign( - {}, - translations['en-US'], - translations[locale] - ); const themeVars = Object.assign(stores.profile.currentThemeVars, {}); const currentTheme = stores.profile.currentTheme; diff --git a/packages/yoroi-extension/app/ergo-connector/components/connect/ConnectPage.js b/packages/yoroi-extension/app/ergo-connector/components/connect/ConnectPage.js index de2ce98ec2..e5ed79cd3e 100644 --- a/packages/yoroi-extension/app/ergo-connector/components/connect/ConnectPage.js +++ b/packages/yoroi-extension/app/ergo-connector/components/connect/ConnectPage.js @@ -28,8 +28,8 @@ import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm'; import config from '../../../config'; import vjf from 'mobx-react-form/lib/validators/VJF'; import { WrongPassphraseError } from '../../../api/ada/lib/cardanoCrypto/cryptoErrors' -import NoWalletImage from '../../assets/images/no-websites-connected.inline.svg' -import NoDappIcon from '../../../assets/images/dapp-connector/no-dapp.inline.svg'; +import { ReactComponent as NoWalletImage } from '../../assets/images/no-websites-connected.inline.svg' +import { ReactComponent as NoDappIcon } from '../../../assets/images/dapp-connector/no-dapp.inline.svg'; const messages = defineMessages({ subtitle: { diff --git a/packages/yoroi-extension/app/ergo-connector/components/layout/Layout.js b/packages/yoroi-extension/app/ergo-connector/components/layout/Layout.js index 996eb4d765..a854307e23 100644 --- a/packages/yoroi-extension/app/ergo-connector/components/layout/Layout.js +++ b/packages/yoroi-extension/app/ergo-connector/components/layout/Layout.js @@ -1,13 +1,13 @@ // @flow import { Component } from 'react'; import type { Node } from 'react'; -import YoroiLogo from '../../assets/images/yoroi_logo.inline.svg'; +import { ReactComponent as YoroiLogo } from '../../assets/images/yoroi_logo.inline.svg'; import styles from './Layout.scss'; import { observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import TestnetWarningBanner from '../../../components/topbar/banners/TestnetWarningBanner'; -import DappConnectorIcon from '../../../assets/images/dapp-connector/dapp-connector.inline.svg'; +import { ReactComponent as DappConnectorIcon } from '../../../assets/images/dapp-connector/dapp-connector.inline.svg'; import environment from '../../../environment'; type Props = {| diff --git a/packages/yoroi-extension/app/ergo-connector/components/signin/CardanoSignTxPage.js b/packages/yoroi-extension/app/ergo-connector/components/signin/CardanoSignTxPage.js index 954735d8b2..2d2b43ec96 100644 --- a/packages/yoroi-extension/app/ergo-connector/components/signin/CardanoSignTxPage.js +++ b/packages/yoroi-extension/app/ergo-connector/components/signin/CardanoSignTxPage.js @@ -46,7 +46,7 @@ import SignTxTabs from './SignTxTabs'; import { signTxMessages } from './SignTxPage'; import { WrongPassphraseError } from '../../../api/ada/lib/cardanoCrypto/cryptoErrors'; import { LoadingButton } from '@mui/lab'; -import NoDappIcon from '../../../assets/images/dapp-connector/no-dapp.inline.svg'; +import { ReactComponent as NoDappIcon } from '../../../assets/images/dapp-connector/no-dapp.inline.svg'; type Props = {| +txData: ?CardanoConnectorSignRequest, diff --git a/packages/yoroi-extension/app/ergo-connector/components/signin/SignTxPage.js b/packages/yoroi-extension/app/ergo-connector/components/signin/SignTxPage.js index 5b4df6c9b2..35cbd94927 100644 --- a/packages/yoroi-extension/app/ergo-connector/components/signin/SignTxPage.js +++ b/packages/yoroi-extension/app/ergo-connector/components/signin/SignTxPage.js @@ -35,7 +35,7 @@ import { Box } from '@mui/system'; import WalletCard from '../connect/WalletCard'; import { WrongPassphraseError } from '../../../api/ada/lib/cardanoCrypto/cryptoErrors'; import { LoadingButton } from '@mui/lab'; -import NoDappIcon from '../../../assets/images/dapp-connector/no-dapp.inline.svg'; +import { ReactComponent as NoDappIcon } from '../../../assets/images/dapp-connector/no-dapp.inline.svg'; type Props = {| +tx: Tx, diff --git a/packages/yoroi-extension/app/ergo-connector/stores/index.js b/packages/yoroi-extension/app/ergo-connector/stores/index.js index 80ec70de42..fbbf9e1fb7 100644 --- a/packages/yoroi-extension/app/ergo-connector/stores/index.js +++ b/packages/yoroi-extension/app/ergo-connector/stores/index.js @@ -102,7 +102,7 @@ export default (action( initializeSubstore(loadedStores.substores[ApiOptions.ada]); // Perform load after all setup is done to ensure migration can modify store state - loadedStores.loading.load(); + loadedStores.loading.load('connector'); return loadedStores; } diff --git a/packages/yoroi-extension/app/i18n/translations.js b/packages/yoroi-extension/app/i18n/translations.js index dd0b0a84da..44622b605f 100644 --- a/packages/yoroi-extension/app/i18n/translations.js +++ b/packages/yoroi-extension/app/i18n/translations.js @@ -1,27 +1,29 @@ // @flow import globalMessages from './global-messages'; import type { $npm$ReactIntl$MessageDescriptor } from 'react-intl'; -import EnglishFlag from '../assets/images/flags/english.inline.svg'; -import JapaneseFlag from '../assets/images/flags/japanese.inline.svg'; -import KoreanFlag from '../assets/images/flags/korean.inline.svg'; -import Chinese from '../assets/images/flags/chinese.inline.svg'; -import RussianFlag from '../assets/images/flags/russian.inline.svg'; -import GermanFlag from '../assets/images/flags/german.inline.svg'; -import FrenchFlag from '../assets/images/flags/french.inline.svg'; -import DutchFlag from '../assets/images/flags/dutch.inline.svg'; -import BrazilFlag from '../assets/images/flags/brazil.inline.svg'; -import SpanishFlag from '../assets/images/flags/spanish.inline.svg'; -import ItalianFlag from '../assets/images/flags/italian.inline.svg'; -import IndonesianFlag from '../assets/images/flags/indonesian.inline.svg'; -import TurkishFlag from '../assets/images/flags/turkish.inline.svg'; -import CzechFlag from '../assets/images/flags/czech.inline.svg'; -import SlovakFlag from '../assets/images/flags/slovak.inline.svg'; +import { ReactComponent as EnglishFlag } from '../assets/images/flags/english.inline.svg'; +import { ReactComponent as JapaneseFlag } from '../assets/images/flags/japanese.inline.svg'; +import { ReactComponent as KoreanFlag } from '../assets/images/flags/korean.inline.svg'; +import { ReactComponent as Chinese } from '../assets/images/flags/chinese.inline.svg'; +import { ReactComponent as RussianFlag } from '../assets/images/flags/russian.inline.svg'; +import { ReactComponent as GermanFlag } from '../assets/images/flags/german.inline.svg'; +import { ReactComponent as FrenchFlag } from '../assets/images/flags/french.inline.svg'; +import { ReactComponent as DutchFlag } from '../assets/images/flags/dutch.inline.svg'; +import { ReactComponent as BrazilFlag } from '../assets/images/flags/brazil.inline.svg'; +import { ReactComponent as SpanishFlag } from '../assets/images/flags/spanish.inline.svg'; +import { ReactComponent as ItalianFlag } from '../assets/images/flags/italian.inline.svg'; +import { ReactComponent as IndonesianFlag } from '../assets/images/flags/indonesian.inline.svg'; +import { ReactComponent as TurkishFlag } from '../assets/images/flags/turkish.inline.svg'; +import { ReactComponent as CzechFlag } from '../assets/images/flags/czech.inline.svg'; +import { ReactComponent as SlovakFlag } from '../assets/images/flags/slovak.inline.svg'; // This is essentially bulk require // $FlowExpectedError[prop-missing] require.context comes from webpack -const req = require.context('./locales', true, /\.json.*$/); -export const translations: { [locale: string]: { [key: string]: string, ... }, ... } = {}; +const req = require.context('./locales', true, /\.json.*$/, 'lazy'); +export const translations: {| + [locale: string]: Promise<{| [key: string]: string, |}>, +|} = {}; req.keys().forEach((file) => { const locale = file.replace('./', '').replace('.json', ''); diff --git a/packages/yoroi-extension/app/stores/base/BaseCoinPriceStore.js b/packages/yoroi-extension/app/stores/base/BaseCoinPriceStore.js index 41b52732c1..bc65bf4b63 100644 --- a/packages/yoroi-extension/app/stores/base/BaseCoinPriceStore.js +++ b/packages/yoroi-extension/app/stores/base/BaseCoinPriceStore.js @@ -57,7 +57,7 @@ export default class BaseCoinPriceStore expirePriceDataTimeoutId: ?TimeoutID = null; // Cached public key to verify the price data. - @observable pubKeyData: ?RustModule.WalletV3.PublicKey = null; + @observable pubKeyData: ?RustModule.WalletV4.PublicKey = null; @observable getAllPrices: Request = new Request(getAllPrices); @@ -98,7 +98,7 @@ export default class BaseCoinPriceStore const storedKey: ?string = await this.api.localStorage.getCoinPricePubKeyData(); Logger.debug(`${nameof(BaseCoinPriceStore)}: stored pubKeyData ${storedKey == null ? 'null' : storedKey}`); runInAction(() => { - this.pubKeyData = RustModule.WalletV3.PublicKey.from_bytes(Buffer.from( + this.pubKeyData = RustModule.WalletV4.PublicKey.from_bytes(Buffer.from( storedKey != null ? storedKey : CONFIG.app.pubKeyData, 'hex' )); @@ -277,7 +277,7 @@ export default class BaseCoinPriceStore return; } runInAction(() => { - this.pubKeyData = RustModule.WalletV3.PublicKey.from_bytes(Buffer.from(pubKeyData, 'hex')); + this.pubKeyData = RustModule.WalletV4.PublicKey.from_bytes(Buffer.from(pubKeyData, 'hex')); }); await this.api.localStorage.setCoinPricePubKeyData(pubKeyData); } diff --git a/packages/yoroi-extension/app/stores/base/BaseLoadingStore.js b/packages/yoroi-extension/app/stores/base/BaseLoadingStore.js index 704110164d..ea5227643e 100644 --- a/packages/yoroi-extension/app/stores/base/BaseLoadingStore.js +++ b/packages/yoroi-extension/app/stores/base/BaseLoadingStore.js @@ -35,11 +35,14 @@ export default class BaseLoadingStore extends Store this.isLoading, this.postLoadingScreenEnd.bind(this)); Promise .all([ - this.loadRustRequest.execute().promise, + // $FlowFixMe[invalid-tuple-arity]: this is correct, flow is confused + this.loadRustRequest.execute( + (env === 'extension') ? [ 'dontLoadMessagesSigning' ] : [] + ).promise, this.loadPersistentDbRequest.execute().promise ]) .then(async () => { diff --git a/packages/yoroi-extension/app/stores/index.js b/packages/yoroi-extension/app/stores/index.js index 6f51cf473c..d239898c24 100644 --- a/packages/yoroi-extension/app/stores/index.js +++ b/packages/yoroi-extension/app/stores/index.js @@ -186,7 +186,7 @@ export default (action( initializeSubstore(loadedStores.substores[ApiOptions.jormungandr]); // Perform load after all setup is done to ensure migration can modify store state - loadedStores.loading.load(); + loadedStores.loading.load('extension'); return loadedStores; } diff --git a/packages/yoroi-extension/app/stores/stateless/sidebarCategories.js b/packages/yoroi-extension/app/stores/stateless/sidebarCategories.js index 3a0e1e4c45..70346fd6c4 100644 --- a/packages/yoroi-extension/app/stores/stateless/sidebarCategories.js +++ b/packages/yoroi-extension/app/stores/stateless/sidebarCategories.js @@ -2,28 +2,25 @@ import { ROUTES } from '../../routes-config'; import type { MessageDescriptor } from 'react-intl'; import globalMessages, { connectorMessages } from '../../i18n/global-messages'; -import walletsIcon from '../../assets/images/sidebar/my_wallets.inline.svg'; -import transferIcon from '../../assets/images/sidebar/transfer_wallets.inline.svg'; -import settingsIcon from '../../assets/images/sidebar/wallet-settings-2-ic.inline.svg'; -import goBackIcon from '../../assets/images/top-bar/back-arrow-white.inline.svg'; -import dappConnectorIcon from '../../assets/images/dapp-connector/dapp-connector.inline.svg'; -import noticeBoardIcon from '../../assets/images/notice-board/notice-board.inline.svg'; +import { ReactComponent as walletsIcon } from '../../assets/images/sidebar/my_wallets.inline.svg'; +import { ReactComponent as transferIcon } from '../../assets/images/sidebar/transfer_wallets.inline.svg'; +import { ReactComponent as settingsIcon } from '../../assets/images/sidebar/wallet-settings-2-ic.inline.svg'; +import { ReactComponent as goBackIcon } from '../../assets/images/top-bar/back-arrow-white.inline.svg'; +import { ReactComponent as dappConnectorIcon } from '../../assets/images/dapp-connector/dapp-connector.inline.svg'; +import { ReactComponent as noticeBoardIcon } from '../../assets/images/notice-board/notice-board.inline.svg'; import { matchRoute } from '../../utils/routing'; import environment from '../../environment'; import { asGetStakingKey } from '../../api/ada/lib/storage/models/PublicDeriver/traits'; -import walletIcon from '../../assets/images/sidebar/revamp/wallet.inline.svg'; -import stakingIcon from '../../assets/images/sidebar/revamp/staking.inline.svg'; -import assetsIcon from '../../assets/images/sidebar/revamp/assets.inline.svg'; -import votingIcon from '../../assets/images/sidebar/revamp/voting.inline.svg'; -// import swapIcon from '../../assets/images/sidebar/revamp/swap.inline.svg'; -import settingIcon from '../../assets/images/sidebar/revamp/setting.inline.svg'; -import faqIcon from '../../assets/images/sidebar/revamp/faq.inline.svg'; +import { ReactComponent as walletIcon } from '../../assets/images/sidebar/revamp/wallet.inline.svg'; +import { ReactComponent as stakingIcon } from '../../assets/images/sidebar/revamp/staking.inline.svg'; +import { ReactComponent as assetsIcon } from '../../assets/images/sidebar/revamp/assets.inline.svg'; +import { ReactComponent as votingIcon } from '../../assets/images/sidebar/revamp/voting.inline.svg'; +// import { ReactComponent as swapIcon } from '../../assets/images/sidebar/revamp/swap.inline.svg'; +import { ReactComponent as settingIcon } from '../../assets/images/sidebar/revamp/setting.inline.svg'; +import { ReactComponent as faqIcon } from '../../assets/images/sidebar/revamp/faq.inline.svg'; import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver'; -// import newUpdatesIcon from '../../assets/images/sidebar/revamp/new-updates.inline.svg'; -// import feedbackIcon from '../../assets/images/sidebar/revamp/feedback.inline.svg'; - export type SidebarCategory = {| +className: string, +route: string, diff --git a/packages/yoroi-extension/app/stores/stateless/topbarCategories.js b/packages/yoroi-extension/app/stores/stateless/topbarCategories.js index f93a720fc3..9d0413ad06 100644 --- a/packages/yoroi-extension/app/stores/stateless/topbarCategories.js +++ b/packages/yoroi-extension/app/stores/stateless/topbarCategories.js @@ -9,13 +9,13 @@ import { isCardanoHaskell, } from '../../api/ada/lib/storage/database/prepackaged/networks'; -import transactionsIcon from '../../assets/images/wallet-nav/tab-transactions.inline.svg'; -import sendIcon from '../../assets/images/wallet-nav/tab-send.inline.svg'; -import receiveIcon from '../../assets/images/wallet-nav/tab-receive.inline.svg'; -import dashboardIcon from '../../assets/images/wallet-nav/tab-dashboard.inline.svg'; -import delegationListIcon from '../../assets/images/wallet-nav/tab-delegation_list.inline.svg'; -import votingIcon from '../../assets/images/wallet-nav/voting.inline.svg'; -import assetsIcon from '../../assets/images/assets-page/assets.inline.svg'; +import { ReactComponent as transactionsIcon } from '../../assets/images/wallet-nav/tab-transactions.inline.svg'; +import { ReactComponent as sendIcon } from '../../assets/images/wallet-nav/tab-send.inline.svg'; +import { ReactComponent as receiveIcon } from '../../assets/images/wallet-nav/tab-receive.inline.svg'; +import { ReactComponent as dashboardIcon } from '../../assets/images/wallet-nav/tab-dashboard.inline.svg'; +import { ReactComponent as delegationListIcon } from '../../assets/images/wallet-nav/tab-delegation_list.inline.svg'; +import { ReactComponent as votingIcon } from '../../assets/images/wallet-nav/voting.inline.svg'; +import { ReactComponent as assetsIcon } from '../../assets/images/assets-page/assets.inline.svg'; import environment from '../../environment'; const messages = defineMessages({ diff --git a/packages/yoroi-extension/app/stores/toplevel/WalletRestoreStore.js b/packages/yoroi-extension/app/stores/toplevel/WalletRestoreStore.js index 55ed7cfa68..2d3e231622 100644 --- a/packages/yoroi-extension/app/stores/toplevel/WalletRestoreStore.js +++ b/packages/yoroi-extension/app/stores/toplevel/WalletRestoreStore.js @@ -283,30 +283,7 @@ export function generatePlates( ); })(); - const shouldShowJormungandrPlate = (() => { - // TODO: we disable shelley restoration information for paper wallet restoration - // this is because we've temporarily disabled paper wallet creation for Shelley - // so no point in showing the Shelley checksum - if (mode.extra === 'paper') { - return false; - } - - if ( - isJormungandr(network) && - mode.type === 'cip1852' - ) { - return true; - } - if ( - isCardanoHaskell(network) && - mode.type === 'cip1852' && - mode.length === 15 - ) { - return true; - } - - return false; - })(); + const shouldShowJormungandrPlate = false; if (shouldShowShelleyPlate) { const shelleyPlate = generateShelleyPlate( diff --git a/packages/yoroi-extension/app/stores/toplevel/WalletStore.js b/packages/yoroi-extension/app/stores/toplevel/WalletStore.js index 1699d11d89..3801785d6c 100644 --- a/packages/yoroi-extension/app/stores/toplevel/WalletStore.js +++ b/packages/yoroi-extension/app/stores/toplevel/WalletStore.js @@ -311,9 +311,6 @@ export default class WalletStore extends Store { lastSyncInfo, }); } - for (const publicDeriver of newWithCachedData) { - await this.refreshWalletFromLocalOnLaunch(publicDeriver); - } for (const publicDeriver of newWithCachedData) { this._queueWarningIfNeeded(publicDeriver); } @@ -325,7 +322,12 @@ export default class WalletStore extends Store { } this.publicDerivers.push(...newWithCachedData); }); - this._startRefreshAllWallets(); + setTimeout(async () => { + for (const publicDeriver of newWithCachedData) { + await this.refreshWalletFromLocalOnLaunch(publicDeriver); + } + this._startRefreshAllWallets(); + }, 50); // let the UI render first so that the loading process is perceived faster }; @action registerObserversForNewWallet: ({| diff --git a/packages/yoroi-extension/app/utils/walletInfo.js b/packages/yoroi-extension/app/utils/walletInfo.js index 0c27c9564e..3c25ff78a1 100644 --- a/packages/yoroi-extension/app/utils/walletInfo.js +++ b/packages/yoroi-extension/app/utils/walletInfo.js @@ -4,9 +4,9 @@ import { isCardanoHaskell } from '../api/ada/lib/storage/database/prepackaged/ne import { Bip44Wallet } from '../api/ada/lib/storage/models/Bip44Wallet/wrapper'; import { isLedgerNanoWallet, isTrezorTWallet } from '../api/ada/lib/storage/models/ConceptualWallet'; import globalMessages from '../i18n/global-messages'; -import ConceptualIcon from '../assets/images/wallet-nav/conceptual-wallet.inline.svg'; -import TrezorIcon from '../assets/images/wallet-nav/trezor-wallet.inline.svg'; -import LedgerIcon from '../assets/images/wallet-nav/ledger-wallet.inline.svg'; +import { ReactComponent as ConceptualIcon } from '../assets/images/wallet-nav/conceptual-wallet.inline.svg'; +import { ReactComponent as TrezorIcon } from '../assets/images/wallet-nav/trezor-wallet.inline.svg'; +import { ReactComponent as LedgerIcon } from '../assets/images/wallet-nav/ledger-wallet.inline.svg'; import type { $npm$ReactIntl$MessageDescriptor } from 'react-intl'; import type { ConceptualWallet } from '../api/ada/lib/storage/models/ConceptualWallet/index'; diff --git a/packages/yoroi-extension/chrome/extension/index.js b/packages/yoroi-extension/chrome/extension/index.js index e1abf11785..5d401703c3 100644 --- a/packages/yoroi-extension/chrome/extension/index.js +++ b/packages/yoroi-extension/chrome/extension/index.js @@ -13,6 +13,8 @@ import App from '../../app/App'; import BigNumber from 'bignumber.js'; import { addCloseListener, TabIdKeys } from '../../app/utils/tabManager'; import { Logger } from '../../app/utils/logging'; +import { LazyLoadPromises } from '../../app/Routes'; +import environment from '../../app/environment'; // run MobX in strict mode configure({ enforceActions: 'always' }); @@ -48,6 +50,16 @@ const initializeYoroi: void => Promise = async () => { } Logger.debug(`[yoroi] root located`); + // eagerly cache + await stores.profile.getProfileLocaleRequest.execute(); + + // lazy loading breaks e2e tests, so eagerly load the pages + if (environment.isTest()) { + for (const promise of LazyLoadPromises) { + promise() + } + } + render( , root @@ -56,4 +68,4 @@ const initializeYoroi: void => Promise = async () => { addCloseListener(TabIdKeys.Primary); -window.addEventListener('load', initializeYoroi); \ No newline at end of file +window.addEventListener('load', initializeYoroi); diff --git a/packages/yoroi-extension/features/step_definitions/connector-steps.js b/packages/yoroi-extension/features/step_definitions/connector-steps.js index 62672a1f4c..c308ea55d4 100644 --- a/packages/yoroi-extension/features/step_definitions/connector-steps.js +++ b/packages/yoroi-extension/features/step_definitions/connector-steps.js @@ -81,7 +81,7 @@ Then(/^There is no the connector popup$/, async function () { }); Then( - /^I select the only wallet named (.+) with ([0-9\.]+) balance$/, + /^I select the only wallet named (.+) with ([0-9.]+) balance$/, async function (walletName, expectedBalance) { const wallets = await getWallets(this); expect(wallets.length).to.equal(1, `expect 1 wallet but get ${wallets.length}`); @@ -91,7 +91,7 @@ Then( `expect wallet name ${walletName} but get wallet name ${name}` ); const balance = await getWalletBalance(wallets, 0); - const match = balance.match(/^[0-9\.]+/); + const match = balance.match(/^[0-9.]+/); expect(match, 'Can not get wallet balance').to.not.be.null; // $FlowFixMe[incompatible-use] const balanceMatch = match[0]; diff --git a/packages/yoroi-extension/features/support/helpers/i18n-helpers.js b/packages/yoroi-extension/features/support/helpers/i18n-helpers.js index 2325341d90..0011584ba1 100644 --- a/packages/yoroi-extension/features/support/helpers/i18n-helpers.js +++ b/packages/yoroi-extension/features/support/helpers/i18n-helpers.js @@ -26,12 +26,16 @@ export default { client: any, { id, values }: any ): Promise => { - const [locale, messages] = await client.executeScript(() => ( - [yoroi.stores.profile.currentLocale, yoroi.translations] - )); + const [locale, messages] = await client.executeAsyncScript((callback) => { + // eslint-disable-next-line no-shadow + const locale = yoroi.stores.profile.currentLocale; + yoroi.translations[locale] + .then(translations => callback([locale, { [locale]: translations }])) + // eslint-disable-next-line no-console + .catch(e => { console.error('Intl fail: ', e); }); + }); const intlProvider = new IntlProvider({ locale, messages: messages[locale] }, {}); - const translation = intlProvider.getChildContext() + return intlProvider.getChildContext() .intl.formatMessage({ id }, values || {}); - return translation; } }; diff --git a/packages/yoroi-extension/features/support/webdriver.js b/packages/yoroi-extension/features/support/webdriver.js index f73b815f6c..1ef7cffcd8 100644 --- a/packages/yoroi-extension/features/support/webdriver.js +++ b/packages/yoroi-extension/features/support/webdriver.js @@ -275,8 +275,16 @@ function CustomWorld(cmdInput: WorldInput) { this.saveToLocalStorage = (key, value) => this.executeLocalStorageScript(`setItem("${key}", '${JSON.stringify(value)}')`); - this.intl = (key, lang = 'en-US') => - this.driver.executeScript((k, l) => window.yoroi.translations[l][k], key, lang); + this.intl = (key, lang = 'en-US') => this.driver.executeAsyncScript( + (k, l, callback) => { + window.yoroi.translations[l] + .then(translation => callback(translation[k])) + // eslint-disable-next-line no-console + .catch(e => { console.error('Intl fail: ', e); }); + }, + key, + lang + ); this.dropDB = () => this.driver.executeScript(() => window.yoroi.api.ada.dropDB()); diff --git a/packages/yoroi-extension/features/wallet-restoration.feature b/packages/yoroi-extension/features/wallet-restoration.feature index f35fcc911c..b4144f58f9 100644 --- a/packages/yoroi-extension/features/wallet-restoration.feature +++ b/packages/yoroi-extension/features/wallet-restoration.feature @@ -335,7 +335,6 @@ Feature: Restore Wallet | plate | | ZDDC-9858 | | EAJD-7036 | - | TSEK-7426 | Then I click the next button Then I should see the opened wallet with name "Restored Wallet" And I go to the receive screen diff --git a/packages/yoroi-extension/flow/mappers/InlineSVG.js.flow b/packages/yoroi-extension/flow/mappers/InlineSVG.js.flow new file mode 100644 index 0000000000..04f76a56b9 --- /dev/null +++ b/packages/yoroi-extension/flow/mappers/InlineSVG.js.flow @@ -0,0 +1 @@ +declare export var ReactComponent: React$Node; diff --git a/packages/yoroi-extension/jest.config.js b/packages/yoroi-extension/jest.config.js index f638cf581e..7121fde352 100644 --- a/packages/yoroi-extension/jest.config.js +++ b/packages/yoroi-extension/jest.config.js @@ -17,5 +17,6 @@ module.exports = { 'jest-canvas-mock' ], // ignore manifest.test.js file, because it isn't a test - testPathIgnorePatterns: ['manifest.test.js'] + testPathIgnorePatterns: ['manifest.test.js'], + modulePathIgnorePatterns: ['jormungandr'], }; diff --git a/packages/yoroi-extension/package-lock.json b/packages/yoroi-extension/package-lock.json index 3da23a2714..ffbfad2bf1 100644 --- a/packages/yoroi-extension/package-lock.json +++ b/packages/yoroi-extension/package-lock.json @@ -1,6 +1,6 @@ { "name": "yoroi", - "version": "4.13.0", + "version": "4.13.100", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/yoroi-extension/package.json b/packages/yoroi-extension/package.json index 515778a7f4..7a3e68fcbc 100644 --- a/packages/yoroi-extension/package.json +++ b/packages/yoroi-extension/package.json @@ -1,6 +1,6 @@ { "name": "yoroi", - "version": "4.13.0", + "version": "4.13.100", "description": "Cardano ADA wallet", "scripts": { "dev:build": "rimraf dev/ && babel-node scripts/build --type=debug", diff --git a/packages/yoroi-extension/stories/helpers/StoryWrapper.js b/packages/yoroi-extension/stories/helpers/StoryWrapper.js index 43aca0884a..b1207f8da6 100644 --- a/packages/yoroi-extension/stories/helpers/StoryWrapper.js +++ b/packages/yoroi-extension/stories/helpers/StoryWrapper.js @@ -19,6 +19,7 @@ import it from 'react-intl/locale-data/it'; import tr from 'react-intl/locale-data/tr'; import { ThemeProvider } from '@mui/material/styles'; import { CssBaseline } from '@mui/material'; +import { observable, autorun, runInAction } from 'mobx'; import { globalStyles } from '../../app/styles/globalStyles'; import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; import { translations, LANGUAGES } from '../../app/i18n/translations'; @@ -86,18 +87,30 @@ export const isFirefoxKnob: void => boolean = () => { @observer export default class StoryWrapper extends Component { + @observable mergedMessages: null | {| [key: string]: string, |} = null; + + componentDidMount: () => void = () => { + autorun(async () => { + const _mergedMessages = Object.assign( + {}, + await translations['en-US'], + await translations[globalKnobs.locale()] + ); + runInAction(() => { + this.mergedMessages = _mergedMessages; + }); + }); + } + render(): Node { + const mergedMessages = this.mergedMessages; + if (mergedMessages === null) { + return null; + } const { children: Story } = this.props; const locale = globalKnobs.locale(); const currentTheme = globalKnobs.currentTheme(); - // 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 = Object.assign({}, translations['en-US'], translations[locale]); - - changeToplevelTheme(currentTheme); const muiTheme = MuiThemes[currentTheme]; diff --git a/packages/yoroi-extension/webpack/commonConfig.js b/packages/yoroi-extension/webpack/commonConfig.js index 0d849dbb8e..4477eb0562 100644 --- a/packages/yoroi-extension/webpack/commonConfig.js +++ b/packages/yoroi-extension/webpack/commonConfig.js @@ -132,7 +132,7 @@ const rules /*: boolean => Array<*> */ = (_isDev) => [ { test: /\.svg$/, issuer: /\.scss$/, - loader: 'url-loader' + loader: 'file-loader' }, { test: /\.inline\.svg$/, @@ -146,7 +146,7 @@ const rules /*: boolean => Array<*> */ = (_isDev) => [ }] } } - }] + }, 'file-loader'] }, { test: /\.md$/,