Extract example into its own directory (#22)
This commit is contained in:
parent
aa1e70b809
commit
bf55e41e11
|
@ -1,25 +1,17 @@
|
||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# dependencies
|
|
||||||
/node_modules
|
/node_modules
|
||||||
/.pnp
|
/.pnp
|
||||||
.pnp.js
|
.pnp.js
|
||||||
|
|
||||||
# testing
|
|
||||||
/coverage
|
/coverage
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
/build
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.env.local
|
.env.local
|
||||||
.env.development.local
|
.env.development.local
|
||||||
.env.test.local
|
.env.test.local
|
||||||
.env.production.local
|
.env.production.local
|
||||||
|
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
/dist
|
/dist
|
||||||
|
example/build/
|
||||||
|
example/node_modules/
|
||||||
|
example/yarn.lock
|
||||||
|
|
30
README.md
30
README.md
|
@ -4,8 +4,7 @@
|
||||||
[![npm](https://img.shields.io/npm/v/@project-serum/swap-ui.svg)](https://www.npmjs.com/package/@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
|
A reusable React component for swapping on the Serum DEX. The Solana program can be
|
||||||
found [here](https://github.com/project-serum/swap). An example application is also
|
found [here](https://github.com/project-serum/swap).
|
||||||
provided in this repository.
|
|
||||||
|
|
||||||
## Developing
|
## Developing
|
||||||
|
|
||||||
|
@ -15,20 +14,21 @@ provided in this repository.
|
||||||
yarn
|
yarn
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Run the example app
|
#### Build
|
||||||
|
|
||||||
```
|
|
||||||
yarn start
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Build the `@project-serum/swap-ui` package for npm
|
|
||||||
|
|
||||||
```
|
|
||||||
yarn build:npm
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Build the example app for GitHub pages
|
|
||||||
|
|
||||||
```
|
```
|
||||||
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
|
||||||
|
```
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
// Create react app doesn't allow one to use code outside the main src/
|
||||||
|
// directory, which is desireable in our case since we want the example
|
||||||
|
// to use the parent directory package. So we use `react-app-rewire-alias`
|
||||||
|
// to work around this limitation. This setup only applies to this example
|
||||||
|
// and the standard create-react-app configuration should work for most,
|
||||||
|
// if not all, other cases.
|
||||||
|
|
||||||
|
const { aliasDangerous, aliasJest, configPaths } = require('react-app-rewire-alias/lib/aliasDangerous');
|
||||||
|
|
||||||
|
const aliasMap = configPaths('./tsconfig.paths.json')
|
||||||
|
module.exports = aliasDangerous(aliasMap)
|
||||||
|
module.exports.jest = aliasJest(aliasMap)
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"name": "@project-serum/swap-ui-example",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"homepage": ".",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"start": "../node_modules/.bin/react-app-rewired start",
|
||||||
|
"build": "../node_modules/.bin/react-app-rewired build",
|
||||||
|
"deploy": "gh-pages -d build/",
|
||||||
|
"build:npm": "rm -rf dist && tsc --build tsconfig.npm.json"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
|
@ -15,7 +15,7 @@ import {
|
||||||
TokenListContainer,
|
TokenListContainer,
|
||||||
TokenListProvider,
|
TokenListProvider,
|
||||||
} from "@solana/spl-token-registry";
|
} from "@solana/spl-token-registry";
|
||||||
import Swap from "./swap";
|
import Swap from "@project-serum/swap-ui";
|
||||||
import "./App.css";
|
import "./App.css";
|
||||||
|
|
||||||
// App illustrating the use of the Swap component.
|
// App illustrating the use of the Swap component.
|
|
@ -0,0 +1,17 @@
|
||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom";
|
||||||
|
import "./index.css";
|
||||||
|
import App from "./App";
|
||||||
|
import reportWebVitals from "./reportWebVitals";
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
document.getElementById("root")
|
||||||
|
);
|
||||||
|
|
||||||
|
// If you want to start measuring performance in your app, pass a function
|
||||||
|
// to log results (for example: reportWebVitals(console.log))
|
||||||
|
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||||
|
reportWebVitals();
|
|
@ -1,4 +1,5 @@
|
||||||
{
|
{
|
||||||
|
"extends": "./tsconfig.paths.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
"target": "es5",
|
||||||
"lib": [
|
"lib": [
|
||||||
|
@ -17,14 +18,14 @@
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"noEmit": false,
|
"noEmit": true,
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
"typeRoots": ["types/", "node_modules/@types"],
|
"typeRoots": [
|
||||||
"outDir": "dist",
|
"../types/",
|
||||||
"declaration": true,
|
"node_modules/@types"
|
||||||
"declarationDir": "dist"
|
]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src/swap/"
|
"src"
|
||||||
]
|
]
|
||||||
}
|
}
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@project-serum/swap-ui": ["../src/"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
41
package.json
41
package.json
|
@ -1,14 +1,14 @@
|
||||||
{
|
{
|
||||||
"name": "@project-serum/swap-ui",
|
"name": "@project-serum/swap-ui",
|
||||||
"version": "0.1.0-alpha.17",
|
"version": "0.1.0-alpha.18",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
"types": "dist/index.d.ts",
|
"types": "dist/index.d.ts",
|
||||||
"homepage": ".",
|
"homepage": "https://github.com/project-serum/swap-ui",
|
||||||
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@project-serum/serum": "^0.13.34",
|
"@project-serum/serum": "^0.13.34",
|
||||||
"@project-serum/swap": "^0.1.0-alpha.14",
|
"@project-serum/swap": "^0.1.0-alpha.14",
|
||||||
"@solana/spl-token": "^0.1.4",
|
"@solana/spl-token": "^0.1.4"
|
||||||
"react-async-hook": "^3.6.2"
|
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@material-ui/core": "^4.11.4",
|
"@material-ui/core": "^4.11.4",
|
||||||
|
@ -17,17 +17,14 @@
|
||||||
"@project-serum/anchor": "^0.6.0-beta.1",
|
"@project-serum/anchor": "^0.6.0-beta.1",
|
||||||
"@solana/spl-token-registry": "^0.2.86",
|
"@solana/spl-token-registry": "^0.2.86",
|
||||||
"@solana/web3.js": "^1.10.1",
|
"@solana/web3.js": "^1.10.1",
|
||||||
"react": "^17.0.2"
|
"material-ui-popup-state": "^1.8.3",
|
||||||
|
"react": "^17.0.2",
|
||||||
|
"react-async-hook": "^3.6.2"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"lint": "prettier src/** example/src/** --check",
|
||||||
"build": "react-scripts build",
|
"lint:fix": "prettier src/** example/src/** -w",
|
||||||
"test": "react-scripts test",
|
"build": "rm -rf dist && tsc --build tsconfig.json"
|
||||||
"eject": "react-scripts eject",
|
|
||||||
"lint": "prettier src/** --check",
|
|
||||||
"lint:fix": "prettier src/** -w",
|
|
||||||
"deploy": "gh-pages -d build/",
|
|
||||||
"build:npm": "rm -rf dist && tsc --build tsconfig.npm.json"
|
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": [
|
"extends": [
|
||||||
|
@ -35,24 +32,15 @@
|
||||||
"react-app/jest"
|
"react-app/jest"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"browserslist": {
|
|
||||||
"production": [
|
|
||||||
">0.2%",
|
|
||||||
"not dead",
|
|
||||||
"not op_mini all"
|
|
||||||
],
|
|
||||||
"development": [
|
|
||||||
"last 1 chrome version",
|
|
||||||
"last 1 firefox version",
|
|
||||||
"last 1 safari version"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@material-ui/core": "^4.11.4",
|
"@material-ui/core": "^4.11.4",
|
||||||
"@material-ui/icons": "^4.11.2",
|
"@material-ui/icons": "^4.11.2",
|
||||||
"@material-ui/lab": "^4.0.0-alpha.58",
|
"@material-ui/lab": "^4.0.0-alpha.58",
|
||||||
"@project-serum/anchor": "^0.6.0-beta.2",
|
"@project-serum/anchor": "^0.6.0-beta.2",
|
||||||
|
"@project-serum/serum": "^0.13.34",
|
||||||
"@project-serum/sol-wallet-adapter": "^0.2.0",
|
"@project-serum/sol-wallet-adapter": "^0.2.0",
|
||||||
|
"@project-serum/swap": "^0.1.0-alpha.14",
|
||||||
|
"@solana/spl-token": "^0.1.4",
|
||||||
"@solana/spl-token-registry": "^0.2.86",
|
"@solana/spl-token-registry": "^0.2.86",
|
||||||
"@solana/web3.js": "^1.10.1",
|
"@solana/web3.js": "^1.10.1",
|
||||||
"@testing-library/jest-dom": "^5.11.4",
|
"@testing-library/jest-dom": "^5.11.4",
|
||||||
|
@ -69,6 +57,9 @@
|
||||||
"notistack": "^1.0.7",
|
"notistack": "^1.0.7",
|
||||||
"prettier": "^2.3.0",
|
"prettier": "^2.3.0",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
|
"react-app-rewire-alias": "^1.0.3",
|
||||||
|
"react-app-rewired": "^2.1.8",
|
||||||
|
"react-async-hook": "^3.6.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
"typescript": "^4.1.2",
|
"typescript": "^4.1.2",
|
||||||
|
|
108
src/index.tsx
108
src/index.tsx
|
@ -1,17 +1,95 @@
|
||||||
import React from "react";
|
import { PublicKey } from "@solana/web3.js";
|
||||||
import ReactDOM from "react-dom";
|
import { TokenListContainer } from "@solana/spl-token-registry";
|
||||||
import "./index.css";
|
import { Provider } from "@project-serum/anchor";
|
||||||
import App from "./App";
|
import { Swap as SwapClient } from "@project-serum/swap";
|
||||||
import reportWebVitals from "./reportWebVitals";
|
import { SwapContextProvider } from "./context/Swap";
|
||||||
|
import { DexContextProvider } from "./context/Dex";
|
||||||
|
import { TokenListContextProvider } from "./context/TokenList";
|
||||||
|
import { TokenContextProvider } from "./context/Token";
|
||||||
|
import SwapCard from "./components/Swap";
|
||||||
|
|
||||||
ReactDOM.render(
|
/**
|
||||||
<React.StrictMode>
|
* The package exports a single `Swap` component that can be embedded into
|
||||||
<App />
|
* applications.
|
||||||
</React.StrictMode>,
|
*/
|
||||||
document.getElementById("root")
|
export default function Swap(props: SwapProps) {
|
||||||
);
|
const {
|
||||||
|
style,
|
||||||
|
provider,
|
||||||
|
tokenList,
|
||||||
|
fromMint,
|
||||||
|
toMint,
|
||||||
|
fromAmount,
|
||||||
|
toAmount,
|
||||||
|
referral,
|
||||||
|
} = props;
|
||||||
|
const swapClient = new SwapClient(provider, tokenList);
|
||||||
|
return (
|
||||||
|
<TokenListContextProvider tokenList={tokenList}>
|
||||||
|
<TokenContextProvider provider={provider}>
|
||||||
|
<DexContextProvider swapClient={swapClient}>
|
||||||
|
<SwapContextProvider
|
||||||
|
fromMint={fromMint}
|
||||||
|
toMint={toMint}
|
||||||
|
fromAmount={fromAmount}
|
||||||
|
toAmount={toAmount}
|
||||||
|
referral={referral}
|
||||||
|
>
|
||||||
|
<SwapCard style={style} />
|
||||||
|
</SwapContextProvider>
|
||||||
|
</DexContextProvider>
|
||||||
|
</TokenContextProvider>
|
||||||
|
</TokenListContextProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
/**
|
||||||
// to log results (for example: reportWebVitals(console.log))
|
* Properties for the `Swap` Component.
|
||||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
*/
|
||||||
reportWebVitals();
|
type SwapProps = {
|
||||||
|
/**
|
||||||
|
* Wallet and network provider. Apps can use a `Provider` subclass to hook
|
||||||
|
* into all transactions intitiated by the component.
|
||||||
|
*/
|
||||||
|
provider: Provider;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Token list providing information for tokens used.
|
||||||
|
*/
|
||||||
|
tokenList: TokenListContainer;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wallet address to which referral fees are sent (i.e. a SOL address).
|
||||||
|
* To receive referral fees, the wallet must *own* associated token
|
||||||
|
* accounts for the token in which the referral is paid (usually USDC
|
||||||
|
* or USDT).
|
||||||
|
*/
|
||||||
|
referral?: PublicKey;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The default `fromMint` to use when the component first renders.
|
||||||
|
*/
|
||||||
|
fromMint?: PublicKey;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The default `toMint` to use when the component first renders.
|
||||||
|
*/
|
||||||
|
toMint?: PublicKey;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The initial amount for the `fromMint` to use when the component first
|
||||||
|
* renders.
|
||||||
|
*/
|
||||||
|
fromAmount?: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The initial amount for the `toMint` to use when the component first
|
||||||
|
* renders.
|
||||||
|
*/
|
||||||
|
toAmount?: number;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Style properties to pass through to the component.
|
||||||
|
*/
|
||||||
|
style?: any;
|
||||||
|
};
|
||||||
|
|
|
@ -1,50 +0,0 @@
|
||||||
import { PublicKey } from "@solana/web3.js";
|
|
||||||
import { TokenListContainer } from "@solana/spl-token-registry";
|
|
||||||
import { Provider } from "@project-serum/anchor";
|
|
||||||
import { Swap as SwapClient } from "@project-serum/swap";
|
|
||||||
import { SwapContextProvider } from "./context/Swap";
|
|
||||||
import { DexContextProvider } from "./context/Dex";
|
|
||||||
import { TokenListContextProvider } from "./context/TokenList";
|
|
||||||
import { TokenContextProvider } from "./context/Token";
|
|
||||||
import SwapCard from "./components/Swap";
|
|
||||||
|
|
||||||
// The swap module exports a single `Swap` component that can be embedded into
|
|
||||||
// applications.
|
|
||||||
export default function Swap({
|
|
||||||
style,
|
|
||||||
provider,
|
|
||||||
tokenList,
|
|
||||||
fromMint,
|
|
||||||
toMint,
|
|
||||||
fromAmount,
|
|
||||||
toAmount,
|
|
||||||
referral,
|
|
||||||
}: {
|
|
||||||
provider: Provider;
|
|
||||||
tokenList: TokenListContainer;
|
|
||||||
fromMint?: PublicKey;
|
|
||||||
toMint?: PublicKey;
|
|
||||||
fromAmount?: number;
|
|
||||||
toAmount?: number;
|
|
||||||
referral?: PublicKey;
|
|
||||||
style?: any;
|
|
||||||
}) {
|
|
||||||
const swapClient = new SwapClient(provider, tokenList);
|
|
||||||
return (
|
|
||||||
<TokenListContextProvider tokenList={tokenList}>
|
|
||||||
<TokenContextProvider provider={provider}>
|
|
||||||
<DexContextProvider swapClient={swapClient}>
|
|
||||||
<SwapContextProvider
|
|
||||||
fromMint={fromMint}
|
|
||||||
toMint={toMint}
|
|
||||||
fromAmount={fromAmount}
|
|
||||||
toAmount={toAmount}
|
|
||||||
referral={referral}
|
|
||||||
>
|
|
||||||
<SwapCard style={style} />
|
|
||||||
</SwapContextProvider>
|
|
||||||
</DexContextProvider>
|
|
||||||
</TokenContextProvider>
|
|
||||||
</TokenListContextProvider>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -17,9 +17,12 @@
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"noEmit": true,
|
"noEmit": false,
|
||||||
"jsx": "react-jsx",
|
"jsx": "react-jsx",
|
||||||
"typeRoots": ["types/", "node_modules/@types"]
|
"typeRoots": ["types/", "node_modules/@types"],
|
||||||
|
"outDir": "dist",
|
||||||
|
"declaration": true,
|
||||||
|
"declarationDir": "dist"
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src"
|
"src"
|
||||||
|
|
Loading…
Reference in New Issue