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:
- Fetch the anchor's
stellar.toml to discover the TRANSFER_SERVER_SEP0024 URL.
- Call
GET /info to list supported assets and operations.
- Call
POST /transactions/deposit/interactive or POST /transactions/withdraw/interactive with a JWT (obtained via SEP-10).
- Open the returned
url in an iframe inside a modal.
- Poll
GET /transaction?id= until the transaction reaches a terminal state (completed, error, refunded).
Implementation Steps
- Create
src/components/transaction/SEP24Dialog.tsx.
- 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.
- Use
@stellar/stellar-sdk's StellarToml.Resolver.resolve() to fetch the TOML.
- Use Radix UI
Dialog.Root / Dialog.Content for the modal shell.
- Render the anchor URL in an
<iframe sandbox="allow-scripts allow-same-origin allow-forms allow-popups" /> — the sandbox attribute is mandatory for security.
- Implement polling with
setInterval (clear on unmount). Poll every 5 seconds.
- Create
src/hooks/useSEP24Transaction.ts to encapsulate the polling logic.
- Export
SEP24Dialog and useSEP24Transaction from src/index.ts.
- 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
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:
stellar.tomlto discover theTRANSFER_SERVER_SEP0024URL.GET /infoto list supported assets and operations.POST /transactions/deposit/interactiveorPOST /transactions/withdraw/interactivewith a JWT (obtained via SEP-10).urlin an iframe inside a modal.GET /transaction?id=until the transaction reaches a terminal state (completed,error,refunded).Implementation Steps
src/components/transaction/SEP24Dialog.tsx.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.@stellar/stellar-sdk'sStellarToml.Resolver.resolve()to fetch the TOML.Dialog.Root / Dialog.Contentfor the modal shell.<iframe sandbox="allow-scripts allow-same-origin allow-forms allow-popups" />— thesandboxattribute is mandatory for security.setInterval(clear on unmount). Poll every 5 seconds.src/hooks/useSEP24Transaction.tsto encapsulate the polling logic.SEP24DialoganduseSEP24Transactionfromsrc/index.ts.Dialogwhenopen=true.open=false.onSuccesswhen polling returnscompleted.onErrorwhen polling returnserror.Security Considerations
sandboxon the iframe.POSTendpoint.Definition of Done
sandboxattributes.useSEP24Transactionhook.onSuccess/onError/onClosecallbacks all wired up.