Улучшение UI с использованием TailwindCSS

Добавим TailwindCSS для стилизации интерфейса.

Улучшение UI с использованием TailwindCSS

Добавим TailwindCSS для стилизации интерфейса.

---

1. Установка TailwindCSS

npm install -D tailwindcss postcss autoprefixer  
npx tailwindcss init -p

---

2. Настройка tailwind.config.js

Добавьте пути к файлам в content:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

---

3. Добавление Tailwind в styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

---

4. Обновленный UI в 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);

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

---

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

npm run dev

Теперь у нас современный UI с тёмной темой, плавными кнопками и адаптивностью!

---

Что дальше?