Solana Integration

Solana integration for Cute Panel.

Cute Panel supports Solana blockchain integration, allowing you to manage wallets, check balances, send SOL tokens, and view transaction history — all from within the panel interface. This guide walks you through setting up the integration, connecting wallets, and performing basic blockchain operations.

---

Prerequisites

Before you begin, make sure you have:

• Node.js 16+ installed

• Installed Cute Panel locally

• Basic familiarity with Solana blockchain concepts (wallets, transactions)

• A Solana wallet keypair JSON file or access to a Solana wallet like Phantom

• Installed dependencies:

npm install @solana/web3.js

To view a detailed guide on cloning the repo, installing dependencies, and running Cute Panel locally, please see the Clone, Install, and Run Locally page.

---

Key Features:

Setting Up the Solana Connection

You need to create a connection to a Solana RPC endpoint to interact with the blockchain. For development, the devnet cluster is recommended.

import { Connection, clusterApiUrl } from '@solana/web3.js';

// Connect to Solana devnet cluster
const connection = new Connection(clusterApiUrl('devnet'), 'confirmed');

---

Loading Your Wallet

Load a wallet keypair from a local JSON file containing your secret key array.

import { Keypair } from '@solana/web3.js';
import fs from 'fs';

const secretKey = JSON.parse(fs.readFileSync('/path/to/keypair.json'));
const wallet = Keypair.fromSecretKey(new Uint8Array(secretKey));

console.log(`Wallet loaded: ${wallet.publicKey.toBase58()}`);

Note: For frontend apps, use wallet adapters like Phantom to connect securely instead of storing keys.

---

Checking Wallet Balance

Fetch and display your wallet’s SOL balance:

async function getBalance(publicKey) {
  const lamports = await connection.getBalance(publicKey);
  return lamports / 1e9; // Convert lamports to SOL
}

(async () => {
  const balance = await getBalance(wallet.publicKey);
  console.log(`Balance: ${balance} SOL`);
})();

---

Sending SOL

Send SOL from your wallet to another address using a simple transaction:

import { SystemProgram, Transaction, PublicKey } from '@solana/web3.js';

async function sendSol(fromWallet, toAddress, amountSol) {
  const toPublicKey = new PublicKey(toAddress);
  
  const transaction = new Transaction().add(
    SystemProgram.transfer({
      fromPubkey: fromWallet.publicKey,
      toPubkey: toPublicKey,
      lamports: amountSol * 1e9,
    })
  );

  const signature = await connection.sendTransaction(transaction, [fromWallet]);
  await connection.confirmTransaction(signature, 'confirmed');
  return signature;
}

(async () => {
  const recipient = 'RecipientPublicKeyHere';
  const signature = await sendSol(wallet, recipient, 0.01);
  console.log(`Transaction successful: ${signature}`);
})();

---

Viewing Transaction History

Retrieve and display recent transactions for your wallet:

async function getRecentTransactions(publicKey, limit = 10) {
  const signatures = await connection.getSignaturesForAddress(publicKey, { limit });
  return signatures;
}

(async () => {
  const txns = await getRecentTransactions(wallet.publicKey);
  txns.forEach(tx => {
    console.log(`Signature: ${tx.signature}, Confirmed at: ${new Date(tx.blockTime * 1000)}`);
  });
})();

---

UI/UX Recommendations for Cute Panel

• Wallet Connect: Allow users to securely upload keypair files or connect popular wallet extensions (Phantom, Solflare).

• Balance Display: Show SOL balance and optionally SPL tokens with live updates.

• Send SOL Form: Simple form for recipient address + amount input with transaction status feedback.

• Transaction History: Table view with clickable transaction signatures linking to Solana Explorer.

• Network Switcher: Option to toggle between mainnet-beta, devnet, and testnet.

---

Next Steps

Once you’ve mastered basic wallet management, consider extending Cute Panel with:

• SPL token support (viewing, minting, transferring)

• Smart contract (program) interaction UIs

• Automated monitoring and alerts for wallet activity

---

Feel free to reach out or open an issue for support or feature requests!