From f0982c9ab5a17c44b86882b002ea8ca445afe22c Mon Sep 17 00:00:00 2001 From: Eason Date: Mon, 21 Apr 2025 14:56:26 +1200 Subject: [PATCH 01/14] ethereum demo created --- examples/ethereum/.gitignore | 24 + examples/ethereum/app/globals.css | 94 + examples/ethereum/app/layout.tsx | 19 + examples/ethereum/app/page.tsx | 271 ++ examples/ethereum/components.json | 21 + .../ethereum/components/theme-provider.tsx | 11 + examples/ethereum/components/ui/accordion.tsx | 58 + .../ethereum/components/ui/alert-dialog.tsx | 141 + examples/ethereum/components/ui/alert.tsx | 59 + .../ethereum/components/ui/aspect-ratio.tsx | 7 + examples/ethereum/components/ui/avatar.tsx | 50 + examples/ethereum/components/ui/badge.tsx | 36 + .../ethereum/components/ui/breadcrumb.tsx | 115 + examples/ethereum/components/ui/button.tsx | 56 + examples/ethereum/components/ui/calendar.tsx | 66 + examples/ethereum/components/ui/card.tsx | 79 + examples/ethereum/components/ui/carousel.tsx | 262 ++ examples/ethereum/components/ui/chart.tsx | 365 ++ examples/ethereum/components/ui/checkbox.tsx | 30 + .../ethereum/components/ui/collapsible.tsx | 11 + examples/ethereum/components/ui/command.tsx | 153 + .../ethereum/components/ui/context-menu.tsx | 200 + examples/ethereum/components/ui/dialog.tsx | 122 + examples/ethereum/components/ui/drawer.tsx | 118 + .../ethereum/components/ui/dropdown-menu.tsx | 200 + examples/ethereum/components/ui/form.tsx | 178 + .../ethereum/components/ui/hover-card.tsx | 29 + examples/ethereum/components/ui/input-otp.tsx | 71 + examples/ethereum/components/ui/input.tsx | 22 + examples/ethereum/components/ui/label.tsx | 26 + examples/ethereum/components/ui/menubar.tsx | 236 + .../components/ui/navigation-menu.tsx | 128 + .../ethereum/components/ui/pagination.tsx | 117 + examples/ethereum/components/ui/popover.tsx | 31 + examples/ethereum/components/ui/progress.tsx | 28 + .../ethereum/components/ui/radio-group.tsx | 44 + examples/ethereum/components/ui/resizable.tsx | 45 + .../ethereum/components/ui/scroll-area.tsx | 48 + examples/ethereum/components/ui/select.tsx | 160 + examples/ethereum/components/ui/separator.tsx | 31 + examples/ethereum/components/ui/sheet.tsx | 140 + examples/ethereum/components/ui/sidebar.tsx | 763 ++++ examples/ethereum/components/ui/skeleton.tsx | 15 + examples/ethereum/components/ui/slider.tsx | 28 + examples/ethereum/components/ui/sonner.tsx | 31 + examples/ethereum/components/ui/switch.tsx | 29 + examples/ethereum/components/ui/table.tsx | 117 + examples/ethereum/components/ui/tabs.tsx | 55 + examples/ethereum/components/ui/textarea.tsx | 22 + examples/ethereum/components/ui/toast.tsx | 129 + examples/ethereum/components/ui/toaster.tsx | 35 + .../ethereum/components/ui/toggle-group.tsx | 61 + examples/ethereum/components/ui/toggle.tsx | 45 + examples/ethereum/components/ui/tooltip.tsx | 30 + .../ethereum/components/ui/use-mobile.tsx | 19 + examples/ethereum/components/ui/use-toast.ts | 194 + examples/ethereum/hooks/use-mobile.tsx | 19 + examples/ethereum/hooks/use-toast.ts | 194 + examples/ethereum/lib/utils.ts | 6 + examples/ethereum/next.config.mjs | 14 + examples/ethereum/package.json | 72 + examples/ethereum/pnpm-lock.yaml | 5 + examples/ethereum/postcss.config.mjs | 8 + examples/ethereum/public/placeholder-logo.png | Bin 0 -> 958 bytes examples/ethereum/public/placeholder-logo.svg | 1 + examples/ethereum/public/placeholder-user.jpg | Bin 0 -> 2615 bytes examples/ethereum/public/placeholder.jpg | Bin 0 -> 1596 bytes examples/ethereum/public/placeholder.svg | 1 + examples/ethereum/styles/globals.css | 94 + examples/ethereum/tailwind.config.ts | 96 + examples/ethereum/tsconfig.json | 27 + examples/ethereum/types/global.d.ts | 3 + examples/ethereum/yarn.lock | 3850 +++++++++++++++++ 73 files changed, 9865 insertions(+) create mode 100644 examples/ethereum/.gitignore create mode 100644 examples/ethereum/app/globals.css create mode 100644 examples/ethereum/app/layout.tsx create mode 100644 examples/ethereum/app/page.tsx create mode 100644 examples/ethereum/components.json create mode 100644 examples/ethereum/components/theme-provider.tsx create mode 100644 examples/ethereum/components/ui/accordion.tsx create mode 100644 examples/ethereum/components/ui/alert-dialog.tsx create mode 100644 examples/ethereum/components/ui/alert.tsx create mode 100644 examples/ethereum/components/ui/aspect-ratio.tsx create mode 100644 examples/ethereum/components/ui/avatar.tsx create mode 100644 examples/ethereum/components/ui/badge.tsx create mode 100644 examples/ethereum/components/ui/breadcrumb.tsx create mode 100644 examples/ethereum/components/ui/button.tsx create mode 100644 examples/ethereum/components/ui/calendar.tsx create mode 100644 examples/ethereum/components/ui/card.tsx create mode 100644 examples/ethereum/components/ui/carousel.tsx create mode 100644 examples/ethereum/components/ui/chart.tsx create mode 100644 examples/ethereum/components/ui/checkbox.tsx create mode 100644 examples/ethereum/components/ui/collapsible.tsx create mode 100644 examples/ethereum/components/ui/command.tsx create mode 100644 examples/ethereum/components/ui/context-menu.tsx create mode 100644 examples/ethereum/components/ui/dialog.tsx create mode 100644 examples/ethereum/components/ui/drawer.tsx create mode 100644 examples/ethereum/components/ui/dropdown-menu.tsx create mode 100644 examples/ethereum/components/ui/form.tsx create mode 100644 examples/ethereum/components/ui/hover-card.tsx create mode 100644 examples/ethereum/components/ui/input-otp.tsx create mode 100644 examples/ethereum/components/ui/input.tsx create mode 100644 examples/ethereum/components/ui/label.tsx create mode 100644 examples/ethereum/components/ui/menubar.tsx create mode 100644 examples/ethereum/components/ui/navigation-menu.tsx create mode 100644 examples/ethereum/components/ui/pagination.tsx create mode 100644 examples/ethereum/components/ui/popover.tsx create mode 100644 examples/ethereum/components/ui/progress.tsx create mode 100644 examples/ethereum/components/ui/radio-group.tsx create mode 100644 examples/ethereum/components/ui/resizable.tsx create mode 100644 examples/ethereum/components/ui/scroll-area.tsx create mode 100644 examples/ethereum/components/ui/select.tsx create mode 100644 examples/ethereum/components/ui/separator.tsx create mode 100644 examples/ethereum/components/ui/sheet.tsx create mode 100644 examples/ethereum/components/ui/sidebar.tsx create mode 100644 examples/ethereum/components/ui/skeleton.tsx create mode 100644 examples/ethereum/components/ui/slider.tsx create mode 100644 examples/ethereum/components/ui/sonner.tsx create mode 100644 examples/ethereum/components/ui/switch.tsx create mode 100644 examples/ethereum/components/ui/table.tsx create mode 100644 examples/ethereum/components/ui/tabs.tsx create mode 100644 examples/ethereum/components/ui/textarea.tsx create mode 100644 examples/ethereum/components/ui/toast.tsx create mode 100644 examples/ethereum/components/ui/toaster.tsx create mode 100644 examples/ethereum/components/ui/toggle-group.tsx create mode 100644 examples/ethereum/components/ui/toggle.tsx create mode 100644 examples/ethereum/components/ui/tooltip.tsx create mode 100644 examples/ethereum/components/ui/use-mobile.tsx create mode 100644 examples/ethereum/components/ui/use-toast.ts create mode 100644 examples/ethereum/hooks/use-mobile.tsx create mode 100644 examples/ethereum/hooks/use-toast.ts create mode 100644 examples/ethereum/lib/utils.ts create mode 100644 examples/ethereum/next.config.mjs create mode 100644 examples/ethereum/package.json create mode 100644 examples/ethereum/pnpm-lock.yaml create mode 100644 examples/ethereum/postcss.config.mjs create mode 100644 examples/ethereum/public/placeholder-logo.png create mode 100644 examples/ethereum/public/placeholder-logo.svg create mode 100644 examples/ethereum/public/placeholder-user.jpg create mode 100644 examples/ethereum/public/placeholder.jpg create mode 100644 examples/ethereum/public/placeholder.svg create mode 100644 examples/ethereum/styles/globals.css create mode 100644 examples/ethereum/tailwind.config.ts create mode 100644 examples/ethereum/tsconfig.json create mode 100644 examples/ethereum/types/global.d.ts create mode 100644 examples/ethereum/yarn.lock diff --git a/examples/ethereum/.gitignore b/examples/ethereum/.gitignore new file mode 100644 index 00000000..bbe66ba3 --- /dev/null +++ b/examples/ethereum/.gitignore @@ -0,0 +1,24 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules + +# next.js +/.next/ +/out/ + +# production +/build + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files +.env* + +# typescript +*.tsbuildinfo +next-env.d.ts \ No newline at end of file diff --git a/examples/ethereum/app/globals.css b/examples/ethereum/app/globals.css new file mode 100644 index 00000000..ac684423 --- /dev/null +++ b/examples/ethereum/app/globals.css @@ -0,0 +1,94 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + font-family: Arial, Helvetica, sans-serif; +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/examples/ethereum/app/layout.tsx b/examples/ethereum/app/layout.tsx new file mode 100644 index 00000000..66e4b7a5 --- /dev/null +++ b/examples/ethereum/app/layout.tsx @@ -0,0 +1,19 @@ +import type { Metadata } from 'next' +import './globals.css' + +export const metadata: Metadata = { + title: 'Ethereum - InterchainJS Demo', + description: 'Created with InterchainJS, Interchain-Kit', +} + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode +}>) { + return ( + + {children} + + ) +} diff --git a/examples/ethereum/app/page.tsx b/examples/ethereum/app/page.tsx new file mode 100644 index 00000000..7e4950e5 --- /dev/null +++ b/examples/ethereum/app/page.tsx @@ -0,0 +1,271 @@ +"use client" + +import { useState, useEffect } from "react" +import { ethers } from "ethers" +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { Label } from "@/components/ui/label" +import { Wallet, ArrowRight, RefreshCw, AlertCircle } from "lucide-react" +import { Alert, AlertDescription } from "@/components/ui/alert" +import { useToast } from "@/hooks/use-toast" + +export default function WalletPage() { + const [account, setAccount] = useState("") + const [balance, setBalance] = useState("0") + const [isConnected, setIsConnected] = useState(false) + const [isLoading, setIsLoading] = useState(false) + const [recipient, setRecipient] = useState("") + const [amount, setAmount] = useState("") + const [error, setError] = useState("") + const { toast } = useToast() + + // Check if MetaMask is installed + const checkIfWalletIsInstalled = () => { + return typeof window !== "undefined" && typeof window.ethereum !== "undefined" + } + + // Connect wallet + const connectWallet = async () => { + setIsLoading(true) + setError("") + + try { + if (!checkIfWalletIsInstalled()) { + throw new Error("Please install MetaMask wallet") + } + + // Request account access + const accounts = await window.ethereum.request({ method: "eth_requestAccounts" }) + + if (accounts.length > 0) { + setAccount(accounts[0]) + setIsConnected(true) + await getBalance(accounts[0]) + + toast({ + title: "Wallet Connected", + description: `Address: ${accounts[0].substring(0, 6)}...${accounts[0].substring(38)}`, + }) + } + } catch (err: any) { + setError(err.message || "Failed to connect wallet") + toast({ + title: "Connection Failed", + description: err.message || "Failed to connect wallet", + variant: "destructive", + }) + } finally { + setIsLoading(false) + } + } + + // Add a disconnectWallet function after the connectWallet function + const disconnectWallet = () => { + setAccount("") + setBalance("0") + setIsConnected(false) + setError("") + + toast({ + title: "Wallet Disconnected", + description: "Your wallet has been disconnected successfully", + }) + } + + // Get balance + const getBalance = async (address: string) => { + try { + const provider = new ethers.BrowserProvider(window.ethereum) + const balance = await provider.getBalance(address) + setBalance(ethers.formatEther(balance)) + } catch (err: any) { + console.error("Failed to get balance:", err) + setError(err.message || "Failed to get balance") + } + } + + // Refresh balance + const refreshBalance = async () => { + if (account) { + await getBalance(account) + toast({ + title: "Balance Updated", + description: `Current balance: ${balance} ETH`, + }) + } + } + + // Send transaction + const sendTransaction = async () => { + setIsLoading(true) + setError("") + + try { + if (!recipient || !amount) { + throw new Error("Please enter recipient address and amount") + } + + if (!ethers.isAddress(recipient)) { + throw new Error("Invalid Ethereum address") + } + + const provider = new ethers.BrowserProvider(window.ethereum) + const signer = await provider.getSigner() + + // Create transaction + const tx = { + to: recipient, + value: ethers.parseEther(amount), + } + + // Send transaction + const transaction = await signer.sendTransaction(tx) + + toast({ + title: "Transaction Sent", + description: `Transaction hash: ${transaction.hash.substring(0, 10)}...`, + }) + + // Wait for confirmation + await transaction.wait() + + toast({ + title: "Transaction Confirmed", + description: "Transfer completed successfully", + }) + + // Update balance + await getBalance(account) + + // Clear form + setRecipient("") + setAmount("") + } catch (err: any) { + setError(err.message || "Transaction failed") + toast({ + title: "Transaction Failed", + description: err.message || "Transaction failed", + variant: "destructive", + }) + } finally { + setIsLoading(false) + } + } + + // Listen for account changes + useEffect(() => { + if (checkIfWalletIsInstalled()) { + window.ethereum.on("accountsChanged", (accounts: string[]) => { + if (accounts.length > 0) { + setAccount(accounts[0]) + getBalance(accounts[0]) + } else { + setAccount("") + setBalance("0") + setIsConnected(false) + } + }) + } + + return () => { + if (checkIfWalletIsInstalled()) { + window.ethereum.removeListener("accountsChanged", () => {}) + } + } + }, []) + + return ( +
+

Ethereum Wallet

+ +
+ + + Wallet Connection + Connect your Ethereum wallet to view balance + + + {!isConnected ? ( + + ) : ( +
+
+ +
{account}
+
+ +
+
+ + +
+
{balance} ETH
+
+ + +
+ )} +
+
+ + {isConnected && ( + + + Send Ethereum + Transfer ETH to another address + + +
+
+ + setRecipient(e.target.value)} + disabled={isLoading} + /> +
+ +
+ + setAmount(e.target.value)} + disabled={isLoading} + /> +
+
+
+ + + +
+ )} +
+ + {error && ( + + + {error} + + )} +
+ ) +} diff --git a/examples/ethereum/components.json b/examples/ethereum/components.json new file mode 100644 index 00000000..d9ef0ae5 --- /dev/null +++ b/examples/ethereum/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/examples/ethereum/components/theme-provider.tsx b/examples/ethereum/components/theme-provider.tsx new file mode 100644 index 00000000..55c2f6eb --- /dev/null +++ b/examples/ethereum/components/theme-provider.tsx @@ -0,0 +1,11 @@ +'use client' + +import * as React from 'react' +import { + ThemeProvider as NextThemesProvider, + type ThemeProviderProps, +} from 'next-themes' + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + return {children} +} diff --git a/examples/ethereum/components/ui/accordion.tsx b/examples/ethereum/components/ui/accordion.tsx new file mode 100644 index 00000000..24c788c2 --- /dev/null +++ b/examples/ethereum/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+
+)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/examples/ethereum/components/ui/alert-dialog.tsx b/examples/ethereum/components/ui/alert-dialog.tsx new file mode 100644 index 00000000..25e7b474 --- /dev/null +++ b/examples/ethereum/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/examples/ethereum/components/ui/alert.tsx b/examples/ethereum/components/ui/alert.tsx new file mode 100644 index 00000000..41fa7e05 --- /dev/null +++ b/examples/ethereum/components/ui/alert.tsx @@ -0,0 +1,59 @@ +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", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/examples/ethereum/components/ui/aspect-ratio.tsx b/examples/ethereum/components/ui/aspect-ratio.tsx new file mode 100644 index 00000000..d6a5226f --- /dev/null +++ b/examples/ethereum/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/examples/ethereum/components/ui/avatar.tsx b/examples/ethereum/components/ui/avatar.tsx new file mode 100644 index 00000000..51e507ba --- /dev/null +++ b/examples/ethereum/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/examples/ethereum/components/ui/badge.tsx b/examples/ethereum/components/ui/badge.tsx new file mode 100644 index 00000000..f000e3ef --- /dev/null +++ b/examples/ethereum/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/examples/ethereum/components/ui/breadcrumb.tsx b/examples/ethereum/components/ui/breadcrumb.tsx new file mode 100644 index 00000000..60e6c96f --- /dev/null +++ b/examples/ethereum/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>