Skip to content

feat: implement SEP24Dialog component for hosted deposit/withdrawal flows #10

Description

@rayeberechi

Summary

SEP-24 defines the interactive anchor deposit and withdrawal protocol. This is the most complex component in the kit — it opens an anchor's hosted iframe flow inside a Radix UI Dialog.

Background

SEP-24 flow:

  1. Fetch the anchor's stellar.toml to discover the TRANSFER_SERVER_SEP0024 URL.
  2. Call GET /info to list supported assets and operations.
  3. Call POST /transactions/deposit/interactive or POST /transactions/withdraw/interactive with a JWT (obtained via SEP-10).
  4. Open the returned url in an iframe inside a modal.
  5. Poll GET /transaction?id= until the transaction reaches a terminal state (completed, error, refunded).

Implementation Steps

  1. Create src/components/transaction/SEP24Dialog.tsx.
  2. Props:
    • anchorDomain: string — e.g. "myanchor.io".
    • operation: 'deposit' | 'withdraw'.
    • assetCode: string.
    • jwt: string — SEP-10 JWT; obtaining it is out of scope for this component.
    • onSuccess: (transactionId: string) => void.
    • onError: (error: Error) => void.
    • onClose: () => void.
    • open: boolean.
    • className?: string.
  3. Use @stellar/stellar-sdk's StellarToml.Resolver.resolve() to fetch the TOML.
  4. Use Radix UI Dialog.Root / Dialog.Content for the modal shell.
  5. Render the anchor URL in an <iframe sandbox="allow-scripts allow-same-origin allow-forms allow-popups" /> — the sandbox attribute is mandatory for security.
  6. Implement polling with setInterval (clear on unmount). Poll every 5 seconds.
  7. Create src/hooks/useSEP24Transaction.ts to encapsulate the polling logic.
  8. Export SEP24Dialog and useSEP24Transaction from src/index.ts.
  9. Write tests:
    • Renders Dialog when open=true.
    • Does not render iframe when open=false.
    • Calls onSuccess when polling returns completed.
    • Calls onError when polling returns error.

Security Considerations

  • Always use sandbox on the iframe.
  • Never pass the JWT as a URL query parameter — use the anchor's POST endpoint.
  • Validate that the polled transaction ID matches the one returned by the initial POST.

Definition of Done

  • TOML resolution implemented.
  • Radix UI Dialog used for modal shell.
  • Iframe rendered with correct sandbox attributes.
  • Polling implemented in useSEP24Transaction hook.
  • onSuccess / onError / onClose callbacks all wired up.
  • Security considerations addressed.
  • All tests pass.
  • No TypeScript errors in strict mode.

Metadata

Metadata

Assignees

No one assigned

    Labels

    SEPRelated to a Stellar Ecosystem ProposalenhancementNew feature or requesthelp wantedExtra attention is needed

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions