Function Page

src/app/payout-methods/page.tsx:10–77

()

import { usePayoutMethods } from '@/hooks/usePayoutMethod';

export default function Page() {
  const [isDialogBoxOpen, setIsDialogBoxOpen] = useState<boolean>(false);
  const [btnClicked, setBtnClicked] = useState<string>('');
  const {
    upiAddresses,
    solanaAddresses,
    handleUpiDelete,
    handleSolanaDelete,
    fetchPayoutMethods,
  } = usePayoutMethods();

  const openDialog = (method: string) => {
    setIsDialogBoxOpen(true);
    setBtnClicked(method);
  };

  useEffect(() => {
    fetchPayoutMethods();
  }, [isDialogBoxOpen]);

  const closeDialog = () => setIsDialogBoxOpen(false);

  return (
    <div className="h-max pb-4 transition-colors duration-500 md:p-8">
      <div className="mb-6 flex flex-col items-start justify-center px-4 pt-24 sm:px-8 md:pt-20">
        <div className="my-2 mb-6 text-3xl text-black transition-colors duration-500 dark:text-white">
          <h1 className="mt-16 font-semibold text-black dark:text-white sm:mt-12">
            Payout Methods
          </h1>
        </div>

        <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
          <PayoutMethodCard
            title="UPI Address"
            description="Add your UPI ID"
            imageSrc={UPI}
            addresses={upiAddresses}
            id={'UPI'}
            onAdd={openDialog}
            onDelete={handleUpiDelete}
          />
          <PayoutMethodCard
            title="Solana Address"
            id={'Solana'}
            description="Add your Solana wallet id"
            imageSrc={SOL}
            addresses={solanaAddresses}
            onAdd={openDialog}
            onDelete={handleSolanaDelete}
          />
        </div>

        <NewPayoutDialog
          onClose={closeDialog}
          isOpen={isDialogBoxOpen}
          title={btnClicked}
        />