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
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
/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)
|
||||
|
||||
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
|
||||
provided in this repository.
|
||||
found [here](https://github.com/project-serum/swap).
|
||||
|
||||
## Developing
|
||||
|
||||
|
@ -15,20 +14,21 @@ provided in this repository.
|
|||
yarn
|
||||
```
|
||||
|
||||
#### Run the example app
|
||||
|
||||
```
|
||||
yarn start
|
||||
```
|
||||
|
||||
#### Build the `@project-serum/swap-ui` package for npm
|
||||
|
||||
```
|
||||
yarn build:npm
|
||||
```
|
||||
|
||||
#### Build the example app for GitHub pages
|
||||
#### 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,
|
||||
TokenListProvider,
|
||||
} from "@solana/spl-token-registry";
|
||||
import Swap from "./swap";
|
||||
import Swap from "@project-serum/swap-ui";
|
||||
import "./App.css";
|
||||
|
||||
// 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": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
|
@ -17,14 +18,14 @@
|
|||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": false,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"typeRoots": ["types/", "node_modules/@types"],
|
||||
"outDir": "dist",
|
||||
"declaration": true,
|
||||
"declarationDir": "dist"
|
||||
"typeRoots": [
|
||||
"../types/",
|
||||
"node_modules/@types"
|
||||
]
|
||||
},
|
||||
"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",
|
||||
"version": "0.1.0-alpha.17",
|
||||
"version": "0.1.0-alpha.18",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"homepage": ".",
|
||||
"homepage": "https://github.com/project-serum/swap-ui",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@project-serum/serum": "^0.13.34",
|
||||
"@project-serum/swap": "^0.1.0-alpha.14",
|
||||
"@solana/spl-token": "^0.1.4",
|
||||
"react-async-hook": "^3.6.2"
|
||||
"@solana/spl-token": "^0.1.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@material-ui/core": "^4.11.4",
|
||||
|
@ -17,17 +17,14 @@
|
|||
"@project-serum/anchor": "^0.6.0-beta.1",
|
||||
"@solana/spl-token-registry": "^0.2.86",
|
||||
"@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": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"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"
|
||||
"lint": "prettier src/** example/src/** --check",
|
||||
"lint:fix": "prettier src/** example/src/** -w",
|
||||
"build": "rm -rf dist && tsc --build tsconfig.json"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
|
@ -35,24 +32,15 @@
|
|||
"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": {
|
||||
"@material-ui/core": "^4.11.4",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.58",
|
||||
"@project-serum/anchor": "^0.6.0-beta.2",
|
||||
"@project-serum/serum": "^0.13.34",
|
||||
"@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/web3.js": "^1.10.1",
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
|
@ -69,6 +57,9 @@
|
|||
"notistack": "^1.0.7",
|
||||
"prettier": "^2.3.0",
|
||||
"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-scripts": "4.0.3",
|
||||
"typescript": "^4.1.2",
|
||||
|
|
106
src/index.tsx
106
src/index.tsx
|
@ -1,17 +1,95 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
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";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
/**
|
||||
* The package exports a single `Swap` component that can be embedded into
|
||||
* applications.
|
||||
*/
|
||||
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))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
/**
|
||||
* Properties for the `Swap` Component.
|
||||
*/
|
||||
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",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"noEmit": false,
|
||||
"jsx": "react-jsx",
|
||||
"typeRoots": ["types/", "node_modules/@types"]
|
||||
"typeRoots": ["types/", "node_modules/@types"],
|
||||
"outDir": "dist",
|
||||
"declaration": true,
|
||||
"declarationDir": "dist"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
|
|
Loading…
Reference in New Issue