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: 3 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 (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-11-23T16:45:49.000Z (about 3 years ago)
• Last Synced: 2024-10-29T22:47:43.875Z (3 months ago)
• Topics: react, serum, solana
• Language: TypeScript
• Homepage:
• Size: 2.3 MB
• Stars: 112
• Watchers: 8
• Forks: 117
• Open Issues: 40
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `@project-serum/swap-ui`

[![Build Status](https://travis-ci.com/project-serum/swap-ui.svg?branch=master)](https://travis-ci.com/project-serum/swap-ui)

[![npm](https://img.shields.io/npm/v/@project-serum/swap-ui.svg)](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

```