chore: pulled from main + fixed conflicts

apps/desktop-e2e/src/helpers/AccountGroup.ts

@@ -42,14 +42,14 @@ export class AccountGroupBuilder {
 
   setDerivationPathTemplate(derivationPathTemplate: string): void {
     if (this.accountGroup.type !== "mnemonic") {
-      throw new CustomError(`Derivation path is not used for ${this.accountGroup.type} accounts}`);
+      throw new CustomError(`Derivation path is not used for ${this.accountGroup.type} accounts`);
     }
     this.derivationPathTemplate = derivationPathTemplate;
   }
 
   setSeedPhrase(seedPhrase: string[]): void {
     if (this.accountGroup.type !== "mnemonic") {
-      throw new CustomError(`Seed phrase is not used for ${this.accountGroup.type} accounts}`);
+      throw new CustomError(`Seed phrase is not used for ${this.accountGroup.type} accounts`);
     }
     this.seedPhrase = seedPhrase;
   }
@@ -58,7 +58,7 @@ export class AccountGroupBuilder {
 
   async setSecretKey(secretKey: string, accountIndex = 0): Promise<void> {
     if (this.accountGroup.type !== "secret_key") {
-      throw new CustomError(`Secret key is not used for ${this.accountGroup.type} accounts}`);
+      throw new CustomError(`Secret key is not used for ${this.accountGroup.type} accounts`);
     }
     this.accountGroup.accounts[accountIndex].pkh = await (
       await InMemorySigner.fromSecretKey(secretKey)

apps/desktop/src/components/Onboarding/restoreLedger/RestoreLedger.tsx

@@ -66,7 +66,7 @@ export const RestoreLedger = ({
           toast({ description: "Account successfully created!", status: "success" });
           closeModal();
         }, LEDGER_TIMEOUT),
-      error => {
+      (error: { name: string; message: any }) => {
         if (error.name === "PublicKeyRetrievalError") {
           return {
             description: "Request rejected. Please unlock your Ledger and open the Tezos app",

apps/desktop/src/components/SendFlow/Beacon/useSignWithBeacon.tsx

@@ -38,7 +38,7 @@ export const useSignWithBeacon = (
 
         return openWith(<SuccessStep hash={opHash} />);
       },
-      error => ({
+      (error: { message: any }) => ({
         description: `Failed to confirm Beacon operation: ${error.message}`,
       })
     );

apps/desktop/src/providers/UmamiTheme.tsx

@@ -1,10 +1,17 @@
-import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
+import { ChakraProvider, ColorModeScript, useToast } from "@chakra-ui/react";
+import { ToastProvider } from "@umami/utils";
 
 import theme from "../style/theme";
 
-export const UmamiTheme = (props: any) => (
-  <ChakraProvider theme={theme}>
-    <ColorModeScript initialColorMode={theme.config.initialColorMode} />
-    {props.children}
-  </ChakraProvider>
-);
+export const UmamiTheme = (props: any) => {
+  const toast = useToast();
+
+  return (
+    <ToastProvider toast={toast}>
+      <ChakraProvider theme={theme}>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+        {props.children}
+      </ChakraProvider>
+    </ToastProvider>
+  );
+};

apps/desktop/src/utils/beacon/useHandleBeaconMessage.tsx

@@ -139,7 +139,7 @@ export const useHandleBeaconMessage = () => {
 
         return openWith(modal, { onClose });
       },
-      error => ({
+      (error: { message: any }) => ({
         description: `Error while processing Beacon request: ${error.message}`,
       })
     );

apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx

@@ -34,7 +34,7 @@ export const useSignWithBeacon = ({
 
         return openWith(<SuccessStep hash={opHash} />);
       },
-      error => ({
+      (error: { message: any }) => ({
         description: `Failed to confirm Beacon operation: ${error.message}`,
       })
     );

apps/web/src/components/SendFlow/WalletConnect/useSignWithWalletConnect.tsx

@@ -39,7 +39,7 @@ export const useSignWithWalletConnect = ({
         await walletKit.respondSessionRequest({ topic: requestId.topic, response });
         return openWith(<SuccessStep hash={opHash} />);
       },
-      error => ({
+      (error: { message: any }) => ({
         description: `Failed to confirm WalletConnect operation: ${error.message}`,
       })
     );

apps/web/src/components/beacon/useHandleBeaconMessage.tsx

@@ -165,7 +165,7 @@ export const useHandleBeaconMessage = () => {
 
         return openWith(modal, { onClose });
       },
-      error => ({
+      (error: { message: any }) => ({
         description: `Error while processing Beacon request: ${error.message}`,
       })
     );

apps/web/src/providers/UmamiTheme.tsx

@@ -1,5 +1,6 @@
-import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
+import { ChakraProvider, ColorModeScript, useToast } from "@chakra-ui/react";
 import { Global, css } from "@emotion/react";
+import { ToastProvider } from "@umami/utils";
 import { type PropsWithChildren } from "react";
 import "focus-visible/dist/focus-visible";
 
@@ -17,17 +18,16 @@ const GlobalStyles = css`
   }
 `;
 
-export const UmamiTheme = ({ children }: PropsWithChildren) => (
-  <ChakraProvider
-    theme={theme}
-    toastOptions={{
-      defaultOptions: {
-        render: CustomToast,
-      },
-    }}
-  >
-    <Global styles={GlobalStyles} />
-    <ColorModeScript initialColorMode={theme.config.initialColorMode} />
-    {children}
-  </ChakraProvider>
-);
+export const UmamiTheme = ({ children }: PropsWithChildren) => {
+  const toast = useToast({ render: CustomToast });
+
+  return (
+    <ChakraProvider theme={theme}>
+      <ToastProvider toast={toast}>
+        <Global styles={GlobalStyles} />
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+        {children}
+      </ToastProvider>
+    </ChakraProvider>
+  );
+};

apps/web/src/setupTests.ts

@@ -69,6 +69,11 @@ jest.doMock("@chakra-ui/react", () => ({
   useColorMode: () => ({ colorMode: "light", toggleColorMode: jest.fn() }),
 }));
 
+jest.mock("@umami/utils", () => ({
+  ...jest.requireActual("@umami/utils"),
+  useCustomToast: () => mockToast,
+}));
+
 jest.mock("./utils/persistor", () => ({
   pause: jest.fn(),
 }));

packages/data-polling/package.json

@@ -73,6 +73,7 @@
     "@umami/state": "workspace:^",
     "@umami/tezos": "workspace:^",
     "@umami/tzkt": "workspace:^",
+    "@umami/test-utils": "workspace:^",
     "date-fns": "^4.1.0",
     "framer-motion": "^11.15.0",
     "lodash": "^4.17.21",

packages/data-polling/src/setupTests.ts

@@ -2,12 +2,14 @@ import { webcrypto } from "crypto";
 import { TextDecoder, TextEncoder } from "util";
 
 import { mockToast } from "@umami/state";
+import { mockLocalStorage } from "@umami/test-utils";
 
 beforeEach(() => {
   Object.defineProperties(global, {
     crypto: { value: webcrypto, writable: true },
     TextDecoder: { value: TextDecoder, writable: true },
     TextEncoder: { value: TextEncoder, writable: true },
+    localStorage: { value: mockLocalStorage(), writable: true },
   });
 });
 

packages/data-polling/src/testUtils.tsx

@@ -1,9 +1,8 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import * as testLib from "@testing-library/react";
+import { type UmamiStore, makeStore } from "@umami/state";
+import { type PropsWithChildren, act } from "react";
 import { Provider } from "react-redux";
-import { makeStore, UmamiStore } from "@umami/state";
-import { PropsWithChildren, act } from "react";
-
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const customRenderHook = <
   Result,

packages/state/package.json

@@ -67,9 +67,6 @@
   },
   "dependencies": {
     "@airgap/beacon-wallet": "^4.3.1",
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
     "@reduxjs/toolkit": "^2.5.0",
     "@reown/walletkit": "^1.0.1",
     "@tanstack/react-query": "^5.62.11",

packages/state/src/hooks/beacon.ts

@@ -7,6 +7,7 @@ import {
 // import { useToast } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
 import { type RawPkh } from "@umami/tezos";
+import { useCustomToast } from "@umami/utils";
 import { uniq } from "lodash";
 import { useDispatch } from "react-redux";
 
@@ -102,7 +103,7 @@ export const useRemoveBeaconPeersByAccounts = () => {
 
 export const useAddPeer = () => {
   const { refresh } = useBeaconPeers();
-  const toast: any = undefined; //useToast();
+  const toast = useCustomToast();
 
   return (payload: string) =>
     new Serializer()
@@ -111,11 +112,20 @@ export const useAddPeer = () => {
       .then(peer => WalletClient.addPeer(peer as ExtendedPeerInfo))
       .then(() => refresh())
       .catch(e => {
-        toast({
-          description:
-            "Beacon sync code in the clipboard is invalid. Please copy a beacon sync code from the dApp",
-          status: "error",
-        });
+        const description =
+          "Beacon sync code in the clipboard is invalid. Please copy a beacon sync code from the dApp";
+        const type = "error";
+
+        toast.show
+          ? toast.show({
+              type,
+              text1: description,
+            })
+          : toast({
+              description,
+              status: type,
+            });
+
         console.error(e);
       });
 };

packages/state/src/hooks/useAsyncActionHandler.test.ts

@@ -162,7 +162,7 @@ describe("useAsyncActionHandler", () => {
           view.result.current.handleAsyncActionUnsafe(() => Promise.reject(new Error("test error")))
         )
       ).rejects.toThrow("test error");
-      expect(mockToast).toHaveBeenCalledTimes(2);
+      expect(mockToast).toHaveBeenCalledTimes(1);
     });
 
     it("Unsafe propagates the error and shows the toast once on first handling", async () => {
@@ -181,7 +181,7 @@ describe("useAsyncActionHandler", () => {
         status: "error",
         isClosable: true,
       });
-      expect(mockToast).toHaveBeenCalledTimes(2);
+      expect(mockToast).toHaveBeenCalledTimes(1);
     });
 
     it("Unsafe propagates the error and shows no toast on second handling", async () => {

packages/state/src/hooks/useAsyncActionHandler.ts

@@ -1,10 +1,8 @@
-import { type UseToastOptions } from "@chakra-ui/react";
-import { getErrorContext } from "@umami/utils";
+import { type ToastOptions, getErrorContext, useCustomToast } from "@umami/utils";
 import { useCallback, useRef, useState } from "react";
 
 import { useAppDispatch } from "./useAppDispatch";
 import { errorsActions } from "../slices";
-import { mockToast } from "../testUtils";
 
 /**
  * Hook for gracefully handling async actions.
@@ -22,13 +20,13 @@ import { mockToast } from "../testUtils";
 export const useAsyncActionHandler = () => {
   const [isLoading, setIsLoading] = useState(false);
   const isLoadingRef = useRef(isLoading);
-  const toast: any = undefined; // useToast();
+  const toast = useCustomToast();
   const dispatch = useAppDispatch();
 
   const handleAsyncActionUnsafe = useCallback(
     async <T>(
       fn: () => Promise<T>,
-      toastOptions?: UseToastOptions | ((error: any) => UseToastOptions)
+      toastOptions?: ToastOptions | ((error: any) => ToastOptions)
     ): Promise<T | void> => {
       if (isLoadingRef.current) {
         return;
@@ -53,14 +51,6 @@ export const useAsyncActionHandler = () => {
             ...(typeof toastOptions === "function" ? toastOptions(error) : toastOptions),
           });
 
-          // TODO: fix this dirty hack
-          mockToast({
-            description: errorContext.description,
-            status: "error",
-            isClosable: true,
-            ...(typeof toastOptions === "function" ? toastOptions(error) : toastOptions),
-          });
-
           dispatch(errorsActions.add(errorContext));
         }
         throw error;
@@ -76,7 +66,7 @@ export const useAsyncActionHandler = () => {
   const handleAsyncAction = useCallback(
     async <T>(
       fn: () => Promise<T>,
-      toastOptions?: UseToastOptions | ((error: any) => UseToastOptions)
+      toastOptions?: ToastOptions | ((error: any) => ToastOptions)
     ): Promise<T | void> => handleAsyncActionUnsafe(fn, toastOptions).catch(() => {}),
     [handleAsyncActionUnsafe]
   );

packages/state/src/setupTests.ts

@@ -12,9 +12,9 @@ Object.defineProperties(global, {
   fetch: { value: jest.fn(), writable: true },
 });
 
-jest.mock("@chakra-ui/react", () => ({
-  ...jest.requireActual("@chakra-ui/react"),
-  useToast: () => mockToast,
+jest.mock("@umami/utils", () => ({
+  ...jest.requireActual("@umami/utils"),
+  useCustomToast: () => mockToast,
 }));
 
 jest.mock("./beacon/WalletClient", () => ({

packages/state/src/testUtils.tsx

@@ -1,9 +1,13 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import * as testLib from "@testing-library/react";
 import { type Account } from "@umami/core";
 import { type Multisig } from "@umami/multisig";
+import { type RawPkh } from "@umami/tezos";
+import { type PropsWithChildren, act } from "react";
+import { Provider } from "react-redux";
 
 import { accountsActions, multisigsActions } from "./slices";
-import { makeStore, UmamiStore } from "./store";
-import * as testLib from "@testing-library/react";
+import { type UmamiStore, makeStore } from "./store";
 
 export const addTestAccount = (store: UmamiStore, account: Account | Multisig) => {
   if (!("type" in account) || account.type === "multisig") {
@@ -18,11 +22,6 @@ export const addTestAccounts = (store: UmamiStore, accounts: (Account | Multisig
   accounts.forEach(account => addTestAccount(store, account));
 };
 
-import { PropsWithChildren, act } from "react";
-import { Provider } from "react-redux";
-import { RawPkh } from "@umami/tezos";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-
 const customRenderHook = <
   Result,
   Props,

packages/utils/package.json

@@ -19,6 +19,7 @@
     "@types/eslint": "^8",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4",
+    "@types/sanitize-html": "^2.13.0",
     "@umami/eslint-config": "workspace:^",
     "@umami/jest-config": "workspace:^",
     "@umami/test-utils": "workspace:^",
@@ -60,6 +61,7 @@
   },
   "dependencies": {
     "bignumber.js": "^9.1.2",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "sanitize-html": "^2.14.0"
   }
 }