Взаимодействие со смарт-контрактом стейкинга через Solana Web3.js, добавим клиентский код.

Создадим веб-интерфейс на React + Next.js с интеграцией Solana Wallet Adapter.

---

1. Установка зависимостей

npx create-next-app rentumai-frontend
cd rentumai-frontend
npm install @solana/web3.js @project-serum/anchor @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets

---

2. Настройка Solana Wallet Adapter (components/WalletProvider.js)

import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
import { PhantomWalletAdapter } from "@solana/wallet-adapter-wallets";
import { clusterApiUrl } from "@solana/web3.js";
import { useMemo } from "react";

export const WalletProviderComponent = ({ children }) => {
    const endpoint = clusterApiUrl("devnet");
    const wallets = useMemo(() => [new PhantomWalletAdapter()], []);

    return (
        <ConnectionProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets} autoConnect>
                <WalletModalProvider>{children}</WalletModalProvider>
            </WalletProvider>
        </ConnectionProvider>
    );
};

Этот код позволяет пользователям подключаться к кошельку Phantom для взаимодействия с контрактом.

---

3. Интерфейс пользователя (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, sendTransaction } = useWallet();
    const [provider, setProvider] = useState(null);
    const [program, setProgram] = useState(null);
    const [amount, setAmount] = useState(100);

    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));
        }
    }, [publicKey]);

    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!`);
    };

    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!");
    };

    return (
        <div className="container">
            <h1>RentumAI Staking</h1>
            <WalletMultiButton />
            {publicKey && (
                <>
                    <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)} />
                    <button onClick={stakeTokens}>Stake</button>
                    <button onClick={unstakeTokens}>Unstake</button>
                </>
            )}
        </div>
    );
}

---

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

npm run dev

Перейдите в http://localhost:3000, подключите Phantom Wallet, стейкайте и анстейкайте RUM!