add bond form

2021-08-20 22:26:14 +01:00
parent 8ec9e3121f
commit 24af0c94bf
15 changed files with 314 additions and 15 deletions
@@ -15,6 +15,7 @@
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@material-ui/styles": "^4.11.4",
    "@types/react-dom": "^17.0.9",
+    "bs58": "^4.0.1",
    "clsx": "^1.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
@@ -27,6 +28,7 @@
    "@babel/preset-react": "^7.14.5",
    "@tauri-apps/api": "^1.0.0-beta.6",
    "@tauri-apps/cli": "^1.0.0-beta.9",
+    "@types/bs58": "^4.0.1",
    "@types/react-router-dom": "^5.1.8",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
@@ -25,13 +25,6 @@ const useStyles = makeStyles(({ spacing }) => ({
    minWidth: 300,
    position: 'relative',
  },
-  media: {
-    marginLeft: spacing(-7),
-    position: 'fixed',
-  },
-  content: {
-    marginLeft: theme.spacing(4),
-  },
 }))

 export const BalanceCard = React.memo(function BlogCard() {
@@ -39,11 +32,7 @@ export const BalanceCard = React.memo(function BlogCard() {
  const { client } = useContext(ClientContext)
  return (
    <Card className={styles.root}>
-      <CardHeader
-        avatar={<img src={logo} style={{ width: 75 }} />}
-        className={styles.media}
-      />
-      <CardContent className={styles.content}>
+      <CardContent>
        <BalanceCardField
          primaryText="Balance"
          subText={client.balance}
@@ -84,7 +84,7 @@ export const Nav = () => {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
-        marginTop: theme.spacing(10),
+        marginTop: theme.spacing(6),
      }}
    >
      <List>
@@ -4,10 +4,12 @@ import { Card, CardContent, CardHeader, useTheme } from '@material-ui/core'
 export const NymCard = ({
  title,
  subheader,
+  noPadding,
  children,
 }: {
  title: string
  subheader?: string
+  noPadding?: boolean
  children: React.ReactElement
 }) => {
  const theme = useTheme()
@@ -26,7 +28,7 @@ export const NymCard = ({
      <CardContent
        style={{
          background: theme.palette.grey[50],
-          padding: theme.spacing(2, 5),
+          padding: noPadding ? 0 : theme.spacing(2, 5),
        }}
      >
        {children}
@@ -1,6 +1,9 @@
 import React from 'react'
 import { BalanceCard } from './BalanceCard'
 import { Nav } from './Nav'
+import Logo from '../images/logo.png'
+import { theme } from '../theme'
+import { Divider } from '@material-ui/core'

 export const Page = ({ children }: { children: React.ReactElement }) => {
  return (
@@ -24,7 +27,23 @@ export const Page = ({ children }: { children: React.ReactElement }) => {
          borderBottomRightRadius: 10,
        }}
      >
-        <BalanceCard />
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            marginTop: theme.spacing(6),
+          }}
+        >
+          <img src={Logo} style={{ width: 75 }} />
+        </div>
+        <Divider
+          light
+          variant="middle"
+          style={{
+            background: theme.palette.grey[100],
+            marginTop: theme.spacing(6),
+          }}
+        />
        <Nav />
        <div />
      </div>
@@ -0,0 +1,31 @@
+import { useCallback, useContext, useState } from 'react'
+import { ClientContext } from '../context/main'
+
+export const useGetBalance = () => {
+  const { client } = useContext(ClientContext)
+  const [isLoading, setIsLoading] = useState(false)
+  const [balanceCheckError, setBalanceCheckError] = useState(null)
+  const [accountBalance, setAccountBalance] = useState<number>()
+
+  const getBalance = useCallback(async () => {
+    if (client) {
+      setIsLoading(true)
+
+      try {
+        const value = await Promise.resolve(1000)
+        setAccountBalance(value)
+        setIsLoading(false)
+      } catch (e) {
+        setBalanceCheckError(e)
+      }
+    }
+  }, [])
+
+  return {
+    balanceCheckError,
+    isBalanceLoading: isLoading,
+    accountBalance,
+    printedBalance: '',
+    getBalance,
+  }
+}
@@ -33,6 +33,7 @@ export const Balance = () => {
                    type="submit"
                    onClick={() => {}}
                    disabled={false}
+                    disableElevation
                    startIcon={<Refresh />}
                  >
                    Refresh
@@ -0,0 +1,189 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Checkbox,
+  FormControlLabel,
+  Grid,
+  InputAdornment,
+  TextField,
+  Theme,
+  useMediaQuery,
+} from '@material-ui/core'
+import { EnumNodeType } from '../../types/global'
+import { useTheme } from '@material-ui/styles'
+
+type TBondNodeFormProps = {
+  // minimumBond: Coin
+  // onSubmit: (values: BondingInformation) => void
+}
+
+export const BondNodeForm = () => {
+  const [advancedShown, setAdvancedShown] = React.useState(false)
+  const [type, setType] = useState(EnumNodeType.Mixnode)
+
+  const theme: Theme = useTheme()
+  const matches = useMediaQuery('(min-width:768px)')
+
+  return (
+    <form>
+      <div style={{ padding: theme.spacing(3) }}>
+        <Grid container spacing={3}>
+          <Grid item xs={12}>
+            <TextField
+              variant="outlined"
+              required
+              id="identityKey"
+              name="identityKey"
+              label="Identity key"
+              fullWidth
+            />
+          </Grid>
+          <Grid item xs={12}>
+            <TextField
+              variant="outlined"
+              required
+              id="sphinxKey"
+              name="sphinxKey"
+              label="Sphinx key"
+              fullWidth
+            />
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <TextField
+              variant="outlined"
+              required
+              id="amount"
+              name="amount"
+              label="Amount to bond"
+              fullWidth
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">punks</InputAdornment>
+                ),
+              }}
+            />
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <TextField
+              variant="outlined"
+              required
+              id="host"
+              name="host"
+              label="Host"
+              fullWidth
+            />
+          </Grid>
+
+          {/* if it's a gateway - get location */}
+          <Grid item xs={12} sm={6}>
+            {type === EnumNodeType.Gateway && (
+              <TextField
+                variant="outlined"
+                required
+                id="location"
+                name="location"
+                label="Location"
+                fullWidth
+              />
+            )}
+          </Grid>
+
+          <Grid item xs={12} sm={6}>
+            <TextField
+              variant="outlined"
+              required
+              id="version"
+              name="version"
+              label="Version"
+              fullWidth
+            />
+          </Grid>
+
+          <Grid item xs={12}>
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={advancedShown}
+                  onChange={() => {
+                    setAdvancedShown((shown) => {
+                      return !shown
+                    })
+                  }}
+                />
+              }
+              label="Use advanced options"
+            />
+          </Grid>
+
+          {advancedShown && (
+            <>
+              <Grid item xs={12} sm={4}>
+                <TextField
+                  variant="outlined"
+                  id="mixPort"
+                  name="mixPort"
+                  label="Mix Port"
+                  fullWidth
+                />
+              </Grid>
+              {type === EnumNodeType.Mixnode ? (
+                <>
+                  <Grid item xs={12} sm={4}>
+                    <TextField
+                      variant="outlined"
+                      id="verlocPort"
+                      name="verlocPort"
+                      label="Verloc Port"
+                      fullWidth
+                    />
+                  </Grid>
+
+                  <Grid item xs={12} sm={4}>
+                    <TextField
+                      variant="outlined"
+                      id="httpApiPort"
+                      name="httpApiPort"
+                      label="HTTP API Port"
+                      fullWidth
+                    />
+                  </Grid>
+                </>
+              ) : (
+                <Grid item xs={12} sm={4}>
+                  <TextField
+                    variant="outlined"
+                    id="clientsPort"
+                    name="clientsPort"
+                    label="client WS API Port"
+                    fullWidth
+                  />
+                </Grid>
+              )}
+            </>
+          )}
+        </Grid>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          borderTop: `1px solid ${theme.palette.grey[200]}`,
+          background: theme.palette.grey[100],
+          padding: theme.spacing(2),
+        }}
+      >
+        <Button
+          variant="contained"
+          color="primary"
+          type="submit"
+          size="large"
+          disableElevation
+        >
+          Bond
+        </Button>
+      </div>
+    </form>
+  )
+}
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Layout, NymCard, Page } from '../../components'
+import { BondNodeForm } from './BondForm'
+
+export const Bond = () => {
+  return (
+    <Page>
+      <Layout>
+        <NymCard title="Bond" subheader="Bond a node or gateway" noPadding>
+          <BondNodeForm />
+        </NymCard>
+      </Layout>
+    </Page>
+  )
+}
@@ -3,6 +3,7 @@ import { Switch, Route } from 'react-router-dom'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { NotFound } from './404'
 import { Balance } from './balance'
+import { Bond } from './bond/bond'
 import { Receive } from './receive'
 import { Send } from './send'
 import { SignIn } from './sign-in'
@@ -16,6 +17,9 @@ export const Routes = () => (
      <Route path="/balance">
        <Balance />
      </Route>
+      <Route path="/bond">
+        <Bond />
+      </Route>
      <Route path="/signin">
        <SignIn />
      </Route>
@@ -76,6 +76,7 @@ export const SignIn = () => {
                  type="submit"
                  disabled={loading}
                  size="large"
+                  disableElevation
                >
                  Sign In
                </Button>
@@ -10,6 +10,22 @@ export const theme = createTheme({
    MuiButton: {
      containedPrimary: {
        color: 'white',
+        borderRadius: 50,
+      },
+      contained: {
+        padding: '12px 24px',
+      },
+      containedSizeLarge: {
+        padding: '12px 24px',
+      },
+    },
+    MuiOutlinedInput: {
+      root: {
+        borderRadius: 50,
+        background: '#fff',
+      },
+      notchedOutline: {
+        margin: -2,
      },
    },
  },
@@ -0,0 +1,9 @@
+export enum EnumNodeType {
+  Mixnode = 'Mixnode',
+  Gateway = 'Gateway',
+}
+
+export type TNodeOwnership = {
+  ownsMixnode: boolean
+  ownsGateway: boolean
+}
@@ -1127,6 +1127,13 @@
  "resolved" "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz"
  "version" "0.3.0"

+"@types/bs58@^4.0.1":
+  "integrity" "sha512-yfAgiWgVLjFCmRv8zAcOIHywYATEwiTVccTLnRp6UxTNavT55M9d/uhK3T03St/+8/z/wW+CRjGKUNmEqoHHCA=="
+  "resolved" "https://registry.npmjs.org/@types/bs58/-/bs58-4.0.1.tgz"
+  "version" "4.0.1"
+  dependencies:
+    "base-x" "^3.0.6"
+
 "@types/cacheable-request@^6.0.1":
  "integrity" "sha512-B3xVo+dlKM6nnKTcmm5ZtY/OL8bOAOd2Olee9M1zft65ox50OzjEHW91sDiU9j6cvW8Ejg1/Qkf4xd2kugApUA=="
  "resolved" "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.2.tgz"
@@ -1674,6 +1681,13 @@
  "resolved" "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz"
  "version" "1.0.2"

+"base-x@^3.0.2", "base-x@^3.0.6":
+  "integrity" "sha512-Rl/1AWP4J/zRrk54hhlxH4drNxPJXYUaKffODVI53/dAsV4t9fBxyxYKAVPU1XBHxYwOWP9h9H0hM2MVw4YfJA=="
+  "resolved" "https://registry.npmjs.org/base-x/-/base-x-3.0.8.tgz"
+  "version" "3.0.8"
+  dependencies:
+    "safe-buffer" "^5.0.1"
+
 "base@^0.11.1":
  "integrity" "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg=="
  "resolved" "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz"
@@ -1866,6 +1880,13 @@
    "escalade" "^3.1.1"
    "node-releases" "^1.1.75"

+"bs58@^4.0.1":
+  "integrity" "sha1-vhYedsNU9veIrkBx9j806MTwpCo="
+  "resolved" "https://registry.npmjs.org/bs58/-/bs58-4.0.1.tgz"
+  "version" "4.0.1"
+  dependencies:
+    "base-x" "^3.0.2"
+
 "buffer-alloc-unsafe@^1.1.0":
  "integrity" "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
  "resolved" "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz"