Extract example into its own directory (#22)

.gitignore

@@ -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
-/dist
+example/build/
+example/node_modules/
+example/yarn.lock

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
+found [here](https://github.com/project-serum/swap).
-provided in this repository.
 
 ## Developing
 
@@ -15,20 +14,21 @@ provided in this repository.
 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
 ```
+
+## 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
+```

example/config-overrides.js

@@ -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)

example/package.json

@@ -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"
+    ]
+  }
+}

example/src/App.tsx

@@ -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.

example/src/index.tsx

@@ -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();

example/tsconfig.json

@@ -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"],
+    "typeRoots": [
-    "outDir": "dist",
+      "../types/",
-    "declaration": true,
+      "node_modules/@types"
-    "declarationDir": "dist"
+    ]
   },
   "include": [
-    "src/swap/"
+    "src"
   ]
 }

example/tsconfig.paths.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@project-serum/swap-ui": ["../src/"]
+    }
+  }
+}

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",
+    "@solana/spl-token": "^0.1.4"
-    "react-async-hook": "^3.6.2"
   },
   "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",
+    "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": {
     "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",

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;
+};

src/swap/index.tsx

@@ -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>
-  );
-}

tsconfig.json

@@ -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"