♻️ replace old toaster with sonner toaster

modularcloud · Feb 22, 2024 · f591568 · f591568
1 parent 3cafe25
commit f591568
Show file tree

Hide file tree

Showing 9 changed files with 173 additions and 400 deletions.
diff --git a/apps/web/app/(home)/[network]/page.tsx b/apps/web/app/(home)/[network]/page.tsx
@@ -23,9 +23,7 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
 
   return {
     title: `${capitalize(network.brand)}`,
-    description: `A block explorer for the ${capitalize(
-      network.brand,
-    )} ecosystem.`,
+    description: `A block explorer for the ${capitalize(network.brand)} ecosystem.`,
     openGraph: {
       url: `/${network.slug}`,
       type: "website",

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -30,7 +30,6 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@solana/web3.js": "^1.78.4",
@@ -58,6 +57,7 @@
     "resend": "^2.0.0",
     "service-manager": "*",
     "slugify": "^1.6.6",
+    "sonner": "^1.4.0",
     "stream": "^0.0.2",
     "swr": "^2.0.3",
     "tailwind-merge": "^1.13.2",

diff --git a/apps/web/ui/copyable-value/index.tsx b/apps/web/ui/copyable-value/index.tsx
@@ -7,7 +7,7 @@ import { Button } from "~/ui/button";
 
 // utils
 import { copyValueToClipboard, truncateHash } from "~/lib/shared-utils";
-import { useToast } from "~/ui/shadcn/components/ui/use-toast";
+import { toast } from "sonner";
 import { cn } from "~/ui/shadcn/utils";
 
 // types
@@ -29,7 +29,6 @@ export function CopyableValue({
   copyIconAppearOnlyIfSelected = false,
   children,
 }: Props) {
-  const { toast } = useToast();
   return (
     <span
       className={cn(
@@ -58,9 +57,11 @@ export function CopyableValue({
                 const copied = await copyValueToClipboard(value);
 
                 if (copied) {
-                  toast({
-                    title: "Copied",
+                  toast("Copied", {
                     description: `"${truncateHash(value)}" copied to clipboard`,
+                    cancel: {
+                      label: "ok",
+                    },
                   });
                 }
               }}
@@ -78,9 +79,11 @@ export function CopyableValue({
               const copied = await copyValueToClipboard(value);
 
               if (copied) {
-                toast({
-                  title: "Copied",
+                toast("Copied", {
                   description: `"${truncateHash(value)}" copied to clipboard`,
+                  cancel: {
+                    label: "ok",
+                  },
                 });
               }
             }}

diff --git a/apps/web/ui/entity/overview/blob.tsx b/apps/web/ui/entity/overview/blob.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import * as React from "react";
 import { copyValueToClipboard, truncateHash } from "~/lib/shared-utils";
-import { toast } from "~/ui/shadcn/components/ui/use-toast";
+import { toast } from "sonner";
 import useSWRImmutable from "swr/immutable";
 import Script from "next/script";
 import { ButtonBody } from "./button-body";
@@ -18,9 +18,11 @@ export function Blob({ url, mimeType }: { url: string; mimeType: string }) {
     const copied = await copyValueToClipboard(text);
 
     if (copied) {
-      toast({
-        title: "Copied",
+      toast("Copied", {
         description: `"${truncateHash(text)}" copied to clipboard`,
+        cancel: {
+          label: "ok",
+        },
       });
     }
   }

diff --git a/apps/web/ui/entity/overview/entry-list.tsx b/apps/web/ui/entity/overview/entry-list.tsx
@@ -6,7 +6,7 @@ import { CopyableValue } from "~/ui/copyable-value";
 
 import { cn } from "~/ui/shadcn/utils";
 import { copyValueToClipboard, truncateHash } from "~/lib/shared-utils";
-import { toast } from "~/ui/shadcn/components/ui/use-toast";
+import { toast } from "sonner";
 
 import type { Value } from "@modularcloud/headless";
 import { useHotkey } from "~/lib/hooks/use-hotkey";
@@ -108,14 +108,17 @@ export function OverviewEntryList({ entries }: Props) {
         }
         copyValueToClipboard(value).then((copied) => {
           if (copied) {
-            toast({
-              title: "Copied",
+            toast("Copied", {
               description: `"${truncateHash(value)}" copied to clipboard`,
+              cancel: {
+                label: "ok",
+              },
             });
           } else {
-            toast({
-              title: "Failed to copy",
-              description: `An`,
+            toast("Failed to copy", {
+              cancel: {
+                label: "ok",
+              },
             });
           }
         });

diff --git a/apps/web/ui/shadcn/components/ui/toast.tsx b/apps/web/ui/shadcn/components/ui/toast.tsx
diff --git a/apps/web/ui/shadcn/components/ui/toaster.tsx b/apps/web/ui/shadcn/components/ui/toaster.tsx
@@ -1,35 +1,25 @@
 "use client";
 
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "~/ui/shadcn/components/ui/toast";
-import { useToast } from "~/ui/shadcn/components/ui/use-toast";
+import { Toaster as Sonner } from "sonner";
 
-export function Toaster() {
-  const { toasts } = useToast();
+export type ToasterProps = React.ComponentProps<typeof Sonner>;
 
+export function Toaster({ ...props }: ToasterProps) {
   return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-      <ToastViewport />
-    </ToastProvider>
+    <Sonner
+      theme="light"
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted group-[.toast]:text-sm",
+          actionButton: "group-[.toast]:bg-gray-900 group-[.toast]:text-white",
+          cancelButton: "group-[.toast]:bg-gray-900 group-[.toast]:text-white",
+          title: "group-[.toast]:text-base",
+        },
+      }}
+      {...props}
+    />
   );
 }