npx shadcn@latest add https://ui.satsterminal.com/r/borrow-app.json

import { BorrowApp } from "@/components/borrow-app";

<BorrowApp apiKey={apiKey} />

npx shadcn@latest add https://ui.satsterminal.com/r/platform-wallet-address.json
npx shadcn@latest add https://ui.satsterminal.com/r/loan-composer.json
npx shadcn@latest add https://ui.satsterminal.com/r/available-offers.json
npx shadcn@latest add https://ui.satsterminal.com/r/borrow-flow.json
npx shadcn@latest add https://ui.satsterminal.com/r/user-loans.json
npx shadcn@latest add https://ui.satsterminal.com/r/wallet-withdrawal.json

"use client";

import { ActiveBorrowFlow } from "@/components/active-borrow-flow";
import { AvailableOffers } from "@/components/available-offers";
import { BorrowProvider } from "@/components/borrow-context";
import { LoanComposer } from "@/components/loan-composer";
import { PlatformWalletAddress } from "@/components/platform-wallet-address";
import { UserLoans } from "@/components/user-loans";
import { WalletWithdrawal } from "@/components/wallet-withdrawal";

export function BorrowPage() {
  return (
    <BorrowProvider
      apiKey={process.env.NEXT_PUBLIC_SATSTERMINAL_API_KEY!}
      wallet={walletProvider}
      autoRestore
      autoStart
    >
      <header>
        <PlatformWalletAddress />
      </header>

      <main className="grid gap-6 lg:grid-cols-2">
        <LoanComposer />
        <AvailableOffers />
        <ActiveBorrowFlow className="lg:col-span-2" />
        <UserLoans
          className="lg:col-span-2"
          onManageLoan={(loan) => openLoan(loan.originalBorrowId)}
          onTrackLoan={(loan) =>
            openWorkflow(loan.workflowId ?? loan.originalBorrowId)
          }
        />
        <WalletWithdrawal className="lg:col-span-2" />
      </main>
    </BorrowProvider>
  );
}