Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/project-serum/swap-ui
React Component for Swapping on the Serum DEX
https://github.com/project-serum/swap-ui
react serum solana
Last synced: 22 days ago
JSON representation
React Component for Swapping on the Serum DEX
- Host: GitHub
- URL: https://github.com/project-serum/swap-ui
- Owner: project-serum
- License: apache-2.0
- Created: 2021-05-13T03:43:36.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2021-11-23T16:45:49.000Z (over 2 years ago)
- Last Synced: 2024-04-26T05:07:26.345Z (2 months ago)
- Topics: react, serum, solana
- Language: TypeScript
- Homepage:
- Size: 2.3 MB
- Stars: 111
- Watchers: 8
- Forks: 115
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-serum - Swap UI
- awesome-solana - Swap UI
README
# `@project-serum/swap-ui`
[](https://travis-ci.com/project-serum/swap-ui)
[](https://www.npmjs.com/package/@project-serum/swap-ui)
A reusable React component for swapping on the Serum DEX. The Solana program can be
found [here](https://github.com/project-serum/swap).
## Usage
#### Install
First install the required peer dependencies into your React project.
```
yarn add @material-ui/core @material-ui/icons @material-ui/lab @project-serum/anchor @solana/spl-token-registry @solana/web3.js material-ui-popup-state react-async-hook
```
Then install the package.
```
yarn add @project-serum/swap-ui
```
#### Add the Swap Component
To embed the `Swap` component into your application,
one can minimally provide an [Anchor](https://github.com/project-serum/anchor)
[Provider](https://project-serum.github.io/anchor/ts/classes/provider.html)
and [TokenListContainer](https://github.com/solana-labs/token-list).
For example,
```javascript
```
All of the complexity of communicating with the Serum DEX and managing
its data is handled internally by the component.
#### Referral Fees
To earn referral fees, one can also pass in a `referral` property,
which is the `PublicKey` of the Solana wallet that *owns* the associated
token accounts in which referral fees are paid (i.e., USDC and USDT).
## Developing
#### Install dependencies
```
yarn
```
#### Build
```
yarn build
```
## Run the example app
For local development and educational purposes, a minimal React app is provided
in the `example/` subdirectory.
To run, change directories via `cd example/` and start the app.
### Start the app
```
yarn start
```