Добавление отображения текущего стейка и вознаграждений в реальном времени

Добавим: ✅ Отображение баланса пользователя ✅ Подсчет вознаграждений в реальном времени ✅ Автообновление данных при изменении состояния

Добавление отображения текущего стейка и вознаграждений в реальном времени

Добавим: ✅ Отображение баланса пользователя ✅ Подсчет вознаграждений в реальном времени ✅ Автообновление данных при изменении состояния

---

1. Обновленный код pages/index.js

import { useWallet } from "@solana/wallet-adapter-react";
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
import { useEffect, useState } from "react";
import { Connection, PublicKey } from "@solana/web3.js";
import { Program, AnchorProvider, web3, BN } from "@project-serum/anchor";

const programId = new PublicKey("9HhvqA...pXr"); // Ваш Program ID
const network = "https://api.devnet.solana.com";

export default function Home() {
    const { publicKey } = useWallet();
    const [provider, setProvider] = useState(null);
    const [program, setProgram] = useState(null);
    const [amount, setAmount] = useState(100);
    const [stakeInfo, setStakeInfo] = useState(null);
    const [reward, setReward] = useState(0);

    useEffect(() => {
        if (publicKey) {
            const connection = new Connection(network, "processed");
            const walletProvider = new AnchorProvider(connection, window.solana, {});
            const idl = require("../idl.json"); // Подключение IDL контракта
            setProvider(walletProvider);
            setProgram(new Program(idl, programId, walletProvider));

            fetchStakeInfo(publicKey);
        }
    }, [publicKey]);

    // Получаем текущий стейк пользователя
    const fetchStakeInfo = async (walletAddress) => {
        if (!program) return;

        try {
            const userStakeAccount = await program.account.userStaking.fetch(walletAddress);
            setStakeInfo(userStakeAccount);

            // Рассчитываем награды
            const currentTime = Math.floor(Date.now() / 1000);
            const duration = currentTime - userStakeAccount.startTime.toNumber();
            const rewardAmount = (userStakeAccount.amount.toNumber() * 10 * duration) / 1_000_000;
            setReward(rewardAmount);
        } catch (error) {
            console.log("No staking found for user.");
            setStakeInfo(null);
            setReward(0);
        }
    };

    const stakeTokens = async () => {
        if (!publicKey || !program) return;
        await program.rpc.stake(new BN(amount), {
            accounts: {
                stakingAccount: programId,
                userStaking: publicKey,
                userTokenAccount: publicKey,
                tokenProgram: web3.TOKEN_PROGRAM_ID,
            },
        });

        alert(`Staked ${amount} RUM!`);
        fetchStakeInfo(publicKey);
    };

    const unstakeTokens = async () => {
        if (!publicKey || !program) return;
        await program.rpc.unstake({
            accounts: {
                stakingAccount: programId,
                userStaking: publicKey,
                userTokenAccount: publicKey,
                tokenProgram: web3.TOKEN_PROGRAM_ID,
            },
        });

        alert("Unstaked successfully!");
        fetchStakeInfo(publicKey);
    };

    return (
        <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-6">
            <h1 className="text-4xl font-bold mb-4">RentumAI Staking</h1>
            <WalletMultiButton className="mb-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" />

            {publicKey && (
                <div className="bg-gray-800 p-6 rounded-lg shadow-lg text-center">
                    <h2 className="text-xl font-semibold mb-4">Staking Details</h2>

                    {stakeInfo ? (
                        <>
                            <p className="mb-2">Staked Amount: <strong>{stakeInfo.amount.toNumber()} RUM</strong></p>
                            <p className="mb-2">Reward: <strong>{reward.toFixed(2)} RUM</strong></p>
                        </>
                    ) : (
                        <p className="mb-4">You have no active stake.</p>
                    )}

                    <input
                        type="number"
                        value={amount}
                        onChange={(e) => setAmount(e.target.value)}
                        className="w-full px-3 py-2 mb-4 text-black rounded"
                        placeholder="Enter amount"
                    />

                    <button
                        onClick={stakeTokens}
                        className="w-full bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mb-2"
                    >
                        Stake
                    </button>

                    <button
                        onClick={unstakeTokens}
                        className="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
                    >
                        Unstake
                    </button>
                </div>
            )}
        </div>
    );
}

---

2. Как это работает?

• fetchStakeInfo() получает баланс и рассчитывает вознаграждения.

• Вознаграждение обновляется динамически при загрузке страницы.

• После stake/unstake данные обновляются автоматически.

---

3. Запуск проекта

npm run dev

Открываем http://localhost:3000, подключаем Phantom Wallet и видим активный стейк + награды в реальном времени!

---

Что дальше?

a. Добавить автоматическое обновление баланса каждые 10 секунд. b. Улучшить UI с анимациями Framer Motion.