Switch ui-next toast

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",

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