├── joinmarket
    ├── src
    │   ├── components
    │   │   ├── button.css
    │   │   ├── wallet.css
    │   │   ├── Homepage.css
    │   │   ├── Button.jsx
    │   │   ├── displayMixdepth.css
    │   │   ├── Wallets.jsx
    │   │   ├── utils.jsx
    │   │   ├── DisplayUTXOs.jsx
    │   │   ├── Wallet.jsx
    │   │   ├── homepage.jsx
    │   │   ├── createWallet.css
    │   │   ├── receive.css
    │   │   ├── maker.css
    │   │   ├── payment.css
    │   │   ├── Maker.jsx
    │   │   ├── CreateWallet.jsx
    │   │   ├── DisplayWallet.jsx
    │   │   ├── Receive.jsx
    │   │   ├── Payment.jsx
    │   │   └── DisplayMixdepth.jsx
    │   ├── setupTests.js
    │   ├── App.test.js
    │   ├── index.css
    │   ├── reportWebVitals.js
    │   ├── App.css
    │   ├── index.js
    │   ├── twitter.svg
    │   ├── github.svg
    │   ├── logo.svg
    │   └── App.js
    ├── public
    │   ├── robots.txt
    │   ├── favicon.ico
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── index.html
    ├── .gitignore
    ├── package.json
    └── README.md
└── README.md


/joinmarket/src/components/button.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/wallet.css:
--------------------------------------------------------------------------------
1 | .wallet_cards{
2 |     margin: 0 auto;
3 | }


--------------------------------------------------------------------------------
/joinmarket/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/joinmarket/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoinMarket-Org/jm-web-client/HEAD/joinmarket/public/favicon.ico


--------------------------------------------------------------------------------
/joinmarket/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoinMarket-Org/jm-web-client/HEAD/joinmarket/public/logo192.png


--------------------------------------------------------------------------------
/joinmarket/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JoinMarket-Org/jm-web-client/HEAD/joinmarket/public/logo512.png


--------------------------------------------------------------------------------
/joinmarket/src/components/Homepage.css:
--------------------------------------------------------------------------------
1 | .container1{
2 |     height: 100vh;
3 |     padding-top: 100px;
4 | }
5 | 
6 | 
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Web client for joinmarket
2 | 
3 | This project was an earlier proof-of-concept, please go to: https://github.com/joinmarket-webui/joinmarket-webui 
4 | 


--------------------------------------------------------------------------------
/joinmarket/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/joinmarket/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/Button.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./button.css";
 3 | 
 4 | export const Button = ({name,children, type, onClick, buttonStyle, buttonSize}) => {
 5 |     return (
 6 |         <button onClick = {()=>onClick(name)} type = {type}>
 7 |             {children}
 8 |         </button>
 9 |     )
10 | }
11 | 
12 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/displayMixdepth.css:
--------------------------------------------------------------------------------
 1 | .head{
 2 |     font-size: small;
 3 | }
 4 | 
 5 | .address_label{
 6 |     text-align: right;
 7 |     padding-right: 7%;
 8 |     color: rgb(10, 192, 10);
 9 | }
10 | 
11 | .xpub{
12 |     text-align: left;
13 |     padding-left: 20px;
14 | }
15 | 
16 | .branch_body{
17 |     text-align: left;
18 | }


--------------------------------------------------------------------------------
/joinmarket/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/joinmarket/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/joinmarket/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/Wallets.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Wallet from './Wallet'
 3 | const Wallets = ({walletList,onUnlock,onLock,onDisplay}) => {
 4 |     
 5 |     return (
 6 |         <>
 7 |         <p></p>
 8 |         {walletList.map((wallet,index)=>{
 9 |             return <Wallet key = {index} name={wallet} onUnlock = {onUnlock} onLock = {onLock} onDisplay = {onDisplay}></Wallet>
10 |         })}
11 |         </>
12 |     )
13 | }
14 | 
15 | export default Wallets
16 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/utils.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, useRef } from 'react';
 2 | 
 3 |  const useInterval = (callback, delay) => {
 4 | 
 5 |   const savedCallback = useRef();
 6 | 
 7 |   useEffect(() => {
 8 |     savedCallback.current = callback;
 9 |   }, [callback]);
10 | 
11 | 
12 |   useEffect(() => {
13 |     function tick() {
14 |       savedCallback.current();
15 |     }
16 |     if (delay !== null) {
17 |       const id = setInterval(tick, delay);
18 |       return () => clearInterval(id);
19 |     }
20 |   }, [delay]);
21 | }
22 | 
23 | export default useInterval;


--------------------------------------------------------------------------------
/joinmarket/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/DisplayUTXOs.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const DisplayUTXOs = ({utxoID,utxo}) => {
 4 |     return (
 5 |         <div>
 6 |             <p></p>
 7 |             <p></p>
 8 |             <br></br>
 9 |             <span>Address: {utxo.address}</span>
10 |             <br></br>
11 |             <span>Value(Sats):  {utxo.value}</span>
12 |             <br></br>
13 |             <span>Confirmations: {utxo.confirmations}</span>
14 |             <br></br>
15 |             <span>Mixdepth: {utxo.mixdepth}</span>
16 |             <p></p>
17 |         </div>
18 |     )
19 | }
20 | 
21 | export default DisplayUTXOs;
22 | 
23 | 


--------------------------------------------------------------------------------
/joinmarket/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/joinmarket/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | import 'bootstrap/dist/css/bootstrap.min.css';
 7 | import { setGlobal } from 'reactn';
 8 | // Set an initial global state directly:
 9 | setGlobal({
10 |   currentStatusMessage: "loading",
11 |   makerStarted: false,
12 |   walletName: "(waiting..)",
13 |   coinjoinInProcess: false
14 | });
15 | 
16 | ReactDOM.render(
17 |   
18 |     <App />
19 |   ,
20 |   document.getElementById('root')
21 | );
22 | 
23 | // If you want to start measuring performance in your app, pass a function
24 | // to log results (for example: reportWebVitals(console.log))
25 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
26 | reportWebVitals();
27 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/Wallet.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Button } from './Button'
 3 | import {Link} from 'react-router-dom'
 4 | import * as rb from 'react-bootstrap'
 5 | import './wallet.css'
 6 | const Wallet = ({name,onUnlock,onLock,onDisplay}) => {
 7 |     return (
 8 |         <div>
 9 |             <br></br>
10 |             <rb.Card style={{ width: '18rem' }} className = "wallet_cards">
11 |               <rb.Card.Body>
12 |                 <rb.Card.Title>{name}</rb.Card.Title>
13 |                 <rb.Button className="btn btn-primary" onClick={()=>onUnlock(name)}>Unlock</rb.Button>{' '}
14 |                 <rb.Button href="/display">Open</rb.Button>{' '}
15 |                 <rb.Button onClick = {()=>onLock(name)}>Lock</rb.Button>
16 |               </rb.Card.Body>
17 |             </rb.Card>
18 |         </div>
19 |     )
20 | }
21 | 
22 | export default Wallet
23 | 


--------------------------------------------------------------------------------
/joinmarket/src/twitter.svg:
--------------------------------------------------------------------------------
1 | <svg id="SvgjsSvg1031" width="288" height="288" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1032"></defs><g id="SvgjsG1033" transform="matrix(1,0,0,1,0,0)"><svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" width="288" height="288"><path d="M22,5.8a8.49,8.49,0,0,1-2.36.64,4.13,4.13,0,0,0,1.81-2.27,8.21,8.21,0,0,1-2.61,1,4.1,4.1,0,0,0-7,3.74A11.64,11.64,0,0,1,3.39,4.62a4.16,4.16,0,0,0-.55,2.07A4.09,4.09,0,0,0,4.66,10.1,4.05,4.05,0,0,1,2.8,9.59v.05a4.1,4.1,0,0,0,3.3,4A3.93,3.93,0,0,1,5,13.81a4.9,4.9,0,0,1-.77-.07,4.11,4.11,0,0,0,3.83,2.84A8.22,8.22,0,0,1,3,18.34a7.93,7.93,0,0,1-1-.06,11.57,11.57,0,0,0,6.29,1.85A11.59,11.59,0,0,0,20,8.45c0-.17,0-.35,0-.53A8.43,8.43,0,0,0,22,5.8Z" fill="#ffffff" class="color000 svgShape"></path></svg></g></svg>


--------------------------------------------------------------------------------
/joinmarket/src/components/homepage.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import * as rb from 'react-bootstrap'
 3 | import './Homepage.css'
 4 | import { BrowserRouter as Router, Link, Route ,Switch} from 'react-router-dom';
 5 | 
 6 | const Homepage = () => {
 7 |     
 8 |     return (
 9 |         <>
10 |         
11 |       <div className="showcase-container">
12 |         <h1 class="main-title" id="home">Joinmarket</h1>
13 |         
14 |       </div>
15 |            
16 |         <rb.Container className = "container1">
17 |         
18 |             <rb.Row>
19 |             
20 |                 <rb.Col className = "column">
21 |                 <div class="text-center">
22 |                     <Link to="/create"  className="btn btn-primary">Create Wallet</Link>
23 |                     </div>
24 |                 </rb.Col>
25 |                 
26 |                 <rb.Col className = "column">
27 |                     <Link to="/showWallets"  className="btn btn-primary">Show Wallets</Link>
28 |                 </rb.Col>
29 |             </rb.Row>
30 |         </rb.Container>
31 |         
32 |         </>
33 |     )
34 | }
35 | 
36 | export default Homepage
37 | 


--------------------------------------------------------------------------------
/joinmarket/src/github.svg:
--------------------------------------------------------------------------------
1 | <svg id="SvgjsSvg1026" width="288" height="288" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1027"></defs><g id="SvgjsG1028" transform="matrix(1,0,0,1,0,0)"><svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" width="288" height="288"><path d="M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z" fill="#ffffff" class="color000 svgShape"></path></svg></g></svg>


--------------------------------------------------------------------------------
/joinmarket/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "joinmarket",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "proxy": "https://localhost:28183",
 6 |   "dependencies": {
 7 |     "@ibunker/bitcoin-react": "^0.1.13-cd",
 8 |     "@testing-library/jest-dom": "^5.11.4",
 9 |     "@testing-library/react": "^11.1.0",
10 |     "@testing-library/user-event": "^12.1.10",
11 |     "bootstrap": "^5.1.0",
12 |     "moving-letters": "^1.0.1",
13 |     "react": "^17.0.2",
14 |     "react-bootstrap": "^2.0.0-beta.6",
15 |     "react-dom": "^17.0.2",
16 |     "react-router-dom": "^5.2.0",
17 |     "react-scripts": "4.0.3",
18 |     "reactn": "^2.2.7",
19 |     "web-vitals": "^1.0.1"
20 |   },
21 |   "scripts": {
22 |     "start": "react-scripts start",
23 |     "build": "react-scripts build",
24 |     "test": "react-scripts test",
25 |     "eject": "react-scripts eject"
26 |   },
27 |   "eslintConfig": {
28 |     "extends": [
29 |       "react-app",
30 |       "react-app/jest"
31 |     ]
32 |   },
33 |   "browserslist": {
34 |     "production": [
35 |       ">0.2%",
36 |       "not dead",
37 |       "not op_mini all"
38 |     ],
39 |     "development": [
40 |       "last 1 chrome version",
41 |       "last 1 firefox version",
42 |       "last 1 safari version"
43 |     ]
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/createWallet.css:
--------------------------------------------------------------------------------
 1 | .heading{
 2 |   color:rgb(15, 3, 58);
 3 |   font-size: 40px;
 4 |   font-weight: 450;
 5 | }
 6 | 
 7 | .form1{
 8 |   margin: 0 auto;
 9 |   background-color: rgb(244, 247, 253);
10 |   width: 40%;
11 |   padding-top: 40px;
12 |   padding-bottom: 40px;
13 |   padding-left: 40px;
14 |   padding-right: 40px;
15 |   border-radius: 10px;
16 |   border-width: 3px;
17 |   border-style: dashed;
18 |   border-color: #e0e3f0;
19 |   
20 | }
21 | 
22 | .center{
23 |   padding: 40px;
24 | }
25 | 
26 | .label{
27 |   text-align: left;
28 |   font-size: 20px;
29 |   color:rgb(15, 3, 58)
30 | }
31 | 
32 | .field{
33 |   padding-top: 20px;
34 | }
35 | 
36 | .field-border{
37 |   border-radius: 10px;
38 |   border-width: 2px;
39 |   border-style: dashed;
40 |   border-color: #e0e3f0;
41 | }
42 | 
43 | .btn-field{
44 |   padding-top: 50px;
45 | }
46 | 
47 | .btncr {
48 |   border: none;
49 |   border-radius: 2px;
50 |   display: block;
51 |   text-align: center;
52 |   cursor: pointer;
53 |   outline: none;
54 |   overflow: hidden;
55 |   position: relative;
56 |   font-weight: 500;
57 |   font-size: 20px;
58 |   background-color: rgb(244, 247, 253);
59 |   padding: 10px 60px;
60 |   margin: 0 auto;
61 |   box-shadow: 0 5px 15px rgba(0,0,0,0.20);
62 | }
63 | 
64 | .btncr span {
65 |   position: relative; 
66 |   z-index: 1;
67 |   color:rgb(15, 3, 58)
68 | }
69 | 
70 | .btncr:after {
71 |   content: "";
72 |   position: absolute;
73 |   left: 0;
74 |   top: 0;
75 |   height: 300%;
76 |   width: 130%;
77 |   background: #e0e3f0;
78 |   -webkit-transition: all .5s ease-in-out;
79 |   transition: all .5s ease-in-out;
80 |   -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
81 |   transform: translateX(-98%) translateY(-25%) rotate(45deg);
82 | }
83 | 
84 | .btncr:hover:after {
85 |   -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
86 |   transform: translateX(-9%) translateY(-25%) rotate(45deg);
87 | }


--------------------------------------------------------------------------------
/joinmarket/src/components/receive.css:
--------------------------------------------------------------------------------
 1 | .heading{
 2 |     color:rgb(15, 3, 58);
 3 |     font-size: 40px;
 4 |     font-weight: 450;
 5 |   }
 6 |   
 7 |   .form1{
 8 |     margin: 0 auto;
 9 |     background-color: rgb(244, 247, 253);
10 |     width: 60%;
11 |     padding-top: 40px;
12 |     padding-bottom: 40px;
13 |     padding-left: 40px;
14 |     padding-right: 40px;
15 |     border-radius: 10px;
16 |     border-width: 3px;
17 |     border-style: dashed;
18 |     border-color: #e0e3f0;
19 |     
20 |   }
21 |   
22 |   .center{
23 |     padding: 40px;
24 |   }
25 |   
26 |   .label{
27 |     text-align: left;
28 |     font-size: 20px;
29 |     color:rgb(15, 3, 58)
30 |   }
31 |   
32 |   .field{
33 |     padding-top: 20px;
34 |   }
35 |   
36 |   .field-border{
37 |     border-radius: 10px;
38 |     border-width: 2px;
39 |     border-style: dashed;
40 |     border-color: #e0e3f0;
41 |   }
42 |   
43 |   .btn-field{
44 |     padding-top: 50px;
45 |   }
46 |   
47 |   .btncr {
48 |     border: none;
49 |     border-radius: 2px;
50 |     display: block;
51 |     text-align: center;
52 |     cursor: pointer;
53 |     outline: none;
54 |     overflow: hidden;
55 |     position: relative;
56 |     font-weight: 500;
57 |     font-size: 20px;
58 |     background-color: rgb(244, 247, 253);
59 |     padding: 10px 60px;
60 |     margin: 0 auto;
61 |     box-shadow: 0 5px 15px rgba(0,0,0,0.20);
62 |   }
63 |   
64 |   .btncr span {
65 |     position: relative; 
66 |     z-index: 1;
67 |     color:rgb(15, 3, 58)
68 |   }
69 |   
70 |   .btncr:after {
71 |     content: "";
72 |     position: absolute;
73 |     left: 0;
74 |     top: 0;
75 |     height: 300%;
76 |     width: 130%;
77 |     background: #e0e3f0;
78 |     -webkit-transition: all .5s ease-in-out;
79 |     transition: all .5s ease-in-out;
80 |     -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
81 |     transform: translateX(-98%) translateY(-25%) rotate(45deg);
82 |   }
83 |   
84 |   .btncr:hover:after {
85 |     -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
86 |     transform: translateX(-9%) translateY(-25%) rotate(45deg);
87 |   }


--------------------------------------------------------------------------------
/joinmarket/src/components/maker.css:
--------------------------------------------------------------------------------
 1 | .heading{
 2 |     color:rgb(15, 3, 58);
 3 |     font-size: 40px;
 4 |     font-weight: 450;
 5 |   }
 6 |   
 7 |   .form1{
 8 |     margin: 0 auto;
 9 |     background-color: rgb(244, 247, 253);
10 |     width: 50%;
11 |     padding-top: 40px;
12 |     padding-bottom: 40px;
13 |     padding-left: 40px;
14 |     padding-right: 40px;
15 |     border-radius: 10px;
16 |     border-width: 3px;
17 |     border-style: dashed;
18 |     border-color: #e0e3f0;
19 |     
20 |   }
21 |   
22 | .coinjoin{
23 |     font-size: 20px;
24 | }
25 | 
26 |   .center{
27 |     padding: 40px;
28 |   }
29 |   
30 |   .label{
31 |     text-align: left;
32 |     font-size: 20px;
33 |     color:rgb(15, 3, 58)
34 |   }
35 |   
36 |   .field{
37 |     padding-top: 20px;
38 |   }
39 |   
40 |   .field-border{
41 |     border-radius: 10px;
42 |     border-width: 2px;
43 |     border-style: dashed;
44 |     border-color: #e0e3f0;
45 |   }
46 |   
47 |   .btn-field{
48 |     padding-top: 50px;
49 |   }
50 |   
51 |   .btncr {
52 |     border: none;
53 |     border-radius: 2px;
54 |     display: block;
55 |     text-align: center;
56 |     cursor: pointer;
57 |     outline: none;
58 |     overflow: hidden;
59 |     position: relative;
60 |     font-weight: 500;
61 |     font-size: 20px;
62 |     background-color: rgb(244, 247, 253);
63 |     padding: 10px 60px;
64 |     margin: 0 auto;
65 |     box-shadow: 0 5px 15px rgba(0,0,0,0.20);
66 |   }
67 |   
68 |   .btncr span {
69 |     position: relative; 
70 |     z-index: 1;
71 |     color:rgb(15, 3, 58)
72 |   }
73 |   
74 |   .btncr:after {
75 |     content: "";
76 |     position: absolute;
77 |     left: 0;
78 |     top: 0;
79 |     height: 300%;
80 |     width: 130%;
81 |     background: #e0e3f0;
82 |     -webkit-transition: all .5s ease-in-out;
83 |     transition: all .5s ease-in-out;
84 |     -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
85 |     transform: translateX(-98%) translateY(-25%) rotate(45deg);
86 |   }
87 |   
88 |   .btncr:hover:after {
89 |     -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
90 |     transform: translateX(-9%) translateY(-25%) rotate(45deg);
91 |   }


--------------------------------------------------------------------------------
/joinmarket/src/components/payment.css:
--------------------------------------------------------------------------------
 1 | .heading{
 2 |     color:rgb(15, 3, 58);
 3 |     font-size: 40px;
 4 |     font-weight: 450;
 5 |   }
 6 |   
 7 |   .form1{
 8 |     margin: 0 auto;
 9 |     background-color: rgb(244, 247, 253);
10 |     width: 50%;
11 |     padding-top: 40px;
12 |     padding-bottom: 40px;
13 |     padding-left: 40px;
14 |     padding-right: 40px;
15 |     border-radius: 10px;
16 |     border-width: 3px;
17 |     border-style: dashed;
18 |     border-color: #e0e3f0;
19 |     
20 |   }
21 |   
22 | .coinjoin{
23 |     font-size: 20px;
24 | }
25 | 
26 |   .center{
27 |     padding: 40px;
28 |   }
29 |   
30 |   .label{
31 |     text-align: left;
32 |     font-size: 20px;
33 |     color:rgb(15, 3, 58)
34 |   }
35 |   
36 |   .field{
37 |     padding-top: 20px;
38 |   }
39 |   
40 |   .field-border{
41 |     border-radius: 10px;
42 |     border-width: 2px;
43 |     border-style: dashed;
44 |     border-color: #e0e3f0;
45 |   }
46 |   
47 |   .btn-field{
48 |     padding-top: 50px;
49 |   }
50 |   
51 |   .btncr {
52 |     border: none;
53 |     border-radius: 2px;
54 |     display: block;
55 |     text-align: center;
56 |     cursor: pointer;
57 |     outline: none;
58 |     overflow: hidden;
59 |     position: relative;
60 |     font-weight: 500;
61 |     font-size: 20px;
62 |     background-color: rgb(244, 247, 253);
63 |     padding: 10px 60px;
64 |     margin: 0 auto;
65 |     box-shadow: 0 5px 15px rgba(0,0,0,0.20);
66 |   }
67 |   
68 |   .btncr span {
69 |     position: relative; 
70 |     z-index: 1;
71 |     color:rgb(15, 3, 58)
72 |   }
73 |   
74 |   .btncr:after {
75 |     content: "";
76 |     position: absolute;
77 |     left: 0;
78 |     top: 0;
79 |     height: 300%;
80 |     width: 130%;
81 |     background: #e0e3f0;
82 |     -webkit-transition: all .5s ease-in-out;
83 |     transition: all .5s ease-in-out;
84 |     -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
85 |     transform: translateX(-98%) translateY(-25%) rotate(45deg);
86 |   }
87 |   
88 |   .btncr:hover:after {
89 |     -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
90 |     transform: translateX(-9%) translateY(-25%) rotate(45deg);
91 |   }


--------------------------------------------------------------------------------
/joinmarket/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link
13 |     rel="stylesheet"
14 |     href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
15 |     integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
16 |     crossorigin="anonymous"
17 |     />
18 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
19 |     <!--
20 |       manifest.json provides metadata used when your web app is installed on a
21 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
22 |     -->
23 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
24 |     <!--
25 |       Notice the use of %PUBLIC_URL% in the tags above.
26 |       It will be replaced with the URL of the `public` folder during the build.
27 |       Only files inside the `public` folder can be referenced from the HTML.
28 | 
29 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
30 |       work correctly both with client-side routing and a non-root public URL.
31 |       Learn how to configure a non-root public URL by running `npm run build`.
32 |     -->
33 |     <title>React App</title>
34 |   </head>
35 |   <body>
36 |     <noscript>You need to enable JavaScript to run this app.</noscript>
37 |     <div id="root"></div>
38 |     <!--
39 |       This HTML file is a template.
40 |       If you open it directly in the browser, you will see an empty page.
41 | 
42 |       You can add webfonts, meta tags, or analytics to this file.
43 |       The build step will place the bundled scripts into the <body> tag.
44 | 
45 |       To begin the development, run `npm start` or `yarn start`.
46 |       To create a production bundle, use `npm run build` or `yarn build`.
47 |     -->
48 |   </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/Maker.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useHistory } from 'react-router-dom';
 3 | import { useState } from 'react'
 4 | import { useGlobal } from 'reactn';
 5 | 
 6 | const Maker = ({onStart,onStop}) => {
 7 |     
 8 |     const [txFee,setTxFee] = useState('')
 9 |     const [cjfeeAbs,setCjfeeabs] = useState('')
10 |     const [cjfeeRel,setCjfeerel] = useState('')
11 |     const [orderType,setOrdertype] = useState('')
12 |     const [minsize,setMinsize] = useState('')
13 | 
14 | 
15 |     const [makerStarted, setmakerStarted]  = useGlobal("makerStarted");
16 | 
17 |     const [submitVal,setSubmitVal] = useState('Start Maker Service')
18 | 
19 |     const history = useHistory();
20 | 
21 |     const onSubmit = (e) => {
22 |         e.preventDefault()
23 | 
24 |         
25 | 
26 |         if(makerStarted === false){
27 |             console.log('b')
28 |             if (!cjfeeRel) {
29 |                 alert('Please add details')
30 |                 return;
31 |             }
32 |             onStart(0,0,cjfeeRel,'sw0reloffer',1000);
33 |             setCjfeerel('')
34 |             alert("Attempting to start the yield generator. Check the status bar for updates.");
35 |             setSubmitVal('Stop Maker Service')
36 | 
37 |         }
38 |         else{
39 |             console.log('c')
40 |             onStop();
41 |             setSubmitVal('Start Maker Service')
42 | 
43 |         }
44 |         let path = `/display`;
45 |         history.push(path);
46 |         
47 |         
48 |     }
49 |     return (
50 |         <div>
51 |             <h3>Maker Service</h3>
52 |         <form method="POST" onSubmit={onSubmit}>
53 |         
54 |         
55 |         <p></p>
56 |         {
57 |         makerStarted === false ?
58 |         <label>
59 |         Relative Coinjoin Fee
60 |         <input type="text" name="cjfee_r" value = {cjfeeRel} onChange={(e) => setCjfeerel(e.target.value)}/>
61 |         </label>
62 |         :''
63 |         }
64 |         
65 |         <p></p>
66 |         
67 |         <input type="submit" value={makerStarted ==='true'?'Stop Maker Service':'Start Maker Service'} />
68 | 
69 |     </form>
70 |         </div>
71 |     )
72 | }
73 | 
74 | export default Maker
75 | 


--------------------------------------------------------------------------------
/joinmarket/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/joinmarket/src/components/CreateWallet.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useState } from 'react'
 3 | import './createWallet.css'
 4 | import * as rb from 'react-bootstrap'
 5 | 
 6 | const CreateWallet = ({onCreate}) => {
 7 | 
 8 |     const [wallet,setWallet] = useState('')
 9 |     const [password,setPassword]=useState('')
10 | 
11 |     const onSubmit = (e) => {
12 |         e.preventDefault()
13 |     
14 |         if (!wallet || !password) {
15 |           alert('Please add details')
16 |           return;
17 |         }
18 |         
19 |         onCreate(wallet,password)
20 |         setWallet('')
21 |         setPassword('')
22 |       }
23 |     return (
24 |         
25 |         <div>
26 |             
27 |             <br></br>
28 |             <div className = "heading">
29 |             Create Wallet
30 |             </div>
31 | 
32 |             <form method="POST" onSubmit={onSubmit}>
33 |             <rb.Container className = "center">
34 |             <rb.Container fluid = "false" className = "form1">
35 |                 <rb.Row>
36 |                     
37 |                     <rb.Col className="label">
38 |                         Wallet Name
39 |                     </rb.Col>
40 |                     <rb.Col>
41 |                         <input style = {{width: "220px"}} classname = "field-border" type="text" name="wallet" value = {wallet} onChange={(e) => setWallet(e.target.value)}/>
42 |                     </rb.Col>
43 |                     
44 |                 </rb.Row>
45 |                 <rb.Row className = "field">
46 |                     
47 |                     <rb.Col className="label">
48 |                         Password
49 |                     </rb.Col>
50 |                     <rb.Col>
51 |                         <input type="password" style = {{width: "220px"}} name="password" value = {password} onChange={(e) => setPassword(e.target.value)} />
52 |                     </rb.Col>
53 |                     
54 |                 </rb.Row>
55 |                 <rb.Row className = "btn-field">
56 |                 <button className="btncr" type="submit" value="Submit" ><span>Submit</span></button>
57 |                 </rb.Row>
58 |             </rb.Container>
59 |             </rb.Container>
60 |             </form>
61 |             
62 |             {/* <form method="POST" onSubmit={onSubmit}>
63 |             
64 |             
65 |         <label>
66 |         Wallet Name
67 |         <input className = "test" type="text" name="wallet" value = {wallet} onChange={(e) => setWallet(e.target.value)}/>
68 |         </label>
69 |         <p></p>
70 |         <label>
71 |         Password
72 |         <input type="password" name="password" value = {password} onChange={(e) => setPassword(e.target.value)} />
73 |         </label>
74 |         <p></p>
75 |         
76 |         <input className = "submit" type="submit" value="Submit" />
77 |         
78 | 
79 |     </form> */}
80 |         </div>
81 |     )
82 | }
83 | 
84 | export default CreateWallet
85 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/DisplayWallet.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {useState,useEffect} from 'react'
 3 | import { Button } from './Button'
 4 | import DisplayMixdepth from './DisplayMixdepth'
 5 | import DisplayUTXOs from './DisplayUTXOs'
 6 | 
 7 | const DisplayWallet = ({listWalletInfo,onSend,listUTXOs}) => {
 8 |     const [wallet_info,setWalletInfo] = useState([])
 9 |     const [UTXOHistory,setUTXOHistory] = useState({})
10 |     const [showUTXO,setShowUTXO] = useState(false);
11 |     // Websocket object with scope of DisplayWallet - we don't initialize
12 |     // yet because it auto-opens, and we can only open once
13 |     // we have authenticated:
14 |     var ws;
15 |     useEffect(()=>{
16 |           const name = JSON.parse(sessionStorage.getItem('auth')).name;
17 |           const token = JSON.parse(sessionStorage.getItem('auth')).token;
18 |           ws = new WebSocket("wss://127.0.0.1:28283");
19 |             ws.onopen = (event) => {
20 |               console.log("connected to websocket");
21 |               ws.send(token);
22 |             }
23 |             ws.onmessage = (event) => {
24 |               // For now we only have one message type,
25 |               // namely the transaction notification:
26 |               // For now, note that since the `getUtxos` function
27 |               // is called on every render of the display page,
28 |               // we don't need to somehow use this data other
29 |               // than as some kind of popup/status bar notifier.
30 |               // In future it might be possible to use the detailed
31 |               // transaction deserialization passed in this notification,
32 |               // for something.
33 |               var wsdata = JSON.parse(event.data);
34 |               alert("Websocket sent: " + wsdata.txid);
35 |             }
36 |           const getWalletInfo = async()=>{
37 |           const wallet_info = await listWalletInfo(name);
38 |           console.log(wallet_info);
39 |           setWalletInfo(wallet_info);
40 |         }
41 | 
42 |         const getUTXOs = async()=>{
43 |             const utxos = await listUTXOs();
44 |             setUTXOHistory(utxos)
45 |             console.log(utxos)
46 |         }
47 |     
48 |         getWalletInfo();
49 |         getUTXOs();
50 |       },[])
51 |     
52 |     return (
53 |         <div>
54 |             Wallet Details
55 |             <p></p>
56 |             {wallet_info.map((walletInfo,index)=>{
57 |                 return <DisplayMixdepth key={index} walletInfo = {walletInfo}></DisplayMixdepth>
58 |             })}
59 |             <p></p>
60 |             <Button onClick={()=>{setShowUTXO(!showUTXO)}}>{showUTXO?"Hide UTXOs":"Show UTXOs"}</Button>
61 |             <p></p>
62 | 
63 |             {
64 |                 showUTXO? 
65 |                     Object.entries(UTXOHistory).map(([key, val])=>
66 |                     <DisplayUTXOs key={key} utxoID={key} utxo={val}> </DisplayUTXOs>
67 |                     )
68 | 
69 |                 : ""
70 |             }            
71 |         </div>
72 |     )
73 | }
74 | 
75 | export default DisplayWallet
76 | 


--------------------------------------------------------------------------------
/joinmarket/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `yarn start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 | 
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 | 
17 | ### `yarn test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `yarn build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `yarn eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 | 
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 | 
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `yarn build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/Receive.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { useState, useEffect } from 'react'
  3 | import { BitcoinQR } from '@ibunker/bitcoin-react';
  4 | import '@ibunker/bitcoin-react/dist/index.css';
  5 | import { useLocation } from "react-router-dom";
  6 | import * as rb from 'react-bootstrap'
  7 | import './receive.css'
  8 | 
  9 | const Receive = ({onReceive}) => {
 10 |     const location = useLocation()
 11 |     const [new_address, setNewAddress] = useState('')
 12 | 
 13 |     const getAddress = async(mixdepth)=>{
 14 |         //update request with token if backend updated
 15 |         let authData = JSON.parse(sessionStorage.getItem('auth'));
 16 |         let token = "Bearer "+authData.token;
 17 |         let name = authData.name;
 18 |         const res = await fetch(`/api/v1/wallet/${name}/address/new/${mixdepth}`,{
 19 |             method:'GET',
 20 |             headers: {
 21 |               'Content-type': 'application/json',
 22 |                'Authorization':token
 23 |             },
 24 |         });
 25 |         const data = await res.json();
 26 |         console.log(data)
 27 |         return (data[0].address);
 28 |   
 29 |     }
 30 | 
 31 |     useEffect(()=>{
 32 | 
 33 |         const getNewAddress = async(account) => {
 34 |             const temp1 = parseInt(account,10)
 35 |             const temp = await getAddress(temp1)
 36 |             //window.alert(temp1)
 37 |             setNewAddress(temp)
 38 |             return
 39 |         }
 40 |     
 41 |         getNewAddress(location.state.account_no);
 42 |       },[])
 43 | 
 44 |     const [temp_address, setTempAddress] = useState('')
 45 |     const [amount, setAmount] = useState('')
 46 | 
 47 |     const onSubmit = (e) => {
 48 |         e.preventDefault()
 49 |         
 50 |         if (!new_address) {
 51 |           alert('Please add the address')
 52 |           return
 53 |         }
 54 | 
 55 |         setTempAddress(new_address)       
 56 | 
 57 |       }
 58 | 
 59 |     return (
 60 |         <div>
 61 | 
 62 |         <br></br>
 63 |             <div className = "heading">
 64 |             Recieve Funds
 65 |             </div>
 66 | 
 67 |             <form method="POST" onSubmit={onSubmit}>
 68 |             <rb.Container className = "center">
 69 |             <rb.Container fluid = "false" className = "form1">
 70 |                 <rb.Row>
 71 |                     
 72 |                     <rb.Col className="label">
 73 |                         Address
 74 |                     </rb.Col>
 75 |                     <rb.Col>
 76 |                     <input type="text" name="address"  value = {new_address } style = {{width: "415px"}} readOnly = {true} onChange={(e) => setNewAddress(e.target.value)}/>
 77 |                     </rb.Col>
 78 |                     
 79 |                 </rb.Row>
 80 |                 <rb.Row className = "field">
 81 |                     
 82 |                     <rb.Col className="label">
 83 |                     Amount(BTC)
 84 |                     </rb.Col>
 85 |                     <rb.Col>
 86 |                     <input type="text" name="amount_sats" value = {amount} style = {{width: "415px"}} onChange={(e) => setAmount(e.target.value)}/>
 87 |                     </rb.Col>
 88 |                     
 89 |                 </rb.Row>
 90 |                 <rb.Row className = "btn-field">
 91 |                 <button className="btncr" type="submit" value="Submit" ><span>Get QR Code</span></button>
 92 |                 </rb.Row>
 93 | 
 94 |                 {temp_address.length > 0? (
 95 |                 <BitcoinQR
 96 |                     bitcoinAddress={temp_address}
 97 |                     message = ""
 98 |                     amount ={amount}
 99 |                     time = ""
100 |                     exp = ""
101 |                 />):("")}
102 | 
103 |             </rb.Container>
104 |             </rb.Container>
105 | 
106 | 
107 |             </form>
108 |         </div>
109 |     )
110 | }
111 | 
112 | export default Receive
113 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/Payment.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { useState } from 'react'
  3 | import { useLocation } from "react-router-dom"
  4 | import './payment.css'
  5 | import * as rb from 'react-bootstrap'
  6 | 
  7 | const Payment = ({onPayment,onCoinjoin}) => {
  8 |     const location = useLocation()
  9 |     const [destination, setDestination] = useState('')
 10 |     const [amount, setAmount] = useState('')
 11 |     const [mixdepth, setMixdepth] = useState(location.state.account_no)
 12 |     const [counterparties,setcounterparties] = useState('');
 13 |     const [isCoinjoin,setisCoinjoin] = useState(false);
 14 | 
 15 |     const onSubmit = (e) => {
 16 |         e.preventDefault()
 17 |     
 18 |         if (!amount || !mixdepth || !destination) {
 19 |           alert('Please add details')
 20 |           return
 21 |         }
 22 |         //maybe add await here
 23 |         //if normal payment
 24 |         if(isCoinjoin===false){
 25 |             let wallet =JSON.parse(sessionStorage.getItem('auth')).name;
 26 |             onPayment(wallet,mixdepth,amount,destination);
 27 |         }
 28 |         //coinjoin
 29 |         else{
 30 |             if(!counterparties){
 31 |                 alert("Please set counterparties to a non zero number");
 32 |                
 33 |                 return;
 34 |             }
 35 |             else{
 36 |                 onCoinjoin(mixdepth,amount,counterparties,destination);
 37 |                 alert("Coinjoin in progress");
 38 |             }
 39 | 
 40 |         }
 41 | 
 42 |         setcounterparties('');
 43 |         setMixdepth('');
 44 |         setAmount('');
 45 |         setDestination('');
 46 |         setisCoinjoin(false);
 47 |        
 48 |     
 49 |         
 50 | 
 51 |       }
 52 | 
 53 |     return (
 54 |         <div>
 55 | 
 56 |         <br></br>
 57 |             <div className = "heading">
 58 |             Send Payment
 59 |             </div>
 60 | 
 61 |             <form method="POST" onSubmit={onSubmit}>
 62 |             <rb.Container className = "center">
 63 |             <rb.Container fluid = "false" className = "form1">
 64 |                 <rb.Row>
 65 |                     
 66 |                     <rb.Col className="label">
 67 |                     Receiver address:
 68 |                     </rb.Col>
 69 |                     <rb.Col>
 70 |                     <input type="text" name="destination"  value = {destination }onChange={(e) => setDestination(e.target.value)}/>
 71 |                     </rb.Col>
 72 |                     
 73 |                 </rb.Row>
 74 |                 <rb.Row className = "field">
 75 |                     
 76 |                     <rb.Col className="label">
 77 |                         Account
 78 |                     </rb.Col>
 79 |                     <rb.Col>
 80 |                     <input type="text" name="mixdepth" value = {mixdepth} onChange={(e) => setMixdepth(e.target.value)} readOnly={true}/>
 81 |                     </rb.Col>
 82 |                     
 83 |                 </rb.Row>
 84 |                 <rb.Row className = "field">
 85 |                     
 86 |                     <rb.Col className="label">
 87 |                         Amount(SATS)
 88 |                     </rb.Col>
 89 |                     <rb.Col>
 90 |                     <input type="text" name="amount_sats" value = {amount} onChange={(e) => setAmount(e.target.value)}/>
 91 |                     </rb.Col>
 92 |                     
 93 |                 </rb.Row>
 94 | 
 95 |                 <p></p>
 96 |                 <br></br>
 97 |                 <div className = "coinjoin">
 98 |         Do you want to do a coinjoin?
 99 |         <p></p>
100 |         Yes<input type="radio" name="coinjoin" onChange={(e) => setisCoinjoin(true)} />
101 |         <p></p>
102 |         No<input type="radio" name="coinjoin"  onChange={(e) => setisCoinjoin(false)}/>
103 |         <p></p>
104 |         </div>
105 |        
106 | 
107 |         {
108 |             isCoinjoin? 
109 |             <div>
110 |                 <rb.Row className = "field">
111 |                 <rb.Col className="label">
112 |                 Counterparties
113 |                 </rb.Col>
114 |                 <rb.Col>
115 |                 <input type="text" name="counterparties" value = {counterparties} onChange={(e)=>setcounterparties(e.target.value)}/>
116 |                 </rb.Col>
117 |             </rb.Row>
118 |             </div>
119 |              :
120 |              
121 |               ""
122 |               
123 |         }
124 | 
125 |                 <rb.Row className = "btn-field">
126 |                 <button className="btncr" type="submit" value="Submit" ><span>Submit</span></button>
127 |                 </rb.Row>
128 |             </rb.Container>
129 |             </rb.Container>
130 |             </form>
131 |         </div>
132 |     )
133 | }
134 | 
135 | export default Payment
136 | 


--------------------------------------------------------------------------------
/joinmarket/src/components/DisplayMixdepth.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { Button } from './Button'
  3 | import './displayMixdepth.css'
  4 | import { BrowserRouter as Router, Link, Route ,Switch} from 'react-router-dom';
  5 | import * as rb from 'react-bootstrap'
  6 | 
  7 | const DisplayMixdepth = ({walletInfo}) => {
  8 | 
  9 |     const accounts = []
 10 |     
 11 |     for (const account_info of walletInfo.accounts){
 12 |         accounts.push(account_info)
 13 |     }
 14 |    
 15 |     return (
 16 |         <div>
 17 |             Total Balance: {walletInfo.total_balance} BTC
 18 |             <p></p>
 19 |             <rb.Button href="/maker">Maker Service</rb.Button>
 20 |             <p></p>
 21 |             {accounts.map((account, index) => (
 22 |                 
 23 |                 <div key = {index}>
 24 |                     
 25 |                     <rb.Accordion>
 26 |                         <rb.Accordion.Item eventKey={index}>
 27 |                             <rb.Accordion.Header className = "head"> 
 28 |                             <div className = "links">
 29 | 
 30 |                             <rb.Container>
 31 |                             <rb.Row>
 32 |                             <rb.Col>
 33 |                             Account {accounts[index].account}
 34 | 
 35 |                             </rb.Col>
 36 |                             <rb.Col>
 37 |                             Balance: {accounts[index].account_balance} BTC
 38 | 
 39 |                             </rb.Col>
 40 |                             <rb.Col>
 41 | 
 42 |                             <Link to={{pathname:"/payment", state: { account_no: accounts[index].account }}} className="btn btn-primary">Send  </Link>{' '}
 43 |                             </rb.Col>
 44 |                             <rb.Col>
 45 |                             <Link to={{pathname:"/receive", state: { account_no: accounts[index].account }}} className="btn btn-primary">Receive </Link>
 46 |                             </rb.Col>
 47 |                             </rb.Row>
 48 |                             </rb.Container>
 49 |                             
 50 |                             
 51 |                             </div>
 52 |                             </rb.Accordion.Header>
 53 |                             <rb.Accordion.Body>
 54 |                             <rb.Accordion>
 55 |                                 <rb.Accordion.Item eventKey="0">
 56 |                                     
 57 |                                     <rb.Accordion.Header>External Addresses Balance: {accounts[index].branches[0].balance} BTC </rb.Accordion.Header>
 58 |                                     <div className = "xpub">
 59 |                                     Extended Pubkey : {accounts[index].branches[0].branch.split("\t").pop()}
 60 |                                     </div>
 61 |                                     <rb.Accordion.Body>
 62 |                                         {accounts[index].branches[0].entries.map((user, i) => (
 63 |                                         <div key={i}>
 64 |                                         <rb.Accordion>
 65 |                                             <rb.Accordion.Item eventKey="0">
 66 |                                                 <div className = "address_label">
 67 |                                                 <b>{accounts[index].branches[0].entries[i].labels}</b>
 68 |                                                 </div>
 69 |                                                
 70 |                                                 <rb.Accordion.Header>{accounts[index].branches[0].entries[i].address} {'   '}  </rb.Accordion.Header>
 71 |                                                 <rb.Accordion.Body>
 72 |                                                     <div className = "branch-body">
 73 |                                                         amount: {accounts[index].branches[0].entries[i].amount}
 74 |                                                     </div>
 75 |                                                 </rb.Accordion.Body>
 76 |                                             </rb.Accordion.Item>
 77 |                                         </rb.Accordion>
 78 |                                         </div>
 79 |                                         ))}
 80 |                                     </rb.Accordion.Body>
 81 |                                 </rb.Accordion.Item>  
 82 |                                 <rb.Accordion.Item eventKey="1">
 83 |                                     <rb.Accordion.Header>Internal Addresses Balance: {accounts[index].branches[1].balance} BTC</rb.Accordion.Header>
 84 |                                         <rb.Accordion.Body>
 85 |                                             {accounts[index].branches[1].entries.map((user, j) => (
 86 |                                             <div key={j}>
 87 |                                                 <rb.Accordion>
 88 |                                                     <rb.Accordion.Item eventKey="0">
 89 |                                                         <rb.Accordion.Header>{accounts[index].branches[0].entries[j].address} {' '} {accounts[index].branches[0].entries[j].labels} </rb.Accordion.Header>
 90 |                                                         <rb.Accordion.Body>
 91 |                                                             <div className = "branch_body">
 92 |                                                                 amount: {accounts[index].branches[0].entries[j].amount}
 93 |                                                             </div>
 94 |                                                         </rb.Accordion.Body>
 95 |                                                     </rb.Accordion.Item>
 96 |                                                 </rb.Accordion>
 97 |                                             </div>
 98 |                                             ))}
 99 |                                         </rb.Accordion.Body>
100 |                                 </rb.Accordion.Item>
101 |                             </rb.Accordion>
102 |                         </rb.Accordion.Body>
103 |                     </rb.Accordion.Item>
104 |                 </rb.Accordion>
105 |                 </div>
106 |             ))}
107 |         </div>
108 |     )
109 | }
110 | 
111 | export default DisplayMixdepth
112 | 


--------------------------------------------------------------------------------
/joinmarket/src/App.js:
--------------------------------------------------------------------------------
  1 | import './App.css';
  2 | import '@ibunker/bitcoin-react/dist/index.css';
  3 | import {useState,useEffect} from 'react'
  4 | import Wallets from './components/Wallets';
  5 | import Payment from './components/Payment';
  6 | import CreateWallet from './components/CreateWallet';
  7 | import Homepage from './components/homepage';
  8 | import Maker from './components/Maker';
  9 | import Receive from './components/Receive';
 10 | import DisplayWallet from './components/DisplayWallet'
 11 | import * as rb from 'react-bootstrap';
 12 | import github_logo from './github.svg'
 13 | import twitter_logo from './twitter.svg'
 14 | import useInterval from './components/utils'
 15 | import { BrowserRouter as Router, Route ,Switch} from 'react-router-dom';
 16 | import { useGlobal } from 'reactn';
 17 | 
 18 | function App() {
 19 | 
 20 |   const [walletList,setWalletList] = useState([])
 21 | 
 22 |   const [makerStarted, setmakerStarted]  = useGlobal("makerStarted");
 23 |   const [walletName, setWalletName] = useGlobal("walletName");
 24 |   const [coinjoinInProcess, setCoinjoinInProcess] = useGlobal("coinjoinInProcess");
 25 |   const [currentStatusMessage, setCurrentStatusMessage] = useGlobal("currentStatusMessage");
 26 | 
 27 |   const listWallets = async()=>{
 28 |     const res = await fetch('/api/v1/wallet/all');
 29 |     const data = await res.json();
 30 |     const walletList = data[0].wallets;
 31 |     return walletList;
 32 |   }
 33 |   const resetWalletSessionStorage = async()=>{
 34 |     sessionStorage.clear();
 35 |     setWalletName("No wallet loaded");
 36 |     setmakerStarted(false);
 37 |     setCoinjoinInProcess(false);
 38 |   }
 39 | 
 40 |   function getCurrentStatusMessage(){
 41 |     return "Wallet: " + walletName + ", Yg started: " + makerStarted + ", Coinjoin in process: " + coinjoinInProcess;
 42 |   }
 43 | 
 44 |   useInterval(() => {
 45 |     const sessionClear = async()=>{
 46 |       
 47 |       try{
 48 |         const res = await fetch('/api/v1/session',{
 49 |           method:"GET",          
 50 |         });
 51 | 
 52 |         const data = await res.json();
 53 |         if(data[0].session===false){
 54 |           console.log("no wallet in backend");
 55 |           // This status requires us to clear, especially
 56 |           // the auth state, so we just reset everything:
 57 |           resetWalletSessionStorage();
 58 |           return;
 59 |         }
 60 |         console.log("backend alive and wallet loaded");
 61 |         console.log("maker status: " + data[0].maker_running);
 62 |         if (data[0].maker_running === true) {
 63 |           setmakerStarted(true);
 64 |         }
 65 |         else {
 66 |           setmakerStarted(false);
 67 |         }
 68 |         setWalletName(data[0].wallet_name);
 69 | 
 70 |         if (data[0].coinjoin_in_process === true){
 71 |           setCoinjoinInProcess(true);
 72 |         }
 73 |         else {
 74 |           setCoinjoinInProcess(false);
 75 |         }
 76 |         setCurrentStatusMessage(getCurrentStatusMessage());
 77 |       }
 78 | 
 79 |       catch(e){
 80 |         console.log("test")
 81 |         alert("Lost connection to backend! Please restart the backend server.");
 82 |         sessionStorage.clear();
 83 |       }
 84 |     }
 85 |     sessionClear();
 86 |     
 87 |   }, 8*1000);
 88 | 
 89 |   useEffect(()=>{
 90 |     
 91 |     const getWallets = async()=>{
 92 |       const wallets = await listWallets();
 93 |       console.log(wallets);
 94 |       setWalletList(wallets);
 95 |     }
 96 |     
 97 |     getWallets();
 98 |     
 99 |   },[])
100 |  
101 | 
102 |   const unlockWallet = async (name)=>{
103 |   
104 |     let authData =JSON.parse(sessionStorage.getItem('auth'));
105 |     console.log(authData)
106 |     //if unlocking same wallet
107 |     if(authData && authData.login===true && authData.name===name){
108 |       alert(name+" is already unlocked")
109 |       return;
110 |     }
111 |     //if unlocking another wallet while one is already unlocked
112 |     else if(authData && authData.login===true && authData.name!==name){
113 |       alert(authData.name+" is currently in use, please lock it first");
114 |       return;
115 |     }
116 | 
117 |     else{
118 |         try{
119 |             var passphrase = prompt("Enter the passphrase for " + name);
120 |             const res = await fetch(`/api/v1/wallet/${name}/unlock`,{
121 |             method:'POST',
122 |             headers: {
123 |               'Content-type': 'application/json',
124 |             },
125 |             body: JSON.stringify({"password": passphrase}),
126 |           })
127 |             const data = await res.json();
128 |             const token = data[0].token;
129 |             sessionStorage.setItem('auth',JSON.stringify({
130 |               login:true,
131 |               token:token,
132 |               name:name
133 |             }))
134 |             
135 |           }
136 |           
137 |         catch(e){
138 |           alert("Something went wrong,please try again!")
139 |         }
140 |         
141 |     }
142 |   }
143 | 
144 |     const lockWallet = async(name)=>{
145 |       let authData =JSON.parse(sessionStorage.getItem('auth'));
146 |       if(!authData || authData.login===false || authData.name!==name){
147 |         alert("Please unlock "+name+" first")
148 |         return;
149 |       }
150 | 
151 |       try{
152 |         let token = "Bearer "+authData.token
153 |         const res = await fetch(`/api/v1/wallet/${name}/lock`,{
154 |         method:"GET",
155 |         headers:{
156 |           'Authorization':token
157 |         }
158 |       });
159 |       sessionStorage.setItem('auth',JSON.stringify({
160 |         login:false,
161 |         token:'',
162 |         name:''
163 | 
164 |       }))
165 |       const data = await res.json();
166 |       console.log(data);
167 |       alert("locked wallet succesfully")
168 |       }
169 |       catch(e){
170 |         alert("Error while locking.")
171 |       }
172 |       
173 |     }
174 | 
175 |     const listWalletInfo = async(name)=>{
176 |       let authData =JSON.parse(sessionStorage.getItem('auth'));
177 |       let token = "Bearer "+authData.token
178 |       const res = await fetch(`/api/v1/wallet/${name}/display`,{
179 |         method:"GET",
180 |         headers:{
181 |           'Authorization':token
182 |         }
183 |       });
184 |       const data = await res.json();
185 |       const balance = data[0].walletinfo.total_balance;
186 |       const mix_depths = data[0].walletinfo.accounts;
187 |       const wallet_info={}
188 |       wallet_info['balance'] = balance;
189 |       wallet_info[mix_depths[0].account] = mix_depths[0].account_balance
190 |       wallet_info[mix_depths[1].account] = mix_depths[1].account_balance
191 |       wallet_info[mix_depths[2].account] = mix_depths[2].account_balance
192 |       wallet_info[mix_depths[3].account] = mix_depths[3].account_balance
193 |       wallet_info[mix_depths[4].account] = mix_depths[4].account_balance
194 |       
195 |       return [data[0].walletinfo];
196 |     }
197 | 
198 |     const displayWallet = async(name)=>{
199 | 
200 |       let authData =JSON.parse(sessionStorage.getItem('auth'));
201 |       if(authData.login===false || authData.name!==name){
202 |         alert("Please unlock "+name+" first")
203 |         return;
204 |       }
205 |       let token = "Bearer "+authData.token
206 |       const res = await fetch(`/api/v1/wallet/${name}/display`,{
207 |         method:"GET",
208 |         headers:{
209 |           'Authorization':token
210 |         }
211 |       });
212 |       const data = await res.json();
213 |       console.log(data[0].walletinfo);
214 |       const wallet_name = name
215 |       const balance = data[0].walletinfo.total_balance;
216 |       const mix_depths = data[0].walletinfo.accounts;
217 |       const wallet_info={}
218 |       wallet_info['balance'] = balance;
219 |       wallet_info[mix_depths[0].account] = mix_depths[0].account_balance
220 |       wallet_info[mix_depths[1].account] = mix_depths[1].account_balance
221 |       wallet_info[mix_depths[2].account] = mix_depths[2].account_balance
222 |       wallet_info[mix_depths[3].account] = mix_depths[3].account_balance
223 |       wallet_info[mix_depths[4].account] = mix_depths[4].account_balance
224 |       console.log(wallet_info)
225 |       return wallet_info;
226 |     }
227 | 
228 |     const createWallet = async(name,password)=>{
229 |       let authData =JSON.parse(sessionStorage.getItem('auth'));
230 |       if(authData===null || authData.login===false){
231 |         try{
232 |           const res = await fetch(`/api/v1/wallet/create`,{
233 |           method:'POST',
234 |           headers: {
235 |             'Content-type': 'application/json',
236 |           },
237 |           body: JSON.stringify({"password":password,"walletname":name,"wallettype":"sw"}),
238 |         })
239 | 
240 |         const data = await res.json();
241 | 
242 |         alert("Wallet created succesfully")
243 |         //figure out a safer way to show the seedphrase
244 |         alert(data[0].seedphrase)
245 |         const token = data[0].token;
246 |             sessionStorage.setItem('auth',JSON.stringify({
247 |               login:true,
248 |               token:token,
249 |               name:name
250 |             }))
251 |         }
252 |       catch(e){
253 |         //some other error occurs where wallet is not created
254 |         alert("Unexpected error! PLease try again")
255 |       }
256 |       }
257 |       else{
258 |         alert(authData.name +" is in use! Please lock it first.")
259 |       }
260 |       
261 |     }
262 | 
263 | 
264 |     const makePayment = async(name,mixdepth,amountSats,destination)=>{
265 |       let authData =JSON.parse(sessionStorage.getItem('auth'));
266 |       if(authData!=null && authData.login===true){
267 |         try{
268 |           let token = "Bearer "+authData.token
269 |           const res = await fetch(`/api/v1/wallet/${name}/taker/direct-send`,{
270 |             method:'POST',
271 |             headers: {
272 |               'Content-type': 'application/json',
273 |                'Authorization':token
274 |             },
275 |             body: JSON.stringify({
276 |               "mixdepth": mixdepth,
277 |               "amount_sats": amountSats,
278 |               "destination": destination
279 |               }
280 |               
281 |               ),
282 |           })
283 |           const data = await res.json();
284 |           console.log(data);
285 |           alert("Payment Succesful!")
286 |         }
287 |         catch(e){
288 |           alert("Error while processing payment!")
289 |         }
290 |        
291 |         
292 |       }
293 |       else{
294 |         alert("please unlock wallet first")
295 |       }
296 |     }
297 | 
298 |     //route for frontend
299 | 
300 |     const doCoinjoin = async(mixdepth,amount,counterparties,destination)=>{
301 |       try{
302 |         console.log("hellooo")
303 |         let authData = JSON.parse(sessionStorage.getItem('auth'));
304 | 
305 |         if(!authData|| authData.login===false || authData.name===''){
306 |           return;
307 |         }
308 | 
309 |         let token = "Bearer "+authData.token;
310 |         let name = authData.name;
311 |           const res = await fetch(`/api/v1/wallet/${name}/taker/coinjoin`,{
312 |             method:'POST',
313 |             headers: {
314 |               'Content-type': 'application/json',
315 |                'Authorization':token
316 |             },
317 |             body: JSON.stringify({
318 |               
319 |               "mixdepth": mixdepth,
320 |               "amount": amount,
321 |               "counterparties": counterparties,
322 |               "destination":destination
323 |               }
324 |               
325 |               ),
326 |           })
327 |           const data = await res.json();
328 |           console.log(data);
329 |           alert("Coinjoin in Progress!")
330 | 
331 |       }
332 |       catch(e){
333 |         return;
334 |       }
335 |     }
336 | 
337 |     const startMakerService = async(txfee,cjfee_a,cjfee_r,ordertype,minsize)=>{
338 |       let authData =JSON.parse(sessionStorage.getItem('auth'));
339 |     
340 |       if(!authData|| authData.login===false || authData.name===''){
341 |         alert("Please unlock a wallet first")
342 |         return;
343 |       }
344 |       let name = authData.name 
345 |       try{
346 |         let token = "Bearer "+authData.token
347 |         const res = await fetch(`/api/v1/wallet/${name}/maker/start`,{
348 |         method:"POST",
349 |         headers:{
350 |           'Authorization':token
351 |         },
352 |         body: JSON.stringify({
353 |           "txfee":txfee,
354 |           "cjfee_a":cjfee_a,
355 |           "cjfee_r":cjfee_r,
356 |           "ordertype":ordertype,
357 |           "minsize":minsize
358 |           }
359 |           
360 |           ),
361 |       });
362 |       
363 |       const data = await res.json();
364 |       console.log(data);
365 |       }
366 | 
367 |       catch(e){
368 |         alert("Error while starting service!")
369 |       }
370 |       
371 |     }
372 | 
373 |     const stopMakerService= async()=>{
374 |       let authData =JSON.parse(sessionStorage.getItem('auth'));
375 |       if(authData===null ||authData.login===false || authData.name===''){
376 |         alert('Wallet needs to be unlocked')
377 |         return;
378 |       }
379 |       try{
380 |         let name = authData.name 
381 |         let token = "Bearer "+authData.token
382 |         const res = await fetch(`/api/v1/wallet/${name}/maker/stop`,{
383 |           method:"GET",
384 |           headers:{
385 |             'Authorization':token
386 |           },
387 |         })
388 |         const data = await res.json();
389 |         console.log(data);
390 |         alert("Maker service stopped")
391 |         }
392 | 
393 |       catch(e){
394 |         alert("Error while stopping service!")
395 |       }      
396 |     }
397 | 
398 |     const getUTXOs = async()=>{
399 |       try{
400 |         let authData =JSON.parse(sessionStorage.getItem('auth'));
401 |         let token = "Bearer "+authData.token
402 |         if(!authData|| authData.login===false || authData.name===''){
403 |           return;
404 |         }
405 |         let name = authData.name;
406 |         const res = await fetch(`/api/v1/wallet/${name}/utxos`,{
407 |           method:"GET",
408 |           headers:{
409 |             'Authorization':token
410 |           },
411 |         });
412 |         const data = await res.json();
413 |         return data[0].utxos;
414 |       }
415 |       catch(e){
416 |         return;
417 |       }
418 |     }
419 | 
420 | 
421 |   return (
422 |     <Router>
423 |     <div className="App">
424 | 
425 |     <rb.Navbar sticky="top" collapseOnSelect expand="lg" bg="dark" variant="dark">
426 |     
427 |     <rb.Container>
428 |       <rb.Navbar.Brand href='/'>Joinmarket</rb.Navbar.Brand>
429 |       <rb.Navbar.Toggle aria-controls="responsive-rb.Navbar-rb.Nav" />
430 |       <rb.Navbar.Collapse id="responsive-rb.Navbar-rb.Nav">
431 |         <rb.Nav className="me-auto">
432 |           <rb.Nav.Link href="https://github.com/JoinMarket-Org/joinmarket-clientserver/tree/master/docs">Docs</rb.Nav.Link>
433 |           <rb.Nav.Link href="https://github.com/JoinMarket-Org/joinmarket-clientserver#wallet-features">Features</rb.Nav.Link>
434 |           <rb.Nav.Link href="https://github.com/JoinMarket-Org/joinmarket-clientserver#joinmarket-clientserver">About</rb.Nav.Link>
435 |         </rb.Nav>
436 |         <rb.Nav>
437 |           <rb.Navbar.Brand href="https://github.com/JoinMarket-Org/joinmarket-clientserver">
438 |             <img
439 |              src={github_logo}
440 |              width="50"
441 |              height="50"
442 |              className="github"
443 |              alt="github logo"
444 |             />
445 |           </rb.Navbar.Brand>
446 |           <rb.Navbar.Brand href="https://twitter.com/joinmarket">
447 |             <img
448 |             src={twitter_logo}
449 |             width="50"
450 |             height="50"
451 |             className="twitter"
452 |             alt="twitter logo"
453 |             />
454 |           </rb.Navbar.Brand>
455 |         </rb.Nav>
456 |       </rb.Navbar.Collapse>
457 |     </rb.Container>
458 |     <rb.Container>
459 |     <rb.Navbar.Text>{getCurrentStatusMessage()}</rb.Navbar.Text>
460 |   </rb.Container>
461 |   </rb.Navbar>
462 | 
463 |       <p></p>
464 |       <Switch>
465 |           
466 |       <Route
467 |           path='/'
468 |           exact
469 |           render={(props) => (
470 |             <>
471 |              <Homepage></Homepage>
472 |             </>
473 |           )}
474 |         />
475 |       
476 |       <Route
477 |           path='/showWallets'
478 |           exact
479 |           render={(props) => (
480 |             <>
481 |              <Wallets walletList = {walletList} onUnlock = {unlockWallet} onLock = {lockWallet} onDisplay = {displayWallet}></Wallets>
482 |             </>
483 |           )}
484 |         />
485 | 
486 | 
487 |         <Route path='/payment' exact render={(props) => (
488 |             <>
489 |              <Payment onPayment = {makePayment} onCoinjoin = {doCoinjoin}></Payment>
490 |             </>
491 |           )}
492 |         />
493 |         
494 |         <Route path='/create' exact render={(props) => (
495 |             <>
496 |              <CreateWallet onCreate={createWallet}></CreateWallet>
497 |             </>
498 |           )}
499 |         />
500 | 
501 |         <Route path='/maker' exact render={(props) => (
502 |             <>
503 |              <Maker onStart = {startMakerService} onStop = {stopMakerService}></Maker>
504 |             </>
505 |           )}
506 |         />
507 |         <Route path='/receive' exact render={(props) => (
508 |             <>
509 |              <Receive></Receive>
510 |             </>
511 |           )}
512 |         />
513 |         <Route path='/display' exact render={(props) => (
514 |             <>
515 |              <DisplayWallet listWalletInfo = {listWalletInfo} onSend = {makePayment} listUTXOs={getUTXOs}></DisplayWallet>
516 |             </>
517 |           )}
518 |         />
519 |      
520 |         </Switch>{" "}
521 |       
522 |     </div>
523 |     </Router>
524 |     
525 |     
526 |   );
527 | }
528 | 
529 | export default App;


--------------------------------------------------------------------------------