Release/1.12.0

e2e-tests/popup/buy-cspr/buy-cspr.spec.ts

@@ -22,14 +22,6 @@ popup.describe('Popup UI: buy cspr', () => {
       ).toBeVisible();
       await popupPage.getByRole('button', { name: 'Next' }).click();
 
-      await popupExpect(
-        popupPage.getByRole('heading', { name: 'Pick provider' })
-      ).toBeVisible();
-
-      await popupExpect(
-        popupPage.getByRole('button', { name: 'Confirm' })
-      ).toBeDisabled();
-
       await popupPage.getByText('Topper by Uphold').click();
 
       await popupExpect(
@@ -68,10 +60,6 @@ popup.describe('Popup UI: buy cspr', () => {
       ).toBeVisible();
       await popupPage.getByRole('button', { name: 'Next' }).click();
 
-      await popupExpect(
-        popupPage.getByRole('heading', { name: 'Pick provider' })
-      ).toBeVisible();
-
       await popupExpect(
         popupPage.getByRole('button', { name: 'Confirm' })
       ).toBeDisabled();

e2e-tests/popup/stakes/redelagation.spec.ts

@@ -38,6 +38,10 @@ popup.describe('Popup UI: Redelegation', () => {
 
       await popupPage.getByPlaceholder('0.00', { exact: true }).fill('500');
 
+      await popupExpect(
+        popupPage.getByRole('button', { name: 'Next' })
+      ).not.toBeDisabled();
+
       await popupPage.getByRole('button', { name: 'Next' }).click();
 
       await popupPage.getByText('Delegate', { exact: true }).click();

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.11.0",
+  "version": "1.12.0",
   "author": "MAKE LLC",
   "scripts": {
     "devtools:redux": "redux-devtools --hostname=localhost",
@@ -52,7 +52,7 @@
     "styled-components": "^5"
   },
   "dependencies": {
-    "@formatjs/intl": "2.6.2",
+    "@formatjs/intl": "2.10.4",
     "@hookform/resolvers": "2.9.10",
     "@lapo/asn1js": "1.2.4",
     "@ledgerhq/hw-transport": "^6.30.6",
@@ -64,18 +64,21 @@
     "@noble/ciphers": "^0.3.0",
     "@scure/bip32": "1.3.2",
     "@scure/bip39": "1.2.1",
+    "@tanstack/react-query": "^5.52.3",
     "@types/argon2-browser": "1.18.1",
     "@types/webextension-polyfill": "0.9.2",
     "@zondax/ledger-casper": "^2.6.1",
     "base64-loader": "1.0.0",
     "big.js": "^6.2.1",
     "casper-cep18-js-client": "1.0.2",
     "casper-js-sdk": "2.15.4",
+    "casper-wallet-core": "git+ssh://[email protected]:make-software/casper-wallet-core.git#v0.9.5",
     "date-fns": "^2.30.0",
     "i18next": "^23.11.0",
     "i18next-browser-languagedetector": "^7.2.1",
     "i18next-http-backend": "2.5.0",
     "i18next-parser": "7.9.0",
+    "jszip": "^3.10.1",
     "lodash.throttle": "4.1.1",
     "mac-scrollbar": "^0.13.6",
     "md5": "^2.3.0",
@@ -92,6 +95,7 @@
     "react-query": "^3.39.3",
     "react-redux": "8.0.5",
     "react-router-dom": "6.16.0",
+    "react-virtualized": "^9.22.5",
     "redux": "4.2.1",
     "redux-saga": "1.2.3",
     "reselect": "4.1.7",
@@ -107,46 +111,48 @@
     "@babel/preset-typescript": "^7.23.3",
     "@playwright/test": "^1.39.0",
     "@redux-devtools/cli": "^4.0.0",
-    "@redux-devtools/remote": "^0.9.1",
+    "@redux-devtools/remote": "^0.9.3",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/big.js": "^6.1.6",
     "@types/chrome": "0.0.246",
     "@types/expect": "^24.3.0",
-    "@types/jest": "29.2.3",
+    "@types/jest": "29.5.12",
     "@types/lodash.throttle": "4.1.7",
     "@types/md5": "^2.3.5",
     "@types/node": "^20.9.0",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.18",
+    "@types/react-virtualized": "^9.21.30",
     "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/parser": "^5.62.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "9.1.0",
     "babel-preset-react-app": "^10.0.0",
     "concurrently": "7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "6.8.1",
-    "eslint": "8.49.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "file-loader": "^6.2.0",
-    "fs-extra": "11.1.1",
+    "fs-extra": "11.2.0",
     "html-loader": "4.2.0",
     "html-webpack-plugin": "^5.6.0",
     "husky": "8.0.2",
-    "i18next-conv": "14.0.0",
-    "jest": "29.3.1",
+    "i18next-conv": "15.0.0",
+    "jest": "29.7.0",
     "jest-environment-jsdom": "29.3.1",
     "lint-staged": "14.0.1",
     "markdownlint": "0.34.0",
@@ -159,11 +165,11 @@
     "ts-loader": "9.4.2",
     "ts-node": "10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "4.9.3",
+    "typescript": "5.4.5",
     "url-loader": "^4.1.1",
     "web-ext": "7.9.0",
     "webextension-polyfill": "0.10.0",
-    "webpack": "5.88.2",
+    "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "^4.15.1",
     "xcode-build-webpack-plugin": "^1.0.2"

scripts/build_all.sh

@@ -1,3 +1,3 @@
 HASH=$(git rev-parse --short HEAD)
 
-npm run build:chrome && npm run build:firefox && cd ./build && zip -r casper-wallet-1.11.0.rc5#$HASH.zip ./* && npm run build:src
+npm run build:chrome && npm run build:firefox && cd ./build && zip -r casper-wallet-1.12.0#$HASH.zip ./* && npm run build:src

src/apps/onboarding/pages/unlock-wallet/content.tsx

@@ -72,7 +72,7 @@ export function UnlockWalletPageContent({
             validationType={InputValidationType.Password}
             type={passwordInputType}
             placeholder={t('Password')}
-            oneColoredIcons
+            autoFocus
             suffixIcon={
               <PasswordVisibilityIcon
                 passwordInputType={passwordInputType}

src/apps/onboarding/pages/unlock-wallet/index.tsx

@@ -3,6 +3,8 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
+import { PasswordDoesNotExistError } from '@src/errors';
+
 import { UnlockWalletPageContent } from '@onboarding/pages/unlock-wallet/content';
 import { RouterPath, useTypedNavigate } from '@onboarding/router';
 
@@ -39,7 +41,7 @@ export function UnlockWalletPage({ saveIsLoggedIn }: UnlockWalletPageProps) {
   const passwordSaltHash = useSelector(selectPasswordSaltHash);
 
   if (passwordHash == null || passwordSaltHash == null) {
-    throw Error("Password doesn't exist");
+    throw new PasswordDoesNotExistError();
   }
 
   const {

src/apps/popup/app-router.tsx

@@ -5,8 +5,8 @@ import { HashRouter, Route, Routes } from 'react-router-dom';
 import { useUserActivityTracker } from '@src/hooks/use-user-activity-tracker';
 
 import { AccountSettingsPage } from '@popup/pages/account-settings';
-import { ActivityDetailsPage } from '@popup/pages/activity-details';
 import { AddContactPage } from '@popup/pages/add-contact';
+import { AddWatchAccount } from '@popup/pages/add-watch-account';
 import { AllAccountsPage } from '@popup/pages/all-accounts';
 import { BackupSecretPhrasePage } from '@popup/pages/backup-secret-phrase';
 import { BuyCSPRPage } from '@popup/pages/buy-cspr';
@@ -16,6 +16,7 @@ import { ConnectedSitesPage } from '@popup/pages/connected-sites';
 import { ContactDetailsPage } from '@popup/pages/contact-details';
 import { ContactsBookPage } from '@popup/pages/contacts';
 import { CreateAccountPage } from '@popup/pages/create-account';
+import { DeployDetailsPage } from '@popup/pages/deploy-details';
 import { DownloadAccountKeysPage } from '@popup/pages/download-account-keys';
 import { HomePageContent } from '@popup/pages/home';
 import { ImportAccountFromLedgerPage } from '@popup/pages/import-account-from-ledger';
@@ -203,10 +204,6 @@ function AppRoutes() {
         element={<DownloadAccountKeysPage />}
       />
       <Route path={RouterPath.Transfer} element={<TransferPage />} />
-      <Route
-        path={RouterPath.ActivityDetails}
-        element={<ActivityDetailsPage />}
-      />
       <Route path={RouterPath.Token} element={<TokenDetailPage />} />
       <Route path={RouterPath.Receive} element={<ReceivePage />} />
       <Route path={RouterPath.NftDetails} element={<NftDetailsPage />} />
@@ -252,6 +249,8 @@ function AppRoutes() {
         path={RouterPath.SignWithLedgerInNewWindow}
         element={<SignWithLedgerInNewWindowPage />}
       />
+      <Route path={RouterPath.DeployDetails} element={<DeployDetailsPage />} />
+      <Route path={RouterPath.AddWatchAccount} element={<AddWatchAccount />} />
     </Routes>
   );
 }

src/apps/popup/index.tsx

@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React, { Suspense, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 // skeleton styles
@@ -23,6 +24,20 @@ import { GlobalStyle, darkTheme, lightTheme } from '@libs/ui';
 
 import { AppRouter } from './app-router';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 3 * 60 * 1000,
+      refetchInterval: 3 * 60 * 1000,
+      gcTime: 3 * 60 * 1000,
+      retry: false
+    },
+    mutations: {
+      retry: false
+    }
+  }
+});
+
 const Tree = () => {
   const [state, setState] = useState<PopupState | null>(null);
 
@@ -60,9 +75,11 @@ const Tree = () => {
       <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
         <GlobalStyle />
         <ReduxProvider store={store}>
-          <ErrorBoundary>
-            <AppRouter />
-          </ErrorBoundary>
+          <QueryClientProvider client={queryClient}>
+            <ErrorBoundary>
+              <AppRouter />
+            </ErrorBoundary>
+          </QueryClientProvider>
         </ReduxProvider>
       </ThemeProvider>
     </Suspense>

src/apps/popup/pages/account-settings/content.tsx

@@ -1,8 +1,9 @@
+import { QRCodeCanvas } from 'qrcode.react';
 import React, { useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { RootState } from 'typesafe-actions';
 
 import { RouterPath, useTypedNavigate } from '@popup/router';
@@ -36,6 +37,7 @@ import {
 
 export function AccountSettingsPageContent() {
   const { t } = useTranslation();
+  const theme = useTheme();
 
   const { accountName } = useParams();
   const account = useSelector((state: RootState) =>
@@ -60,6 +62,16 @@ export function AccountSettingsPageContent() {
                 {accountInfoStandardName}
               </Typography>
             )}
+            <VerticalSpaceContainer top={SpacingSize.XL}>
+              <QRCodeCanvas
+                id="qrCode"
+                value={account.publicKey}
+                size={120}
+                fgColor={theme.color.contentPrimary}
+                bgColor={theme.color.backgroundPrimary}
+                level={'H'}
+              />
+            </VerticalSpaceContainer>
             <VerticalSpaceContainer top={SpacingSize.XL}>
               <FlexColumn gap={SpacingSize.Small}>
                 <Typography type="bodySemiBold">