"use client"; import React, { useState } from "react"; import { motion, type Variants } from "motion/react"; import { cn } from "@/lib/utils"; export interface Chain { id: number; name: string; symbol: string; logo?: string; } const defaultChains: Chain[] = [ { id: 1, name: "Bitcoin", symbol: "BTC", logo: "/assets/chains/bitcoin.png" }, { id: 2, name: "Ethereum", symbol: "ETH", logo: "/assets/chains/ethereum.png", }, { id: 3, name: "BNB Chain", symbol: "BNB", logo: "/assets/chains/bnb.png" }, { id: 4, name: "Solana", symbol: "SOL", logo: "/assets/chains/solana.png" }, { id: 5, name: "Polygon", symbol: "POL", logo: "/assets/chains/polygon.png" }, { id: 6, name: "Avalanche", symbol: "AVAX", logo: "/assets/chains/avalanche.png", }, { id: 7, name: "Arbitrum", symbol: "ARB", logo: "/assets/chains/arbitrum.png", }, { id: 8, name: "Optimism", symbol: "OP", logo: "/assets/chains/optimism.png", }, { id: 9, name: "Base", symbol: "BASE", logo: "/assets/chains/base.png" }, { id: 10, name: "Sui", symbol: "SUI", logo: "/assets/chains/sui.png" }, { id: 11, name: "Aptos", symbol: "APT", logo: "/assets/chains/aptos.png" }, { id: 12, name: "Cosmos", symbol: "ATOM", logo: "/assets/chains/cosmos.png" }, { id: 13, name: "Polkadot", symbol: "DOT", logo: "/assets/chains/polkadot.png", }, { id: 14, name: "Near Protocol", symbol: "NEAR", logo: "/assets/chains/near.png", }, { id: 15, name: "Tron", symbol: "TRX", logo: "/assets/chains/tron.png" }, { id: 16, name: "Filecoin", symbol: "FIL", logo: "/assets/chains/filecoin.png", }, { id: 17, name: "Celestia", symbol: "TIA", logo: "/assets/chains/celestia.png", }, { id: 18, name: "Injective", symbol: "INJ", logo: "/assets/chains/injective.png", }, { id: 19, name: "Cardano", symbol: "ADA", logo: "/assets/chains/cardano.png", }, { id: 20, name: "Toncoin", symbol: "TON", logo: "/assets/chains/toncoin.png", }, { id: 21, name: "Starknet", symbol: "STRK", logo: "/assets/chains/starknet.png", }, { id: 22, name: "zkSync", symbol: "ZK", logo: "/assets/chains/zksync.png" }, { id: 23, name: "Internet Computer", symbol: "ICP", logo: "/assets/chains/icp.png", }, { id: 24, name: "Sei", symbol: "SEI", logo: "/assets/chains/sei.png" }, ]; const chainColors: Record = { BTC: "#f7931a", ETH: "#627eea", BNB: "#f0b90b", SOL: "#9945ff", POL: "#8247e5", AVAX: "#e84142", ARB: "#2d374b", OP: "#ff0420", BASE: "#0052ff", SUI: "#4da2ff", APT: "#00bfa5", ATOM: "#2e3148", DOT: "#e6007a", NEAR: "#000000", TRX: "#ef0027", FIL: "#0090ff", TIA: "#7b2fe9", INJ: "#00f2fe", ADA: "#0033ad", TON: "#0098ea", STRK: "#08a4d4", ZK: "#4c8eff", ICP: "#3b00b9", SEI: "#8c1c40", }; const containerVariants: Variants = { hidden: {}, visible: { transition: { staggerChildren: 0.04 }, }, }; const itemVariants: Variants = { hidden: { opacity: 0, y: 24, scale: 0.9 }, visible: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", stiffness: 300, damping: 24 }, }, }; function ChainCard({ chain, variants }: { chain: Chain; variants?: Variants }) { const [imgFailed, setImgFailed] = useState(false); return (

{chain.logo && !imgFailed ? ( // eslint-disable-next-line @next/next/no-img-element

setImgFailed(true)} /> ) : (

{chain.symbol}

)}

); } export interface PerspectiveGridProps { chains?: Chain[]; title?: React.ReactNode; subtitle?: React.ReactNode; className?: string; gridClassName?: string; } export default function PerspectiveGrid({ chains = defaultChains, title = "Any transaction on any chain,
Aside executes it for you.", subtitle = "Multi-chain ecosystem", className, gridClassName, }: PerspectiveGridProps) { return (

{subtitle} >

{typeof title === "string" ? title.split("
").map((part, i) => ( {i > 0 &&
} {part} )) : title}

{chains.map((chain) => ( ))}

); }

{typeof title === "string" ? title.split("").map((part, i) => ( {i > 0 && } {part} )) : title}

{typeof title === "string" ? title.split("
").map((part, i) => ( {i > 0 &&
} {part} )) : title}

Property	Type	Default	Description
chains	Chain[]		Items displayed in the grid.
title	React.ReactNode	"Any transaction on any chain, Aside executes it."	Heading rendered above the chain grid.
subtitle	React.ReactNode	"Multi-chain ecosystem"	Supporting text rendered below the title.

Any transaction on any chain,Aside executes it for you.

Props

Any transaction on any chain,
Aside executes it for you.