diff --git a/components/ui/murphy/Txn-Feedback/inline-txn-status.tsx b/components/ui/murphy/Txn-Feedback/inline-txn-status.tsx
new file mode 100644
index 0000000..5edd4eb
--- /dev/null
+++ b/components/ui/murphy/Txn-Feedback/inline-txn-status.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { CheckCircle, XCircle, Loader2, Clock } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { TransactionStatus } from "@/types/transaction";
+
+interface InlineTxnStatusProps {
+ status: TransactionStatus["status"];
+ size?: "sm" | "md" | "lg";
+ showText?: boolean;
+ className?: string;
+}
+
+export function InlineTxnStatus({
+ status,
+ size = "md",
+ showText = true,
+ className,
+}: InlineTxnStatusProps) {
+ const getStatusConfig = () => {
+ switch (status) {
+ case "success":
+ return {
+ icon: CheckCircle,
+ text: "Success",
+ variant: "default" as const,
+ className:
+ "bg-green-100 text-green-800 border border-green-200 dark:bg-green-900 dark:text-green-100 dark:border-green-700",
+ };
+ case "error":
+ return {
+ icon: XCircle,
+ text: "Failed",
+ variant: "destructive" as const,
+ className:
+ "bg-red-100 text-red-800 border border-red-200 dark:bg-red-900 dark:text-red-100 dark:border-red-700",
+ };
+ case "preparing":
+ case "signing":
+ case "sending":
+ case "confirming":
+ return {
+ icon: Loader2,
+ text: "Processing",
+ variant: "secondary" as const,
+ className:
+ "bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:border-blue-700",
+ animate: true,
+ };
+ default:
+ return {
+ icon: Clock,
+ text: "Pending",
+ variant: "outline" as const,
+ className:
+ "bg-gray-100 text-gray-800 border border-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700",
+ };
+ }
+ };
+
+ const config = getStatusConfig();
+ const Icon = config.icon;
+
+ const iconSize = {
+ sm: "w-3 h-3",
+ md: "w-4 h-4",
+ lg: "w-5 h-5",
+ }[size];
+
+ const textSize = {
+ sm: "text-xs",
+ md: "text-sm",
+ lg: "text-base",
+ }[size];
+
+ return (
+
+
+ {showText && {config.text}}
+
+ );
+}
diff --git a/components/ui/murphy/index.tsx b/components/ui/murphy/index.tsx
index 987b191..adf6871 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 { InlineTxnStatus } from "./Txn-Feedback/inline-txn-status";
export {
ConnectWalletButton,
@@ -78,5 +79,6 @@ export {
TMLaunchpadForm,
HydraFanoutForm,
MPLHybridForm,
- TokenMetadataViewer
+ TokenMetadataViewer,
+ InlineTxnStatus,
};
diff --git a/content/docs/onchainkit/Txn-Feedback/inline-txn-status.mdx b/content/docs/onchainkit/Txn-Feedback/inline-txn-status.mdx
new file mode 100644
index 0000000..b7d679b
--- /dev/null
+++ b/content/docs/onchainkit/Txn-Feedback/inline-txn-status.mdx
@@ -0,0 +1,178 @@
+---
+title: Inline Transaction Status
+description: Small status indicators for transaction states in lists and UIs
+icon: Activity
+---
+
+
+
+
+
+
Different Status States
+
+
+
+
+
+
+
+
+
+
Different Sizes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+## Props
+
+
+
+## Status States
+
+### Success State
+
+- **Icon**: CheckCircle (green)
+- **Text**: "Success"
+- **Use**: Completed transactions
+- **Color**: Green theme
+
+### Error State
+
+- **Icon**: XCircle (red)
+- **Text**: "Failed"
+- **Use**: Failed transactions
+- **Color**: Red theme
+
+### Processing States
+
+- **Icon**: Loader2 (blue, animated)
+- **Text**: "Processing"
+- **Use**: preparing, signing, sending, confirming
+- **Color**: Blue theme
+- **Animation**: Spinning loader
+
+### Idle State
+
+- **Icon**: Clock (gray)
+- **Text**: "Pending"
+- **Use**: Queued or idle transactions
+- **Color**: Gray theme
+
+## Size Variations
+
+### Small (sm)
+
+- Icon: 12px (w-3 h-3)
+- Text: text-xs
+- Use: Table cells, compact lists
+
+### Medium (md) - Default
+
+- Icon: 16px (w-4 h-4)
+- Text: text-sm
+- Use: General purpose, cards
+
+### Large (lg)
+
+- Icon: 20px (w-5 h-5)
+- Text: text-base
+- Use: Prominent displays, headers
+
+## Customization
+
+### Custom Colors
+
+```tsx
+// Custom status colors via CSS classes
+
+```
+
+### Custom Icons
+
+```tsx
+// You can extend the component to use custom icons
+const CustomInlineStatus = ({ status, customIcon }) => {
+ return (
+
+ {customIcon || }
+ Custom Status
+
+ );
+};
+```
+
+### Responsive Sizing
+
+```tsx
+
+```
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/inline-txn-status.json b/public/r/inline-txn-status.json
new file mode 100644
index 0000000..55da472
--- /dev/null
+++ b/public/r/inline-txn-status.json
@@ -0,0 +1,18 @@
+{
+ "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+ "name": "inline-txn-status",
+ "type": "registry:block",
+ "title": "Inline icon or badge to show transaction status (loading, success, error).",
+ "dependencies": [
+ "lucide-react"
+ ],
+ "registryDependencies": [],
+ "files": [
+ {
+ "path": "components/ui/murphy/Txn-Feedback/inline-txn-status.tsx",
+ "content": "\"use client\";\r\n\r\nimport { CheckCircle, XCircle, Loader2, Clock } from \"lucide-react\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { TransactionStatus } from \"@/types/transaction\";\r\n\r\ninterface InlineTxnStatusProps {\r\n status: TransactionStatus[\"status\"];\r\n size?: \"sm\" | \"md\" | \"lg\";\r\n showText?: boolean;\r\n className?: string;\r\n}\r\n\r\nexport function InlineTxnStatus({\r\n status,\r\n size = \"md\",\r\n showText = true,\r\n className,\r\n}: InlineTxnStatusProps) {\r\n const getStatusConfig = () => {\r\n switch (status) {\r\n case \"success\":\r\n return {\r\n icon: CheckCircle,\r\n text: \"Success\",\r\n variant: \"default\" as const,\r\n className:\r\n \"bg-green-100 text-green-800 border border-green-200 dark:bg-green-900 dark:text-green-100 dark:border-green-700\",\r\n };\r\n case \"error\":\r\n return {\r\n icon: XCircle,\r\n text: \"Failed\",\r\n variant: \"destructive\" as const,\r\n className:\r\n \"bg-red-100 text-red-800 border border-red-200 dark:bg-red-900 dark:text-red-100 dark:border-red-700\",\r\n };\r\n case \"preparing\":\r\n case \"signing\":\r\n case \"sending\":\r\n case \"confirming\":\r\n return {\r\n icon: Loader2,\r\n text: \"Processing\",\r\n variant: \"secondary\" as const,\r\n className:\r\n \"bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:border-blue-700\",\r\n animate: true,\r\n };\r\n default:\r\n return {\r\n icon: Clock,\r\n text: \"Pending\",\r\n variant: \"outline\" as const,\r\n className:\r\n \"bg-gray-100 text-gray-800 border border-gray-200 dark:bg-gray-900 dark:text-gray-100 dark:border-gray-700\",\r\n };\r\n }\r\n };\r\n\r\n const config = getStatusConfig();\r\n const Icon = config.icon;\r\n\r\n const iconSize = {\r\n sm: \"w-3 h-3\",\r\n md: \"w-4 h-4\",\r\n lg: \"w-5 h-5\",\r\n }[size];\r\n\r\n const textSize = {\r\n sm: \"text-xs\",\r\n md: \"text-sm\",\r\n lg: \"text-base\",\r\n }[size];\r\n\r\n return (\r\n \r\n \r\n {showText && {config.text}}\r\n \r\n );\r\n}\r\n",
+ "type": "registry:file",
+ "target": "components/ui/murphy/Txn-Feedback/inline-txn-status.tsx"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index bac943b..a27c9c0 100644
--- a/registry.json
+++ b/registry.json
@@ -599,6 +599,22 @@
}
]
},
+ {
+ "name": "inline-txn-status",
+ "type": "registry:block",
+ "title": "Inline icon or badge to show transaction status (loading, success, error).",
+ "registryDependencies": [],
+ "dependencies": [
+ "lucide-react"
+ ],
+ "files": [
+ {
+ "path": "components/ui/murphy/Txn-Feedback/inline-txn-status.tsx",
+ "type": "registry:file",
+ "target": "components/ui/murphy/Txn-Feedback/inline-txn-status.tsx"
+ }
+ ]
+ },
{
"name": "mint-cnft-form",
"type": "registry:block",
diff --git a/registry/components/inline-txn-status.json b/registry/components/inline-txn-status.json
new file mode 100644
index 0000000..71bbf30
--- /dev/null
+++ b/registry/components/inline-txn-status.json
@@ -0,0 +1,14 @@
+{
+ "name": "inline-txn-status",
+ "type": "registry:block",
+ "title": "Inline icon or badge to show transaction status (loading, success, error).",
+ "registryDependencies": [],
+ "dependencies": ["lucide-react"],
+ "files": [
+ {
+ "path": "components/ui/murphy/Txn-Feedback/inline-txn-status.tsx",
+ "type": "registry:file",
+ "target": "components/ui/murphy/Txn-Feedback/inline-txn-status.tsx"
+ }
+ ]
+}
diff --git a/types/transaction/index.ts b/types/transaction/index.ts
new file mode 100644
index 0000000..5be4a81
--- /dev/null
+++ b/types/transaction/index.ts
@@ -0,0 +1,27 @@
+export interface TransactionStatus {
+ status:
+ | "idle"
+ | "preparing"
+ | "signing"
+ | "sending"
+ | "confirming"
+ | "success"
+ | "error";
+ signature?: string;
+ error?: string;
+ step?: number;
+ totalSteps?: number;
+}
+
+export interface TxnStep {
+ id: string;
+ title: string;
+ description?: string;
+ status: "pending" | "active" | "completed" | "error";
+}
+
+export interface TxnFeedbackProps {
+ status: TransactionStatus;
+ onRetry?: () => void;
+ onClose?: () => void;
+}