[pull] Latest Production to Develop after 4.22

crowdin.yml

@@ -17,6 +17,7 @@ files:
         it: it-IT
         sk: sk-SK
         cs: cs-CZ
+        vi: vi-VN
   - source: /packages/yoroi-extension/app/i18n/locales/**/en-US.md
     translation: /packages/yoroi-extension/app/i18n/locales/**/%locale%.md
     languages_mapping:
@@ -34,4 +35,5 @@ files:
         it: it-IT
         sk: sk-SK
         cs: cs-CZ
+        vi: vi-VN
     content_segmentation: 0

packages/yoroi-extension/app/App.js

@@ -5,24 +5,9 @@ import { observer } from 'mobx-react';
 import { Router } from 'react-router-dom';
 import type { RouterHistory } from 'react-router-dom';
 import { addLocaleData, IntlProvider } from 'react-intl';
-import en from 'react-intl/locale-data/en';
-import ko from 'react-intl/locale-data/ko';
-import ja from 'react-intl/locale-data/ja';
-import zh from 'react-intl/locale-data/zh';
-import ru from 'react-intl/locale-data/ru';
-import de from 'react-intl/locale-data/de';
-import fr from 'react-intl/locale-data/fr';
-import nl from 'react-intl/locale-data/nl';
-import pt from 'react-intl/locale-data/pt';
-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 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 { locales, translations } from './i18n/translations';
 import type { StoresMap } from './stores';
 import type { ActionsMap } from './actions';
 import { changeToplevelTheme, MuiThemes } from './styles/utils';
@@ -39,23 +24,7 @@ import Support from './components/widgets/Support';
 import { trackNavigation } from './api/analytics';
 
 // https://github.com/yahoo/react-intl/wiki#loading-locale-data
-addLocaleData([
-  ...en,
-  ...ko,
-  ...ja,
-  ...zh,
-  ...ru,
-  ...de,
-  ...fr,
-  ...nl,
-  ...pt,
-  ...id,
-  ...es,
-  ...it,
-  ...tr,
-  ...cs,
-  ...sk,
-]);
+addLocaleData(locales);
 
 type Props = {|
   +stores: StoresMap,

packages/yoroi-extension/app/components/topbar/banners/TestnetWarningBanner.js

@@ -63,7 +63,9 @@ export default class TestnetWarningBanner extends Component<Props> {
         <div className={styles.ergoWarning}>
           <span key="0" className={styles.shelleyTestnetWarningIcon}><ShelleyTestnetWarningSvg /></span>
           <div className={styles.text}>
-            NOTE: Unfortunately the Ergo network support will be dropped from Yoroi in the near future.
+            NOTE: Due to the planned gradual termination of the Ergo wallets support in Yoroi extension,
+            <br />
+            Starting with the next version any Ergo wallets in the list will be visible, but not operational!
             <br />
             Please make sure to migrate your Ergo funds and wallets to another application.
           </div>

packages/yoroi-extension/app/components/topbar/banners/TestnetWarningBanner.scss

@@ -46,7 +46,7 @@
 }
 
 .ergoWarning {
-  height: 60px;
+  height: 90px;
   display: flex;
   justify-content: center;
   align-items: center;

packages/yoroi-extension/app/components/wallet/assets/AssetsList.js

@@ -37,6 +37,7 @@ const SORTING_COLUMNS = {
   name: string,
   id: string,
   amount: string,
+  amountForSorting?: BigNumber,
 |}
 type Props = {|
   +assetsList: Asset[],
@@ -136,6 +137,10 @@ export default class AssetsList extends Component<Props, State> {
     this.setState({ sortingDirection: newSortDirection })
 
     if (field === 'amount') {
+      const dedicatedField = 'amountForSorting';
+      if (a[dedicatedField] != null && b[dedicatedField] != null) {
+        return compareNumbers(a[dedicatedField], b[dedicatedField], newSortDirection)
+      }
       return compareNumbers(a[field], b[field], newSortDirection)
     }
     // Other fields

packages/yoroi-extension/app/components/wallet/assets/TokenList.js

@@ -33,6 +33,7 @@ import { Link } from 'react-router-dom';
 import { ROUTES } from '../../../routes-config';
 import CopyToClipboardText from '../../widgets/CopyToClipboardLabel';
 import { ListEmpty } from './ListEmpty';
+import BigNumber from 'bignumber.js';
 
 const SORTING_DIRECTIONS = {
   UP: 'UP',
@@ -48,6 +49,7 @@ export type Asset = {|
   name: string,
   id: string,
   amount: string,
+  amountForSorting?: BigNumber,
 |};
 type Props = {|
   +assetsList: Asset[],
@@ -90,6 +92,10 @@ function TokenList({ assetsList: list, shouldHideBalance, intl }: Props & Intl):
     setState({ ...state, sortingDirection: newSortDirection });
 
     if (field === SORTING_COLUMNS.AMOUNT) {
+      const dedicatedField = 'amountForSorting';
+      if (a[dedicatedField] != null && b[dedicatedField] != null) {
+        return compareNumbers(a[dedicatedField], b[dedicatedField], newSortDirection);
+      }
       return compareNumbers(a[field], b[field], newSortDirection);
     }
     // Other fields

packages/yoroi-extension/app/components/widgets/FlagLabel.js

@@ -18,7 +18,7 @@ export default class FlagLabel extends Component<Props> {
     return (
 
       <div className={styles.wrapper}>
-        <span className={styles.flag}><SvgElem /></span>
+        <span className={styles.flag}>{ typeof svg === 'string' ? svg : (<SvgElem />)}</span>
         <span>{label}</span>
       </div>
     );

packages/yoroi-extension/app/containers/banners/BannerContainer.js

@@ -27,13 +27,11 @@ export default class BannerContainer extends Component<InjectedOrGenerated<Gener
   render(): Node {
     const serverStatus = this.generated.stores.serverConnectionStore.checkAdaServerStatus;
 
-    const { selected } = this.generated.stores.wallets;
+    const { selected, publicDerivers } = this.generated.stores.wallets;
     const isWalletTestnet = selected == null
       ? false
       : isTestnet(selected.getParent().getNetworkInfo());
-    const isWalletErgo = selected == null
-      ? false
-      : isErgo(selected.getParent().getNetworkInfo());
+    const isAnyWalletErgo = publicDerivers?.some(w => isErgo(w.getParent().getNetworkInfo())) ?? false;
 
     const deprecationBanner = this.getDeprecationBanner();
     return (
@@ -47,7 +45,7 @@ export default class BannerContainer extends Component<InjectedOrGenerated<Gener
         {serverStatus !== ServerStatusErrors.Healthy && (
           <ServerErrorBanner errorType={serverStatus} />
         )}
-        <TestnetWarningBanner isTestnet={isWalletTestnet} isErgo={isWalletErgo} />
+        <TestnetWarningBanner isTestnet={isWalletTestnet} isErgo={isAnyWalletErgo} />
         {!environment.isProduction() && <NotProductionBanner />}
         {deprecationBanner}
       </>
@@ -88,7 +86,10 @@ export default class BannerContainer extends Component<InjectedOrGenerated<Gener
       tokenInfoStore: {|
         tokenInfo: TokenInfoMap,
       |},
-      wallets: {| selected: null | PublicDeriver<> |},
+      wallets: {|
+        publicDerivers?: Array<PublicDeriver<>>,
+        selected: null | PublicDeriver<>,
+      |},
     |},
     actions: {||},
     |} {
@@ -109,6 +110,7 @@ export default class BannerContainer extends Component<InjectedOrGenerated<Gener
           tokenInfo: stores.tokenInfoStore.tokenInfo,
         },
         wallets: {
+          publicDerivers: stores.wallets.publicDerivers,
           selected: stores.wallets.selected,
         },
       },

packages/yoroi-extension/app/containers/notice-board/NoticeBoardPage.js

@@ -105,9 +105,10 @@ export default class NoticeBoardPage extends Component<InjectedOrGenerated<Gener
       |},
     |},
     stores: {|
-      wallets: {|
-        selected: null | PublicDeriver<>
-      |},
+      wallets: {
+        selected: null | PublicDeriver<>,
+        ...
+      },
       tokenInfoStore: {|
         tokenInfo: TokenInfoMap,
       |},

packages/yoroi-extension/app/containers/wallet/TokensPageRevamp.js

@@ -51,6 +51,7 @@ export default class TokensPageRevamp extends Component<InjectedOrGenerated<Gene
             name: truncateToken(getTokenStrictName(token.info) ?? '-'),
             id: getTokenIdentifierIfExists(token.info) ?? '-',
             amount: [beforeDecimal, afterDecimal].join(''),
+            amountForSorting: shiftedAmount,
           }
         });
     })();

packages/yoroi-extension/app/containers/wallet/WalletAssetsPage.js

@@ -47,6 +47,7 @@ export default class WalletAssetsPage extends Component<InjectedOrGenerated<Gene
             name: truncateToken(getTokenStrictName(token.info) ?? '-'),
             id: (getTokenIdentifierIfExists(token.info) ?? '-'),
             amount: [beforeDecimal, afterDecimal].join(''),
+            amountForSorting: shiftedAmount,
           }
         });
       })();

packages/yoroi-extension/app/i18n/global-messages.js

@@ -264,6 +264,10 @@ const globalMessages: * = defineMessages({
     id: 'global.language.slovak',
     defaultMessage: '!!!Slovak',
   },
+  languageVietnamese: {
+    id: 'global.language.vietnamese',
+    defaultMessage: '!!!Vietnamese',
+  },
   addressLabel: {
     id: 'wallet.receive.confirmationDialog.addressLabel',
     defaultMessage: '!!!Address',

packages/yoroi-extension/app/i18n/locales/en-US.json

@@ -203,6 +203,7 @@
   "global.language.slovak": "Slovak",
   "global.language.spanish": "Español",
   "global.language.turkish": "Turkish",
+  "global.language.vietnamese": "Vietnamese",
   "global.passwordInstructionsPaperWallet": "Note: Paper Wallet password needs to be at least <strong>10 characters</strong> long.",
   "global.publicKey.explanation": "Public keys allow seeing the wallet history for the wallet, but does <strong>not</strong> allow to spend or move the funds in any way (private key is <strong>not</strong> included)",
   "global.receive": "Receive",
@@ -462,11 +463,11 @@
   "wallet.add.page.hw.tooltip": "Create or restore a Yoroi wallet<br/>using a Ledger or Trezor hardware wallet.",
   "wallet.add.page.restore.title": "Restore wallet",
   "wallet.add.page.restore.tooltip": "Enter a 15-word recovery phrase<br/>to restore an already-existing Yoroi wallet,<br/>or import an existing Yoroi paper wallet.",
+  "wallet.add.page.revamp.backButtonLabel": "Back to current wallet",
   "wallet.add.page.revamp.connectHardwareWallet": "Connect hardware wallet",
   "wallet.add.page.revamp.createWallet": "Create new wallet",
   "wallet.add.page.revamp.restoreWallet": "Restore existing wallet",
   "wallet.add.page.revamp.subtitle": "Light wallet for Cardano assets",
-  "wallet.add.page.revamp.backButtonLabel": "Back to current wallet",
   "wallet.add.page.subtitle.label": "Yoroi light wallet for Cardano",
   "wallet.add.page.title": "Your gateway <br> to the <br> financial world",
   "wallet.address.category.addressBook": "Addresses that do not belong to you, but are relevant to your wallet",
@@ -1061,4 +1062,4 @@
   "yoroiTransfer.waiting.progressInfo.checkingAddresses": "Checking addresses funds",
   "yoroiTransfer.waiting.progressInfo.restoringAddresses": "Fetching addresses",
   "yoroiTransfer.waiting.title.label": "Wallet is being restored"
-}
+}

packages/yoroi-extension/app/i18n/translations.js

@@ -1,4 +1,20 @@
 // @flow
+import en from 'react-intl/locale-data/en';
+import ko from 'react-intl/locale-data/ko';
+import ja from 'react-intl/locale-data/ja';
+import zh from 'react-intl/locale-data/zh';
+import ru from 'react-intl/locale-data/ru';
+import de from 'react-intl/locale-data/de';
+import fr from 'react-intl/locale-data/fr';
+import nl from 'react-intl/locale-data/nl';
+import pt from 'react-intl/locale-data/pt';
+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 cs from 'react-intl/locale-data/cs';
+import sk from 'react-intl/locale-data/sk';
+import vi from 'react-intl/locale-data/vi';
 import globalMessages from './global-messages';
 import type { $npm$ReactIntl$MessageDescriptor } from 'react-intl';
 import { ReactComponent as EnglishFlag }  from '../assets/images/flags/english.inline.svg';
@@ -16,9 +32,28 @@ import { ReactComponent as IndonesianFlag }  from '../assets/images/flags/indone
 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';
+import { ReactComponent as VietnameseFlag }  from '../assets/images/flags/vietnamese.inline.svg';
 
-// This is essentially bulk require
+export const locales: any = Object.freeze([
+  ...en,
+  ...ko,
+  ...ja,
+  ...zh,
+  ...ru,
+  ...de,
+  ...fr,
+  ...nl,
+  ...pt,
+  ...id,
+  ...es,
+  ...it,
+  ...tr,
+  ...cs,
+  ...sk,
+  ...vi,
+]);
 
+// This is essentially bulk require
 // $FlowExpectedError[prop-missing] require.context comes from webpack
 const req = require.context('./locales', true, /\.json.*$/, 'lazy');
 export const translations: {|
@@ -116,5 +151,10 @@ export const LANGUAGES: Array<LanguageType> = [
     value: 'sk-SK',
     label: globalMessages.languageSlovak,
     svg: SlovakFlag
+  },
+  {
+    value: 'vi-VN',
+    label: globalMessages.languageVietnamese,
+    svg: VietnameseFlag
   }
 ];

packages/yoroi-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yoroi",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "description": "Cardano ADA wallet",
   "scripts": {
     "dev:build": "rimraf dev/ && babel-node scripts/build --type=debug",

packages/yoroi-extension/webpack/prodConfig.js

@@ -42,8 +42,8 @@ const baseProdConfig = (env /*: EnvParams */) /*: * */ => ({
   },
   output: {
     path: path.join(__dirname, '../build/js'),
-    filename: '[name].bundle.js',
-    chunkFilename: '[name].chunk.js',
+    filename: '[name].[contenthash].bundle.js',
+    chunkFilename: '[name].[contenthash].chunk.js',
     publicPath: env.publicPath == null ? defaultPublicPath : env.publicPath,
   },
   plugins: [