Release/4.22.0

.github/workflows/tests.yml

@@ -181,17 +181,17 @@ jobs:
         working-directory: ../trezor-user-env
         run: cp -rf src/binaries/firmware/bin/trezor-emu-core-v2-master ./
 
-      - name: Copy the trezord-go-v2.0.31 to the root of the project
+      - name: Copy the trezord-go-v2.0.32 to the root of the project
         working-directory: ../trezor-user-env
-        run: cp -rf src/binaries/trezord-go/bin/trezord-go-v2.0.31 ./
+        run: cp -rf src/binaries/trezord-go/bin/trezord-go-v2.0.32 ./
 
       - name: Create the logs folder in the root of the trezor-user-env
         working-directory: ../trezor-user-env
         run: mkdir logs
 
       - name: Run the trezor user environment
         working-directory: ../trezor-user-env
-        run: sudo docker run -p 9001:9001 -p 9002:9002 -p 21326:21326 -p 127.0.0.1:21325:21326 -p 21324:21324 -v logs:/trezor-user-env/logs/screens -v trezor-emu-core-v2-master:/trezor-user-env/src/binaries/firmware/bin/user_downloaded -v trezord-go-v2.0.31:/trezor-user-env/src/binaries/trezord-go/bin -d emurgornd/trezor-user-env:latest
+        run: sudo docker run -p 9001:9001 -p 9002:9002 -p 21326:21326 -p 127.0.0.1:21325:21326 -p 21324:21324 -v logs:/trezor-user-env/logs/screens -v trezor-emu-core-v2-master:/trezor-user-env/src/binaries/firmware/bin/user_downloaded -v trezord-go-v2.0.32:/trezor-user-env/src/binaries/trezord-go/bin -d emurgornd/trezor-user-env:latest
 
       - uses: actions/checkout@v3
 

install-all.sh

@@ -1,5 +1,4 @@
 npm i \
 && npm i --prefix packages/yoroi-extension \
 && npm i --prefix packages/yoroi-connector \
-&& npm i --prefix packages/yoroi-connector/example-ergo \
 && npm i --prefix packages/yoroi-connector/example-cardano

packages/yoroi-extension/app/components/topbar/SidebarRevamp.js

@@ -7,14 +7,15 @@ import styles from './SidebarRevamp.scss';
 import type { SidebarCategoryRevamp } from '../../stores/stateless/sidebarCategories';
 import { intlShape } from 'react-intl';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-import { ReactComponent as yoroiLogo }  from '../../assets/images/sidebar/yoroi_logo.inline.svg';
+import { ReactComponent as YoroiLogo } from '../../assets/images/sidebar/yoroi_logo.inline.svg';
 import globalMessages from '../../i18n/global-messages';
 
 type Props = {|
   +children?: ?Node,
   +categories?: Array<SidebarCategoryRevamp>,
   +isActiveCategory?: SidebarCategoryRevamp => boolean,
   +onCategoryClicked?: SidebarCategoryRevamp => void,
+  +onLogoClick?: void => void,
 |};
 
 @observer
@@ -28,23 +29,30 @@ export default class SidebarRevamp extends Component<Props> {
     children: void,
     isActiveCategory: void,
     onCategoryClicked: void,
+    onLogoClick: void,
   |} = {
     children: undefined,
     categories: undefined,
     isActiveCategory: undefined,
     onCategoryClicked: undefined,
+    onLogoClick: undefined,
   };
 
   render(): Node {
     const { intl } = this.context;
-    const { categories, isActiveCategory, onCategoryClicked } = this.props;
-    const YoroiLogo = yoroiLogo;
+    const { categories, isActiveCategory, onCategoryClicked, onLogoClick } = this.props;
 
     return (
       <div className={styles.wrapper}>
         {this.props.children}
         <div className={styles.header}>
-          <YoroiLogo />
+          {onLogoClick ? (
+            <button type="button" onClick={onLogoClick}>
+              <YoroiLogo />
+            </button>
+          ) : (
+            <YoroiLogo />
+          )}
         </div>
         <div className={styles.categories}>
           {categories
@@ -68,8 +76,8 @@ export default class SidebarRevamp extends Component<Props> {
         </div>
         <a
           className={styles.faq}
-          href='https://emurgohelpdesk.zendesk.com/hc/en-us/categories/4412619927695-Yoroi'
-          target='_blank'
+          href="https://emurgohelpdesk.zendesk.com/hc/en-us/categories/4412619927695-Yoroi"
+          target="_blank"
           rel="noreferrer"
         >
           {intl.formatMessage(globalMessages.sidebarFaq)}

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/transfer/SuccessPage.js

@@ -1,5 +1,5 @@
 // @flow
-import type { Node } from 'react';
+import type { ComponentType, Node } from 'react';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
 import { intlShape } from 'react-intl';
@@ -8,6 +8,9 @@ import Dialog from '../widgets/Dialog';
 import DialogCloseButton from '../widgets/DialogCloseButton';
 import LoadingSpinner from '../widgets/LoadingSpinner';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import { Typography } from '@mui/material';
+import { withLayout } from '../../styles/context/layout';
+import type { InjectedLayoutProps } from '../../styles/context/layout';
 
 type Props = {|
   +title: string,
@@ -20,8 +23,7 @@ type Props = {|
 |};
 
 @observer
-export default class SuccessPage extends Component<Props> {
-
+class SuccessPage extends Component<Props & InjectedLayoutProps> {
   static contextTypes: {|intl: $npm$ReactIntl$IntlFormat|} = {
     intl: intlShape.isRequired
   };
@@ -31,7 +33,7 @@ export default class SuccessPage extends Component<Props> {
   };
 
   render(): Node {
-    const { title, text } = this.props;
+    const { title, text, isRevampLayout } = this.props;
 
     const actions = this.props.closeInfo == null
       ? undefined
@@ -48,17 +50,28 @@ export default class SuccessPage extends Component<Props> {
         closeOnOverlayClick={false}
         onClose={this.props.closeInfo ? this.props.closeInfo.onClose : undefined}
         className={styles.dialog}
-        closeButton={this.props.closeInfo ? (<DialogCloseButton />) : undefined}
+        closeButton={this.props.closeInfo ? <DialogCloseButton /> : undefined}
       >
         <div className={styles.component}>
           <div>
             <div className={styles.successImg} />
-            <div className={styles.title}>
+            <Typography
+              variant="body1"
+              color={isRevampLayout ? 'primary' : 'secondary.300'}
+              textAlign="center"
+              mt="16px"
+              fontWeight={500}
+            >
               {title}
-            </div>
-            <div className={styles.text}>
+            </Typography>
+            <Typography
+              variant="body2"
+              color="gray.900"
+              textAlign="center"
+              mt="4px"
+            >
               {text}
-            </div>
+            </Typography>
             {this.props.closeInfo == null && (
               <div className={styles.spinnerSection}>
                 <LoadingSpinner />
@@ -70,3 +83,5 @@ export default class SuccessPage extends Component<Props> {
     );
   }
 }
+
+export default (withLayout(SuccessPage): ComponentType<Props>);

packages/yoroi-extension/app/components/transfer/SuccessPage.scss

@@ -4,25 +4,6 @@
   align-items: center;
   justify-content: center;
 
-  .title {
-    color: var(--yoroi-palette-secondary-300);
-    text-transform: uppercase;
-    height: 19px;
-    font-weight: 500;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 19px;
-    text-align: center;
-  }
-
-  .text {
-    color: var(--yoroi-palette-gray-800);
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 22px;
-    text-align: center;
-  }
-
   .spinnerSection {
     margin-top: 12px;
     margin-bottom: 5px;
@@ -37,6 +18,7 @@
     width: 252px;
     height: 194px;
     margin: auto;
+    margin-top: 30px;
   }
 }
 :global(.YoroiModern):global(.YoroiShelley) .component, :global(.YoroiRevamp):global(.YoroiShelley) .component {

packages/yoroi-extension/app/components/wallet/add-wallet-revamp/AddWalletPageHeader.js

@@ -6,49 +6,72 @@ import YoroiLogo from '../../../assets/images/yoroi-logo-shape-blue.inline.svg';
 import { defineMessages, intlShape } from 'react-intl';
 import { observer } from 'mobx-react';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
-import { Typography, Box } from '@mui/material';
+import { Typography, Box, Button } from '@mui/material';
 import globalMessages from '../../../i18n/global-messages';
+import { ReactComponent as BackIcon } from '../../../assets/images/assets-page/backarrow.inline.svg';
 
 const messages: * = defineMessages({
   subtitle: {
     id: 'wallet.add.page.revamp.subtitle',
     defaultMessage: '!!!Light wallet for Cardano assets',
   },
+  backButtonLabel: {
+    id: 'wallet.add.page.revamp.backButtonLabel',
+    defaultMessage: '!!!Back to current wallet',
+  },
 });
 
+type Props = {|
+  +goToCurrentWallet: void => void,
+  +hasAnyWallets: boolean,
+|};
+
 @observer
-export default class AddWalletPageHeader extends Component<{||}> {
+export default class AddWalletPageHeader extends Component<Props> {
   static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   render(): Node {
     const { intl } = this.context;
+    const { goToCurrentWallet, hasAnyWallets } = this.props;
 
     return (
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDirection: 'column',
-        }}
-      >
+      <Box>
+        {hasAnyWallets && (
+          <Button sx={{ color: 'gray.900' }} onClick={goToCurrentWallet}>
+            <Box mr="10px">
+              <BackIcon />
+            </Box>
+            <Typography variant="button2" fontWeight={500} color="gray.900">
+              {intl.formatMessage(messages.backButtonLabel)}
+            </Typography>
+          </Button>
+        )}
         <Box
           sx={{
-            width: '56px',
-            height: '48px',
-            mb: '24px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
           }}
         >
-          <img src={YoroiLogo} alt="Yoroi" />
+          <Box
+            sx={{
+              width: '56px',
+              height: '48px',
+              mb: '24px',
+            }}
+          >
+            <img src={YoroiLogo} alt="Yoroi" />
+          </Box>
+          <Typography variant="h1" fontWeight={500} color="primary.600" mb="8px">
+            {intl.formatMessage(globalMessages.yoroi)}
+          </Typography>
+          <Typography variant="body1" fontWeight={500} color="primary.600">
+            {intl.formatMessage(messages.subtitle)}
+          </Typography>
         </Box>
-        <Typography variant="h1" fontWeight={500} color="primary" mb="8px">
-          {intl.formatMessage(globalMessages.yoroi)}
-        </Typography>
-        <Typography variant="body1" fontWeight={500} color="primary">
-          {intl.formatMessage(messages.subtitle)}
-        </Typography>
       </Box>
     );
   }

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/AssetsPage.js

@@ -24,14 +24,14 @@ type Props = {|
 export default class AssetsPage extends Component<Props> {
 
   render(): Node {
-    const { assetDeposit, network } = this.props
+    const { assetDeposit, network, assetsList, getTokenInfo, shouldHideBalance } = this.props;
     return (
       <div className={styles.component}>
         <AssetsList
-          assetsList={this.props.assetsList}
+          assetsList={assetsList}
           assetDeposit={assetDeposit}
-          getTokenInfo={this.props.getTokenInfo}
-          shouldHideBalance={this.props.shouldHideBalance}
+          getTokenInfo={getTokenInfo}
+          shouldHideBalance={shouldHideBalance}
           network={network}
         />
       </div>

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