Untitled

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import StackingButton from './StackingButton';

const App: React.FC = () => {
  const [isClaiming, setIsClaiming] = useState(false);

  const handleClaim = () => {
    // Perform the claiming logic here
    setIsClaiming(true);

    // Simulating an asynchronous operation
    setTimeout(() => {
      // After the claim is complete
      setIsClaiming(false);
    }, 2000);
  };

interface StackingButtonProps {
  onClaim: () => void;
  disabled: boolean;
}

const StackingButton: React.FC<StackingButtonProps> = ({ onClaim, disabled }) => {
  return (
    <button onClick={onClaim} disabled={disabled}>
      {disabled ? 'Claiming...' : 'Claim Stacking Rewards'}
    </button>
  );
};

  return (
    <div>
      <h1>Stacking Rewards</h1>
      <StackingButton onClaim={handleClaim} disabled={isClaiming} />
    </div>
  );
};

export default App;