first commit

Agoric · Feb 19, 2020 · a328d2f · a328d2f
commit a328d2f
Show file tree

Hide file tree

Showing 30 changed files with 13,140 additions and 0 deletions.
diff --git a/.env.local.example b/.env.local.example
@@ -0,0 +1,3 @@
+REACT_APP_DAPP_API_URL=""
+REACT_APP_WALLET_BRIDGE_URL=""
+REACT_APP_CONTRACT_ID=""
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,35 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "airbnb",
+    "plugin:prettier/recommended",
+    "plugin:eslint-comments/recommended"
+  ],
+  "env": {
+    "es6": true
+  },
+  "globals": {
+    "globalThis": false
+  },
+  "rules": {
+    "complexity": ["error", 8],
+    "implicit-arrow-linebreak": "off",
+    "function-paren-newline": "off",
+    "arrow-parens": "off",
+    "strict": "off",
+    "max-depth": ["error", { "max": 4 }],
+    "max-lines": ["error", 300],
+    "max-nested-callbacks": ["error", 4],
+    "max-statements": ["error", 32],
+    "max-statements-per-line": ["error", { "max": 1 }],    "no-console": "off",
+    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "no-return-assign": "off",
+    "no-param-reassign": "off",
+    "no-restricted-syntax": ["off", "ForOfStatement"],
+    "no-unused-expressions": "off",
+    "no-loop-func": "off",
+    "import/extensions": "off",
+    "import/prefer-default-export": "off",
+    "eslint-comments/no-unused-disable": "error"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# 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*
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "trailingComma": "all",
+  "singleQuote": true
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# Simple Exchange Demo
+
+## Running the demo
+
+From the project directory, run:
+
+```bash
+yarn
+yarn start
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.
diff --git a/package.json b/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "simple-exchange-frontend",
+  "version": "0.0.1",
+  "description": "Simple Exchange Frontend",
+  "private": true,
+  "scripts": {
+    "clean": "rimraf ./build",
+    "lint": "eslint './src/**/*.{js,jsx}'",
+    "prettier": "prettier './src/**/*.{js,jsx,scss}' --write",
+    "start": "react-scripts start",
+    "test": "react-scripts test --env=jsdom",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.9.3",
+    "@material-ui/icons": "^4.9.1",
+    "clsx": "^1.0.4",
+    "http-proxy-middleware": "^1.0.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-eslint-comments": "^3.1.2",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^2.4.0",
+    "prettier": "^1.19.1",
+    "react-scripts": "^3.4.0",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/public/assets/autoswap-24px-red.svg b/public/assets/autoswap-24px-red.svg
diff --git a/public/assets/autoswap-24px.svg b/public/assets/autoswap-24px.svg
diff --git a/public/favicon-red.ico b/public/favicon-red.ico
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+
+    <!-- 
+      Add the Roboto font required by Material UI. 
+    -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+
+    <title>Simple Exchange</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Simple Exchange",
+  "name": "Simple Exchange",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "48x48 32x32 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/components/AssetInput.jsx b/src/components/AssetInput.jsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import clsx from 'clsx';
+
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  Grid,
+  TextField,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+} from '@material-ui/core';
+import PurseIcon from '@material-ui/icons/BusinessCenter';
+
+const useStyles = makeStyles(theme => ({
+  select: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  noPadding: {
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+  icon: {
+    minWidth: 24,
+    marginRight: theme.spacing(2),
+  },
+}));
+
+export default function AssetInput({
+  title,
+  purses,
+  onPurseChange,
+  onAmountChange,
+  purse,
+  amount,
+  disabled,
+  purseError,
+  amountError,
+}) {
+  const classes = useStyles();
+
+  return (
+    <Grid item container spacing={3}>
+      <Grid
+        item
+        xs={12}
+        sm={8}
+        container
+        direction="column"
+        alignItems="flex-end"
+        justify="flex-end"
+      >
+        <TextField
+          label={title}
+          type="number"
+          variant="outlined"
+          fullWidth
+          InputProps={{
+            inputProps: {
+              min: 0,
+            },
+          }}
+          onChange={onAmountChange}
+          onKeyPress={e => {
+            const charCode = e.which ? e.which : e.keyCode;
+
+            // Prevent 'minus' character
+            if (charCode === 45) {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }}
+          value={amount === null ? '' : amount}
+          disabled={disabled}
+          error={amountError}
+        />
+      </Grid>
+      <Grid item xs={12} sm={4}>
+        <TextField
+          select
+          label="Currency"
+          variant="outlined"
+          fullWidth
+          value={purse === null ? '' : purse.purseName}
+          onChange={onPurseChange}
+          inputProps={{
+            className: clsx(purse && classes.noPadding, classes.select),
+          }}
+          disabled={disabled}
+          error={purseError}
+        >
+          {Array.isArray(purses) && purses.length > 0 ? (
+            purses.map(({ purseName, assayId, extent }) => (
+              <MenuItem key={purseName} value={purseName} divider>
+                <ListItemIcon className={classes.icon}>
+                  <PurseIcon />
+                </ListItemIcon>
+                <ListItemText
+                  primary={purseName}
+                  secondary={`${extent} ${assayId}`}
+                />
+              </MenuItem>
+            ))
+          ) : (
+            <MenuItem key={null} value={null}>
+              No purses
+            </MenuItem>
+          )}
+        </TextField>
+      </Grid>
+    </Grid>
+  );
+}