From 058ac4ab2c5f985f15a2b33c0496454a4586e4b7 Mon Sep 17 00:00:00 2001 From: Van Minh Date: Tue, 19 Aug 2025 15:44:07 +0700 Subject: [PATCH 1/2] feat: add TxnExplorerLink component for direct Solana Explorer links --- .../murphy/Txn-Feedback/txn-explorer-link.tsx | 61 ++++ components/ui/murphy/index.tsx | 6 +- .../Txn-Feedback/txn-explorer-link.mdx | 287 ++++++++++++++++++ content/docs/onchainkit/meta.json | 3 +- public/r/txn-explorer-link.json | 16 + registry.json | 14 + registry/components/txn-explorer-link.json | 14 + 7 files changed, 398 insertions(+), 3 deletions(-) create mode 100644 components/ui/murphy/Txn-Feedback/txn-explorer-link.tsx create mode 100644 content/docs/onchainkit/Txn-Feedback/txn-explorer-link.mdx create mode 100644 public/r/txn-explorer-link.json create mode 100644 registry/components/txn-explorer-link.json diff --git a/components/ui/murphy/Txn-Feedback/txn-explorer-link.tsx b/components/ui/murphy/Txn-Feedback/txn-explorer-link.tsx new file mode 100644 index 0000000..cce722c --- /dev/null +++ b/components/ui/murphy/Txn-Feedback/txn-explorer-link.tsx @@ -0,0 +1,61 @@ +"use client"; + +import type React from "react"; +import { ExternalLink } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; + +interface TxnExplorerLinkProps { + signature: string; + cluster?: "mainnet-beta" | "testnet" | "devnet"; + children?: React.ReactNode; + className?: string; + variant?: + | "default" + | "destructive" + | "outline" + | "secondary" + | "ghost" + | "link"; + size?: "default" | "sm" | "lg" | "icon"; + showIcon?: boolean; +} + +export function TxnExplorerLink({ + signature, + cluster = "mainnet-beta", + children, + className, + variant = "outline", + size = "sm", + showIcon = true, +}: TxnExplorerLinkProps) { + const getExplorerUrl = () => { + const baseUrl = "https://explorer.solana.com/tx"; + const clusterParam = + cluster !== "mainnet-beta" ? `?cluster=${cluster}` : ""; + return `${baseUrl}/${signature}${clusterParam}`; + }; + + const handleClick = () => { + window.open(getExplorerUrl(), "_blank", "noopener,noreferrer"); + }; + + return ( + + ); +} diff --git a/components/ui/murphy/index.tsx b/components/ui/murphy/index.tsx index 987b191..b5bf10e 100644 --- a/components/ui/murphy/index.tsx +++ b/components/ui/murphy/index.tsx @@ -14,7 +14,7 @@ import CandyMachineForm from "./candy-machine-form"; import CoreCandyMachineForm from "./core-candy-machine-form"; import BubblegumLegacyForm from "./bubblegum-legacy-form"; import ImprovedCNFTManager from "./improved-cnft-manager"; -import CompressedNFTViewer from "./compressed-nft-viewer" +import CompressedNFTViewer from "./compressed-nft-viewer"; import { CreateMerkleTree } from "./create-merkleTree-form"; import { TokenList } from "./token-list"; import { StakeForm } from "./stake-token-form"; @@ -37,6 +37,7 @@ import { CoreAssetLaunchpad } from "./core-asset-launchpad"; import { HydraFanoutForm } from "./hydra-fanout-form"; import { MPLHybridForm } from "./mpl-hybrid-form"; import { TokenMetadataViewer } from "./token-metadata-viewer"; +import { TxnExplorerLink } from "./Txn-Feedback/txn-explorer-link"; export { ConnectWalletButton, @@ -78,5 +79,6 @@ export { TMLaunchpadForm, HydraFanoutForm, MPLHybridForm, - TokenMetadataViewer + TokenMetadataViewer, + TxnExplorerLink, }; diff --git a/content/docs/onchainkit/Txn-Feedback/txn-explorer-link.mdx b/content/docs/onchainkit/Txn-Feedback/txn-explorer-link.mdx new file mode 100644 index 0000000..33a906f --- /dev/null +++ b/content/docs/onchainkit/Txn-Feedback/txn-explorer-link.mdx @@ -0,0 +1,287 @@ +--- +title: Transaction Explorer Link +description: Direct links to Solana Explorer for transaction details +icon: ExternalLink +--- + + + + + +## Installation + + + + + Install Transaction Explorer Link + + + + + +## Basic Usage + +```tsx +"use client"; + +import { TxnExplorerLink } from "@/components/ui/murphy/Txn-Feedback/txn-explorer-link"; + +export default function MyPage() { + const transactionSignature = + "5VfYmGC9L8ty3D4HutfxndoKXGBwXJWKKvxgF7qQzqK8xMjU9v7Rw2sP3nT6hL4jK9mN8bC1dF2eG3hI5jK6lM7n"; + + return ( +
+

Transaction Details

+ +
+

Transaction completed successfully!

+ + + View on Solana Explorer + +
+
+ ); +} +``` + +## Props + + + +## Examples + +### Different Clusters + +```tsx +// Mainnet transaction + + + View on Mainnet + + +// Devnet transaction + + + View on Devnet + + +// Testnet transaction + + + View on Testnet + +``` + +### Different Button Variants + +```tsx +// Default variant + + + Default Style + + +// Outline variant (default) + + + Outline Style + + +// Ghost variant + + + Ghost Style + + +// Link variant + + + Link Style + +``` + +### Different Sizes + +```tsx +// Small size + + + Small Link + + +// Default size + + + Default Link + + +// Large size + + + Large Link + + +// Icon only + + + 🔗 + +``` + +### Custom Content + +```tsx +// Custom text + +View Transaction Details + +// Without icon + + + Check on Explorer + + +// With truncated signature + + + {signature.slice(0, 8)}...{signature.slice(-8)} + + +// Custom styling + + + Custom Styled Link + + +``` + +## Explorer Features + +When users click the explorer link, they can see: + +### Transaction Details + +- Transaction signature and status +- Block confirmation details +- Fee information and compute units used +- Timestamp and slot number + +### Account Changes + +- Balance changes for all involved accounts +- Token transfers and amounts +- Account modifications and updates +- Program interactions and calls + +### Program Logs + +- Instruction execution logs +- Error messages and debugging info +- Program outputs and return values +- Custom program log messages + +### Additional Information + +- Transaction size and priority fee +- Recent blockhash used +- Signer accounts and permissions +- Cross-program invocations + +## Customization + +### Custom URL Generation + +```tsx +const getCustomExplorerUrl = (signature: string, cluster: string) => { + // Use different explorer based on preference + const explorers = { + solana: `https://explorer.solana.com/tx/${signature}${ + cluster !== "mainnet-beta" ? `?cluster=${cluster}` : "" + }`, + solscan: `https://solscan.io/tx/${signature}${ + cluster !== "mainnet-beta" ? `?cluster=${cluster}` : "" + }`, + xray: `https://xray.helius.xyz/tx/${signature}${ + cluster !== "mainnet-beta" ? `?network=${cluster}` : "" + }`, + }; + + return explorers.solana; // or based on user preference +}; +``` + +### Custom Styling + +```tsx + + 🔍 Explore Transaction + +``` diff --git a/content/docs/onchainkit/meta.json b/content/docs/onchainkit/meta.json index d2b1c3b..329e6c2 100644 --- a/content/docs/onchainkit/meta.json +++ b/content/docs/onchainkit/meta.json @@ -31,6 +31,7 @@ "Metaplex", "Meteora-DBC", "ZK-Compression", - "Jupiter-Recurring" + "Jupiter-Recurring", + "Txn-Feedback" ] } diff --git a/public/r/txn-explorer-link.json b/public/r/txn-explorer-link.json new file mode 100644 index 0000000..dd7a1de --- /dev/null +++ b/public/r/txn-explorer-link.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "txn-explorer-link", + "type": "registry:block", + "title": "A link to open a transaction on Solana Explorer.", + "dependencies": [], + "registryDependencies": [], + "files": [ + { + "path": "components/ui/murphy/Txn-Feedback/txn-explorer-link.tsx", + "content": "\"use client\";\r\n\r\nimport type React from \"react\";\r\nimport { ExternalLink } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface TxnExplorerLinkProps {\r\n signature: string;\r\n cluster?: \"mainnet-beta\" | \"testnet\" | \"devnet\";\r\n children?: React.ReactNode;\r\n className?: string;\r\n variant?:\r\n | \"default\"\r\n | \"destructive\"\r\n | \"outline\"\r\n | \"secondary\"\r\n | \"ghost\"\r\n | \"link\";\r\n size?: \"default\" | \"sm\" | \"lg\" | \"icon\";\r\n showIcon?: boolean;\r\n}\r\n\r\nexport function TxnExplorerLink({\r\n signature,\r\n cluster = \"mainnet-beta\",\r\n children,\r\n className,\r\n variant = \"outline\",\r\n size = \"sm\",\r\n showIcon = true,\r\n}: TxnExplorerLinkProps) {\r\n const getExplorerUrl = () => {\r\n const baseUrl = \"https://explorer.solana.com/tx\";\r\n const clusterParam =\r\n cluster !== \"mainnet-beta\" ? `?cluster=${cluster}` : \"\";\r\n return `${baseUrl}/${signature}${clusterParam}`;\r\n };\r\n\r\n const handleClick = () => {\r\n window.open(getExplorerUrl(), \"_blank\", \"noopener,noreferrer\");\r\n };\r\n\r\n return (\r\n \r\n {children || (\r\n <>\r\n View on Explorer\r\n {showIcon && (\r\n \r\n )}\r\n \r\n )}\r\n \r\n );\r\n}\r\n", + "type": "registry:file", + "target": "components/ui/murphy/Txn-Feedback/txn-explorer-link.tsx" + } + ] +} \ No newline at end of file diff --git a/registry.json b/registry.json index bac943b..542d461 100644 --- a/registry.json +++ b/registry.json @@ -1386,6 +1386,20 @@ } ] }, + { + "name": "txn-explorer-link", + "type": "registry:block", + "title": "A link to open a transaction on Solana Explorer.", + "registryDependencies": [], + "dependencies": [], + "files": [ + { + "path": "components/ui/murphy/Txn-Feedback/txn-explorer-link.tsx", + "type": "registry:file", + "target": "components/ui/murphy/Txn-Feedback/txn-explorer-link.tsx" + } + ] + }, { "name": "txn-list", "type": "registry:block", diff --git a/registry/components/txn-explorer-link.json b/registry/components/txn-explorer-link.json new file mode 100644 index 0000000..b253226 --- /dev/null +++ b/registry/components/txn-explorer-link.json @@ -0,0 +1,14 @@ +{ + "name": "txn-explorer-link", + "type": "registry:block", + "title": "A link to open a transaction on Solana Explorer.", + "registryDependencies": [], + "dependencies": [], + "files": [ + { + "path": "components/ui/murphy/Txn-Feedback/txn-explorer-link.tsx", + "type": "registry:file", + "target": "components/ui/murphy/Txn-Feedback/txn-explorer-link.tsx" + } + ] +} From 20ef0a2f17745a355b47bf3c015b398745c29fe3 Mon Sep 17 00:00:00 2001 From: Van Minh Date: Thu, 4 Sep 2025 18:02:29 +0700 Subject: [PATCH 2/2] feat: enhance txn-explorer-link documentation with card layout for clusters, variants, and sizes --- .../Txn-Feedback/txn-explorer-link.mdx | 91 ++++++++++++++++++- 1 file changed, 86 insertions(+), 5 deletions(-) diff --git a/content/docs/onchainkit/Txn-Feedback/txn-explorer-link.mdx b/content/docs/onchainkit/Txn-Feedback/txn-explorer-link.mdx index 33a906f..8d7ae5b 100644 --- a/content/docs/onchainkit/Txn-Feedback/txn-explorer-link.mdx +++ b/content/docs/onchainkit/Txn-Feedback/txn-explorer-link.mdx @@ -4,15 +4,96 @@ description: Direct links to Solana Explorer for transaction details icon: ExternalLink --- +import { + Card, + CardContent, + CardHeader, + CardTitle, + CardDescription, +} from "@/components/ui/card"; + - +
+
+ + + Different Clusters + + Links to different Solana network clusters + + + + {["mainnet", "testnet", "devnet"].map((cluster) => ( +
+

{cluster}

+ +
+ ))} + + + + + + Different Variants + + Various button styles and sizes + + + + {["default", "outline", "ghost", "link"].map((variant) => ( +
+

{variant} Variant

+ +
+ ))} + + +
+ + + + Different Sizes + + Various button sizes for different use cases + + + +
+ {["sm", "default", "lg", "icon"].map((size) => ( +
+

{size}

+ + {size === "icon" ? "🔗" : undefined} + +
+ ))} +
+ + + +
## Installation