fix(website): toasts

Co-authored-by: 0xusecannon <noreply@usecannon.com>
Co-authored-by: nicosampler <nf.dominguez.87@gmail.com>

Author: 3 people

packages/website/src/components/providers/ToasterProvider.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { Toaster } from '@/components/ui/sonner';
+
+export function ToasterProvider() {
+  return <Toaster />;
+}

packages/website/src/components/ui/alert.tsx

@@ -11,7 +11,7 @@ const alertVariants = cva(
         default: 'bg-background text-foreground border-border',
         info: 'bg-teal-100/10 text-teal-100 border-border border-teal-100/20',
         destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+          'bg-destructive text-destructive-foreground border-destructive/70 [&>svg]:text-destructive-foreground',
         warning:
           'bg-yellow-100/10 text-yellow-100 border-border border-yellow-100/20',
       },

packages/website/src/components/ui/sonner.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { useTheme } from 'next-themes';
 import { Toaster as Sonner } from 'sonner';
-import React from 'react';
 
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 
@@ -22,6 +22,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
             'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
         },
       }}
+      position="bottom-right"
+      richColors
       {...props}
     />
   );

packages/website/src/components/ui/toast.tsx

@@ -2,7 +2,7 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 
 export function PackageErrors({ error }: { error?: string }) {
   return error == null ? null : (
-    <Alert className="mt-4" variant="destructive">
+    <Alert className="mb-4" variant="destructive">
       <AlertDescription>{error}</AlertDescription>
     </Alert>
   );

packages/website/src/components/ui/toaster.tsx

@@ -7,7 +7,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import { useToast } from '@/hooks/use-toast';
+import { toast } from 'sonner';
 import {
   useGasPrice,
   usePrepareTransactionRequest,
@@ -43,7 +43,6 @@ export default function PrepareNetwork({
   const currentSafe = useStore((s) => s.currentSafe);
   // Uncomment the following line to use test with local network
   // const currentSafe = { chainId: 31337 };
-  const { toast } = useToast();
 
   useEffect(() => {
     if (!isConnected && openConnectModal) {
@@ -76,10 +75,8 @@ export default function PrepareNetwork({
 
         await deterministicDeployerBytecode.refetch();
 
-        toast({
-          title: 'Deterministic Deployer Deployed',
+        toast('Deterministic Deployer Deployed', {
           description: 'The deterministic deployer has been deployed.',
-          variant: 'default',
         });
       },
     },
@@ -117,10 +114,8 @@ export default function PrepareNetwork({
       onSuccess: async () => {
         await onchainStoreBytecode.refetch();
 
-        toast({
-          title: 'Onchain Store Deployed',
+        toast('Onchain Store Deployed', {
           description: 'The onchain store has been deployed.',
-          variant: 'default',
         });
       },
     },
@@ -149,10 +144,8 @@ export default function PrepareNetwork({
       onSuccess: async () => {
         await multicallForwarderBytecode.refetch();
 
-        toast({
-          title: 'Multicall Forwarder Deployed',
+        toast('Multicall Forwarder Deployed', {
           description: 'The multicall forwarder has been deployed.',
-          variant: 'default',
         });
       },
     },

packages/website/src/features/Deploy/PackageErrors.tsx

@@ -24,7 +24,7 @@ import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useToast } from '@/hooks/use-toast';
+import { toast } from 'sonner';
 import {
   Tooltip,
   TooltipContent,
@@ -41,7 +41,6 @@ export default function PublishUtility(props: {
 
   const wc = useWalletClient();
   const { switchChainAsync } = useSwitchChain();
-  const { toast } = useToast();
 
   // get the package referenced by this ipfs package
   const {
@@ -151,15 +150,9 @@ export default function PublishUtility(props: {
       // eslint-disable-next-line no-console
       console.error(err);
       if (err.message.includes('exceeds the balance of the account')) {
-        toast({
-          title: 'Error Publishing Package: Insufficient Funds',
-          variant: 'destructive',
-        });
+        toast.error('Error Publishing Package: Insufficient Funds');
       } else {
-        toast({
-          title: 'Error Publishing Package',
-          variant: 'destructive',
-        });
+        toast.error('Error Publishing Package');
       }
     },
   });
@@ -176,15 +169,9 @@ export default function PublishUtility(props: {
       console.error(err);
 
       if (err.message.includes('exceeds the balance of the account')) {
-        toast({
-          title: 'Error Publishing Package: Insufficient Funds',
-          variant: 'destructive',
-        });
+        toast.error('Error Publishing Package: Insufficient Funds');
       } else {
-        toast({
-          title: 'Error Publishing Package',
-          variant: 'destructive',
-        });
+        toast.error('Error Publishing Package');
       }
     },
   });

packages/website/src/features/Deploy/PrepareNetwork.tsx

@@ -37,7 +37,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { useToast } from '@/hooks/use-toast';
+import { toast } from 'sonner';
 
 // Because of a weird type cohercion, after using viem.isAddress during website build,
 // the string type of the given value gets invalid to "never", and breaks the build.
@@ -103,8 +103,6 @@ export const QueuedTxns = ({
 
   const txnInfo = useSimulatedTxns(currentSafe as any, queuedTxns);
 
-  const { toast } = useToast();
-
   const stager = useTxnStager(
     targetTxn
       ? {
@@ -129,10 +127,7 @@ export const QueuedTxns = ({
       async onSignComplete() {
         if (onDrawerClose) onDrawerClose();
         await router.push(links.DEPLOY);
-        toast({
-          title: 'You successfully signed the transaction.',
-          variant: 'default',
-        });
+        toast.success('You successfully signed the transaction.');
 
         setQueuedIdentifiableTxns({
           queuedIdentifiableTxns: [],
@@ -542,11 +537,9 @@ export const QueuedTxns = ({
                               onSuccess: async () => {
                                 await router.push(links.DEPLOY);
 
-                                toast({
-                                  title:
-                                    'You successfully executed the transaction.',
-                                  variant: 'default',
-                                });
+                                toast.success(
+                                  'You successfully executed the transaction.'
+                                );
                               },
                             });
                           }}