drop shadcn toast comp, add toaster, fix custom toast instances

apps/site/app/api/post/route.ts

@@ -1,9 +1,9 @@
-import { ethers } from "ethers"
-import { postGatewayABI, addresses } from "scrypt"
-import { Defender } from "@openzeppelin/defender-sdk"
-import { novaPubClient } from "@/config/publicClient"
-import { NextRequest } from "next/server"
-import { type Hex } from "viem"
+import { ethers } from 'ethers'
+import { postGatewayABI, addresses } from 'scrypt'
+import { Defender } from '@openzeppelin/defender-sdk'
+import { novaPubClient } from '@/config/publicClient'
+import { NextRequest } from 'next/server'
+import { type Hex } from 'viem'
 
 export async function POST(req: NextRequest) {
   const post = await req.json()
@@ -23,11 +23,11 @@ export async function POST(req: NextRequest) {
     const postGateway = new ethers.Contract(
       addresses.postGateway.nova,
       postGatewayABI,
-      signer as unknown as ethers.Signer 
+      signer as unknown as ethers.Signer,
     )
 
     const tx = await postGateway.post(post)
-    
+
     await novaPubClient.waitForTransactionReceipt({
       hash: tx.hash as Hex,
     })

apps/site/app/api/postBatch/route.ts

@@ -1,9 +1,9 @@
-import { ethers } from "ethers"
-import { postGatewayABI, addresses } from "scrypt"
-import { Defender } from "@openzeppelin/defender-sdk"
-import { NextRequest } from "next/server"
-import { novaPubClient } from "@/config/publicClient"
-import { type Hex } from "viem"
+import { ethers } from 'ethers'
+import { postGatewayABI, addresses } from 'scrypt'
+import { Defender } from '@openzeppelin/defender-sdk'
+import { NextRequest } from 'next/server'
+import { novaPubClient } from '@/config/publicClient'
+import { type Hex } from 'viem'
 
 export async function POST(req: NextRequest) {
   const postsArray = await req.json()
@@ -24,12 +24,12 @@ export async function POST(req: NextRequest) {
     const postGateway = new ethers.Contract(
       addresses.postGateway.nova,
       postGatewayABI,
-      signer as unknown as ethers.Signer
+      signer as unknown as ethers.Signer,
     )
 
     const tx = await postGateway.postBatch(postsArray)
     await novaPubClient.waitForTransactionReceipt({
-      hash: tx.hash as Hex ,
+      hash: tx.hash as Hex,
     })
 
     return new Response(JSON.stringify({ success: true, hash: tx.hash }), {

apps/site/app/layout.tsx

@@ -1,7 +1,7 @@
 import { Header, ThemeToggle } from '@/client'
 import { Analytics } from '@vercel/analytics/react'
 import type { Metadata } from 'next'
-import { Toaster } from 'sonner'
+import { Toaster } from '@/design-system'
 import '../styles/globals.css'
 import { sfMono } from './fonts/fonts'
 import { Providers } from './providers/providers'

apps/site/components/client/AddMembersForm.tsx

@@ -9,7 +9,6 @@ import {
   Input,
   Separator,
   Stack,
-  Toast,
   Typography,
 } from '@/design-system'
 import {
@@ -81,7 +80,7 @@ export function AddMembersForm({ targetChannelId }: AddMembersFormProps) {
 
   async function onSubmit(data: z.infer<typeof usernameSchema>) {
     // initialize bool for txn success check
-    let txSuccess: boolean = false
+    let txSuccess = false
     if (signMessage && embeddedWallet?.address && usernameId) {
       // txSuccess = await processEditChannelAccessPost({
       //   targetUserId: userId as bigint,
@@ -92,15 +91,15 @@ export function AddMembersForm({ targetChannelId }: AddMembersFormProps) {
       // })
     }
     if (txSuccess) {
-      toast.custom((t) => (
-        <Toast>
+      toast(
+        <>
           You added{' '}
           <span className="font-bold">{form.getValues().username}</span> to this
           channel
-        </Toast>
-      ))
+        </>,
+      )
     } else {
-      toast.custom((t) => <Toast>Error adding new member</Toast>)
+      toast('Error adding new member')
     }
   }
 

apps/site/components/client/ChannelDialog.tsx

@@ -19,19 +19,15 @@ import {
   Separator,
   Stack,
   Textarea,
-  Toast,
   Typography,
   Loading,
 } from '@/design-system'
 import {
   type NewChannelSchemaValues,
   newChannelSchema,
   processCreateChannelPost,
-  sendToDb,
-  w3sUpload,
 } from '@/lib'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { revalidatePath } from 'next/cache'
 import * as React from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
@@ -82,17 +78,17 @@ export function ChannelDialog({ authenticated, login }: ChannelDialogProps) {
       setDialogOpen(false)
       if (txSuccess) {
         // Render a toast with the name of the channel
-        toast.custom((t) => (
-          <Toast>
+        toast(
+          <>
             {'Successfully created '}
             <span className="font-bold">{data.name}</span>
-          </Toast>
-        ))
+          </>,
+        )
         // Reset form fields to their initial values
         form.reset()
       } else {
         // Render a toast with error message
-        toast.custom((t) => <Toast>{'Error creating channel'}</Toast>)
+        toast('Error creating channel')
       }
     }
   }

apps/site/components/client/ItemDropdown.tsx

@@ -7,7 +7,6 @@ import {
   DropdownMenuItem,
   DropdownMenuPortal,
   DropdownMenuTrigger,
-  Toast,
   Typography,
 } from '@/design-system'
 // import { processRemoveReferencePost } from '@/lib'
@@ -39,7 +38,7 @@ export function ItemDropdown({
                 disabled={!targetUserId}
                 onClick={async () => {
                   // initialize bool for txn success check
-                  let txSuccess: boolean = false
+                  let txSuccess = false
                   // Generate removeReference post
                   if (signMessage) {
                     // txSuccess = await processRemoveReferencePost({
@@ -49,11 +48,9 @@ export function ItemDropdown({
                     //   privySignMessage: signMessage,
                     // })
                     if (txSuccess) {
-                      toast.custom((t) => (
-                        <Toast>{'Item successfully removed'}</Toast>
-                      ))
+                      toast('Item successfully removed')
                     } else {
-                      ;<Toast>{'Error removing item'}</Toast>
+                      toast('Error removing item')
                     }
                   }
                 }}

apps/site/components/client/UsernameDialog.tsx

@@ -13,30 +13,21 @@ import {
   Input,
   Separator,
   Stack,
-  Toast,
   Typography,
 } from '@/design-system'
 import {
   type UsernameSchemaValues,
   checkUsernameAvailability,
   processRegisterFor,
   usernameSchema,
-  signForUsername,
 } from '@/lib'
 import { addresses } from 'scrypt'
-import { SignMessageModalUIOptions } from '@privy-io/react-auth'
 import { zodResolver } from '@hookform/resolvers/zod'
 import debounce from 'debounce'
 import React, { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import {
-  Hex,
-  createWalletClient,
-  custom,
-  EIP1193Provider,
-  zeroAddress,
-} from 'viem'
+import { Hex, createWalletClient, custom, EIP1193Provider } from 'viem'
 import { arbitrumNova, optimism } from 'viem/chains'
 import { getExpiration } from 'scrypt'
 
@@ -83,47 +74,6 @@ export function UsernameDialog({ open, setOpen }: UsernameDialogProps) {
     }
   }, [validationComplete, watchUsername])
 
-  // async function registerUsername(
-  //   username: string,
-  //   privySignMessage: (
-  //     message: string,
-  //     uiOptions?: SignMessageModalUIOptions | undefined,
-  //   ) => Promise<string>, // Updated type
-  //   embeddedWalletAddress: string,
-  //   fetchUserData: () => Promise<void>,
-  // ) {
-  // Check if the necessary conditions are met using the passed parameters
-  //   if (privySignMessage && embeddedWalletAddress) {
-  //     const userId = await processRegisterFor({
-  //       privySignerAddress: embeddedWalletAddress,
-  //       privySignMessage: privySignMessage, // Pass the function
-  //       username: username,
-  //     })
-
-  //     if (userId) {
-  //       const success = await signForUsername(
-  //         String(userId),
-  //         username,
-  //         embeddedWalletAddress as Hex,
-  //         privySignMessage,
-  //       )
-  //       if (success) {
-  //         await fetchUserData()
-  //         return true // Indicate success
-  //       } else {
-  //         console.error('Failed to prepare and set username.')
-  //         return false // Handle failure here
-  //       }
-  //     } else {
-  //       console.log('User ID not obtained from processRegisterFor.')
-  //       return false // Indicate failure to obtain userId
-  //     }
-  //   } else {
-  //     console.log('Required conditions not met for registerUsername.')
-  //     return false // Indicate failure due to unmet conditions
-  //   }
-  // }
-
   return (
     <Dialog open={open}>
       <DialogContent className="sm:max-w-[425px]">
@@ -146,8 +96,7 @@ export function UsernameDialog({ open, setOpen }: UsernameDialogProps) {
                   name: 'River IdRegistry',
                   version: '1',
                   chainId: 10,
-                  verifyingContract:
-                    addresses.idRegistry.optimism, 
+                  verifyingContract: addresses.idRegistry.optimism,
                 } as const
                 const REGISTER_TYPE = [
                   { name: 'to', type: 'address' },
@@ -163,7 +112,7 @@ export function UsernameDialog({ open, setOpen }: UsernameDialogProps) {
                   message: {
                     to: embeddedWallet.address as Hex,
                     recovery: addresses.riverRecovery.optimism,
-                    nonce: BigInt(0), // this is assumes all wallets calling this have NO previous tx's
+                    nonce: BigInt(0), // assumes all wallets calling this have 0 previous transactions
                     deadline: deadline,
                   },
                 })
@@ -178,14 +127,14 @@ export function UsernameDialog({ open, setOpen }: UsernameDialogProps) {
                 // Close the dialog
                 setOpen(false)
                 // Render a toast
-                toast.custom((t) => (
-                  <Toast>
+                toast(
+                  <>
                     Welcome to River{' '}
                     <span className="font-bold">
                       {form.getValues().username}
                     </span>
-                  </Toast>
-                ))
+                  </>,
+                )
               }}
               className="w-full"
             >

apps/site/config/publicClient.ts

@@ -2,7 +2,6 @@ import { http, createPublicClient } from 'viem'
 import { arbitrumNova } from './customChainConfig'
 import { optimism } from 'viem/chains'
 
-
 export const optimismPubClient = createPublicClient({
   chain: optimism,
   transport: http(process.env.NEXT_PUBLIC_OPTIMISM_RPC_URL),

apps/site/context/UserContext.tsx

@@ -21,16 +21,16 @@ const UserContext = createContext<{
     uiOptions?: SignMessageModalUIOptions,
   ) => Promise<string>
   userId?: bigint
-  authToken?: string | null 
+  authToken?: string | null
   username?: string
   fetchUserData?: () => Promise<void>
   clearUserData?: () => void
-}>({ authToken: null }) 
+}>({ authToken: null })
 
 export function UserContextComponent({ children }: { children: ReactNode }) {
   const [userId, setUserId] = useState<bigint>()
   const [username, setUsername] = useState<string>()
-  const [authToken, setAuthToken] = useState<string | null>(null) 
+  const [authToken, setAuthToken] = useState<string | null>(null)
 
   const { signMessage, getAccessToken } = usePrivy()
   const { wallets } = useWallets()
@@ -43,7 +43,7 @@ export function UserContextComponent({ children }: { children: ReactNode }) {
     if (!embeddedWallet) return
 
     const token = await getAccessToken()
-    setAuthToken(token) 
+    setAuthToken(token)
 
     const fetchedUserId = await getUserId({
       custodyAddress: embeddedWallet.address as Address,

apps/site/design-system/components/Toaster.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner } from 'sonner'
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme()
+
+  return (
+    <Sonner
+      toastOptions={{
+        // unstyled: true,
+        style: {
+          borderRadius: '0px',
+          padding: '8px 8px',
+          display: 'flex',
+          justifyContent: 'center',
+          boxShadow: 'none',
+          fontSize: '0.71875rem',
+        },
+        // @ts-ignore
+        classNames: {
+          toast:
+            'border-[0.5px] text-primary-foreground tracking-tight font-mono leading-[14px]',
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

apps/site/design-system/components/index.ts

@@ -10,5 +10,5 @@ export * from './Popover'
 export * from './Separator'
 export * from './Table'
 export * from './Textarea'
-export * from './Toast'
+export * from './Toaster'
 export * from './Typography'