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
`onSuccess?`	`(amount: number, signature: string) => void`	`undefined`
`onError?`	`(error: Error) => void`	`undefined`
`className?`	`string`	`undefined`
`apiEndpoint?`	`string`	`/api/murphy/solayer/stake`
`stakingProvider?`	`string`	`Solayer`
`estimatedApy?`	`string`	`9.26%`

Stake Token Form

Stake Token Form

Installation

Basic Usage

Component Overview

Implementation Details

Advanced Customization

Props

On this page