Use new toast in components

components/BadgeWithCopy.tsx

@@ -1,7 +1,7 @@
 import copy from "copy-to-clipboard";
 import { Copy } from "lucide-react";
+import { toast } from "sonner";
 import { Badge } from "./ui/badge";
-import { useToast } from "./ui/use-toast";
 
 interface BadgeWithCopyProps {
   readonly name: string;
@@ -9,13 +9,11 @@ interface BadgeWithCopyProps {
 }
 
 export default function BadgeWithCopy({ name, toCopy }: BadgeWithCopyProps) {
-  const { toast } = useToast();
-
   return (
     <Badge
-      onClick={() => {
+      onClick={async () => {
         copy(toCopy);
-        toast({ description: `Copied ${name} to clipboard` });
+        toast(`Copied ${name} to clipboard`, { description: toCopy });
       }}
       className="max-w-md self-start truncate hover:cursor-pointer"
     >

context/ChainsContext/index.tsx

@@ -1,4 +1,5 @@
 import { getAllValidators } from "@/lib/staking";
+import { toastError } from "@/lib/utils";
 import { ReactNode, createContext, useContext, useEffect, useReducer } from "react";
 import { emptyChain, isChainInfoFilled, setChain, setChains, setChainsError } from "./helpers";
 import { getChain, getNodeFromArray, useChainsFromRegistry } from "./service";
@@ -99,7 +100,11 @@ export const ChainsProvider = ({ children }: ChainsProviderProps) => {
           const validators = await getAllValidators(state.chain.nodeAddress);
           dispatch({ type: "setValidatorState", payload: { validators, status: "done" } });
         } catch (e) {
-          console.error(e instanceof Error ? e.message : "Failed to load validators");
+          console.error("Failed to load validators:", e);
+          toastError({
+            description: "Failed to load validators",
+            fullError: e instanceof Error ? e : undefined,
+          });
           dispatch({ type: "setValidatorState", payload: { validators: [], status: "error" } });
         }
       }

context/ChainsContext/service.tsx

@@ -1,4 +1,5 @@
 import { getChainsFromRegistry, getShaFromRegistry } from "@/lib/chainRegistry";
+import { toastError } from "@/lib/utils";
 import { StargateClient } from "@cosmjs/stargate";
 import { useEffect, useState } from "react";
 import { emptyChain, isChainInfoFilled } from "./helpers";
@@ -56,12 +57,12 @@ export const useChainsFromRegistry = () => {
           return;
         }
 
-        if (e instanceof Error) {
-          console.error(e.message);
-          setChainItemsError(e.message);
-        } else {
-          setChainItemsError("Failed to get chains from registry");
-        }
+        console.error("Failed to get chains from registry:", e);
+        setChainItemsError(e instanceof Error ? e.message : "Failed to get chains from registry");
+        toastError({
+          description: "Failed to get chains from registry",
+          fullError: e instanceof Error ? e : undefined,
+        });
       }
     })();
   }, [chainItems.mainnets.size, chainItems.testnets.size]);