Practical overview
When it fits
Use Swap UI when building a React application that needs a Serum DEX swap component and can supply an Anchor Provider and TokenListContainer.
Who it is for
- React developers adding Serum DEX token swaps to an application.
- Application builders who want to configure the documented wallet-based referral-fee option.
Documented uses
- Embed a token-swap interface for the Serum DEX in a React application.
- Provide the Anchor Provider and token list needed by the component.
- Pass a referral wallet PublicKey for referral-fee handling.
Requirements & limits
- The component is designed for React applications and requires the documented Anchor and token-list inputs.
- Its README lists Material UI, Anchor, Solana Web3.js, Solana SPL Token Registry, and supporting React packages as peer dependencies.
- The public repository identifies TypeScript as its primary language and Apache-2.0 as its license.
- Referral handling requires the PublicKey of the wallet that owns the associated token accounts receiving fees.
Check current requirements in the official documentation. Source-based guidance does not mean OpenViST has run or independently tested this project.
Add the Swap component to a React application
Embed the Serum DEX swap interface using the documented minimum inputs.
Before you start
- A React project
- Yarn
- The listed peer dependencies: Material UI core, icons and lab; Anchor; Solana SPL Token Registry; Solana Web3.js; material-ui-popup-state; and react-async-hook
- An Anchor Provider and TokenListContainer
Steps
Install the required peer dependencies with the documented Yarn command.
Install @project-serum/swap-ui with Yarn.
Provide the Anchor Provider and TokenListContainer to the Swap component.
Expected outcome
The application includes the reusable Serum DEX swap component.
Guide limitations
- The README describes the minimum component inputs but does not specify broader compatibility or current trading availability.
Configure referral-fee handling
Pass the documented referral wallet property to the swap interface.
Before you start
- The Swap component
- The Solana PublicKey of the wallet that owns the associated token accounts receiving referral fees
Steps
Identify the referral wallet that owns the relevant associated token accounts.
Pass that wallet's PublicKey as the component's referral property.
Expected outcome
The swap interface is configured for referral-fee handling; the README names USDC and USDT as examples of the associated token accounts.
Guide limitations
- The referral property is optional.
- The instructions do not specify a referral-fee rate or estimate earnings.
Compare options for DEX swap integration
These projects document a common task and share a project role. This is a source-based comparison, not an execution benchmark or a guarantee of interchangeability.
| Project | Documented purpose | Platform | Access and requirements |
|---|---|---|---|
| Swap UI | Embed a token-swap interface for the Serum DEX in a React application. | Web | |
| VIA SDK | Find swap or bridge routes using source and destination chains, token addresses, and an amount. | Web | The package is installed through npm and the documented client uses an API key. The README says the default key is limited to one request per second per IP and directs developers seeking higher limits to contact VIA. |
Sources & review
Source record details
- Source availability
- Active
- Sources checked
- 16 October 2026
- Original website title
- project-serum/swap-ui · Official homepage title · retained in its source language