initial commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["babel-plugin-styled-components"]
+}

.eslintrc.json

@@ -0,0 +1,29 @@
+{
+  "rules": {
+    "max-len": {
+      "code": "80"
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "plugins": [
+    "react"
+  ]
+}

.gitignore

@@ -0,0 +1,14 @@
+.parcel-cache/
+coverage/
+dist/*
+node_modules/
+*.log
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db

.parcelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.svg": ["...", "@parcel/transformer-svg-react"]
+  }
+}

README.md

@@ -0,0 +1,27 @@
+# Human Tornado
+
+## Building and running on localhost
+
+First install dependencies:
+
+```sh
+yarn install
+```
+
+To start dev server:
+
+```sh
+yarn start
+```
+
+To create a production build:
+
+```sh
+yarn build
+```
+
+To clear cache:
+
+```sh
+yarn clear
+```

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "human-tornado",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "source": "src/index.html",
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "scripts": {
+    "clear": "rm -r .parcel-cache",
+    "clean": "rm dist/bundle.js",
+    "start": "parcel",
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "@usedapp/core": "^0.5.4",
+    "circomlib": "git+https://github.com/tornadocash/circomlib.git#c372f14d324d57339c88451834bf2824e73bbdbc",
+    "fixed-merkle-tree": "^0.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "react-router-dom": "^5",
+    "snarkjs": "git+https://github.com/tornadocash/snarkjs.git#869181cfaf7526fe8972073d31655493a04326d5",
+    "styled-components": "^5.3.3"
+  },
+  "devDependencies": {
+    "@parcel/transformer-svg-react": "^2.0.0",
+    "babel-plugin-styled-components": "^1.13.3",
+    "eslint": "^7",
+    "eslint-plugin-react": "^7.26.1",
+    "parcel": "^2.0.0",
+    "prettier": "^2.4.1"
+  }
+}

src/App.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { DAppProvider, ChainId } from "@usedapp/core";
+import { ThemeProvider } from "styled-components";
+import { GlobalStyle } from "./styles/global-style";
+import { lightTheme } from "./styles/themes";
+import { HashRouter as Router } from "react-router-dom";
+import Routes from "./routes";
+
+
+const config = {
+  supportedChains: [ChainId.xDai, ChainId.Kovan]
+}
+
+const App = () => (
+  <React.StrictMode>
+    <ThemeProvider theme={lightTheme}>
+      <GlobalStyle />
+      <DAppProvider>
+        <Router>
+          <Routes />
+        </Router>
+      </DAppProvider>
+    </ThemeProvider>
+  </React.StrictMode>
+);
+
+export default App;

src/components/account.js

@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "styled-components";
+import { useEthers, shortenAddress, getChainName } from "@usedapp/core";
+
+
+const StyledDiv = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`
+const AccountWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 45px;
+  padding: 0 12px;
+  border-radius: 25px;
+  box-shadow: inset 4px 4px 8px #1a1f35, inset -4px -4px 8px #2c3358;
+`
+
+const DisconnectButton = styled.button`
+  width: 100px;
+  margin-right: 24px;
+`
+
+const Account = () => {
+  const { account, deactivate, chainId } = useEthers();
+
+  return (
+    <StyledDiv>
+      <AccountWrapper>
+        <h2>
+          <pre>
+            {getChainName(chainId) + " | " + shortenAddress(account)}
+          </pre>
+        </h2>
+      </AccountWrapper>
+      <DisconnectButton onClick={deactivate}> Disconect </DisconnectButton>
+    </StyledDiv>
+  );
+}
+
+
+export default Account;

src/components/action-selection.js

@@ -0,0 +1,45 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  width: 100%;
+`
+
+const StyledButton = styled.button`
+  padding-left: 10px;
+  padding-right: 10px;
+  border-radius: 25px;
+  height: 45px;
+  width: 100px;
+  margin: 12px;
+`
+
+const ActionSelection = ({ userAction, setUserAction }) => {
+  const depositDisabled = userAction === "deposit";
+  const withdrawDisabled = userAction === "withdraw";
+
+  return (
+    <ButtonWrapper>
+      <StyledButton
+        onClick={() => setUserAction("deposit")}
+        disabled={depositDisabled}
+        className={depositDisabled ? "pressed" : ""}
+      >
+        Deposit
+      </StyledButton>
+      <StyledButton
+        onClick={() => setUserAction("withdraw")}
+        disabled={withdrawDisabled}
+        className={withdrawDisabled ? "pressed" : ""}
+      >
+        Withdraw
+      </StyledButton>
+    </ButtonWrapper>
+  );
+}
+
+export default ActionSelection;

src/components/app.js

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import ActionSelection from "../components/action-selection";
+import Account from "../components/account";
+import DepositMenu from "../components/deposit-menu";
+import WithdrawMenu from "../components/withdraw-menu";
+
+
+const AppContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+`
+
+const StyledAccount = styled.div`
+  align-self: flex-start;
+  margin: 12px;
+  width: 100%;
+`
+
+const App = () => {
+  const [userAction, setUserAction] = useState("deposit");
+
+  return (
+    <AppContainer>
+      <StyledAccount>
+        <Account />
+      </StyledAccount>
+      <ActionSelection userAction={userAction} setUserAction={setUserAction} />
+        {
+          userAction === "deposit"
+            ? <DepositMenu />
+            : <WithdrawMenu />
+        }
+    </AppContainer>
+  )
+}
+
+export default App;

src/components/deposit-menu.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import useDeposit from "../hooks/use-deposit";
+
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+  height: 100%;
+  justify-content: space-between;
+`
+
+const NoteDisplay = styled.p`
+  height: 50%;
+  padding: 12px;
+  border-radius: 25px;
+  box-shadow: inset 4px 4px 8px #1a1f35, inset -4px -4px 8px #2c3358;
+  width: calc(100% - 24px);
+  margin: 12px 0;
+  word-break: break-all;
+`
+const Label = styled.h2`
+  align-self: flex-start;
+  margin: 12px;
+`
+
+const LabelAndDisplay = styled.div`
+  width: 100%;
+  height: 50%;
+`
+
+const DepositButton = styled.button`
+  height: 45px;
+  margin-top: 24px;
+`
+
+const DepositMenu = () => {
+  const [depositState, setDepositState] = useState();
+  const [note, setNote] = useState();
+  const doDeposit = useDeposit(setNote, setDepositState);
+
+  return (
+    <Wrapper>
+      <LabelAndDisplay>
+        <Label> Note: </Label>
+        <NoteDisplay>
+          {note}
+        </NoteDisplay>
+      </LabelAndDisplay>
+      <DepositButton onClick={doDeposit}>
+        Deposit
+      </DepositButton>
+    </Wrapper>
+  )
+}
+
+export default DepositMenu;