Add alert

apps/web/src/app/layout.tsx

@@ -1,4 +1,6 @@
 import { Separator } from '@/components/ui/separator'
+import { Terminal } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import './globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
@@ -15,6 +17,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
+import { NpmAlert } from '@/components/NpmAlert'
 
 const navLinks = [
   {
@@ -121,7 +124,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <div className="flex h-screen flex-col">
           <NavigationBar />
 
-          <div className="w-full mx-auto px-3 lg:px-4 max-w-screen-xl h-full py-4">{children}</div>
+          <div className="w-full mx-auto px-3 lg:px-4 max-w-screen-xl h-full py-4">
+            <NpmAlert />
+            {children}
+          </div>
         </div>
         <Analytics />
       </body>

apps/web/src/app/page.tsx

@@ -1,7 +1,6 @@
 import { redirect } from 'next/navigation'
-import { ROUTES } from '@/config'
 
 export default function RootPage() {
   // Redirect to calldata page by default
-  redirect(ROUTES.CALLDATA)
+  redirect('/decode')
 }

apps/web/src/components/NpmAlert.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { Terminal } from 'lucide-react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { useState } from 'react'
+
+export function NpmAlert() {
+  const [copied, setCopied] = useState(false)
+  const onCopy = () => {
+    window.navigator.clipboard.writeText('npm i @3loop/transaction-decoder')
+    setCopied(true)
+    setTimeout(() => {
+      setCopied(false)
+    }, 1000)
+  }
+
+  return (
+    <button className="mb-4 text-left w-full" onClick={onCopy}>
+      <Alert variant="info">
+        <Terminal className="h-4 w-4" />
+        <AlertTitle>Try it out!</AlertTitle>
+        <AlertDescription>{copied ? 'Copied!' : <pre>npm i @3loop/transaction-decoder</pre>}</AlertDescription>
+      </Alert>
+    </button>
+  )
+}

apps/web/src/components/ui/alert.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        info: 'bg-slate-100 text-slate-900 [&>svg]:text-slate-900',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+))
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
+  ),
+)
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+  ),
+)
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertTitle, AlertDescription }