Release/1.6.3

.nvmrc

@@ -1 +1 @@
-v16
+v16.20.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "Casper Wallet",
   "description": "Securely manage your CSPR tokens and interact with dapps with the self-custody wallet for the Casper blockchain.",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "author": "MAKE LLC",
   "scripts": {
     "devtools:redux": "redux-devtools --hostname=localhost",
@@ -61,6 +61,7 @@
     "@hot-loader/react-dom": "^17.0.1",
     "@lapo/asn1js": "1.2.4",
     "@make-software/ces-js-parser": "1.3.2",
+    "@noble/ciphers": "^0.3.0",
     "@scure/bip32": "1.3.2",
     "@scure/bip39": "1.2.1",
     "@types/argon2-browser": "1.18.1",

src/apps/popup/app-router.tsx

@@ -34,6 +34,7 @@ import { TokenDetailPage } from 'src/apps/popup/pages/token-details';
 import { ActivityDetailsPage } from '@popup/pages/activity-details';
 import { ReceivePage } from '@popup/pages/receive';
 import { NftDetailsPage } from '@popup/pages/nft-details';
+import { WalletQrCodePage } from '@popup/pages/wallet-qr-code';
 import { TransferNftPage } from '@popup/pages/transfer-nft';
 import { ChangePasswordPage } from '@popup/pages/change-password';
 
@@ -242,6 +243,10 @@ function AppRoutes() {
       <Route path={RouterPath.Token} element={<TokenDetailPage />} />
       <Route path={RouterPath.Receive} element={<ReceivePage />} />
       <Route path={RouterPath.NftDetails} element={<NftDetailsPage />} />
+      <Route
+        path={RouterPath.GenerateWalletQRCode}
+        element={<WalletQrCodePage />}
+      />
       <Route path={RouterPath.TransferNft} element={<TransferNftPage />} />
       <Route
         path={RouterPath.ChangePassword}

src/apps/popup/pages/backup-secret-phrase-password/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import {
   selectPasswordHash,
@@ -23,10 +23,14 @@ import { calculateSubmitButtonDisabled } from '@libs/ui/forms/get-submit-button-
 
 interface BackupSecretPhrasePasswordPageType {
   setPasswordConfirmed: () => void;
+  onClick?: (password: string) => Promise<void>;
+  loading?: boolean;
 }
 
 export const BackupSecretPhrasePasswordPage = ({
-  setPasswordConfirmed
+  setPasswordConfirmed,
+  onClick,
+  loading = false
 }: BackupSecretPhrasePasswordPageType) => {
   const { t } = useTranslation();
 
@@ -40,16 +44,26 @@ export const BackupSecretPhrasePasswordPage = ({
   const {
     register,
     handleSubmit,
-    formState: { errors, isDirty }
+    formState: { errors, isDirty },
+    getValues
   } = useUnlockWalletForm(passwordHash, passwordSaltHash);
 
   const isSubmitButtonDisabled = calculateSubmitButtonDisabled({
     isDirty
   });
 
   const onSubmit = () => {
-    setPasswordConfirmed();
-    dispatchToMainStore(loginRetryCountReseted());
+    if (onClick) {
+      const { password } = getValues();
+
+      onClick(password).then(() => {
+        setPasswordConfirmed();
+        dispatchToMainStore(loginRetryCountReseted());
+      });
+    } else {
+      setPasswordConfirmed();
+      dispatchToMainStore(loginRetryCountReseted());
+    }
   };
 
   return (
@@ -75,8 +89,8 @@ export const BackupSecretPhrasePasswordPage = ({
       )}
       renderFooter={() => (
         <FooterButtonsContainer>
-          <Button disabled={isSubmitButtonDisabled}>
-            <Trans t={t}>Continue</Trans>
+          <Button disabled={isSubmitButtonDisabled || loading}>
+            {loading ? t('Loading') : t('Continue')}
           </Button>
         </FooterButtonsContainer>
       )}

src/apps/popup/pages/home/components/tokens-list/utils.ts

@@ -32,8 +32,8 @@ export const formatErc20TokenBalance = (
         name: token.contract_name,
         balance: token.balance,
         amount: erc20Amount,
-        symbol: token.metadata?.symbol || '',
-        decimals: token.metadata?.decimals,
+        symbol: token?.metadata?.symbol || '',
+        decimals: token?.metadata?.decimals,
         amountFiat: null,
         icon: token.icon_url || 'assets/icons/erc20-avatar.svg'
       };

src/apps/popup/pages/navigation-menu/index.tsx

@@ -183,6 +183,18 @@ export function NavigationMenuPageContent() {
           },
           {
             id: 2,
+            title: t('Generate wallet QR code'),
+            description: t('Scan to import your wallet on mobile'),
+            iconPath: 'assets/icons/qr.svg',
+            disabled: false,
+            handleOnClick: () => {
+              closeNavigationMenu();
+
+              navigate(RouterPath.GenerateWalletQRCode);
+            }
+          },
+          {
+            id: 3,
             title: t('Download account keys'),
             description: t('For all accounts imported via file'),
             iconPath: 'assets/icons/download.svg',

src/apps/popup/pages/receive/content.tsx

@@ -58,18 +58,18 @@ export const ReceivePageContent = () => {
   const tokens = useSelector(selectErc20Tokens, shallowEqual);
 
   useEffect(() => {
-    if (tokenData.symbol === 'CSPR') {
+    if (tokenData?.symbol === 'CSPR') {
       const balance =
         (csprBalance.amountMotes && motesToCSPR(csprBalance.amountMotes)) ||
         '0';
       setTokenData(prev => ({ ...prev, balance }));
     } else {
       const erc20Tokens = formatErc20TokenBalance(tokens);
       const balance =
-        erc20Tokens?.find(t => t.symbol === tokenData.symbol)?.amount ?? '0';
+        erc20Tokens?.find(t => t?.symbol === tokenData?.symbol)?.amount ?? '0';
       setTokenData(prev => ({ ...prev, balance }));
     }
-  }, [csprBalance, tokenData.symbol, tokens]);
+  }, [csprBalance, tokenData?.symbol, tokens]);
 
   return (
     <ContentContainer>
@@ -80,7 +80,7 @@ export const ReceivePageContent = () => {
       </ParagraphContainer>
       <ActiveAccountPlate
         label="To account"
-        symbol={tokenData.symbol}
+        symbol={tokenData?.symbol}
         balance={tokenData.balance}
       />
       <VerticalSpaceContainer top={SpacingSize.XXXL}>

src/apps/popup/pages/token-details/token.tsx

@@ -66,7 +66,7 @@ export const Token = ({ erc20Tokens }: TokenProps) => {
       if (casperToken && activeAccount) {
         setTokenData(casperToken);
         setTokenInfoList([
-          { id: 1, name: 'Symbol', value: casperToken.symbol }
+          { id: 1, name: 'Symbol', value: casperToken?.symbol }
         ]);
       }
     } else {
@@ -78,8 +78,8 @@ export const Token = ({ erc20Tokens }: TokenProps) => {
       if (token) {
         setTokenData(token);
         setTokenInfoList([
-          { id: 1, name: 'Symbol', value: token.symbol },
-          { id: 2, name: 'Decimals', value: (token.decimals || 0).toString() }
+          { id: 1, name: 'Symbol', value: token?.symbol },
+          { id: 2, name: 'Decimals', value: (token?.decimals || 0).toString() }
         ]);
       } else {
         setTokenData(prev => (prev ? { ...prev, amount: '0' } : null));

src/apps/popup/pages/transfer/confirm-step.tsx

@@ -134,7 +134,7 @@ export const ConfirmStep = ({
               {listItems.text}
             </Typography>
             <AmountContainer>
-              <Typography type="captionHash">{`${listItems.amount} ${listItems.symbol}`}</Typography>
+              <Typography type="captionHash">{`${listItems.amount} ${listItems?.symbol}`}</Typography>
               <Typography type={listItems.bold ? 'subtitle' : 'captionMedium'}>
                 {listItems.fiatPrice == null
                   ? null

src/apps/popup/pages/transfer/index.tsx

@@ -88,7 +88,6 @@ export const TransferPage = () => {
 
   const { amountForm, recipientForm } = useTransferForm(
     erc20Balance,
-    erc20Decimals,
     isErc20Transfer,
     csprBalance.amountMotes,
     paymentAmount

src/apps/popup/pages/wallet-qr-code/content.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { QRCodeCanvas } from 'qrcode.react';
+import styled, { useTheme } from 'styled-components';
+
+import {
+  CenteredFlexRow,
+  ContentContainer,
+  ParagraphContainer,
+  SpacingSize
+} from '@libs/layout';
+import { Typography } from '@libs/ui';
+
+const QRContainer = styled(CenteredFlexRow)`
+  padding: 20px 16px;
+  background-color: ${({ theme }) => theme.color.backgroundPrimary};
+  border-radius: ${({ theme }) => theme.borderRadius.base}px;
+  margin-top: 20px;
+`;
+
+interface WalletQrCodePageContentProps {
+  qrStrings: string[];
+}
+
+export const WalletQrCodePageContent = ({
+  qrStrings
+}: WalletQrCodePageContentProps) => {
+  const theme = useTheme();
+  const [currentQrIndex, setCurrentQrIndex] = useState<number>(0);
+
+  useEffect(() => {
+    const int = setInterval(() => {
+      setCurrentQrIndex(prev => {
+        const next = prev + 1;
+
+        if (next === qrStrings.length) {
+          return 0;
+        }
+
+        return next;
+      });
+    }, 500);
+
+    return () => clearInterval(int);
+  }, [qrStrings.length]);
+
+  const { t } = useTranslation();
+
+  return (
+    <ContentContainer>
+      <ParagraphContainer top={SpacingSize.XL}>
+        <Typography type="header">
+          <Trans t={t}>QR code is ready!</Trans>
+        </Typography>
+      </ParagraphContainer>
+      <ParagraphContainer top={SpacingSize.Medium}>
+        <Typography type="body">
+          <Trans t={t}>Scan this with your Casper Wallet app.</Trans>
+        </Typography>
+      </ParagraphContainer>
+      <QRContainer>
+        <QRCodeCanvas
+          id="qrCode"
+          value={qrStrings[currentQrIndex]}
+          size={296}
+          fgColor={theme.color.contentPrimary}
+          bgColor={theme.color.backgroundPrimary}
+          level={'H'}
+        />
+      </QRContainer>
+    </ContentContainer>
+  );
+};