MurphyRecurring Order Card
Murphy component to display a single Jupiter Recurring DCA Order on Solana mainnet
Recurring Order Card
Installation
Install dependencies
pnpm add @solana/web3.js @solana/wallet-adapter-react sonner lucide-react
Add RecurringOrderCard
pnpm dlx shadcn@canary add https://onchainkit.murphyai.dev//r/RecurringOrderCard.json
Basic Usage
import { RecurringOrderCard, RecurringOrder } from "@/components/ui/murphy/Jupiter-Recurring/RecurringOrderCard";
const order: RecurringOrder = {
id: "8vQw...3k2A",
inputMint: "So11111111111111111111111111111111111111112",
outputMint: "Es9vMFrzaCER1bY5Qw5J5hzyXH8VEkR92pT9bkF1X6t6",
status: "active",
createdAt: "2024-05-01T12:00:00Z",
updatedAt: "2024-05-01T12:00:00Z",
};
export default function MyPage() {
return <RecurringOrderCard order={order} />;
}Features
- Interactive display: Copy order ID with one click, view on Solscan
- Status-aware styling: Different badge colors for different order statuses (active, completed, cancelled, expired, failed)
- Responsive design: Clean card layout with proper spacing and typography
- Real-time data: Designed for on-chain data from Jupiter Recurring API
- Murphy UI: Consistent with Murphy design system
- Fully on-chain: No test/fake data, all real Solana mainnet data
Props
| Name | Type | Default | Description |
|---|---|---|---|
order | RecurringOrder | required | Order object to display |
className | string | undefined | Additional CSS classes |
Types
export interface RecurringOrder {
id: string;
inputMint: string;
outputMint: string;
status: string;
createdAt: string;
updatedAt: string;
[key: string]: any;
}