From fadf91ef7a9bc253bdc246ce0c5675258690b5af Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Wed, 3 Nov 2021 22:00:57 +0100 Subject: [PATCH] Format files --- joinmarket/src/App.js | 711 ++++++++---------- joinmarket/src/App.test.js | 8 - joinmarket/src/components/Button.jsx | 17 +- joinmarket/src/components/CreateWallet.jsx | 122 ++- joinmarket/src/components/DisplayMixdepth.jsx | 187 +++-- joinmarket/src/components/DisplayUTXOs.jsx | 35 +- joinmarket/src/components/DisplayWallet.jsx | 124 ++- joinmarket/src/components/Homepage.css | 8 +- joinmarket/src/components/Maker.jsx | 90 +-- joinmarket/src/components/Payment.jsx | 208 +++-- joinmarket/src/components/Receive.jsx | 169 ++--- joinmarket/src/components/Wallet.jsx | 30 +- joinmarket/src/components/Wallets.jsx | 16 +- joinmarket/src/components/createWallet.css | 21 +- joinmarket/src/components/displayMixdepth.css | 22 +- joinmarket/src/components/homepage.jsx | 42 +- joinmarket/src/components/maker.css | 178 ++--- joinmarket/src/components/payment.css | 177 +++-- joinmarket/src/components/receive.css | 174 ++--- joinmarket/src/components/utils.jsx | 15 +- joinmarket/src/components/wallet.css | 6 +- joinmarket/src/index.css | 7 +- joinmarket/src/index.js | 3 +- 23 files changed, 1083 insertions(+), 1287 deletions(-) delete mode 100644 joinmarket/src/App.test.js diff --git a/joinmarket/src/App.js b/joinmarket/src/App.js index a5951daa..8bdab8cf 100644 --- a/joinmarket/src/App.js +++ b/joinmarket/src/App.js @@ -1,476 +1,399 @@ -import './App.css'; -import '@ibunker/bitcoin-react/dist/index.css'; +import './App.css' +import '@ibunker/bitcoin-react/dist/index.css' import {useState,useEffect} from 'react' -import Wallets from './components/Wallets'; -import Payment from './components/Payment'; -import CreateWallet from './components/CreateWallet'; -import Homepage from './components/homepage'; -import Maker from './components/Maker'; -import Receive from './components/Receive'; +import Wallets from './components/Wallets' +import Payment from './components/Payment' +import CreateWallet from './components/CreateWallet' +import Homepage from './components/homepage' +import Maker from './components/Maker' +import Receive from './components/Receive' import DisplayWallet from './components/DisplayWallet' -import * as rb from 'react-bootstrap'; +import * as rb from 'react-bootstrap' import github_logo from './github.svg' import twitter_logo from './twitter.svg' import useInterval from './components/utils' -import { BrowserRouter as Router, Route ,Switch} from 'react-router-dom'; -import { useGlobal } from 'reactn'; +import { BrowserRouter as Router, Route ,Switch} from 'react-router-dom' +import { useGlobal } from 'reactn' function App() { - const [walletList,setWalletList] = useState([]) - const [makerStarted, setmakerStarted] = useGlobal("makerStarted"); - const [walletName, setWalletName] = useGlobal("walletName"); - const [coinjoinInProcess, setCoinjoinInProcess] = useGlobal("coinjoinInProcess"); - const [, setCurrentStatusMessage] = useGlobal("currentStatusMessage"); + const [walletList, setWalletList] = useState([]) + const [makerStarted, setmakerStarted] = useGlobal('makerStarted') + const [walletName, setWalletName] = useGlobal('walletName') + const [coinjoinInProcess, setCoinjoinInProcess] = useGlobal('coinjoinInProcess') + const [, setCurrentStatusMessage] = useGlobal('currentStatusMessage') const listWallets = async () =>{ - const res = await fetch('/api/v1/wallet/all'); - const data = await res.json(); - const walletList = data.wallets; - return walletList; + const res = await fetch('/api/v1/wallet/all') + const data = await res.json() + return data.wallets } + const resetWalletSessionStorage = async () =>{ - sessionStorage.clear(); - setWalletName("No wallet loaded"); - setmakerStarted(false); - setCoinjoinInProcess(false); + sessionStorage.clear() + setWalletName('No wallet loaded') + setmakerStarted(false) + setCoinjoinInProcess(false) } const getCurrentStatusMessage = () => - `Wallet: ${walletName}, YG ${makerStarted ? 'started' : 'not running'}, Coinjoin in process: ${coinjoinInProcess}`; + `Wallet: ${walletName}, YG ${makerStarted ? 'started' : 'not running'}, Coinjoin in process: ${coinjoinInProcess}` useInterval(() => { - const sessionClear = async () =>{ + const sessionClear = async () => { try { - const res = await fetch('/api/v1/session'); - const { session, maker_running, wallet_name, coinjoin_in_process } = await res.json(); + const res = await fetch('/api/v1/session') + const { session, maker_running, wallet_name, coinjoin_in_process } = await res.json() if (session === false) { - console.log("no wallet in backend"); + console.log('no wallet in backend') // This status requires us to clear, especially // the auth state, so we just reset everything: - return resetWalletSessionStorage(); + return resetWalletSessionStorage() } - setmakerStarted(maker_running); - setWalletName(wallet_name); - setCoinjoinInProcess(coinjoin_in_process); - setCurrentStatusMessage(getCurrentStatusMessage()); + setmakerStarted(maker_running) + setWalletName(wallet_name) + setCoinjoinInProcess(coinjoin_in_process) + setCurrentStatusMessage(getCurrentStatusMessage()) } catch(e) { - console.error(e); - alert("Lost connection to backend! Please restart the backend server."); - sessionStorage.clear(); + console.error(e) + alert('Lost connection to backend! Please restart the backend server.') + sessionStorage.clear() } } - sessionClear(); + sessionClear() + }, 8*1000) - }, 8*1000); - - useEffect(()=>{ - - const getWallets = async()=>{ - const wallets = await listWallets(); - setWalletList(wallets); + useEffect(() => { + const getWallets = async () => { + const wallets = await listWallets() + setWalletList(wallets) } - - getWallets(); - - },[]) - + getWallets() + }, []) const unlockWallet = async (name) => { - const authData = JSON.parse(sessionStorage.getItem('auth')); + const authData = JSON.parse(sessionStorage.getItem('auth')) if (authData && authData.login) { return alert(authData.name === name // unlocking same wallet ? `${name} is already unlocked` // unlocking another wallet while one is already unlocked - : `${authData.name} is currently in use, please lock it first`); + : `${authData.name} is currently in use, please lock it first`) } else { try { - const password = prompt(`Enter the passphrase for ${name}`); + const password = prompt(`Enter the passphrase for ${name}`) const res = await fetch(`/api/v1/wallet/${name}/unlock`,{ method: 'POST', headers: { 'Content-type': 'application/json' }, body: JSON.stringify({ password }), }) - const data = await res.json(); + const data = await res.json() console.log(data) - const token = data.token; - sessionStorage.setItem('auth', JSON.stringify({ login: true, token, name })); + const token = data.token + sessionStorage.setItem('auth', JSON.stringify({ login: true, token, name })) } catch (e) { - console.error(e); - alert('Something went wrong, please try again!'); + console.error(e) + alert('Something went wrong, please try again!') } } } - const lockWallet = async(name)=>{ - let authData =JSON.parse(sessionStorage.getItem('auth')); - if(!authData || authData.login===false || authData.name!==name){ - alert("Please unlock "+name+" first") - return; - } + const lockWallet = async (name) => { + const authData = JSON.parse(sessionStorage.getItem('auth')) + if (!authData || !authData.login || authData.name !== name) { + return alert(`Please unlock ${name} first`) + } - try{ - let token = "Bearer "+authData.token - const res = await fetch(`/api/v1/wallet/${name}/lock`,{ - method:"GET", - headers:{ - 'Authorization':token + try { + const res = await fetch(`/api/v1/wallet/${name}/lock`, { + headers: { + 'Authorization': `Bearer ${authData.token}` } - }); - sessionStorage.setItem('auth',JSON.stringify({ - login:false, - token:'', - name:'' - + }) + sessionStorage.setItem('auth', JSON.stringify({ + login: false, + token: '', + name: '' })) - const data = await res.json(); - console.log(data); - alert("locked wallet succesfully") - } - catch(e){ - alert("Error while locking.") + const data = await res.json() + console.log(data) + alert('Wallet locked succesfully') + } catch (e) { + console.error(e) + alert('Error while locking.') + } + } + + const listWalletInfo = async (name) => { + const authData = JSON.parse(sessionStorage.getItem('auth')) + const res = await fetch(`/api/v1/wallet/${name}/display`, { + headers:{ + 'Authorization': `Bearer ${authData.token}` } + }) + const { walletinfo } = await res.json() + const balance = walletinfo.total_balance + const mix_depths = walletinfo.accounts + const wallet_info = { balance } + wallet_info[mix_depths[0].account] = mix_depths[0].account_balance + wallet_info[mix_depths[1].account] = mix_depths[1].account_balance + wallet_info[mix_depths[2].account] = mix_depths[2].account_balance + wallet_info[mix_depths[3].account] = mix_depths[3].account_balance + wallet_info[mix_depths[4].account] = mix_depths[4].account_balance + + return [walletinfo] + } + + const displayWallet = async (name) => { + const authData = JSON.parse(sessionStorage.getItem('auth')) + if (!authData || !authData.login || authData.name !== name) { + return alert(`Please unlock ${name} first`) } - const listWalletInfo = async(name)=>{ - let authData =JSON.parse(sessionStorage.getItem('auth')); - let token = "Bearer "+authData.token - const res = await fetch(`/api/v1/wallet/${name}/display`,{ - method:"GET", - headers:{ - 'Authorization':token - } - }); - const { walletinfo } = await res.json(); - const balance = walletinfo.total_balance; - const mix_depths = walletinfo.accounts; - const wallet_info = { balance } - wallet_info[mix_depths[0].account] = mix_depths[0].account_balance - wallet_info[mix_depths[1].account] = mix_depths[1].account_balance - wallet_info[mix_depths[2].account] = mix_depths[2].account_balance - wallet_info[mix_depths[3].account] = mix_depths[3].account_balance - wallet_info[mix_depths[4].account] = mix_depths[4].account_balance + const res = await fetch(`/api/v1/wallet/${name}/display`, { + headers:{ + 'Authorization': `Bearer ${authData.token}` + } + }) - return [walletinfo]; + const { walletinfo } = await res.json() + const balance = walletinfo.total_balance + const mix_depths = walletinfo.accounts + const wallet_info={} + wallet_info['balance'] = balance + wallet_info[mix_depths[0].account] = mix_depths[0].account_balance + wallet_info[mix_depths[1].account] = mix_depths[1].account_balance + wallet_info[mix_depths[2].account] = mix_depths[2].account_balance + wallet_info[mix_depths[3].account] = mix_depths[3].account_balance + wallet_info[mix_depths[4].account] = mix_depths[4].account_balance + console.log(wallet_info) + return wallet_info + } + + const createWallet = async (walletname, password) => { + const authData = JSON.parse(sessionStorage.getItem('auth')) + if (!authData || !authData.login) { + try { + const wallettype = 'sw' + const res = await fetch(`/api/v1/wallet/create`, { + method: 'POST', + headers: { 'Content-type': 'application/json', }, + body: JSON.stringify({ + password, + walletname, + wallettype + }), + }) + + const { seedphrase, token } = await res.json() + alert('Wallet created succesfully') + // TODO: figure out a safer way to show the seedphrase + alert(seedphrase) + sessionStorage.setItem('auth', JSON.stringify({ login: true, token, name: walletname })) + } catch (e) { + console.error(e) + //some other error occurs where wallet is not created + alert('Unexpected error! Please try again') + } + } else { + alert(`${authData.name} is in use! Please lock it first.`) } + } - const displayWallet = async(name)=>{ - - let authData =JSON.parse(sessionStorage.getItem('auth')); - if(authData.login===false || authData.name!==name){ - alert("Please unlock "+name+" first") - return; + const makePayment = async (name, mixdepth, amount_sats,destination) => { + const authData = JSON.parse(sessionStorage.getItem('auth')) + if (authData && authData.login === true){ + try { + const res = await fetch(`/api/v1/wallet/${name}/taker/direct-send`, { + method:'POST', + headers: { + 'Content-type': 'application/json', + 'Authorization': `Bearer ${authData.token}` + }, + body: JSON.stringify({ + mixdepth, + amount_sats, + destination + }), + }) + const data = await res.json() + console.log(data) + alert('Payment Succesful!') + } catch(e) { + alert('Error while processing payment!') } - let token = "Bearer "+authData.token - const res = await fetch(`/api/v1/wallet/${name}/display`,{ - method:"GET", - headers:{ - 'Authorization':token - } - }); - const { walletinfo } = await res.json(); - const balance = walletinfo.total_balance; - const mix_depths = walletinfo.accounts; - const wallet_info={} - wallet_info['balance'] = balance; - wallet_info[mix_depths[0].account] = mix_depths[0].account_balance - wallet_info[mix_depths[1].account] = mix_depths[1].account_balance - wallet_info[mix_depths[2].account] = mix_depths[2].account_balance - wallet_info[mix_depths[3].account] = mix_depths[3].account_balance - wallet_info[mix_depths[4].account] = mix_depths[4].account_balance - console.log(wallet_info) - return wallet_info; + } else { + alert('please unlock wallet first') } + } - const createWallet = async(name,password)=>{ - const authData = JSON.parse(sessionStorage.getItem('auth')); - if (!authData || !authData.login) { - try { - const res = await fetch(`/api/v1/wallet/create`,{ - method:'POST', - headers: { 'Content-type': 'application/json', }, - body: JSON.stringify({ password, "walletname": name, "wallettype":"sw" }), - }) - - const { seedphrase, token } = await res.json(); - alert("Wallet created succesfully") - - //figure out a safer way to show the seedphrase - alert(seedphrase) - sessionStorage.setItem('auth', JSON.stringify({ login: true, token, name })) - } catch (e) { - console.error(e); - //some other error occurs where wallet is not created - alert('Unexpected error! Please try again') - } - } else{ - alert(`${authData.name} is in use! Please lock it first.`) + //route for frontend + const doCoinjoin = async (mixdepth, amount, counterparties, destination) => { + try { + const authData = JSON.parse(sessionStorage.getItem('auth')) + if (!authData || !authData.login || authData.name === '') { + return } - } - - const makePayment = async(name,mixdepth,amountSats,destination)=>{ - let authData =JSON.parse(sessionStorage.getItem('auth')); - if(authData!=null && authData.login===true){ - try{ - let token = "Bearer "+authData.token - const res = await fetch(`/api/v1/wallet/${name}/taker/direct-send`,{ - method:'POST', - headers: { - 'Content-type': 'application/json', - 'Authorization':token - }, - body: JSON.stringify({ - "mixdepth": mixdepth, - "amount_sats": amountSats, - "destination": destination - } - - ), - }) - const data = await res.json(); - console.log(data); - alert("Payment Succesful!") - } - catch(e){ - alert("Error while processing payment!") - } - - - } - else{ - alert("please unlock wallet first") - } - } - - //route for frontend - - const doCoinjoin = async(mixdepth,amount,counterparties,destination)=>{ - try{ - console.log("hellooo") - let authData = JSON.parse(sessionStorage.getItem('auth')); - - if(!authData|| authData.login===false || authData.name===''){ - return; - } - - let token = "Bearer "+authData.token; - let name = authData.name; - const res = await fetch(`/api/v1/wallet/${name}/taker/coinjoin`,{ - method:'POST', - headers: { - 'Content-type': 'application/json', - 'Authorization':token - }, - body: JSON.stringify({ - - "mixdepth": mixdepth, - "amount": amount, - "counterparties": counterparties, - "destination":destination - } - - ), - }) - const data = await res.json(); - console.log(data); - alert("Coinjoin in Progress!") - - } - catch(e){ - return; - } - } - - const startMakerService = async(txfee,cjfee_a,cjfee_r,ordertype,minsize)=>{ - let authData =JSON.parse(sessionStorage.getItem('auth')); - - if(!authData|| authData.login===false || authData.name===''){ - alert("Please unlock a wallet first") - return; - } - let name = authData.name - try{ - let token = "Bearer "+authData.token - const res = await fetch(`/api/v1/wallet/${name}/maker/start`,{ - method:"POST", - headers:{ - 'Authorization':token + const res = await fetch(`/api/v1/wallet/${authData.name}/taker/coinjoin`, { + method:'POST', + headers: { + 'Content-type': 'application/json', + 'Authorization': `Bearer ${authData.token}` }, body: JSON.stringify({ - "txfee":txfee, - "cjfee_a":cjfee_a, - "cjfee_r":cjfee_r, - "ordertype":ordertype, - "minsize":minsize - } - - ), - }); - - const data = await res.json(); - console.log(data); - } - - catch(e){ - alert("Error while starting service!") - } + mixdepth, + amount, + counterparties, + destination + }), + }) + const data = await res.json() + console.log(data) + alert('Coinjoin in Progress!') + } catch (e) { + console.error(e) + } + } + const startMakerService = async (txfee, cjfee_a, cjfee_r, ordertype, minsize) => { + const authData =JSON.parse(sessionStorage.getItem('auth')) + if (!authData || !authData.login || authData.name === ''){ + return alert('Please unlock a wallet first') } - const stopMakerService= async()=>{ - let authData =JSON.parse(sessionStorage.getItem('auth')); - if(authData===null ||authData.login===false || authData.name===''){ - alert('Wallet needs to be unlocked') - return; - } - try{ - let name = authData.name - let token = "Bearer "+authData.token - const res = await fetch(`/api/v1/wallet/${name}/maker/stop`,{ - method:"GET", - headers:{ - 'Authorization':token - }, + try { + const res = await fetch(`/api/v1/wallet/${authData.name}/maker/start`, { + method: 'POST', + headers:{ + 'Authorization': `Bearer ${authData.token}` + }, + body: JSON.stringify({ + txfee, + cjfee_a, + cjfee_r, + ordertype, + minsize }) - const data = await res.json(); - console.log(data); - alert("Maker service stopped") - } + }) - catch(e){ - alert("Error while stopping service!") - } + const data = await res.json() + console.log(data) + } catch (e) { + console.error(e) + alert('Error while starting service!') + } + } + + const stopMakerService = async () => { + const authData = JSON.parse(sessionStorage.getItem('auth')) + if (!authData || !authData.login || authData.name === '') { + return alert('Wallet needs to be unlocked') } - const getUTXOs = async()=>{ - try{ - let authData =JSON.parse(sessionStorage.getItem('auth')); - let token = "Bearer "+authData.token - if(!authData|| authData.login===false || authData.name===''){ - return; - } - let name = authData.name; - const res = await fetch(`/api/v1/wallet/${name}/utxos`, { - headers: { 'Authorization':token } - }); - const { utxos } = await res.json(); - return utxos; - } catch(e){ - return console.error(e); - } + try { + const res = await fetch(`/api/v1/wallet/${authData.name}/maker/stop`, { + headers:{ + 'Authorization': `Bearer ${authData.token}` + }, + }) + const data = await res.json() + console.log(data) + alert('Maker service stopped') + } catch (e) { + console.error(e) + alert('Error while stopping service!') } + } + const getUTXOs = async () => { + try { + const authData = JSON.parse(sessionStorage.getItem('auth')) + if (!authData || !authData.login || authData.name === '') { + return + } + const res = await fetch(`/api/v1/wallet/${authData.name}/utxos`, { + headers: { + 'Authorization': `Bearer ${authData.token}` + } + }) + const { utxos } = await res.json() + return utxos + } catch (e) { + console.error(e) + } + } return ( -
- - - - - Joinmarket - - - - Docs - Features - About - - - - github logo - - - twitter logo - - - - - - {getCurrentStatusMessage()} - - - +
+ + + Joinmarket + + + + Docs + Features + About + + + + github logo + + + twitter logo + + + + + + + {getCurrentStatusMessage()} + + +

- - ( - <> - - - )} - /> - - ( - <> - - - )} - /> - - - ( - <> - - - )} - /> - - ( - <> - - - )} - /> - - ( - <> - - - )} - /> - ( - <> - - - )} - /> - ( - <> - - - )} - /> - - {" "} - -
+ ( + + )} /> + ( + + )} /> + ( + + )} /> + ( + + )} /> + ( + + )} /> + ( + + )} /> + ( + + )} /> + +
- - - ); + ) } -export default App; +export default App diff --git a/joinmarket/src/App.test.js b/joinmarket/src/App.test.js deleted file mode 100644 index 1f03afee..00000000 --- a/joinmarket/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/joinmarket/src/components/Button.jsx b/joinmarket/src/components/Button.jsx index ba13a6e9..ec20d55b 100644 --- a/joinmarket/src/components/Button.jsx +++ b/joinmarket/src/components/Button.jsx @@ -1,11 +1,8 @@ -import React from "react"; -import "./button.css"; - -export const Button = ({name,children, type, onClick, buttonStyle, buttonSize}) => { - return ( - - ) -} +import React from 'react' +import './button.css' +export const Button = ({ name, children, type, onClick }) => ( + +) diff --git a/joinmarket/src/components/CreateWallet.jsx b/joinmarket/src/components/CreateWallet.jsx index 1a422134..85f29876 100644 --- a/joinmarket/src/components/CreateWallet.jsx +++ b/joinmarket/src/components/CreateWallet.jsx @@ -3,82 +3,60 @@ import { useState } from 'react' import './createWallet.css' import * as rb from 'react-bootstrap' -const CreateWallet = ({onCreate}) => { +const CreateWallet = ({ onCreate }) => { + const [wallet, setWallet] = useState('') + const [password, setPassword] = useState('') - const [wallet,setWallet] = useState('') - const [password,setPassword]=useState('') + const onSubmit = (e) => { + e.preventDefault() - const onSubmit = (e) => { - e.preventDefault() - - if (!wallet || !password) { - alert('Please add details') - return; - } - - onCreate(wallet,password) - setWallet('') - setPassword('') - } - return ( - -
- -

-
- Create Wallet -
+ if (!wallet || !password) { + alert('Please add details') + return; + } -
- - - - - - Wallet Name - - - setWallet(e.target.value)}/> - - - - - - - Password - - - setPassword(e.target.value)} /> - - - - - - - - -
- - {/*
- - - -

- -

- - - + onCreate(wallet, password) + setWallet('') + setPassword('') + } -
*/} -
- ) + return ( +
+
+ Create Wallet +
+ +
+ + + + + + Wallet Name + + + setWallet(e.target.value)} /> + + + + + + + Password + + + setPassword(e.target.value)} /> + + + + + + + + +
+
+ ) } export default CreateWallet diff --git a/joinmarket/src/components/DisplayMixdepth.jsx b/joinmarket/src/components/DisplayMixdepth.jsx index 5251cda6..740ee3bc 100644 --- a/joinmarket/src/components/DisplayMixdepth.jsx +++ b/joinmarket/src/components/DisplayMixdepth.jsx @@ -1,110 +1,99 @@ import React from 'react' import './displayMixdepth.css' -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom' import * as rb from 'react-bootstrap' -const DisplayMixdepth = ({walletInfo}) => { +const DisplayMixdepth = ({ walletInfo }) => { + const accounts = [] - const accounts = [] + for (const account_info of walletInfo.accounts) { + accounts.push(account_info) + } - for (const account_info of walletInfo.accounts){ - accounts.push(account_info) - } - - return ( -
- Total Balance: {walletInfo.total_balance} BTC -

- Maker Service -

- {accounts.map((account, index) => ( - -
- - - - -
- - - - - Account {accounts[index].account} - - - - Balance: {accounts[index].account_balance} BTC - - - - - Send {' '} - - - Receive - - - - - -
- - - - - - External Addresses Balance: {accounts[index].branches[0].balance} BTC -
- Extended Pubkey : {accounts[index].branches[0].branch.split("\t").pop()} -
- - {accounts[index].branches[0].entries.map((user, i) => ( -
- - -
- {accounts[index].branches[0].entries[i].labels} -
- - {accounts[index].branches[0].entries[i].address} {' '} - -
- amount: {accounts[index].branches[0].entries[i].amount} -
- - - -
- ))} - - - - Internal Addresses Balance: {accounts[index].branches[1].balance} BTC - - {accounts[index].branches[1].entries.map((user, j) => ( -
- - - {accounts[index].branches[0].entries[j].address} {' '} {accounts[index].branches[0].entries[j].labels} - -
- amount: {accounts[index].branches[0].entries[j].amount} -
- - - -
- ))} - - - - - - + return ( +
+ Total Balance: {walletInfo.total_balance} BTC +

+ Maker Service +

+ {accounts.map((account, index) => ( +
+ + + +
+ + + + Account {accounts[index].account} + + + Balance: {accounts[index].account_balance} BTC + + + Send {' '} + + + Receive + + +
- ))} + + + + + External Addresses Balance: {accounts[index].branches[0].balance} BTC +
+ Extended Pubkey : {accounts[index].branches[0].branch.split("\t").pop()} +
+ + {accounts[index].branches[0].entries.map((user, i) => ( +
+ + +
+ {accounts[index].branches[0].entries[i].labels} +
+ {accounts[index].branches[0].entries[i].address} {' '} + +
+ amount: {accounts[index].branches[0].entries[i].amount} +
+ + + +
+ ))} + + + + Internal Addresses Balance: {accounts[index].branches[1].balance} BTC + + {accounts[index].branches[1].entries.map((user, j) => ( +
+ + + {accounts[index].branches[0].entries[j].address} {' '} {accounts[index].branches[0].entries[j].labels} + +
+ amount: {accounts[index].branches[0].entries[j].amount} +
+ + + +
+ ))} + + + + + +
- ) + ))} +
+ ) } export default DisplayMixdepth diff --git a/joinmarket/src/components/DisplayUTXOs.jsx b/joinmarket/src/components/DisplayUTXOs.jsx index c06eced2..edbff301 100644 --- a/joinmarket/src/components/DisplayUTXOs.jsx +++ b/joinmarket/src/components/DisplayUTXOs.jsx @@ -1,22 +1,19 @@ import React from 'react' -const DisplayUTXOs = ({utxoID,utxo}) => { - return ( -
-

-

-

- Address: {utxo.address} -

- Value(Sats): {utxo.value} -

- Confirmations: {utxo.confirmations} -

- Mixdepth: {utxo.mixdepth} -

-
- ) -} - -export default DisplayUTXOs; +const DisplayUTXOs = ({ utxoID, utxo }) => ( +
+

+

+

+ Address: {utxo.address} +

+ Value(Sats): {utxo.value} +

+ Confirmations: {utxo.confirmations} +

+ Mixdepth: {utxo.mixdepth} +

+
+) +export default DisplayUTXOs diff --git a/joinmarket/src/components/DisplayWallet.jsx b/joinmarket/src/components/DisplayWallet.jsx index d7b043b7..dba4a34d 100644 --- a/joinmarket/src/components/DisplayWallet.jsx +++ b/joinmarket/src/components/DisplayWallet.jsx @@ -1,75 +1,73 @@ import React from 'react' -import {useState,useEffect} from 'react' +import { useState, useEffect } from 'react' import { Button } from './Button' import DisplayMixdepth from './DisplayMixdepth' import DisplayUTXOs from './DisplayUTXOs' -const DisplayWallet = ({listWalletInfo,onSend,listUTXOs}) => { - const [wallet_info,setWalletInfo] = useState([]) - const [UTXOHistory,setUTXOHistory] = useState({}) - const [showUTXO,setShowUTXO] = useState(false); - // Websocket object with scope of DisplayWallet - we don't initialize - // yet because it auto-opens, and we can only open once - // we have authenticated: - var ws; - useEffect(()=>{ - const name = JSON.parse(sessionStorage.getItem('auth')).name; - const token = JSON.parse(sessionStorage.getItem('auth')).token; - ws = new WebSocket(`ws://${window.location.hostname}:${window.location.port}`); - ws.onopen = (event) => { - console.log("connected to websocket"); - ws.send(token); - } - ws.onmessage = (event) => { - // For now we only have one message type, - // namely the transaction notification: - // For now, note that since the `getUtxos` function - // is called on every render of the display page, - // we don't need to somehow use this data other - // than as some kind of popup/status bar notifier. - // In future it might be possible to use the detailed - // transaction deserialization passed in this notification, - // for something. - var wsdata = JSON.parse(event.data); - alert("Websocket sent: " + wsdata.txid); - } - const getWalletInfo = async()=>{ - const wallet_info = await listWalletInfo(name); - console.log(wallet_info); - setWalletInfo(wallet_info); - } +const DisplayWallet = ({ listWalletInfo, onSend, listUTXOs }) => { + const [wallet_info, setWalletInfo] = useState([]) + const [UTXOHistory, setUTXOHistory] = useState({}) + const [showUTXO, setShowUTXO] = useState(false) - const getUTXOs = async()=>{ - const utxos = await listUTXOs(); - setUTXOHistory(utxos) - console.log(utxos) - } + // Websocket object with scope of DisplayWallet - we don't initialize + // yet because it auto-opens, and we can only open once + // we have authenticated: + var ws + useEffect(() => { + const name = JSON.parse(sessionStorage.getItem('auth')).name; + const token = JSON.parse(sessionStorage.getItem('auth')).token; + ws = new WebSocket(`ws://${window.location.hostname}:${window.location.port}`); + ws.onopen = (event) => { + console.log("connected to websocket"); + ws.send(token); + } + ws.onmessage = (event) => { + // For now we only have one message type, + // namely the transaction notification: + // For now, note that since the `getUtxos` function + // is called on every render of the display page, + // we don't need to somehow use this data other + // than as some kind of popup/status bar notifier. + // In future it might be possible to use the detailed + // transaction deserialization passed in this notification, + // for something. + var wsdata = JSON.parse(event.data); + alert("Websocket sent: " + wsdata.txid); + } + const getWalletInfo = async () => { + const wallet_info = await listWalletInfo(name); + console.log(wallet_info); + setWalletInfo(wallet_info); + } - getWalletInfo(); - getUTXOs(); - },[]) + const getUTXOs = async () => { + const utxos = await listUTXOs(); + setUTXOHistory(utxos) + console.log(utxos) + } - return ( -
- Wallet Details -

- {wallet_info.map((walletInfo,index)=>{ - return - })} -

- -

+ getWalletInfo(); + getUTXOs(); + }, []) - { - showUTXO? - Object.entries(UTXOHistory).map(([key, val])=> - - ) - - : "" - } -
- ) + return ( +
+ Wallet Details +

+ {wallet_info.map((walletInfo, index) => { + return + })} +

+ +

+ { showUTXO + ? Object.entries(UTXOHistory).map(([key, val]) => + + ) + : null + } +
+ ) } export default DisplayWallet diff --git a/joinmarket/src/components/Homepage.css b/joinmarket/src/components/Homepage.css index 84e696b9..76eb38de 100644 --- a/joinmarket/src/components/Homepage.css +++ b/joinmarket/src/components/Homepage.css @@ -1,6 +1,4 @@ -.container1{ - height: 100vh; - padding-top: 100px; +.container1 { + height: 100vh; + padding-top: 100px; } - - diff --git a/joinmarket/src/components/Maker.jsx b/joinmarket/src/components/Maker.jsx index f0b2b4f4..eb6d09da 100644 --- a/joinmarket/src/components/Maker.jsx +++ b/joinmarket/src/components/Maker.jsx @@ -1,67 +1,51 @@ import React from 'react' -import { useHistory } from 'react-router-dom'; +import { useHistory } from 'react-router-dom' import { useState } from 'react' -import { useGlobal } from 'reactn'; +import { useGlobal } from 'reactn' -const Maker = ({onStart,onStop}) => { +const Maker = ({ onStart, onStop }) => { + const [cjfeeRel, setCjfeerel] = useState('') + const [makerStarted] = useGlobal('makerStarted') + const [setSubmitVal] = useState('Start Maker Service') + const history = useHistory() - const [cjfeeRel,setCjfeerel] = useState('') - const [makerStarted] = useGlobal("makerStarted"); - const [setSubmitVal] = useState('Start Maker Service') - - const history = useHistory(); - - const onSubmit = (e) => { - e.preventDefault() - - - - if(makerStarted === false){ - console.log('b') - if (!cjfeeRel) { - alert('Please add details') - return; - } - onStart(0,0,cjfeeRel,'sw0reloffer',1000); - setCjfeerel('') - alert("Attempting to start the yield generator. Check the status bar for updates."); - setSubmitVal('Stop Maker Service') - - } - else{ - console.log('c') - onStop(); - setSubmitVal('Start Maker Service') - - } - let path = `/display`; - history.push(path); + const onSubmit = (e) => { + e.preventDefault() + if (makerStarted === false) { + if (!cjfeeRel) { + return alert('Please add details') + } + onStart(0, 0, cjfeeRel, 'sw0reloffer', 1000) + setCjfeerel('') + alert("Attempting to start the yield generator. Check the status bar for updates.") + setSubmitVal('Stop Maker Service') + } else { + onStop() + setSubmitVal('Start Maker Service') } - return ( -
-

Maker Service

-
- + let path = `/display`; + history.push(path); + } + return ( +
+

Maker Service

+

- { - makerStarted === false ? - - :'' + { makerStarted === false + ? + : null } -

- - - - -
- ) + + +
+ ) } export default Maker diff --git a/joinmarket/src/components/Payment.jsx b/joinmarket/src/components/Payment.jsx index e68c8362..5c6f9d98 100644 --- a/joinmarket/src/components/Payment.jsx +++ b/joinmarket/src/components/Payment.jsx @@ -4,132 +4,108 @@ import { useLocation } from "react-router-dom" import './payment.css' import * as rb from 'react-bootstrap' -const Payment = ({onPayment,onCoinjoin}) => { - const location = useLocation() - const [destination, setDestination] = useState('') - const [amount, setAmount] = useState('') - const [mixdepth, setMixdepth] = useState(location.state.account_no) - const [counterparties,setcounterparties] = useState(''); - const [isCoinjoin,setisCoinjoin] = useState(false); +const Payment = ({ onPayment, onCoinjoin }) => { + const location = useLocation() + const [destination, setDestination] = useState('') + const [amount, setAmount] = useState('') + const [mixdepth, setMixdepth] = useState(location.state.account_no) + const [counterparties, setcounterparties] = useState('') + const [isCoinjoin, setisCoinjoin] = useState(false) - const onSubmit = (e) => { - e.preventDefault() - - if (!amount || !mixdepth || !destination) { - alert('Please add details') - return - } - //maybe add await here - //if normal payment - if(isCoinjoin===false){ - let wallet =JSON.parse(sessionStorage.getItem('auth')).name; - onPayment(wallet,mixdepth,amount,destination); - } - //coinjoin - else{ - if(!counterparties){ - alert("Please set counterparties to a non zero number"); - - return; - } - else{ - onCoinjoin(mixdepth,amount,counterparties,destination); - alert("Coinjoin in progress"); - } + const onSubmit = (e) => { + e.preventDefault() - } - - setcounterparties(''); - setMixdepth(''); - setAmount(''); - setDestination(''); - setisCoinjoin(false); - - - + if (!amount || !mixdepth || !destination) { + return alert('Please add details') + } + //maybe add await here + if (!isCoinjoin) { //if normal payment + let wallet = JSON.parse(sessionStorage.getItem('auth')).name + onPayment(wallet, mixdepth, amount, destination) + } else { //coinjoin + if (!counterparties) { + return alert('Please set counterparties to a non zero number') + } else { + onCoinjoin(mixdepth, amount, counterparties, destination) + alert('Coinjoin in progress') } + } - return ( -
+ setcounterparties('') + setMixdepth('') + setAmount('') + setDestination('') + setisCoinjoin(false) + } -

-
- Send Payment -
+ return ( +
+
+ Send Payment +
-
- - - - - - Receiver address: - - - setDestination(e.target.value)}/> - - - - - - - Account - - - setMixdepth(e.target.value)} readOnly={true}/> - - - - - - - Amount(SATS) - - - setAmount(e.target.value)}/> - - - - -

-

-
- Do you want to do a coinjoin? -

- Yes setisCoinjoin(true)} /> -

- No setisCoinjoin(false)}/> -

-
- - - { - isCoinjoin? -
- - - Counterparties - - - setcounterparties(e.target.value)}/> - + + + + + + Receiver address: + + + setDestination(e.target.value)} /> + + + + + Account + + + setMixdepth(e.target.value)} readOnly={true} /> + + + + + Amount(SATS) + + + setAmount(e.target.value)} /> + -
- : - - "" - - } - - +

+

+
+ Do you want to do a coinjoin? +

+ Yes setisCoinjoin(true)} /> +

+ No setisCoinjoin(false)} /> +

+
+ + {isCoinjoin + ?
+ + + Counterparties + + + setcounterparties(e.target.value)} /> + - - - -
- ) +
+ : null + } + + + + + + + +
+ ) } export default Payment diff --git a/joinmarket/src/components/Receive.jsx b/joinmarket/src/components/Receive.jsx index 197ee902..6cc3f834 100644 --- a/joinmarket/src/components/Receive.jsx +++ b/joinmarket/src/components/Receive.jsx @@ -6,105 +6,92 @@ import { useLocation } from "react-router-dom"; import * as rb from 'react-bootstrap' import './receive.css' -const Receive = ({onReceive}) => { - const location = useLocation() - const [new_address, setNewAddress] = useState('') +const Receive = ({ onReceive }) => { + const location = useLocation() + const [new_address, setNewAddress] = useState('') - const getAddress = async (mixdepth) =>{ - //update request with token if backend updated - let authData = JSON.parse(sessionStorage.getItem('auth')); - let token = "Bearer "+authData.token; - let name = authData.name; - const res = await fetch(`/api/v1/wallet/${name}/address/new/${mixdepth}`,{ - method:'GET', - headers: { - 'Content-type': 'application/json', - 'Authorization':token - }, - }); - const { address } = await res.json(); - return address; + const getAddress = async (mixdepth) => { + //update request with token if backend updated + let authData = JSON.parse(sessionStorage.getItem('auth')); + let token = "Bearer " + authData.token; + let name = authData.name; + const res = await fetch(`/api/v1/wallet/${name}/address/new/${mixdepth}`, { + method: 'GET', + headers: { + 'Content-type': 'application/json', + 'Authorization': token + }, + }); + const { address } = await res.json(); + return address; + } + + useEffect(() => { + const getNewAddress = async (account) => { + const temp1 = parseInt(account, 10) + const temp = await getAddress(temp1) + setNewAddress(temp) + return } - useEffect(()=>{ + getNewAddress(location.state.account_no); + }, [location.state.account_no]) - const getNewAddress = async(account) => { - const temp1 = parseInt(account,10) - const temp = await getAddress(temp1) - //window.alert(temp1) - setNewAddress(temp) - return - } + const [temp_address, setTempAddress] = useState('') + const [amount, setAmount] = useState('') - getNewAddress(location.state.account_no); - }, [location.state.account_no]) + const onSubmit = (e) => { + e.preventDefault() - const [temp_address, setTempAddress] = useState('') - const [amount, setAmount] = useState('') + if (!new_address) { + return alert('Please add the address') + } - const onSubmit = (e) => { - e.preventDefault() + setTempAddress(new_address) + } - if (!new_address) { - alert('Please add the address') - return - } - - setTempAddress(new_address) - - } - - return ( -
- -

-
- Receive Funds -
- -
- - - - - - Address - - - setNewAddress(e.target.value)}/> - - - - - - - Amount(BTC) - - - setAmount(e.target.value)}/> - - - - - - - - {temp_address.length > 0? ( - ):("")} - - - - - -
-
- ) + return ( +
+
+ Receive Funds +
+
+ + + + + Address + + + setNewAddress(e.target.value)} /> + + + + + Amount(BTC) + + + setAmount(e.target.value)} /> + + + + + + {temp_address.length > 0 + ? + : null + } + + +
+
+ ) } export default Receive diff --git a/joinmarket/src/components/Wallet.jsx b/joinmarket/src/components/Wallet.jsx index 1bab6392..7e2dfb22 100644 --- a/joinmarket/src/components/Wallet.jsx +++ b/joinmarket/src/components/Wallet.jsx @@ -1,20 +1,20 @@ import React from 'react' import * as rb from 'react-bootstrap' import './wallet.css' -const Wallet = ({name,onUnlock,onLock,onDisplay}) => { - return ( -
-

- - - {name} - onUnlock(name)}>Unlock{' '} - Open{' '} - onLock(name)}>Lock - - -
- ) -} + +const Wallet = ({ name, isCurrent, onUnlock, onLock }) => ( + + + {name} + { isCurrent + ? <> + Open + onLock(name)}>Lock + + : onUnlock(name)}>Unlock + } + + +) export default Wallet diff --git a/joinmarket/src/components/Wallets.jsx b/joinmarket/src/components/Wallets.jsx index d7821bcc..20fbb603 100644 --- a/joinmarket/src/components/Wallets.jsx +++ b/joinmarket/src/components/Wallets.jsx @@ -1,15 +1,9 @@ import React from 'react' import Wallet from './Wallet' -const Wallets = ({walletList,onUnlock,onLock,onDisplay}) => { - - return ( - <> -

- {walletList.map((wallet,index)=>{ - return - })} - - ) -} + +const Wallets = ({ walletList, currentWallet, onUnlock, onLock, onDisplay }) => + walletList.map((wallet, index)=> + + ) export default Wallets diff --git a/joinmarket/src/components/createWallet.css b/joinmarket/src/components/createWallet.css index b95c8131..01c0f3d2 100644 --- a/joinmarket/src/components/createWallet.css +++ b/joinmarket/src/components/createWallet.css @@ -1,10 +1,10 @@ -.heading{ - color:rgb(15, 3, 58); +.heading { + color: rgb(15, 3, 58); font-size: 40px; font-weight: 450; } -.form1{ +.form1 { margin: 0 auto; background-color: rgb(244, 247, 253); width: 40%; @@ -16,24 +16,23 @@ border-width: 3px; border-style: dashed; border-color: #e0e3f0; - } -.center{ +.center { padding: 40px; } -.label{ +.label { text-align: left; font-size: 20px; - color:rgb(15, 3, 58) + color: rgb(15, 3, 58) } -.field{ +.field { padding-top: 20px; } -.field-border{ +.field-border { border-radius: 10px; border-width: 2px; border-style: dashed; @@ -62,7 +61,7 @@ } .btncr span { - position: relative; + position: relative; z-index: 1; color:rgb(15, 3, 58) } @@ -84,4 +83,4 @@ .btncr:hover:after { -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); transform: translateX(-9%) translateY(-25%) rotate(45deg); -} \ No newline at end of file +} diff --git a/joinmarket/src/components/displayMixdepth.css b/joinmarket/src/components/displayMixdepth.css index 2be91f6a..3194f572 100644 --- a/joinmarket/src/components/displayMixdepth.css +++ b/joinmarket/src/components/displayMixdepth.css @@ -1,18 +1,18 @@ -.head{ - font-size: small; +.head { + font-size: small; } -.address_label{ - text-align: right; - padding-right: 7%; - color: rgb(10, 192, 10); +.address_label { + text-align: right; + padding-right: 7%; + color: rgb(10, 192, 10); } -.xpub{ - text-align: left; - padding-left: 20px; +.xpub { + text-align: left; + padding-left: 20px; } .branch_body{ - text-align: left; -} \ No newline at end of file + text-align: left; +} diff --git a/joinmarket/src/components/homepage.jsx b/joinmarket/src/components/homepage.jsx index 55e0d383..9fd794f0 100644 --- a/joinmarket/src/components/homepage.jsx +++ b/joinmarket/src/components/homepage.jsx @@ -1,33 +1,21 @@ import React from 'react' import * as rb from 'react-bootstrap' import './Homepage.css' -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom' -const Homepage = () => { - - return ( - <> - -
-

Joinmarket

-
- - - - -
- Create Wallet -
- - - - Show Wallets - - - - - - ) -} +const Homepage = () => ( + + + +
+ Create Wallet +
+ + + Show Wallets + + + +) export default Homepage diff --git a/joinmarket/src/components/maker.css b/joinmarket/src/components/maker.css index 38660326..ec1c7d2d 100644 --- a/joinmarket/src/components/maker.css +++ b/joinmarket/src/components/maker.css @@ -1,91 +1,91 @@ -.heading{ - color:rgb(15, 3, 58); - font-size: 40px; - font-weight: 450; - } - - .form1{ - margin: 0 auto; - background-color: rgb(244, 247, 253); - width: 50%; - padding-top: 40px; - padding-bottom: 40px; - padding-left: 40px; - padding-right: 40px; - border-radius: 10px; - border-width: 3px; - border-style: dashed; - border-color: #e0e3f0; - - } - -.coinjoin{ - font-size: 20px; +.heading { + color:rgb(15, 3, 58); + font-size: 40px; + font-weight: 450; } - .center{ - padding: 40px; - } - - .label{ - text-align: left; - font-size: 20px; - color:rgb(15, 3, 58) - } - - .field{ - padding-top: 20px; - } - - .field-border{ - border-radius: 10px; - border-width: 2px; - border-style: dashed; - border-color: #e0e3f0; - } - - .btn-field{ - padding-top: 50px; - } - - .btncr { - border: none; - border-radius: 2px; - display: block; - text-align: center; - cursor: pointer; - outline: none; - overflow: hidden; - position: relative; - font-weight: 500; - font-size: 20px; - background-color: rgb(244, 247, 253); - padding: 10px 60px; - margin: 0 auto; - box-shadow: 0 5px 15px rgba(0,0,0,0.20); - } - - .btncr span { - position: relative; - z-index: 1; - color:rgb(15, 3, 58) - } - - .btncr:after { - content: ""; - position: absolute; - left: 0; - top: 0; - height: 300%; - width: 130%; - background: #e0e3f0; - -webkit-transition: all .5s ease-in-out; - transition: all .5s ease-in-out; - -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); - transform: translateX(-98%) translateY(-25%) rotate(45deg); - } - - .btncr:hover:after { - -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); - transform: translateX(-9%) translateY(-25%) rotate(45deg); - } \ No newline at end of file +.form1 { + margin: 0 auto; + background-color: rgb(244, 247, 253); + width: 50%; + padding-top: 40px; + padding-bottom: 40px; + padding-left: 40px; + padding-right: 40px; + border-radius: 10px; + border-width: 3px; + border-style: dashed; + border-color: #e0e3f0; + +} + +.coinjoin{ + font-size: 20px; +} + +.center{ + padding: 40px; +} + +.label{ + text-align: left; + font-size: 20px; + color: rgb(15, 3, 58) +} + +.field{ + padding-top: 20px; +} + +.field-border{ + border-radius: 10px; + border-width: 2px; + border-style: dashed; + border-color: #e0e3f0; +} + +.btn-field{ + padding-top: 50px; +} + +.btncr { + border: none; + border-radius: 2px; + display: block; + text-align: center; + cursor: pointer; + outline: none; + overflow: hidden; + position: relative; + font-weight: 500; + font-size: 20px; + background-color: rgb(244, 247, 253); + padding: 10px 60px; + margin: 0 auto; + box-shadow: 0 5px 15px rgba(0,0,0,0.20); +} + +.btncr span { + position: relative; + z-index: 1; + color:rgb(15, 3, 58) +} + +.btncr:after { + content: ""; + position: absolute; + left: 0; + top: 0; + height: 300%; + width: 130%; + background: #e0e3f0; + -webkit-transition: all .5s ease-in-out; + transition: all .5s ease-in-out; + -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); + transform: translateX(-98%) translateY(-25%) rotate(45deg); +} + +.btncr:hover:after { + -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); + transform: translateX(-9%) translateY(-25%) rotate(45deg); +} diff --git a/joinmarket/src/components/payment.css b/joinmarket/src/components/payment.css index 38660326..cad12f93 100644 --- a/joinmarket/src/components/payment.css +++ b/joinmarket/src/components/payment.css @@ -1,91 +1,90 @@ -.heading{ - color:rgb(15, 3, 58); - font-size: 40px; - font-weight: 450; - } - - .form1{ - margin: 0 auto; - background-color: rgb(244, 247, 253); - width: 50%; - padding-top: 40px; - padding-bottom: 40px; - padding-left: 40px; - padding-right: 40px; - border-radius: 10px; - border-width: 3px; - border-style: dashed; - border-color: #e0e3f0; - - } - -.coinjoin{ - font-size: 20px; +.heading { + color:rgb(15, 3, 58); + font-size: 40px; + font-weight: 450; } - .center{ - padding: 40px; - } - - .label{ - text-align: left; - font-size: 20px; - color:rgb(15, 3, 58) - } - - .field{ - padding-top: 20px; - } - - .field-border{ - border-radius: 10px; - border-width: 2px; - border-style: dashed; - border-color: #e0e3f0; - } - - .btn-field{ - padding-top: 50px; - } - - .btncr { - border: none; - border-radius: 2px; - display: block; - text-align: center; - cursor: pointer; - outline: none; - overflow: hidden; - position: relative; - font-weight: 500; - font-size: 20px; - background-color: rgb(244, 247, 253); - padding: 10px 60px; - margin: 0 auto; - box-shadow: 0 5px 15px rgba(0,0,0,0.20); - } - - .btncr span { - position: relative; - z-index: 1; - color:rgb(15, 3, 58) - } - - .btncr:after { - content: ""; - position: absolute; - left: 0; - top: 0; - height: 300%; - width: 130%; - background: #e0e3f0; - -webkit-transition: all .5s ease-in-out; - transition: all .5s ease-in-out; - -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); - transform: translateX(-98%) translateY(-25%) rotate(45deg); - } - - .btncr:hover:after { - -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); - transform: translateX(-9%) translateY(-25%) rotate(45deg); - } \ No newline at end of file +.form1 { + margin: 0 auto; + background-color: rgb(244, 247, 253); + width: 50%; + padding-top: 40px; + padding-bottom: 40px; + padding-left: 40px; + padding-right: 40px; + border-radius: 10px; + border-width: 3px; + border-style: dashed; + border-color: #e0e3f0; +} + +.coinjoin{ + font-size: 20px; +} + +.center { + padding: 40px; +} + +.label { + text-align: left; + font-size: 20px; + color:rgb(15, 3, 58) +} + +.field { + padding-top: 20px; +} + +.field-border { + border-radius: 10px; + border-width: 2px; + border-style: dashed; + border-color: #e0e3f0; +} + +.btn-field { + padding-top: 50px; +} + +.btncr { + border: none; + border-radius: 2px; + display: block; + text-align: center; + cursor: pointer; + outline: none; + overflow: hidden; + position: relative; + font-weight: 500; + font-size: 20px; + background-color: rgb(244, 247, 253); + padding: 10px 60px; + margin: 0 auto; + box-shadow: 0 5px 15px rgba(0,0,0,0.20); +} + +.btncr span { + position: relative; + z-index: 1; + color: rgb(15, 3, 58) +} + +.btncr:after { + content: ""; + position: absolute; + left: 0; + top: 0; + height: 300%; + width: 130%; + background: #e0e3f0; + -webkit-transition: all .5s ease-in-out; + transition: all .5s ease-in-out; + -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); + transform: translateX(-98%) translateY(-25%) rotate(45deg); +} + +.btncr:hover:after { + -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); + transform: translateX(-9%) translateY(-25%) rotate(45deg); +} diff --git a/joinmarket/src/components/receive.css b/joinmarket/src/components/receive.css index c6d13108..dbcf63f8 100644 --- a/joinmarket/src/components/receive.css +++ b/joinmarket/src/components/receive.css @@ -1,87 +1,87 @@ -.heading{ - color:rgb(15, 3, 58); - font-size: 40px; - font-weight: 450; - } - - .form1{ - margin: 0 auto; - background-color: rgb(244, 247, 253); - width: 60%; - padding-top: 40px; - padding-bottom: 40px; - padding-left: 40px; - padding-right: 40px; - border-radius: 10px; - border-width: 3px; - border-style: dashed; - border-color: #e0e3f0; - - } - - .center{ - padding: 40px; - } - - .label{ - text-align: left; - font-size: 20px; - color:rgb(15, 3, 58) - } - - .field{ - padding-top: 20px; - } - - .field-border{ - border-radius: 10px; - border-width: 2px; - border-style: dashed; - border-color: #e0e3f0; - } - - .btn-field{ - padding-top: 50px; - } - - .btncr { - border: none; - border-radius: 2px; - display: block; - text-align: center; - cursor: pointer; - outline: none; - overflow: hidden; - position: relative; - font-weight: 500; - font-size: 20px; - background-color: rgb(244, 247, 253); - padding: 10px 60px; - margin: 0 auto; - box-shadow: 0 5px 15px rgba(0,0,0,0.20); - } - - .btncr span { - position: relative; - z-index: 1; - color:rgb(15, 3, 58) - } - - .btncr:after { - content: ""; - position: absolute; - left: 0; - top: 0; - height: 300%; - width: 130%; - background: #e0e3f0; - -webkit-transition: all .5s ease-in-out; - transition: all .5s ease-in-out; - -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); - transform: translateX(-98%) translateY(-25%) rotate(45deg); - } - - .btncr:hover:after { - -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); - transform: translateX(-9%) translateY(-25%) rotate(45deg); - } \ No newline at end of file +.heading { + color: rgb(15, 3, 58); + font-size: 40px; + font-weight: 450; +} + +.form1{ + margin: 0 auto; + background-color: rgb(244, 247, 253); + width: 60%; + padding-top: 40px; + padding-bottom: 40px; + padding-left: 40px; + padding-right: 40px; + border-radius: 10px; + border-width: 3px; + border-style: dashed; + border-color: #e0e3f0; + +} + +.center { + padding: 40px; +} + +.label { + text-align: left; + font-size: 20px; + color:rgb(15, 3, 58) +} + +.field { + padding-top: 20px; +} + +.field-border { + border-radius: 10px; + border-width: 2px; + border-style: dashed; + border-color: #e0e3f0; +} + +.btn-field { + padding-top: 50px; +} + +.btncr { + border: none; + border-radius: 2px; + display: block; + text-align: center; + cursor: pointer; + outline: none; + overflow: hidden; + position: relative; + font-weight: 500; + font-size: 20px; + background-color: rgb(244, 247, 253); + padding: 10px 60px; + margin: 0 auto; + box-shadow: 0 5px 15px rgba(0,0,0,0.20); +} + +.btncr span { + position: relative; + z-index: 1; + color:rgb(15, 3, 58) +} + +.btncr:after { + content: ""; + position: absolute; + left: 0; + top: 0; + height: 300%; + width: 130%; + background: #e0e3f0; + -webkit-transition: all .5s ease-in-out; + transition: all .5s ease-in-out; + -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg); + transform: translateX(-98%) translateY(-25%) rotate(45deg); +} + +.btncr:hover:after { + -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg); + transform: translateX(-9%) translateY(-25%) rotate(45deg); +} diff --git a/joinmarket/src/components/utils.jsx b/joinmarket/src/components/utils.jsx index 661c2998..b5702108 100644 --- a/joinmarket/src/components/utils.jsx +++ b/joinmarket/src/components/utils.jsx @@ -1,22 +1,21 @@ -import { useEffect, useRef } from 'react'; +import { useEffect, useRef } from 'react' const useInterval = (callback, delay) => { const savedCallback = useRef(); useEffect(() => { - savedCallback.current = callback; + savedCallback.current = callback }, [callback]); - useEffect(() => { function tick() { - savedCallback.current(); + savedCallback.current() } if (delay !== null) { - const id = setInterval(tick, delay); - return () => clearInterval(id); + const id = setInterval(tick, delay) + return () => clearInterval(id) } - }, [delay]); + }, [delay]) } -export default useInterval; +export default useInterval diff --git a/joinmarket/src/components/wallet.css b/joinmarket/src/components/wallet.css index 8cb60609..40f45728 100644 --- a/joinmarket/src/components/wallet.css +++ b/joinmarket/src/components/wallet.css @@ -1,3 +1,3 @@ -.wallet_cards{ - margin: 0 auto; -} \ No newline at end of file +.wallet_cards { + margin: 0 auto; +} diff --git a/joinmarket/src/index.css b/joinmarket/src/index.css index ec2585e8..69e47ddf 100644 --- a/joinmarket/src/index.css +++ b/joinmarket/src/index.css @@ -1,13 +1,10 @@ body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } diff --git a/joinmarket/src/index.js b/joinmarket/src/index.js index 2573e179..1c71fbca 100644 --- a/joinmarket/src/index.js +++ b/joinmarket/src/index.js @@ -5,6 +5,7 @@ import App from './App'; import reportWebVitals from './reportWebVitals'; import 'bootstrap/dist/css/bootstrap.min.css'; import { setGlobal } from 'reactn'; + // Set an initial global state directly: setGlobal({ currentStatusMessage: "loading", @@ -14,7 +15,7 @@ setGlobal({ }); ReactDOM.render( - + , document.getElementById('root')