This guide traces how a lend or borrow action moves through the StellarLend frontend. It is intended for contributors who need one place to understand the page, forms, quote preview, transaction build, submission, and status polling flow.
The lending experience is centered on app/lending/page.tsx. That page coordinates the visible workflow and delegates specific concerns to feature components such as LendingForm, BorrowingForm, TabSelector, InterestCalculator, TransactionSummary, and ConfirmModal.
At a high level:
- The page loads market and asset context.
- The user selects lend or borrow with
TabSelector. - The active form owns user-entered amount, asset, and rate fields.
- The calculator and summary components derive preview state.
- Confirmation builds and submits a transaction.
- Status polling reports pending, successful, or failed outcomes.
app/lending/page.tsx
├── TabSelector
├── LendingForm
├── BorrowingForm
├── InterestCalculator
├── TransactionSummary
└── ConfirmModal
app/lending/page.tsx should own cross-form state such as lendingData, borrowingData, and calculationResult. Individual form components should keep field-level validation local and communicate submit-ready data through typed callbacks.
The lend and borrow flows use the same API spine:
| Step | Endpoint | Purpose |
|---|---|---|
| 1 | /api/markets |
Load available assets, rates, and market metadata. |
| 2 | /api/quote |
Preview expected lending or borrowing terms before a transaction is built. |
| 3 | /api/tx/build |
Build the transaction XDR or transaction payload. |
| 4 | /api/tx/submit |
Submit the signed transaction. |
| 5 | /api/tx/status/[hash] |
Poll for the final transaction state. |
Keep API calls behind existing project helpers where available. UI components should not duplicate request parsing or error mapping when a shared helper already exists.
sequenceDiagram
participant User
participant Page as app/lending/page.tsx
participant Form as LendingForm/BorrowingForm
participant API as Next API Routes
participant Stellar as Stellar/Soroban Network
User->>Page: Open lending page
Page->>API: GET /api/markets
API-->>Page: assets, rates, market metadata
User->>Form: Enter amount, asset, and terms
Form->>Page: Validated draft data
Page->>API: POST /api/quote
API-->>Page: quote and calculated result
Page->>User: Show TransactionSummary
User->>Page: Confirm
Page->>API: POST /api/tx/build
API-->>Page: transaction payload
Page->>API: POST /api/tx/submit
API->>Stellar: Submit transaction
Stellar-->>API: transaction hash
API-->>Page: hash and pending status
Page->>API: GET /api/tx/status/[hash]
API-->>Page: Success or failure
Page->>User: Render final state
- The user selects the lend tab.
LendingFormvalidates the amount, selected asset, and rate boundaries.- The page requests
/api/quotewith the lend-side draft data. TransactionSummaryrenders the preview: supplied asset, expected yield, fees, and relevant warnings.ConfirmModalasks for confirmation before building the transaction./api/tx/buildreturns the transaction payload./api/tx/submitreturns a transaction hash./api/tx/status/[hash]is polled until the result isSuccess,Failed, or a terminal timeout state.
- The user selects the borrow tab.
BorrowingFormvalidates the borrow amount, collateral inputs, and any rate constraints.- The page requests
/api/quotefor the borrow preview. InterestCalculatorandTransactionSummaryshow repayment cost, collateral requirement, and risk information.- On confirmation, the page builds and submits the transaction through
/api/tx/buildand/api/tx/submit. - Status polling reports completion or failure through
/api/tx/status/[hash].
Handle these paths explicitly in the UI:
/api/marketsunavailable: show a recoverable loading/error state and keep forms disabled until market context exists./api/quoterejection: show field-level or summary-level validation feedback without submitting a transaction.429rate limit: explain that the user should retry after the server-provided window./api/tx/buildfailure: keep the user on the confirmation step with the original form data intact./api/tx/submitfailure: show the submit error and avoid reporting success without a hash.- Transaction status
Failed: show the hash and failure status so the user can inspect or retry safely.
CONTRIBUTING.mdfor contributor workflow and testing expectations.COMPONENT-CHECKLIST.mdfor component quality checks.POSITION_SUMMARY_TESTING_GUIDE.mdand related summary documents for adjacent data-flow patterns.WEBHOOKS.mdfor server-to-client event integration notes where applicable.