feat: add a toaster for notifications and other snacks

package.json

@@ -31,6 +31,7 @@
     "next": "^13.5.4",
     "react": "latest",
     "react-dom": "latest",
+    "react-hot-toast": "^2.4.1",
     "swr": "^2.2.4"
   },
   "devDependencies": {

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import './globals.css'
 import type { Metadata } from 'next'
 import Provider from '@/components/W3UIProvider'
+import Toaster from '@/components/Toaster'
 
 export const metadata: Metadata = {
   title: 'w3up console',
@@ -18,6 +19,7 @@ export default function RootLayout ({
         <Provider>
           <>{children}</>
         </Provider>
+        <Toaster />
       </body>
     </html>
   )

src/app/plans/change/page.tsx

@@ -6,6 +6,7 @@ import { CheckCircleIcon } from '@heroicons/react/24/outline'
 import DefaultLoader from "@/components/Loader"
 import { useState } from "react"
 import SidebarLayout from "@/components/SidebarLayout"
+import { ucantoast } from "@/toaster"
 
 interface PlanSectionProps {
   planID: DID
@@ -38,7 +39,11 @@ function PlanSection ({ planID, planName, flatFee, flatFeeAllotment, perGbFee }:
   async function selectPlan (selectedPlanID: DID) {
     try {
       setIsUpdatingPlan(true)
-      await setPlan(selectedPlanID)
+      await ucantoast(setPlan(selectedPlanID), {
+        loading: "Updating plan...",
+        success: "Plan updated!",
+        error: "Failed to update plan, check the console for more details."
+      })
     } finally {
       setIsUpdatingPlan(false)
     }

src/components/Toaster.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { Toaster, ToastIcon, resolveValue } from "react-hot-toast"
+import { Transition } from "@headlessui/react"
+
+export default function TailwindToaster () {
+  return (
+    <Toaster position="top-right">
+      {(t) => (
+        <Transition
+          appear
+          show={t.visible}
+          className="transform p-4 flex bg-white rounded shadow-lg"
+          enter="transition-all duration-150"
+          enterFrom="opacity-0 scale-50"
+          enterTo="opacity-100 scale-100"
+          leave="transition-all duration-150"
+          leaveFrom="opacity-100 scale-100"
+          leaveTo="opacity-0 scale-75"
+        >
+          <ToastIcon toast={t} />
+          <p className="px-2">{resolveValue(t.message, t)}</p>
+        </Transition>
+      )}
+    </Toaster>
+  )
+}

src/hooks.tsx

@@ -11,7 +11,6 @@ type UsePlanResult = SWRResponse<PlanGetSuccess | undefined> & {
 }
 
 export const usePlan = (account: Account) => {
-  const { mutate } = useSWRConfig()
   const result = useSWR<PlanGetSuccess | undefined>(planKey(account), {
     fetcher: async () => {
       if (!account) return
@@ -25,8 +24,9 @@ export const usePlan = (account: Account) => {
   // to avoid calling the getters in SWRResponse when copying values over -
   // I can't think of a cleaner way to do this but open to refactoring
   result.setPlan = async (plan: DID) => {
-    await account.plan.set(plan)
+    const setResult = await account.plan.set(plan)
     await result.mutate()
+    return setResult
   }
   return result as UsePlanResult
 }

src/toaster.ts

@@ -0,0 +1,13 @@
+import { Result } from '@ucanto/interface'
+import { toast } from 'react-hot-toast'
+
+export const ucantoast = async (promise: Promise<Result>, options: any) => {
+  return toast.promise((async () => {
+    const result = await promise
+    if (result.ok) {
+      return result.ok
+    } else {
+      throw result.error
+    }
+  })(), options)
+}