From 23a5f52854dbdf3c7fe6a45328574a1ac013c1af Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Mon, 23 Dec 2024 10:20:44 +0900
Subject: [PATCH] Switch ui-next toast

---
 packages/keychain/package.json                |  1 +
 .../src/components/Funding/DepositEth.tsx     |  7 +++----
 packages/keychain/src/hooks/toast.tsx         | 19 -------------------
 pnpm-lock.yaml                                |  3 +++
 4 files changed, 7 insertions(+), 23 deletions(-)
 delete mode 100644 packages/keychain/src/hooks/toast.tsx

diff --git a/packages/keychain/package.json b/packages/keychain/package.json
index cf4fe93ab..a8098b08b 100644
--- a/packages/keychain/package.json
+++ b/packages/keychain/package.json
@@ -46,6 +46,7 @@
     "react-dom": "^18.2.0",
     "react-query": "^3.39.2",
     "react-router-dom": "^6.27.0",
+    "sonner": "^1.4.41",
     "use-sound": "^4.0.1",
     "usehooks-ts": "^2.9.1",
     "viem": "^1.20.2",
diff --git a/packages/keychain/src/components/Funding/DepositEth.tsx b/packages/keychain/src/components/Funding/DepositEth.tsx
index 81e1ccc41..d6aa89db3 100644
--- a/packages/keychain/src/components/Funding/DepositEth.tsx
+++ b/packages/keychain/src/components/Funding/DepositEth.tsx
@@ -27,13 +27,13 @@ import {
   CopyAddress,
 } from "@cartridge/ui-next";
 import { useConnection } from "@/hooks/connection";
-import { useToast } from "@/hooks/toast";
 import { ETH_CONTRACT_ADDRESS } from "@/utils/token";
 import { ErrorAlert } from "../ErrorAlert";
 import { parseEther } from "viem";
 import { AmountSelection, DEFAULT_AMOUNT } from "./AmountSelection";
 import { Balance } from "./Balance";
 import { TokenPair, usePriceQuery } from "@cartridge/utils/api/cartridge";
+import { toast } from "sonner";
 
 type DepositEthProps = {
   onComplete?: (deployHash?: string) => void;
@@ -52,7 +52,6 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
   const { connectAsync, connectors, isPending: isConnecting } = useConnect();
   const { controller, chainId } = useConnection();
   const { account: extAccount } = useAccount();
-  const { toast } = useToast();
 
   const [dollarAmount, setDollarAmount] = useState<number>(DEFAULT_AMOUNT);
   const [state, setState] = useState<"connect" | "fund">("connect");
@@ -143,8 +142,8 @@ function DepositEthInner({ onComplete, onBack }: DepositEthProps) {
     if (!controller?.address) return;
 
     navigator.clipboard.writeText(controller.address);
-    toast("Copied");
-  }, [controller?.address, toast]);
+    toast.success("Address copied");
+  }, [controller?.address]);
 
   return (
     <Container
diff --git a/packages/keychain/src/hooks/toast.tsx b/packages/keychain/src/hooks/toast.tsx
deleted file mode 100644
index 818ee46ec..000000000
--- a/packages/keychain/src/hooks/toast.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DEFAULT_TOAST_OPTIONS } from "@cartridge/ui";
-import { useToast as useChakraToast } from "@chakra-ui/react";
-import { Toaster } from "../components/Toaster";
-
-export function useToast() {
-  const chakraToast = useChakraToast();
-
-  const toast = (message: string) => {
-    chakraToast.closeAll();
-    chakraToast({
-      ...DEFAULT_TOAST_OPTIONS,
-      render: () => <Toaster message={message} />,
-    });
-  };
-
-  return {
-    toast,
-  };
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e1f184a0c..48670a5e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -362,6 +362,9 @@ importers:
       react-router-dom:
         specifier: ^6.27.0
         version: 6.27.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      sonner:
+        specifier: ^1.4.41
+        version: 1.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       starknet:
         specifier: ^6.11.0
         version: 6.11.0