MurphyStake Token Form
A Solana token staking component with shadcn UI styling
Stake Token Form
Stake SOL
Installation
Install dependencies
Start by installing required Solana dependencies
pnpm add @solana/web3.js @solana/wallet-adapter-react
Add Wallet Provider
Make sure you have added the Wallet Provider to your application. If not, follow the steps in the Connect Wallet Button guide first.
Add Stake Token Form
pnpm dlx shadcn@canary add https://www.murphyai.dev/r/stake-token-form.json
Basic Usage
import { StakeForm } from "@/components/ui/murphy/stake-token-form";export default function MyPage() {
return (
<div>
<h1 className="text-xl font-bold mb-2">Stake Solana Tokens</h1>
<StakeForm className="max-w-lg" />
</div>
);
}Component Overview
The Stake Token Form component provides a complete interface for staking SOL tokens with Solayer. It includes:
- SOL balance display with auto-refresh
- Amount input with MAX button for convenience
- Transaction status tracking
- Success and error states
- Transaction explorer link
Implementation Details
The component goes through several stages during the staking process:
- Input Stage: User enters the amount to stake
- Confirming Stage: Transaction is being processed
- Success Stage: Transaction completes successfully
- Error Stage: Transaction fails with details
The staking process uses a server-side API route to avoid CORS issues and create the staking transaction.
// Example API route implementation (pages/api/murphy/solayer/stake.ts)
import type { NextApiRequest, NextApiResponse } from "next";
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
if (req.method !== "POST") {
return res.status(405).json({ error: "Method not allowed" });
}
const { account } = req.body;
const amount = parseFloat(req.query.amount as string);
if (!account || isNaN(amount) || amount <= 0) {
return res.status(400).json({ error: "Invalid parameters" });
}
try {
// Call your staking service here
const response = await fetch("https://your-staking-service.com/stake", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
account,
amount,
}),
});
if (!response.ok) {
throw new Error("Staking service error");
}
const data = await response.json();
return res.status(200).json({
transaction: data.transaction, // Base64 encoded transaction
});
} catch (error) {
console.error("Staking error:", error);
return res
.status(500)
.json({ error: "Failed to create staking transaction" });
}
}Advanced Customization
You can customize the Stake Form by extending its functionality:
import { StakeForm } from "@/components/ui/murphy/stake-token-form";
import { useState } from "react";
export default function CustomStakePage() {
const [totalStakedAmount, setTotalStakedAmount] = useState(0);
// Track successful stakes
const handleSuccess = (amount: number) => {
setTotalStakedAmount((prev) => prev + amount);
};
return (
<div className="space-y-6">
<div className="p-4 bg-accent rounded-lg">
<h2 className="text-lg font-bold">Your Staking Dashboard</h2>
<p>Total Staked: {totalStakedAmount} SOL</p>
</div>
<StakeForm className="max-w-lg" onSuccess={handleSuccess} />
</div>
);
}Props
| Prop | Type | Default |
|---|---|---|
estimatedApy? | string | 9.26% |
stakingProvider? | string | Solayer |
apiEndpoint? | string | /api/murphy/solayer/stake |
className? | string | undefined |
onError? | (error: Error) => void | undefined |
onSuccess? | (amount: number, signature: string) => void | undefined |