72 lines
1.8 KiB
Markdown
72 lines
1.8 KiB
Markdown
# `@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
|
|
<Swap provider={provider} tokenList={tokenList} />
|
|
```
|
|
|
|
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
|
|
```
|