reorg

Amxx · Jul 24, 2022 · d62082d · d62082d
1 parent 2ce965a
commit d62082d
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 36 deletions.
diff --git a/frontend/src/components/Core.js b/frontend/src/components/Core.js
@@ -4,8 +4,8 @@ import { EventEmitter   } from 'fbemitter';
 
 import CONFIG            from '../config';
 import Notifications     from './utils/Notifications';
-import Loading           from './Loading';
-import Main              from './Main';
+import Main              from './layout/Main';
+import Loading           from './layout/Loading';
 import UnsuportedNetwork from './UnsuportedNetwork';
 
 const Core = () => {

diff --git a/frontend/src/components/Header.js → frontend/src/components/layout/Header.js b/frontend/src/components/Header.js → frontend/src/components/layout/Header.js
@@ -7,11 +7,11 @@ import NavDropdown from 'react-bootstrap/NavDropdown';
 
 import { Space }   from 'antd';
 
-import CONFIG from '../config';
+import CONFIG from '../../config';
 
-import { GithubFilled, TwitterCircleFilled } from '@ant-design/icons';
+import { CheckCircleOutlined, GithubFilled, TwitterCircleFilled } from '@ant-design/icons';
 
-const Header = () => {
+const Header = (props) => {
 	const changeNetwork = async (id, details) => {
 		try {
 			await window.ethereum.request({
@@ -40,14 +40,21 @@ const Header = () => {
 
 	return (
 		<Navbar bg='dark' variant='dark'>
-			<Container fluid>
+			<Container>
 				<Navbar.Brand href='#'>NFF - Vesting Vaults</Navbar.Brand>
 				<Navbar.Toggle />
 				<Navbar.Collapse className='justify-content-start'>
 					<NavDropdown title="Network" className='mx-3' style={{color:'white'}}>
 						{
 							Object.entries(CONFIG).map(([ id, details ]) =>
-								<NavDropdown.Item key={id} onClick={() => changeNetwork(id, details) }>{ details.name }</NavDropdown.Item>
+								<NavDropdown.Item
+									key={id}
+									onClick={() => changeNetwork(id, details) }
+									className='d-flex align-items-center'
+								>
+									{ details.name }
+									{ details.name === props.config.name && <CheckCircleOutlined className='mx-2'/>}
+								</NavDropdown.Item>
 							)
 						}
 					</NavDropdown>

diff --git a/frontend/src/components/Loading.js → frontend/src/components/layout/Loading.js b/frontend/src/components/Loading.js → frontend/src/components/layout/Loading.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import '../css/Loading.css';
+import '../../css/Loading.css';
 
 class Loading extends Component
 {

diff --git a/frontend/src/components/Main.js → frontend/src/components/layout/Main.js b/frontend/src/components/Main.js → frontend/src/components/layout/Main.js
@@ -3,14 +3,14 @@ import React from 'react';
 import { Container } from 'react-bootstrap';
 
 import Header      from './Header';
-import DeployModal from './modals/DeployModal';
-import VaultList   from './views/VaultList';
+import DeployModal from '../modals/DeployModal';
+import VaultList   from '../views/VaultList';
 
 const Main = (props) => {
 	return (
 		<>
 			<Header {...props}/>
-			<Container className='d-grid gap-2'>
+			<Container>
 				<DeployModal {...props}/>
 				<VaultList   {...props}/>
 			</Container>

diff --git a/frontend/src/components/modals/DeployModal.js b/frontend/src/components/modals/DeployModal.js
@@ -49,8 +49,14 @@ const DeployModal = (props) => {
 
 	return (
 		<>
-			<Button className='d-inline-flex align-items-center justify-content-center my-4' onClick={showModal}>
-				<PlusSquareOutlined /> Create new vault
+			<Button
+				type="primary"
+				block
+				onClick={showModal}
+				icon={<PlusSquareOutlined />}
+				className='d-inline-flex align-items-center justify-content-center my-4'
+			>
+				Create new vault
 			</Button>
 			<Modal
 				title="New vault settings"

diff --git a/frontend/src/components/views/Vault.js b/frontend/src/components/views/Vault.js
@@ -50,7 +50,9 @@ const ViewVault = (props) => {
 					/>
 					<Table
 						dataSource={[
-							{ key: 'Owner', value: <code>{props.owner}</code> },
+							{ key: 'Chain',   value: props.config.name              },
+							{ key: 'Address', value: <code>{ props.address }</code> },
+							{ key: 'Owner',   value: <code>{ props.owner   }</code> },
 							...[
 								{ key: 'Start',  value: start               },
 								{ key: 'Cliff',  value: cliff               },

diff --git a/frontend/src/components/views/VaultList.js b/frontend/src/components/views/VaultList.js
@@ -32,28 +32,30 @@ const VaultList = (props) => {
 		.then(setVaults)
 	}, [ instance ]);
 
-	return <>
-		<div className='d-flex align-items-center justify-content-center'>
-			<Switch unCheckedChildren="Total" checkedChildren="Releasable" checked={releasable} onChange={setReleasable} style={{width: "200px"}}/>
-			<Mentions autoSize={{minRows: 1, maxRows: 1}} prefix={['0x']} placeholder="Filter by owner" onChange={setUser} className='mx-2'>
-			{
-				vaults
-					.map(ev => ev.owner.slice(2))
-					.filter((e, i, a) => a.indexOf(e) === i)
-					.map((value) => (
-						<Mentions.Option key={value} value={value}>
-							{value}
-						</Mentions.Option>
-					))
-			}
-			</Mentions>
-		</div>
-		<List
-			itemLayout="horizontal"
-			dataSource={vaults.filter(item => !user || item.owner.startsWith(user.trim()))}
-			renderItem={item => <ViewVault releasable={releasable} {...item} {...props}/>}
-		/>
-	</>;
+	return (
+		<>
+			<div className='d-flex align-items-center justify-content-center mb-3'>
+				<Switch unCheckedChildren="Total" checkedChildren="Releasable" checked={releasable} onChange={setReleasable} style={{width: "200px"}}/>
+				<Mentions autoSize={{minRows: 1, maxRows: 1}} prefix={['0x']} placeholder="Filter by owner" onChange={setUser} className='mx-2'>
+				{
+					vaults
+						.map(ev => ev.owner.slice(2))
+						.filter((e, i, a) => a.indexOf(e) === i)
+						.map((value) => (
+							<Mentions.Option key={value} value={value}>
+								{value}
+							</Mentions.Option>
+						))
+				}
+				</Mentions>
+			</div>
+			<List
+				itemLayout="horizontal"
+				dataSource={vaults.filter(item => !user || item.owner.startsWith(user.trim()))}
+				renderItem={item => <ViewVault releasable={releasable} {...item} {...props}/>}
+			/>
+		</>
+	);
 }
 
 export default VaultList;