ionic start solana-staking-dashboard blank --type=react --capacitor
cd solana-staking-dashboard

npm install @solana/web3.js
npm install chart.js react-chartjs-2
npm install @types/chart.js --save-dev

ionic serve

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

export const connectWallet = async () => {
  const provider = (window as any).solana;
  if (provider && provider.isPhantom) {
    await provider.connect();
    return new PublicKey(provider.publicKey.toString());
  }
  throw new Error('Please install Phantom wallet');
};

export const connection = new Connection('https://api.mainnet-beta.solana.com', 'confirmed');

export const getStakingData = async (connection: Connection, publicKey: PublicKey) => {
  const stakeAccounts = await connection.getProgramAccounts(
    new PublicKey('Stake11111111111111111111111111111111111111'),
    { filters: [{ memcmp: { offset: 12, bytes: publicKey.toBase58() } }] }
  );
  return stakeAccounts.map((acc) => ({
    pubkey: acc.pubkey.toString(),
    balance: acc.account.lamports / 1e9, // Convert lamports to SOL
  }));
};

export const getMockRewards = (stakeAccounts: { balance: number }[]) => {
  return stakeAccounts.map((acc) => acc.balance * 0.07 / 12); // 7% APR, monthly
};

import { IonButton, IonContent, IonPage, IonList, IonItem, IonLabel, IonSpinner } from '@ionic/react';
import { useState, useEffect } from 'react';
import { connectWallet, connection, getStakingData, getMockRewards } from '../services/solana';
import StakingChart from '../components/StakingChart';

const Home: React.FC = () => {
  const [wallet, setWallet] = useState<string | null>(null);
  const [stakeAccounts, setStakeAccounts] = useState<{ pubkey: string; balance: number }[]>([]);
  const [rewards, setRewards] = useState<number[]>([]);
  const [loading, setLoading] = useState(false);

  const handleConnect = async () => {
    try {
      setLoading(true);
      const pubKey = await connectWallet();
      setWallet(pubKey.toString());
      const accounts = await getStakingData(connection, pubKey);
      setStakeAccounts(accounts);
      setRewards(getMockRewards(accounts));
    } catch (error) {
      console.error(error);
      alert('Failed to connect wallet');
    } finally {
      setLoading(false);
    }
  };

  return (
    <IonPage>
      <IonContent fullscreen>
        <div style={{ padding: '20px' }}>
          <IonButton expand="block" onClick={handleConnect} disabled={loading}>
            {loading ? <IonSpinner /> : 'Connect Wallet'}
          </IonButton>
          {wallet && <p>Connected: {wallet.slice(0, 6)}...{wallet.slice(-4)}</p>}
          {stakeAccounts.length > 0 && (
            <>
              <h2>Staking Accounts</h2>
              <IonList>
                {stakeAccounts.map((acc) => (
                  <IonItem key={acc.pubkey}>
                    <IonLabel>
                      {acc.pubkey.slice(0, 6)}...: {acc.balance} SOL
                    </IonLabel>
                  </IonItem>
                ))}
              </IonList>
              <h2>Rewards</h2>
              <StakingChart rewards={rewards} />
            </>
          )}
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Home;

import { Line } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement, Title, Tooltip, Legend);

interface StakingChartProps {
  rewards: number[];
}

const StakingChart: React.FC<StakingChartProps> = ({ rewards }) => {
  const data = {
    labels: rewards.map((_, i) => `Month ${i + 1}`),
    datasets: [
      {
        label: 'Rewards (SOL)',
        data: rewards,
        borderColor: '#00d395',
        backgroundColor: 'rgba(0, 211, 149, 0.2)',
        fill: true,
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      legend: { position: 'top' as const },
      title: { display: true, text: 'Monthly Staking Rewards' },
    },
  };

  return <Line data={data} options={options} />;
};

export default StakingChart;

ionic serve

npm run build
ionic capacitor copy web