Release / 5.4.300

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

@@ -1,9 +1,16 @@
 // @flow
 import ExtendableError from 'es6-error';
 
+export const WRONG_PASSPHRASE_ERROR_MESSAGE = 'Passphrase doesn\'t match';
+
 export class WrongPassphraseError extends ExtendableError {
-  constructor(message: ?string = 'Passphrase doesn\'t match') {
-    super(message);
+
+  static get defaultMessage(): string {
+    return WRONG_PASSPHRASE_ERROR_MESSAGE;
+  }
+
+  constructor() {
+    super(WrongPassphraseError.defaultMessage);
   }
 }
 

packages/yoroi-extension/app/api/common/errors.js

@@ -199,9 +199,14 @@ export class GenericApiError extends LocalizableError {
 }
 
 export class IncorrectWalletPasswordError extends LocalizableError {
+
+  static get errorId(): string {
+    return messages.incorrectWalletPasswordError.id;
+  }
+
   constructor() {
     super({
-      id: messages.incorrectWalletPasswordError.id,
+      id: IncorrectWalletPasswordError.errorId,
       defaultMessage: messages.incorrectWalletPasswordError.defaultMessage || '',
     });
   }

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

@@ -189,7 +189,10 @@ export const removeWalletFromDb: GetEntryFuncType<typeof RemoveWallet> = async (
 };
 
 export const changeSigningKeyPassword: GetEntryFuncType<typeof ChangeSigningPassword> = async (request) => {
-  await callBackground({ type: ChangeSigningPassword.typeTag, request, });
+  const resp = await callBackground({ type: ChangeSigningPassword.typeTag, request, });
+  if (resp?.error === WrongPassphraseError.defaultMessage) {
+    throw new IncorrectWalletPasswordError();
+  }
 }
 
 export const renamePublicDeriver: GetEntryFuncType<typeof RenamePublicDeriver> = async (request) => {
@@ -472,7 +475,7 @@ function handleWrongPassword<
   result: T,
   passwordErrorClass: typeof Error
 ): T {
-  if (result.error === 'IncorrectWalletPasswordError') {
+  if (typeof result.error === 'string' && result.error.includes(IncorrectWalletPasswordError.errorId)) {
     throw new passwordErrorClass();
   }
   if (result.error) {

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

@@ -85,7 +85,7 @@ export default class AmountDisplay extends Component<Props> {
           </Typography>
         )}
         {showFiat === true && (
-          <Typography mb="5px" color="ds.text_gray_medium" fontSize="12px" id={id + '-availableFiatBalance-text'}>
+          <Typography mb="5px" color="ds.text_gray_low" fontSize="12px" lineHeight="16px" id={id + '-availableFiatBalance-text'}>
             {fiatDisplay || '-'}&nbsp;{currency || 'USD'}
           </Typography>
         )}

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

@@ -13,7 +13,7 @@ import { ReactComponent as NoDappImage } from '../../../assets/images/dapp-conne
 import { intlShape } from 'react-intl';
 import { splitAmount, truncateToken } from '../../../utils/formatters';
 import { Box, Typography, styled } from '@mui/material';
-import { constructPlate } from '../../topbar/NavPlate';
+import { constructPlate40 } from '../../topbar/WalletCard';
 import styles from './WalletRow.scss';
 
 type Props = {|
@@ -95,7 +95,7 @@ export default class WalletRowRevamp extends Component<Props, State> {
     } = this.props;
     const { showDeleteIcon } = this.state;
 
-    const [, plateIcon] = constructPlate(plate, 0, '');
+    const [, plateIcon] = constructPlate40(plate);
 
     return (
       <Box
@@ -121,9 +121,7 @@ export default class WalletRowRevamp extends Component<Props, State> {
         id={id}
       >
         <Box width="100%" display="flex" alignItems="center" gap="8px">
-          <Box width="40px" height="40px" overflow="hidden" borderRadius="50%">
-            {plateIcon}
-          </Box>
+          {plateIcon}
           <div>
             <Typography component="div" variant="caption1" color="grayscale.900" id="connectedWalletNameLabel">
               {walletName}

packages/yoroi-extension/app/components/layout/TopBarLayout.js

@@ -19,6 +19,7 @@ type Props = {|
   +asModern?: boolean,
   +withPadding?: boolean, // default: true
   +bgcolor?: string,
+  +isErrorPage?: boolean,
 |};
 
 type InjectedProps = {| isRevampLayout: boolean, currentTheme: string |};
@@ -40,6 +41,7 @@ function TopBarLayout({
   asModern,
   withPadding,
   bgcolor,
+  isErrorPage,
 }: AllProps) {
   const isModern = currentTheme === THEMES.YOROI_MODERN;
   const isRevamp = isRevampLayout && asModern !== true && !isModern;
@@ -79,7 +81,7 @@ function TopBarLayout({
             <Box
               sx={{
                 bgcolor: bgcolor || 'ds.bg_color_max',
-                height: '100%',
+                height: !isErrorPage ? '100%' : 'auto',
                 width: '100%',
                 maxWidth: '1872px',
                 mx: 'auto',

packages/yoroi-extension/app/components/swap/SelectAssetDialog.js

@@ -118,7 +118,7 @@ export default function SelectAssetDialog({
         </>
       }
     >
-      {(filteredAssets.length !== 0 && !assetsStillLoading) && (
+      {filteredAssets.length !== 0 && !assetsStillLoading && (
         <Table
           rowGap="0px"
           columnNames={type === 'from' ? fromColumns : toColumns}
@@ -145,12 +145,14 @@ export default function SelectAssetDialog({
               {assetsStillLoading ? (
                 <LoadingSpinner />
               ) : (
-                <NoAssetsFound />
+                <>
+                  <NoAssetsFound />
+                  <Typography component="div" variant="body1" fontWeight={500} color="ds.text_gray_low">
+                    {type === 'from' ? `No tokens found for “${searchTerm}”` : 'No asset was found to swap'}
+                  </Typography>
+                </>
               )}
             </Box>
-            <Typography component="div" variant="body1" fontWeight={500} color="ds.text_gray_low">
-              {type === 'from' ? `No tokens found for “${searchTerm}”` : 'No asset was found to swap'}
-            </Typography>
           </Box>
         </Box>
       )}

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

@@ -12,6 +12,7 @@ type Props = {|
   +buyButton?: Node,
   +menu?: ?Node,
   +pageBanner?: ?Node,
+  +isErrorPage?: boolean,
 |};
 
 @observer
@@ -23,22 +24,24 @@ class NavBarRevamp extends Component<Props> {
     buyButton: void,
     menu: void,
     pageBanner: boolean,
+    isErrorPage: boolean
   |} = {
     children: undefined,
     goToNotifications: undefined,
     walletDetails: undefined,
     buyButton: undefined,
     menu: undefined,
     pageBanner: false,
+    isErrorPage: false,
   };
 
   render(): Node {
-    const { title, children, walletDetails, menu, buyButton, pageBanner } = this.props;
+    const { title, children, walletDetails, menu, buyButton, pageBanner, isErrorPage } = this.props;
     return (
       <Box
         sx={{
           backgroundColor: 'ds.bg_color_max',
-          borderBottom: pageBanner ? 'none' : '1px solid',
+          borderBottom: pageBanner || isErrorPage ? 'none' : '1px solid',
           borderBottomColor: 'grayscale.200',
         }}
       >
@@ -73,7 +76,7 @@ class NavBarRevamp extends Component<Props> {
                 )}
               </Box>
             </Box>
-            {menu != null ? <Box sx={{ position: 'absolute', bottom: 0, left: 0 }}>{menu}</Box> : null}
+            {menu != null && !isErrorPage ? <Box sx={{ position: 'absolute', bottom: 0, left: 0 }}>{menu}</Box> : null}
           </Box>
         </Box>
       </Box>

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

@@ -4,7 +4,6 @@ import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { intlShape } from 'react-intl';
 import styles from './NavPlate.scss';
-import WalletAccountIcon from './WalletAccountIcon';
 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';
@@ -14,29 +13,15 @@ import type { WalletChecksum } from '@emurgo/cip4-js';
 import type { $npm$ReactIntl$IntlFormat, $npm$ReactIntl$MessageDescriptor } from 'react-intl';
 import globalMessages from '../../i18n/global-messages';
 import type { WalletType } from '../../../chrome/extension/background/types';
+import { constructPlate40 } from './WalletCard';
+import { maybe } from '../../coreUtils';
 
 type Props = {|
   +plate: null | WalletChecksum,
   +walletType: WalletType,
   +name: string,
 |};
 
-export function constructPlate(
-  plate: WalletChecksum,
-  saturationFactor: number,
-  divClass: string,
-): [string, React$Element<'div'>] {
-  return [plate.TextPart, (
-    <div className={divClass}>
-      <WalletAccountIcon
-        iconSeed={plate.ImagePart}
-        saturationFactor={saturationFactor}
-        scalePx={6}
-      />
-    </div>
-  )];
-}
-
 @observer
 export default class NavPlate extends Component<Props> {
 
@@ -67,9 +52,7 @@ export default class NavPlate extends Component<Props> {
   render(): Node {
     const { intl } = this.context;
 
-    const [accountPlateId, iconComponent] = (this.props.plate) ?
-      constructPlate(this.props.plate, 0, styles.icon)
-      : [];
+    const [accountPlateId, iconComponent] = maybe(this.props.plate, constructPlate40) ?? [];
 
     const TypeIcon = this.getIcon(this.props.walletType);
 

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

@@ -14,7 +14,7 @@ import { ReactComponent as IconEyeOpen } from '../../assets/images/my-wallets/ic
 import { maybe } from '../../coreUtils';
 import AmountDisplay from '../common/AmountDisplay';
 import styles from './NavWalletDetailsRevamp.scss';
-import WalletAccountIcon from './WalletAccountIcon';
+import { constructPlate32 } from './WalletCard';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 import type { TokenLookupKey } from '../../api/common/lib/MultiToken';
 import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables';
@@ -47,15 +47,6 @@ type Props = {|
   +openWalletInfoDialog: () => void,
 |};
 
-function constructPlate(plate: WalletChecksum, saturationFactor: number, divClass: string): [string, React$Element<'div'>] {
-  return [
-    plate.TextPart,
-    <div className={divClass}>
-      <WalletAccountIcon iconSeed={plate.ImagePart} saturationFactor={saturationFactor} scalePx={6} />
-    </div>,
-  ];
-}
-
 @observer
 export default class NavWalletDetailsRevamp extends Component<Props> {
   static defaultProps: {|
@@ -87,7 +78,7 @@ export default class NavWalletDetailsRevamp extends Component<Props> {
 
     const totalAmount = this.getTotalAmount();
     const showEyeIconSafe = showEyeIcon != null && showEyeIcon;
-    const [accountPlateId, iconComponent] = plate ? constructPlate(plate, 0, styles.icon) : [];
+    const [accountPlateId, iconComponent] = maybe(plate, constructPlate32) ?? [];
     const amountDisplayId = `topBar:selectedWallet`;
 
     return (
@@ -109,7 +100,9 @@ export default class NavWalletDetailsRevamp extends Component<Props> {
       >
         <div className={styles.outerWrapper}>
           <button type="button" onClick={openWalletInfoDialog} className={styles.contentWrapper}>
-            <div className={classnames([styles.plate])}>{iconComponent}</div>
+            <Box marginRight="8px">
+              {iconComponent}
+            </Box>
             <div className={styles.content}>
               <div className={styles.walletInfo}>
                 <Typography component="div" variant="body2" fontWeight={500} sx={{ color: 'grayscale.900' }}>
@@ -121,7 +114,14 @@ export default class NavWalletDetailsRevamp extends Component<Props> {
               </div>
               <div className={styles.balance}>
                 <Box
-                  sx={{ color: 'grayscale.max', height: '100%' }}
+                  sx={{
+                    color: 'grayscale.max',
+                    height: '100%',
+                    '& .MuiTypography-root': {
+                      mt: '0px',
+                      mb: '0px',
+                    }
+                  }}
                   className={classnames([totalAmount ? styles.amount : styles.spinnerWrapper])}
                 >
                   <AmountDisplay

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

@@ -2,7 +2,6 @@
 import type { Node } from 'react';
 import { Component } from 'react';
 import { observer } from 'mobx-react';
-import styles from './WalletAccountIcon.scss';
 import Blockies from 'react-blockies';
 import tinycolor from 'tinycolor2';
 import { hexToBytes } from '../../coreUtils';
@@ -59,7 +58,6 @@ export default class WalletAccountIcon extends Component<Props> {
       bgColor={saturation(color.primary, saturationFactor)}
       color={saturation(color.secondary, saturationFactor)}
       spotColor={saturation(color.spots, saturationFactor)}
-      className={styles.walletIcon}
     />);
   }
 }