Function PaymentMethodsDropdown

src/components/PaymentDropdown.tsx:17–174

({
  upiAddresses,
  solanaAddresses,
  fetchPayoutMethods,
}: PaymentMethodsDropdownProps)

}

export default function PaymentMethodsDropdown({
  upiAddresses,
  solanaAddresses,
  fetchPayoutMethods,
}: PaymentMethodsDropdownProps) {
  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
  const [isPayoutDialogOpen, setIsPayoutDialogOpen] = useState<boolean>(false);
  const [btnClicked, setBtnClicked] = useState<string>('');

  const { execute: executeDeleteUPI } = useAction(deleteUpiId, {
    onSuccess: () => {
      toast.success('UPI Address deleted successfully');
      fetchPayoutMethods();
    },
    onError: () => {
      toast.error('Failed to delete UPI address');
    },
  });

  const { execute: executeDeleteSolana } = useAction(deleteSolanaAddress, {
    onSuccess: () => {
      toast.success('Solana Address deleted successfully');
      fetchPayoutMethods();
    },
    onError: () => {
      toast.error('Failed to delete Solana address');
    },
  });

  const handleUpiDelete = (id: number) => {
    executeDeleteUPI({ id });
  };

  const handleSolanaDelete = (id: number) => {
    executeDeleteSolana({ id });
  };

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

  return (
    <>
      <Button
        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
        className="mt-5 flex w-full items-center justify-between py-2 text-white transition-colors duration-500 hover:bg-gray-900 dark:text-black dark:hover:bg-gray-700"
      >
        {isDropdownOpen ? (
          <>
            <span>Hide Your Details</span>
            <ChevronUp className="ml-2" />
          </>
        ) : (
          <>
            <span>Edit Your Payment Details</span>
            <ChevronDown className="ml-2" />
          </>
        )}