// app/wallet/page.tsx
import { WalletPage } from '@djangocfg/ext-payments';

export default WalletPage;

import {
  usePaymentsBalanceRetrieve,
  usePaymentsPaymentsList,
  usePaymentsWithdrawalsList,
  useCreatePaymentsPaymentsCreateCreate,
} from '@djangocfg/ext-payments/api/hooks';

function BalanceCard() {
  const { data: balance, isLoading } = usePaymentsBalanceRetrieve();

  if (isLoading) return <Skeleton />;

  return (
    <div>
      <h2>Balance: ${balance?.amount}</h2>
      <p>Currency: {balance?.currency}</p>
    </div>
  );
}

import { apiPayments } from '@djangocfg/ext-payments/api';

// Direct API calls
const balance = await apiPayments.payments.balanceRetrieve();
const payments = await apiPayments.payments.paymentsList({ page: 1 });

import {
  BalanceHero,
  ActivityList,
  AddFundsSheet,
  WithdrawSheet,
  PaymentSheet,
  WithdrawalSheet,
} from '@djangocfg/ext-payments';

function CustomWallet() {
  const [addFundsOpen, setAddFundsOpen] = useState(false);

  return (
    <div>
      <BalanceHero
        onAddFunds={() => setAddFundsOpen(true)}
        onWithdraw={() => {}}
      />
      <ActivityList limit={10} />
      <AddFundsSheet
        open={addFundsOpen}
        onOpenChange={setAddFundsOpen}
      />
    </div>
  );
}

import { WalletProvider, useWallet } from '@djangocfg/ext-payments';

// Wrap your app
<WalletProvider>
  <MyWalletPage />
</WalletProvider>

// Use in components
function MyComponent() {
  const { balance, payments, withdrawals, isLoading } = useWallet();
  // ...
}

import type {
  Balance,
  PaymentDetail,
  PaymentList,
  PaymentCreateRequest,
  PaymentCreateResponse,
  WithdrawalDetail,
  WithdrawalList,
  WithdrawalCreateRequest,
  Currency,
  Transaction,
} from '@djangocfg/ext-payments';