chore: use usetoast hook everywhere

frontend/src/components/AuthCodeForm.tsx

@@ -6,7 +6,7 @@ import { Button } from "src/components/ui/button";
 import { Input } from "src/components/ui/input";
 import { Label } from "src/components/ui/label";
 import { LoadingButton } from "src/components/ui/loading-button";
-import { toast } from "src/components/ui/use-toast";
+import { useToast } from "src/components/ui/use-toast";
 
 import { useInfo } from "src/hooks/useInfo";
 import { handleRequestError } from "src/utils/handleRequestError";
@@ -20,6 +20,7 @@ type AuthCodeFormProps = {
 function AuthCodeForm({ url }: AuthCodeFormProps) {
   const [authCode, setAuthCode] = useState("");
   const navigate = useNavigate();
+  const { toast } = useToast();
 
   const { mutate: refetchInfo } = useInfo();
 

frontend/src/components/CloseChannelDialogContent.tsx

@@ -5,7 +5,7 @@ import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
 import { Button } from "src/components/ui/button";
 import { Label } from "src/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "src/components/ui/radio-group";
-import { toast } from "src/components/ui/use-toast";
+import { useToast } from "src/components/ui/use-toast";
 import { useChannels } from "src/hooks/useChannels";
 import { copyToClipboard } from "src/lib/clipboard";
 import { Channel, CloseChannelResponse } from "src/types";
@@ -29,6 +29,7 @@ export function CloseChannelDialogContent({ alias, channel }: Props) {
   const [step, setStep] = React.useState(channel.active ? 2 : 1);
   const [fundingTxId, setFundingTxId] = React.useState("");
   const { data: channels, mutate: reloadChannels } = useChannels();
+  const { toast } = useToast();
 
   const onContinue = () => {
     setStep(step + 1);

frontend/src/components/DisconnectPeerDialogContent.tsx

@@ -1,4 +1,4 @@
-import { toast } from "src/components/ui/use-toast";
+import { useToast } from "src/components/ui/use-toast";
 import { usePeers } from "src/hooks/usePeers";
 import { Peer } from "src/types";
 import { request } from "src/utils/request";
@@ -19,6 +19,7 @@ type Props = {
 
 export function DisconnectPeerDialogContent({ peer, name }: Props) {
   const { mutate: reloadPeers } = usePeers();
+  const { toast } = useToast();
 
   async function disconnectPeer() {
     try {

frontend/src/components/RoutingFeeDialogContent.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import ExternalLink from "src/components/ExternalLink";
 import { Input } from "src/components/ui/input";
 import { Label } from "src/components/ui/label";
-import { toast } from "src/components/ui/use-toast";
+import { useToast } from "src/components/ui/use-toast";
 import { useChannels } from "src/hooks/useChannels";
 import { Channel, UpdateChannelRequest } from "src/types";
 import { request } from "src/utils/request";
@@ -28,6 +28,7 @@ export function RoutingFeeDialogContent({ channel }: Props) {
   const [forwardingFee, setForwardingFee] = React.useState(
     currentFee ? currentFee.toString() : ""
   );
+  const { toast } = useToast();
   const { mutate: reloadChannels } = useChannels();
 
   async function updateFee() {

frontend/src/components/TransactionItem.tsx

@@ -19,7 +19,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "src/components/ui/dialog";
-import { toast } from "src/components/ui/use-toast";
+import { useToast } from "src/components/ui/use-toast";
 import { useApps } from "src/hooks/useApps";
 import { copyToClipboard } from "src/lib/clipboard";
 import { cn } from "src/lib/utils";
@@ -34,6 +34,7 @@ type Props = {
 
 function TransactionItem({ tx }: Props) {
   const { data: apps } = useApps();
+  const { toast } = useToast();
   const [showDetails, setShowDetails] = React.useState(false);
   const type = tx.type;
   const Icon = tx.type == "outgoing" ? ArrowUpIcon : ArrowDownIcon;

frontend/src/components/ui/use-toast.ts

@@ -6,6 +6,12 @@ import type { ToastActionElement, ToastProps } from "src/components/ui/toast";
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;
 
+export type ToastSignature = (props: Toast) => {
+  id: string;
+  dismiss: () => void;
+  update: (props: ToasterToast) => void;
+};
+
 export type ToasterToast = ToastProps & {
   id: string;
   title?: React.ReactNode;

frontend/src/hooks/useLinkAccount.ts

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { toast } from "src/components/ui/use-toast";
+import { useToast } from "src/components/ui/use-toast";
 import { useAlbyMe } from "src/hooks/useAlbyMe";
 import { useApps } from "src/hooks/useApps";
 
@@ -17,6 +17,7 @@ export function useLinkAccount() {
   const { data: me, mutate: reloadAlbyMe } = useAlbyMe();
   const { mutate: reloadApps } = useApps();
   const { data: nodeConnectionInfo } = useNodeConnectionInfo();
+  const { toast } = useToast();
   const [loading, setLoading] = useState(false);
 
   let linkStatus: LinkStatus | undefined;

frontend/src/screens/Unlock.tsx

@@ -4,7 +4,7 @@ import TwoColumnLayoutHeader from "src/components/TwoColumnLayoutHeader";
 import { Input } from "src/components/ui/input";
 import { Label } from "src/components/ui/label";
 import { LoadingButton } from "src/components/ui/loading-button";
-import { toast } from "src/components/ui/use-toast";
+import { useToast } from "src/components/ui/use-toast";
 
 import { useInfo } from "src/hooks/useInfo";
 import { saveAuthToken } from "src/lib/auth";
@@ -18,6 +18,7 @@ export default function Unlock() {
   const navigate = useNavigate();
   const location = useLocation();
 
+  const { toast } = useToast();
   const { data: info } = useInfo();
   const { mutate: refetchInfo } = useInfo();
 

frontend/src/screens/onchain/DepositBitcoin.tsx

@@ -6,7 +6,7 @@ import QRCode from "src/components/QRCode";
 import { Button } from "src/components/ui/button";
 import { Card, CardContent } from "src/components/ui/card";
 import { LoadingButton } from "src/components/ui/loading-button";
-import { toast } from "src/components/ui/use-toast";
+import { useToast } from "src/components/ui/use-toast";
 import { useOnchainAddress } from "src/hooks/useOnchainAddress";
 import { copyToClipboard } from "src/lib/clipboard";
 
@@ -16,6 +16,7 @@ export default function DepositBitcoin() {
     getNewAddress,
     loadingAddress,
   } = useOnchainAddress();
+  const { toast } = useToast();
 
   if (!onchainAddress) {
     return (

frontend/src/screens/peers/Peers.tsx

@@ -20,7 +20,7 @@ import {
   TableHeader,
   TableRow,
 } from "src/components/ui/table.tsx";
-import { toast } from "src/components/ui/use-toast";
+import { useToast } from "src/components/ui/use-toast";
 import { useChannels } from "src/hooks/useChannels";
 import { usePeers } from "src/hooks/usePeers.ts";
 import { useSyncWallet } from "src/hooks/useSyncWallet.ts";
@@ -31,6 +31,7 @@ export default function Peers() {
   useSyncWallet();
   const { data: peers } = usePeers();
   const { data: channels } = useChannels();
+  const { toast } = useToast();
   const [nodes, setNodes] = React.useState<Node[]>([]);
   const [peerToDisconnect, setPeerToDisconnect] = React.useState<Peer>();
 

frontend/src/screens/settings/Settings.tsx

@@ -13,10 +13,11 @@ import {
   Themes,
   useTheme,
 } from "src/components/ui/theme-provider";
-import { toast } from "src/components/ui/use-toast";
+import { useToast } from "src/components/ui/use-toast";
 
 function Settings() {
   const { theme, darkMode, setTheme, setDarkMode } = useTheme();
+  const { toast } = useToast();
 
   return (
     <>

frontend/src/screens/setup/SetupFinish.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 import animationData from "src/assets/lotties/loading.json";
 import Container from "src/components/Container";
 import { Button } from "src/components/ui/button";
-import { toast } from "src/components/ui/use-toast";
+import { ToastSignature, useToast } from "src/components/ui/use-toast";
 
 import { useInfo } from "src/hooks/useInfo";
 import { saveAuthToken } from "src/lib/auth";
@@ -16,6 +16,7 @@ import { request } from "src/utils/request";
 export function SetupFinish() {
   const navigate = useNavigate();
   const { nodeInfo, unlockPassword } = useSetupStore();
+  const { toast } = useToast();
   useInfo(true); // poll the info endpoint to auto-redirect when app is running
 
   const [loading, setLoading] = React.useState(false);
@@ -56,14 +57,14 @@ export function SetupFinish() {
 
     (async () => {
       setLoading(true);
-      const succeeded = await finishSetup(nodeInfo, unlockPassword);
+      const succeeded = await finishSetup(nodeInfo, unlockPassword, toast);
       // only setup call is successful as start is async
       if (!succeeded) {
         setLoading(false);
         setConnectionError(true);
       }
     })();
-  }, [nodeInfo, navigate, unlockPassword]);
+  }, [nodeInfo, navigate, unlockPassword, toast]);
 
   if (connectionError) {
     return (
@@ -99,7 +100,8 @@ export function SetupFinish() {
 
 const finishSetup = async (
   nodeInfo: SetupNodeInfo,
-  unlockPassword: string
+  unlockPassword: string,
+  toast: ToastSignature
 ): Promise<boolean> => {
   try {
     await request("/api/setup", {

frontend/src/utils/handleRequestError.ts

@@ -1,10 +1,4 @@
-import { Toast, ToasterToast } from "src/components/ui/use-toast";
-
-type ToastSignature = (props: Toast) => {
-  id: string;
-  dismiss: () => void;
-  update: (props: ToasterToast) => void;
-};
+import { ToastSignature } from "src/components/ui/use-toast";
 
 export function handleRequestError(
   toast: ToastSignature,