Make @umami/state package platform agnostic (#2329)

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

@@ -4,9 +4,9 @@ import {
   type NetworkType,
   Serializer,
 } from "@airgap/beacon-wallet";
-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 +102,7 @@ export const useRemoveBeaconPeersByAccounts = () => {
 
 export const useAddPeer = () => {
   const { refresh } = useBeaconPeers();
-  const toast = useToast();
+  const toast = useCustomToast();
 
   return (payload: string) =>
     new Serializer()
@@ -111,11 +111,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, useToast } 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 = 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/src/index.ts

@@ -1 +1,2 @@
 export * from "./ErrorContext";
+export * from "./providers";

packages/utils/src/providers/ToastProvider.tsx

@@ -0,0 +1,27 @@
+import { type PropsWithChildren, createContext, useContext } from "react";
+
+// TODO: fix this type when we have a better toast implementation
+export type ToastOptions = any;
+
+export type Toast = {
+  show?: (options: ToastOptions) => void;
+  [key: string]: any;
+} & ((options: ToastOptions) => void);
+
+type ToastContextType = {
+  toast: Toast;
+};
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const useCustomToast = () => {
+  const toastContext = useContext(ToastContext);
+  if (!toastContext) {
+    throw new Error("useCustomToast must be used within a ToastProvider");
+  }
+  return toastContext.toast;
+};
+
+export const ToastProvider = ({ children, toast }: PropsWithChildren<{ toast: Toast }>) => (
+  <ToastContext.Provider value={{ toast }}>{children}</ToastContext.Provider>
+);

packages/utils/src/providers/index.ts

@@ -0,0 +1 @@
+export * from "./ToastProvider";