Merge pull request #3 from mosaicnetworks/dev

Dev
mosaicnetworks · Dec 11, 2019 · a99ba65 · a99ba65
2 parents 2b32632 + d62921e
commit a99ba65
Show file tree

Hide file tree

Showing 12 changed files with 150 additions and 124 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "monet-wallet",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"private": true,
 	"dependencies": {
 		"@fortawesome/fontawesome-svg-core": "^1.2.25",
@@ -26,14 +26,15 @@
 		"react-router-dom": "^5.1.2"
 	},
 	"scripts": {
-		"dev": "concurrently --kill-others \"yarn run start:server\" \"yarn run start:electron\"",
-		"start:server": "webpack-dev-server --config config/webpack.config.js --hot --inline",
-		"start:electron": "electron ./dist",
+		"dev": "concurrently --kill-others \"yarn run dev:server\" \"yarn run dev:electron\"",
+		"dev:server": "webpack-dev-server --config config/webpack.config.js --hot --inline",
+		"dev:electron": "electron ./dist",
 		"build": "rm -rf dist/ && webpack --config config/webpack.config.js && cp ./package.json ./dist/",
 		"clean": "rm -rf node_modules dist pkg",
-		"pkg:mac": "electron-packager dist \"Monet Wallet\" --platform=darwin --target=zip --arch=x64 --out=pkg --overwrite --icon=src/assets/icons/monet_logo.icns",
-		"pkg:linux": "electron-packager ./dist \"Monet Wallet\" --target=zip --platform=linux --arch=x64 --out ./pkg --overwrite --icon src/assets/monet_logo.png",
-		"pkg:win": "electron-packager ./dist \"Monet Wallet\" --platform=win32 --arch=x64 --out ./pkg --overwrite --icon src/assets/monet_logo.ico",
+		"pkg:mac": "electron-packager dist \"Monet Wallet\" --platform=darwin --target=zip --arch=x64 --out=pkg --overwrite --icon=src/assets/icons/monet_logo.icns --prune",
+		"pkg:lin": "electron-packager ./dist \"Monet Wallet\" --target=zip --platform=linux --arch=x64 --out=./pkg --overwrite --icon=src/assets/monet_logo.png --prune --asar",
+		"pkg:win": "electron-packager ./dist \"Monet Wallet\" --platform=win32 --arch=x64 --out=./pkg --overwrite --icon=src/assets/monet_logo.ico --prune --asar",
+		"pkg": "concurrently --kill-others \"yarn pkg:mac\" \"yarn pkg:lin\"",
 		"linkalldev": "yarn link evm-lite-core evm-lite-consensus evm-lite-keystore evm-lite-datadir evm-lite-client evm-lite-utils",
 		"addalldev": "yarn add evm-lite-core evm-lite-consensus evm-lite-keystore evm-lite-datadir evm-lite-client evm-lite-utils"
 	},

diff --git a/src/assets/icons/monet_logo.icns b/src/assets/icons/monet_logo.icns
diff --git a/src/assets/icons/monet_logo.ico b/src/assets/icons/monet_logo.ico
diff --git a/src/assets/icons/monet_logo.png b/src/assets/icons/monet_logo.png
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -13,8 +13,8 @@ const SHeader = styled.div`
 	width: 100%;
 	/* background: var(--blue); */
 	/* color: white !important; */
-	box-shadow: 2px 0px 40px rgba(0, 0, 0, 0.05);
-	border-bottom: 1px solid #eee;
+	/* box-shadow: 2px 0px 40px rgba(0, 0, 0, 0.05); */
+	border-bottom: var(--border);
 	padding: 0 15px;
 `;
 

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -13,10 +13,11 @@ type Props = {};
 const SSidebar = styled.div`
 	/* width: 300px; */
 	height: 100vh;
-	background: #fff;
-	box-shadow: 0 2px 60px rgba(0, 0, 0, 0.2);
+	background: url('https://dashboard.monet.network/static/media/bg.f2d96fad.svg');
+	background-position-x: -1px;
+	/* box-shadow: 0 2px 60px rgba(0, 0, 0, 0.2); */
 	border-right: var(--border);
-	background: var(--blue);
+	/* background: var(--blue); */
 `;
 
 const SLogo = styled.div`

diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 
 import styled from 'styled-components';
 
@@ -20,6 +20,7 @@ import Loader from './Loader';
 import { MonikerEVMAccount } from 'src/monet';
 import { transfer } from '../modules/accounts';
 import { selectAccountError, selectTransferLoading } from '../selectors';
+import Await from './Await';
 
 const STransfer = styled.div`
 	padding-top: 20px;
@@ -53,14 +54,15 @@ const Transfer: React.FC<Props> = props => {
 	const [passphrase, setPassphrase] = useState('');
 	const [success, setSuccess] = useState('');
 
-	const makeTransfer = async () => {
+	const makeTransfer = useCallback(async () => {
 		const success: any = await dispatch(
 			transfer(props.account.moniker, passphrase, to, value)
 		);
 
 		if (success) {
 			setTo('');
 			setValue('');
+			setPassphrase('');
 			setSuccess('Transfer successful');
 
 			await props.getAccount();
@@ -69,7 +71,7 @@ const Transfer: React.FC<Props> = props => {
 				setSuccess('');
 			}, 5000);
 		}
-	};
+	}, [passphrase, to, value]);
 
 	return (
 		<STransfer>
@@ -95,7 +97,7 @@ const Transfer: React.FC<Props> = props => {
 										setValue(e.target.value)
 									}
 									value={value}
-									type="text"
+									type="number"
 									placeholder="Amount"
 								/>
 								<InputGroup.Append>
@@ -136,12 +138,12 @@ const Transfer: React.FC<Props> = props => {
 								(success.length && (
 									<>
 										<SConfirm className="text-center">
-											<h5>
+											<h2>
 												<FontAwesomeIcon
 													className={'green'}
 													icon={faCheck}
 												/>{' '}
-											</h5>
+											</h2>
 											<h5>{success}</h5>
 										</SConfirm>
 									</>
@@ -158,64 +160,74 @@ const Transfer: React.FC<Props> = props => {
 								</h5>
 							</SConfirm>
 						</Error>
-						<SConfirm>
-							<hr />
-							<h5>Confirm</h5>
-							<p>
-								Make sure the details below are correct before
-								submitting transaction
-							</p>
-							<Row>
-								<Col>From</Col>
-								<Col>To</Col>
-							</Row>
-							<Row>
-								<Col className="text-center">
-									<Row
-										noGutters={false}
-										className="align-items-center"
-									>
-										<Col md={2}>
-											<Avatar
-												address={props.account.address}
-												size={40}
-											/>
-										</Col>
-										<Col>
-											<code>
-												{props.account.address ||
-													'0x0000000000000000000000000000000000000000'}
-											</code>
-										</Col>
-									</Row>
-								</Col>
-								<Col className="text-center">
-									<Row className="align-items-center">
-										<Col md={2}>
-											<Avatar address={to} size={40} />
-										</Col>
-										<Col>
-											<code>
-												{to ||
-													'0x0000000000000000000000000000000000000000'}
-											</code>
-										</Col>
-									</Row>
-								</Col>
-							</Row>
-							<hr />
-							<h5 className="mono text-center">
-								<img
-									src={
-										'https://monet.network/app/images/products/tenom.svg'
-									}
-									width={30}
-								/>{' '}
-								{value.length > 0
-									? new Currency(value + 'T').format('T')
-									: '0T'}
-							</h5>
-						</SConfirm>
+						<Await
+							fallback={<></>}
+							await={!(to.length > 0 && value.length > 0)}
+						>
+							<SConfirm>
+								<hr />
+								<h5>Confirm</h5>
+								<p>
+									Make sure the details below are correct
+									before submitting transaction
+								</p>
+								<Row>
+									<Col>From</Col>
+									<Col>To</Col>
+								</Row>
+								<Row>
+									<Col className="text-center">
+										<Row
+											noGutters={false}
+											className="align-items-center"
+										>
+											<Col md={2}>
+												<Avatar
+													address={
+														props.account.address
+													}
+													size={40}
+												/>
+											</Col>
+											<Col>
+												<code>
+													{props.account.address ||
+														'0x0000000000000000000000000000000000000000'}
+												</code>
+											</Col>
+										</Row>
+									</Col>
+									<Col className="text-center">
+										<Row className="align-items-center">
+											<Col md={2}>
+												<Avatar
+													address={to}
+													size={40}
+												/>
+											</Col>
+											<Col>
+												<code>
+													{to ||
+														'0x0000000000000000000000000000000000000000'}
+												</code>
+											</Col>
+										</Row>
+									</Col>
+								</Row>
+								<hr />
+								<h5 className="mono text-center">
+									<img
+										src={
+											'https://monet.network/app/images/products/tenom.svg'
+										}
+										width={30}
+									/>{' '}
+									{value.length > 0
+										? new Currency(value + 'T').format('T')
+										: '0T'}
+								</h5>
+							</SConfirm>
+						</Await>
 					</Col>
 				</Form.Row>
 			</Form>

diff --git a/src/components/Update.tsx b/src/components/Update.tsx
@@ -101,9 +101,7 @@ const Update: React.FC<Props> = props => {
 								type="text"
 								placeholder="Current Passphrase"
 							/>
-							<Form.Text className="text-muted">
-								The address you wish to transfer to.
-							</Form.Text>
+							<Form.Text className="text-muted"></Form.Text>
 						</Form.Group>
 						<Form.Group controlId="formBasicPassword">
 							<InputGroup>
@@ -117,9 +115,7 @@ const Update: React.FC<Props> = props => {
 								/>
 							</InputGroup>
 
-							<Form.Text className="text-muted">
-								Enter an amount in tenom
-							</Form.Text>
+							<Form.Text className="text-muted"></Form.Text>
 						</Form.Group>
 						<Form.Group controlId="formBasicEmail">
 							<Form.Control

diff --git a/src/components/styles.tsx b/src/components/styles.tsx
@@ -4,6 +4,8 @@ export const SStatistic = styled.div`
 	width: 100%;
 	font-weight: 600 !important;
 	border-bottom: var(--border);
+	background: #fff;
+	/* box-shadow: 2px 0px 40px rgba(0, 0, 0, 0.05); */
 
 	h3 {
 		font-size: 35px;
@@ -15,7 +17,7 @@ export const SStatistic = styled.div`
 
 	.col {
 		padding: 20px 0;
-		border-right: var(--border);
+		/* border-right: var(--border); */
 	}
 `;
 

diff --git a/src/containers/Account.tsx b/src/containers/Account.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import Utils, { Currency } from 'evm-lite-utils';
 import ReactTooltip from 'react-tooltip';
@@ -46,7 +46,7 @@ const Account: React.FC<RouteComponentProps<Props>> = props => {
 	const config = useSelector(selectConfig);
 
 	const moniker = props.match.params.moniker;
-	const [loading, setLoading] = useState(false);
+	const [loading] = useState(false);
 	const [account, setAccount] = useState<MonikerEVMAccount>({
 		moniker: '',
 		balance: new Currency(0),
@@ -55,19 +55,25 @@ const Account: React.FC<RouteComponentProps<Props>> = props => {
 		bytecode: ''
 	});
 
-	const fetchAccount = async (a: MonikerEVMAccount) => {
-		setLoading(true);
+	const fetchAccount = useCallback(
+		async (a: MonikerEVMAccount) => {
+			// setLoading(true);
 
-		const node = new Monet(config.connection.host, config.connection.port);
-		const res = await node.getAccount(a.address);
+			const node = new Monet(
+				config.connection.host,
+				config.connection.port
+			);
+			const res = await node.getAccount(a.address);
 
-		setAccount({
-			...res,
-			moniker: a.moniker
-		});
+			setAccount({
+				...res,
+				moniker: a.moniker
+			});
 
-		setTimeout(() => setLoading(false), 500);
-	};
+			// setTimeout(() => setLoading(false), 0);
+		},
+		[account]
+	);
 
 	useEffect(() => {
 		const a = accounts.find(a => a.moniker.toLowerCase() === moniker);
@@ -83,16 +89,16 @@ const Account: React.FC<RouteComponentProps<Props>> = props => {
 	}, []);
 
 	// polling for accounts
-	// let poller: any;
-	// useEffect(() => {
-	// 	poller = setInterval(() => {
-	// 		fetchAccount(account);
-	// 	}, 10000);
+	let poller: any;
+	useEffect(() => {
+		poller = setInterval(() => {
+			fetchAccount(account);
+		}, 5000);
 
-	// 	return () => {
-	// 		clearInterval(poller);
-	// 	};
-	// }, []);
+		return () => {
+			clearInterval(poller);
+		};
+	}, [account]);
 
 	return (
 		<>
@@ -116,6 +122,7 @@ const Account: React.FC<RouteComponentProps<Props>> = props => {
 											'https://monet.network/app/images/products/tenom.svg'
 										}
 										width={35}
+										style={{ marginRight: '15px' }}
 									/>
 									{commaSeperate(
 										parseBalance(account.balance).slice(
@@ -125,7 +132,9 @@ const Account: React.FC<RouteComponentProps<Props>> = props => {
 									)}
 								</Await>
 							</h3>
-							<div>Balance</div>
+							<div onClick={() => fetchAccount(account)}>
+								Balance
+							</div>
 						</Col>
 						<Col className="text-center">
 							<h3>
@@ -136,7 +145,9 @@ const Account: React.FC<RouteComponentProps<Props>> = props => {
 									{account.nonce}
 								</Await>
 							</h3>
-							<div>Nonce</div>
+							<div onClick={() => console.log(account)}>
+								Nonce
+							</div>
 						</Col>
 					</Row>
 				</Container>