UI updates

joinmarket-webui · Jan 4, 2022 · c838a7b · c838a7b
1 parent 1b2b53c
commit c838a7b
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 39 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -2,9 +2,9 @@ import { useState, useEffect, useRef } from 'react'
 import { Route, Routes, Link } from 'react-router-dom'
 import * as rb from 'react-bootstrap'
 import Wallets from './Wallets'
-import Payment from './Payment'
 import CreateWallet from './CreateWallet'
-import Maker from './Maker'
+import Send from './Send'
+import Earn from './Earn'
 import Receive from './Receive'
 import CurrentWallet from './CurrentWallet'
 import { getSession, setSession, clearSession } from '../session'
@@ -113,13 +113,12 @@ export default function App() {
 
   const nav = connectionError ? null : (
     <rb.Nav className="text-start">
-      {currentWallet &&
-        <>
-          <Link to="/payment" className="nav-link">Send</Link>
-          <Link to="/receive" className="nav-link">Receive</Link>
-          <Link to="/maker" className="nav-link">Earn</Link>
-        </>}
-      <Link to="/create-wallet" className="nav-link">Create Wallet</Link>
+      {currentWallet
+        ? <>
+            <Link to="/payment" className="nav-link">Send</Link>
+            <Link to="/receive" className="nav-link">Receive</Link>
+          </>
+        : <Link to="/create-wallet" className="nav-link">Create Wallet</Link>}
     </rb.Nav>)
 
   return (
@@ -153,7 +152,22 @@ export default function App() {
                 {currentWallet && (
                   <rb.Nav className="ms-sm-auto ms-lg-0 d-block order-sm-0">
                     <Link to="/wallet" className="nav-link d-inline-block">{walletDisplayName(currentWallet.name)}</Link>
-                    {!connectionError && <rb.Navbar.Text> · YG {makerRunning ? 'on' : 'off'}{coinjoinInProcess ? ', Coinjoining' : ''}</rb.Navbar.Text>}
+                    <rb.Navbar.Text> · </rb.Navbar.Text>
+                    <Link to="/earn" className="nav-link d-inline-flex align-items-center">
+                      Earn
+                      <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" className="ms-2" viewBox="0 0 16 16">{makerRunning
+                        ? <path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" />
+                        : <path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z" />}
+                      </svg>
+                    </Link>
+                    {coinjoinInProcess &&
+                      <rb.Navbar.Text> ·
+                        Joining
+                        <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" className="ms-2" viewBox="0 0 16 16">
+                          <path d="M8 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
+                          <path d="M9.5 2c-.9 0-1.75.216-2.501.6A5 5 0 0 1 13 7.5a6.5 6.5 0 1 1-13 0 .5.5 0 0 1 1 0 5.5 5.5 0 0 0 8.001 4.9A5 5 0 0 1 3 7.5a6.5 6.5 0 0 1 13 0 .5.5 0 0 1-1 0A5.5 5.5 0 0 0 9.5 2zM8 3.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" />
+                        </svg>
+                      </rb.Navbar.Text>}
                   </rb.Nav>)}
               </>}
         </rb.Container>
@@ -167,8 +181,8 @@ export default function App() {
               {currentWallet &&
                 <>
                   <Route path='wallet' element={<CurrentWallet currentWallet={currentWallet} />} />
-                  <Route path='payment' element={<Payment currentWallet={currentWallet} />} />
-                  <Route path='maker' element={<Maker currentWallet={currentWallet} makerRunning={makerRunning} />} />
+                  <Route path='payment' element={<Send currentWallet={currentWallet} />} />
+                  <Route path='earn' element={<Earn currentWallet={currentWallet} makerRunning={makerRunning} coinjoinInProcess={coinjoinInProcess} />} />
                   <Route path='receive' element={<Receive currentWallet={currentWallet} />} />
                 </>}
             </Routes>}

diff --git a/src/components/CurrentWallet.jsx b/src/components/CurrentWallet.jsx
@@ -78,15 +78,15 @@ export default function CurrentWallet ({ currentWallet }) {
       {walletInfo && walletInfo?.total_balance &&
         <>
           <p>Total Balance: {valueToUnit(walletInfo.total_balance, unit)}</p>
-          <rb.Form.Check type="switch" label="Display amounts in SATS" checked={unit === SATS} onChange={(e) => setAndPersistUnit(e.target.checked ? SATS : BTC)} />
+          <p><rb.Form.Check type="switch" label="Display amounts in SATS" checked={unit === SATS} onChange={(e) => setAndPersistUnit(e.target.checked ? SATS : BTC)} /></p>
         </>}
+      {walletInfo && <DisplayAccounts accounts={walletInfo.accounts} unit={unit} className="mb-4" />}
       {fidelityBonds?.length && (
-        <div className="my-4 pe-3">
+        <div className="mt-5 mb-3 pe-3">
           <h5>Fidelity Bonds</h5>
           <DisplayUTXOs utxos={fidelityBonds} unit={unit} className="pe-2" />
         </div>)}
-      {walletInfo && <DisplayAccounts accounts={walletInfo.accounts} unit={unit} />}
-      {utxos && <rb.Button variant="outline-dark" onClick={() => { setShowUTXO(!showUTXO) }} className="my-3">{showUTXO ? 'Hide UTXOs' : 'Show UTXOs'}</rb.Button>}
+      {utxos && <rb.Button variant="outline-dark" onClick={() => { setShowUTXO(!showUTXO) }} className="mb-3">{showUTXO ? 'Hide UTXOs' : 'Show UTXOs'}</rb.Button>}
       {utxos && showUTXO && <DisplayAccountUTXOs utxos={utxos} unit={unit} className="mt-3" />}
     </div>
   )

diff --git a/src/components/DisplayAccounts.jsx b/src/components/DisplayAccounts.jsx
@@ -35,7 +35,7 @@ export default function DisplayAccounts({ accounts, unit, ...props }) {
                   </rb.Row>
                   <rb.Row className="w-100">
                     <rb.Col xs="auto">
-                      <code>{derivation}</code>
+                      <code className="text-break">{derivation}</code>
                     </rb.Col>
                     <rb.Col className="d-flex align-items-center">
                       <code className="text-break">{xpub}</code>
@@ -44,10 +44,10 @@ export default function DisplayAccounts({ accounts, unit, ...props }) {
                   {entries.map(({ address, amount, hd_path: hdPath, labels }) => (
                     <rb.Row key={address} className="w-100 mt-3">
                       <rb.Col xs="auto">
-                        <code>{hdPath}</code>
+                        <code className="text-break">{hdPath}</code>
                       </rb.Col>
                       <rb.Col>
-                        {address}
+                        <code className="text-break">{address}</code>
                         {' '}
                         {labels && <span className="badge bg-info">{labels}</span>}
                       </rb.Col>

diff --git a/src/components/DisplayUTXOs.jsx b/src/components/DisplayUTXOs.jsx
@@ -9,9 +9,9 @@ export default function DisplayUTXOs({ utxos, unit, ...props}) {
         <rb.ListGroup.Item key={utxo.utxo} className="px-0">
           <rb.Row className="w-100">
             <rb.Col>
-              {utxo.address}
+              <code className="text-break">{utxo.address}</code>
             </rb.Col>
-            <rb.Col className="d-flex align-items-center justify-content-end pe-5">
+            <rb.Col className="d-flex align-items-center justify-content-end pe-5 text-break">
               {valueToUnit(utxo.value, unit)}
             </rb.Col>
           </rb.Row>

diff --git a/src/components/Maker.jsx → src/components/Earn.jsx b/src/components/Maker.jsx → src/components/Earn.jsx
@@ -1,15 +1,15 @@
 import React from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import * as rb from 'react-bootstrap'
-import { serialize } from '../utils'
 
 const OFFERTYPE_REL = 'sw0reloffer'
 const OFFERTYPE_ABS = 'sw0absoffer'
 
-export default function Maker({ currentWallet, makerRunning }) {
+export default function Earn({ currentWallet, makerRunning }) {
   const [validated, setValidated] = useState(false)
   const [alert, setAlert] = useState(null)
   const [isSending, setIsSending] = useState(false)
+  const [isWaiting, setIsWaiting] = useState(false)
   const [offertype, setOffertype] = useState(window.localStorage.getItem('jm-offertype') || OFFERTYPE_REL)
   const [feeRel, setFeeRel] = useState(parseFloat(window.localStorage.getItem('jm-feeRel')) || 0.0003)
   const [feeAbs, setFeeAbs] = useState(parseInt(window.localStorage.getItem('jm-feeAbs'), 10) || 250)
@@ -57,14 +57,15 @@ export default function Maker({ currentWallet, makerRunning }) {
 
     setAlert(null)
     setIsSending(true)
+    setIsWaiting(false)
     try {
       const res = await fetch(`/api/v1/wallet/${name}/maker/start`, opts)
 
       if (res.ok) {
-        // FIXME: Right now there is no response data to check if maker is running
-        // const data = await res.json()
-        // console.log(data)
-        // setAlert({ variant: 'success', message: 'Maker started.' })
+        // FIXME: Right now there is no response data to check if maker got started
+        // https://github.com/JoinMarket-Org/joinmarket-clientserver/issues/1120
+        setAlert({ variant: 'success', message: 'The service is starting.' })
+        setIsWaiting(true)
       } else {
         const { message } = await res.json()
         setAlert({ variant: 'danger', message })
@@ -76,6 +77,11 @@ export default function Maker({ currentWallet, makerRunning }) {
     }
   }
 
+  useEffect(() => {
+    setIsWaiting(false)
+    setAlert(null)
+  }, [makerRunning]);
+
   const stopMakerService = async () => {
     const { name, token } = currentWallet
     const opts = {
@@ -84,14 +90,15 @@ export default function Maker({ currentWallet, makerRunning }) {
 
     setAlert(null)
     setIsSending(true)
+    setIsWaiting(false)
     try {
       const res = await fetch(`/api/v1/wallet/${name}/maker/stop`, opts)
 
       if (res.ok) {
         // FIXME: Right now there is no response data to check if maker got stopped
-        // const data = await res.json()
-        // console.log(data)
-        // setAlert({ variant: 'success', message: 'Maker stopped.' })
+        // https://github.com/JoinMarket-Org/joinmarket-clientserver/issues/1120
+        setAlert({ variant: 'success', message: 'The service is stopping.' })
+        setIsWaiting(true)
       } else {
         const { message } = await res.json()
         setAlert({ variant: 'danger', message })
@@ -123,27 +130,28 @@ export default function Maker({ currentWallet, makerRunning }) {
 
   return (
     <rb.Form onSubmit={onSubmit} validated={validated} noValidate>
-      <h1>Maker Service</h1>
+      <h1>Earn</h1>
       {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
-      {makerRunning === false &&
+      <p>Service {makerRunning ? 'running' : 'not running'}.</p>
+      {!makerRunning && !isWaiting &&
         <>
           <rb.Form.Group className="mb-3" controlId="offertype">
             <rb.Form.Check type="switch" label="Relative offer" checked={isRelOffer} onChange={(e) => setAndPersistOffertype(e.target.checked ? OFFERTYPE_REL : OFFERTYPE_ABS)} />
           </rb.Form.Group>
           {isRelOffer
             ? <rb.Form.Group className="mb-3" controlId="feeRel">
                 <rb.Form.Label>Relative Fee (percent)</rb.Form.Label>
-                <rb.Form.Control type="number" name="feeRel" required step={0.0001} value={feeRel} min={0} max={0.1} style={{ width: '12ch' }} onChange={(e) => setAndPersistFeeRel(e.target.value)} />
+                <rb.Form.Control type="number" name="feeRel" required step={0.0001} value={feeRel} min={0} max={0.1} style={{ width: '16ch' }} onChange={(e) => setAndPersistFeeRel(e.target.value)} />
                 <rb.Form.Control.Feedback type="invalid">Please provide a relative fee.</rb.Form.Control.Feedback>
               </rb.Form.Group>
             : <rb.Form.Group className="mb-3" controlId="feeAbs">
                 <rb.Form.Label>Absolute Fee in SATS</rb.Form.Label>
-                <rb.Form.Control type="number" name="feeAbs" required step={1} value={feeAbs} min={0} style={{ width: '12ch' }} onChange={(e) => setAndPersistFeeAbs(e.target.value)} />
+                <rb.Form.Control type="number" name="feeAbs" required step={1} value={feeAbs} min={0} style={{ width: '16ch' }} onChange={(e) => setAndPersistFeeAbs(e.target.value)} />
                 <rb.Form.Control.Feedback type="invalid">Please provide an absolute fee.</rb.Form.Control.Feedback>
               </rb.Form.Group>}
           <rb.Form.Group className="mb-3" controlId="feeContrib">
             <rb.Form.Label>Transaction Fee Contribution in SATS</rb.Form.Label>
-            <rb.Form.Control type="number" name="feeContrib" required step={1} value={feeContrib} min={0} style={{ width: '12ch' }} onChange={(e) => setAndPersistFeeContrib(e.target.value)} />
+            <rb.Form.Control type="number" name="feeContrib" required step={1} value={feeContrib} min={0} style={{ width: '16ch' }} onChange={(e) => setAndPersistFeeContrib(e.target.value)} />
             <rb.Form.Control.Feedback type="invalid">Please provide a value.</rb.Form.Control.Feedback>
           </rb.Form.Group>
           <rb.Form.Group className="mb-3" controlId="minsize">

diff --git a/src/components/Receive.jsx b/src/components/Receive.jsx
@@ -37,7 +37,7 @@ const Receive = ({ currentWallet }) => {
         .finally(() => setIsLoading(false))
 
     }
-    
+
     if (ACCOUNTS.includes(account)) {
       fetchAddress(account)
     }
@@ -59,7 +59,7 @@ const Receive = ({ currentWallet }) => {
 
   return (
     <rb.Form onSubmit={onSubmit} validated={validated} noValidate>
-      <h1>Receive Funds</h1>
+      <h1>Receive</h1>
       {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
       {address && (
         <div className="qr-container">

diff --git a/src/components/Payment.jsx → src/components/Send.jsx b/src/components/Payment.jsx → src/components/Send.jsx
@@ -106,7 +106,7 @@ export default function Payment({ currentWallet }) {
 
   return (
     <rb.Form onSubmit={onSubmit} validated={validated} noValidate>
-      <h1>Send Payment</h1>
+      <h1>Send</h1>
       {alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
       <rb.Form.Group className="mb-3" controlId="destination">
         <rb.Form.Label>Receiver Address</rb.Form.Label>

diff --git a/src/setupProxy.js b/src/setupProxy.js
@@ -10,6 +10,7 @@ module.exports = app => {
   app.use('/ws/', createProxyMiddleware({
     target: 'wss://localhost:28183',
     changeOrigin: true,
+    secure: false,
     ws: true
   }))
 }