Skip to content

Commit

Permalink
improve reload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amxx
Amxx committed Jul 24, 2022
1 parent 2fd3167 commit 2ce965a
Show file tree
Hide file tree
Showing 7 changed files with 86 additions and 29 deletions.
2 changes: 1 addition & 1 deletion frontend/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>NFT Vesting Vaults</title>
<title>NonFungibleFinance - Vesting Vaults</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
23 changes: 7 additions & 16 deletions frontend/src/components/Core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,28 @@ import { EventEmitter } from 'fbemitter';

import CONFIG from '../config';
import Notifications from './utils/Notifications';
import Header from './Header';
import Loading from './Loading';
import Main from './Main';
import UnsuportedNetwork from './UnsuportedNetwork';


const Loading = () => undefined;

const Core = () => {

const [ emitter, ] = React.useState(new EventEmitter());
const [ provider, setProvider ] = React.useState(null);
const [ signer, setSigner ] = React.useState(null);
const [ config, setConfig ] = React.useState(null);

React.useEffect(() => {
const setup = () => {
const _provider = new ethers.providers.Web3Provider(window.ethereum);

setProvider(_provider);
_provider.getNetwork().then(({ chainId }) => setConfig(CONFIG[Number(chainId)] || {}));
_provider.send("eth_requestAccounts", []).then(([ address ]) => setSigner(_provider.getSigner(address)));

window.ethereum.on('chainChanged', () => window.location.reload(false));
window.ethereum.on('chainChanged', () => setup());
window.ethereum.on('accountsChanged', (address) => setSigner(_provider.getSigner(address)));
}, []);
};

React.useEffect(setup, []);

React.useEffect(() => {
config?.factory && emitter.emit('Notify', 'success', `Connected to ${config.name}`);
Expand All @@ -39,21 +37,14 @@ const Core = () => {

return <>
<Notifications emitter={emitter}/>
<Header
provider={provider}
signer={signer}
config={config}
/>
{
signer && config ? (
config?.factory
? <Main emitter={emitter} provider={provider} signer={signer} config={config}/>
: <UnsuportedNetwork/>
) : <Loading/>
}
</>
;

</>;
}

export default Core;
2 changes: 1 addition & 1 deletion frontend/src/components/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const Header = () => {
return (
<Navbar bg='dark' variant='dark'>
<Container fluid>
<Navbar.Brand href='#'>Vesting Vault</Navbar.Brand>
<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'}}>
Expand Down
38 changes: 38 additions & 0 deletions frontend/src/components/Loading.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React, { Component } from 'react';
import '../css/Loading.css';

class Loading extends Component
{
render()
{
return (
<div id='Loading'>
<svg xmlns='http://www.w3.org/2000/svg' width='100' viewBox='0 0 250 250' preserveAspectRatio='xMidYMid meet'>
<path className='path' stroke='#FAE900' strokeWidth='3' strokeLinejoin='round' strokeLinecap='round' strokeMiterlimit='10' strokeDasharray='200' strokeDashoffset='400' fill='none' d='M125,237.6c-15.2,0-29.9-3-43.8-8.9c-13.4-5.7-25.5-13.8-35.8-24.1c-10.3-10.3-18.5-22.4-24.1-35.8
c-5.9-13.9-8.9-28.6-8.9-43.8s3-29.9,8.9-43.8C26.9,67.8,35,55.7,45.4,45.4C55.7,35,67.8,26.9,81.2,21.3
c13.9-5.9,28.6-8.9,43.8-8.9s29.9,3,43.8,8.9c13.4,5.7,25.5,13.8,35.8,24.1c10.3,10.3,18.5,22.4,24.1,35.8
c5.9,13.9,8.9,28.6,8.9,43.8s-3,29.9-8.9,43.8c-5.7,13.4-13.8,25.5-24.1,35.8c-10.3,10.3-22.4,18.5-35.8,24.1
C154.9,234.6,140.2,237.6,125,237.6z M125,45.8c-21.2,0-41.1,8.2-56,23.2s-23.2,34.9-23.2,56c0,21.2,8.2,41.1,23.2,56
c15,15,34.9,23.2,56,23.2c21.2,0,41.1-8.2,56-23.2c15-15,23.2-34.9,23.2-56c0-21.2-8.2-41.1-23.2-56C166.1,54,146.2,45.8,125,45.8
z' />
<path className='path' stroke='#FAE900' strokeWidth='2' strokeLinejoin='round' strokeLinecap='round' strokeMiterlimit='10' strokeDasharray='500' strokeDashoffset='500' fill='none' d='M103.7,175.4c-7.9-0.1-14.2-6.5-14.1-14.4c0.1-7.1,5.4-13.1,12.5-14c0.6-0.1,1.1-0.1,1.7-0.1
c2.7,0,5.3,0.8,7.6,2.2c0.8,0.5,1.8,0.8,2.7,0.8c1,0,2-0.3,2.9-0.8c1.7-1,2.8-2.9,2.7-5c-0.5-7.6,5-14.4,12.7-15.2
c0.5-0.1,1-0.1,1.6-0.1c2.7,0,5.3,0.8,7.6,2.2c0.8,0.5,1.8,0.8,2.8,0.8c1,0,2-0.3,2.9-0.8l0.1,0c1.7-1,2.7-2.9,2.6-4.9
c-0.5-7.7,5.2-14.5,12.9-15.2c0.5,0,0.9-0.1,1.4-0.1c7.9,0.1,14.2,6.5,14.1,14.4c-0.1,7.1-5.4,13.1-12.5,14
c-0.6,0.1-1.1,0.1-1.7,0.1l0,0c-2.7,0-5.3-0.8-7.6-2.2c-0.8-0.5-1.8-0.8-2.7-0.8c-1,0-2,0.3-2.9,0.8c-1.7,1-2.8,2.9-2.7,5
c0.1,0.7,0.1,1.5,0,2.3c-0.6,6.8-5.9,12.2-12.7,12.9c-0.5,0.1-1.1,0.1-1.6,0.1c-2.7,0-5.3-0.8-7.6-2.2c-0.8-0.5-1.8-0.8-2.8-0.8
c-1,0-2,0.3-2.9,0.8l-0.1,0c-1.7,1-2.7,2.9-2.6,4.9c0.1,0.8,0,1.5,0,2.3c-0.6,6.8-6,12.3-12.8,12.9
C104.7,175.4,104.2,175.4,103.7,175.4z' />
<path className='path' stroke='#FAE900' strokeWidth='2' strokeLinejoin='round' strokeLinecap='round' strokeMiterlimit='10' strokeDasharray='500' strokeDashoffset='500' fill='none' d='M103.7,139.3c-7.9-0.1-14.2-6.6-14.1-14.5c0.1-7.1,5.4-13,12.4-13.9c0.6-0.1,1.1-0.1,1.7-0.1
c2.7,0,5.3,0.8,7.6,2.2c0.8,0.5,1.8,0.8,2.7,0.8c1,0,2-0.3,2.9-0.8c1.7-1,2.8-2.9,2.7-5c-0.5-7.7,5.2-14.5,12.9-15.2
c0.5,0,0.9-0.1,1.4-0.1c7.9,0.1,14.2,6.5,14.1,14.4c-0.1,7.1-5.4,13.1-12.5,14c-0.6,0.1-1.1,0.1-1.7,0.1c-2.7,0-5.3-0.8-7.6-2.2
c-0.8-0.5-1.8-0.8-2.7-0.8c-1,0-2,0.3-2.9,0.8c-1.7,1-2.8,2.9-2.7,5c0.1,0.8,0,1.5,0,2.3c-0.6,6.8-6,12.3-12.8,12.9
C104.7,139.3,104.2,139.3,103.7,139.3L103.7,139.3L103.7,139.3z' />
<circle className='path' stroke='#FAE900' strokeWidth='2' strokeLinejoin='round' strokeLinecap='round' strokeMiterlimit='10' strokeDasharray='500' strokeDashoffset='500' fill='none' cx='103.7' cy='88.9' r='14.3' />
</svg>
</div>
);
}
}

export default Loading;
12 changes: 8 additions & 4 deletions frontend/src/components/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,19 @@ import React from 'react';

import { Container } from 'react-bootstrap';

import Header from './Header';
import DeployModal from './modals/DeployModal';
import VaultList from './views/VaultList';

const Main = (props) => {
return (
<Container className='d-grid gap-2'>
<DeployModal {...props}/>
<VaultList {...props}/>
</Container>
<>
<Header {...props}/>
<Container className='d-grid gap-2'>
<DeployModal {...props}/>
<VaultList {...props}/>
</Container>
</>
);
};

Expand Down
16 changes: 9 additions & 7 deletions frontend/src/components/views/Vault.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,24 @@ const ViewVault = (props) => {
const [ duration, setDuration ] = React.useState(0);

React.useEffect(() => {
setInstance(new ethers.Contract(props.address, ArtefactTemplate.abi, props.signer));
}, [ props.address, props.signer ]);
setInstance(new ethers.Contract(props.address, ArtefactTemplate.abi, props.provider));
}, [ props.address, props.provider ]);

React.useEffect(() => {
if (instance) {
props.provider.getBalance(props.address)
.then(ethers.utils.formatEther)
.then(setBalance);
.then(setBalance)
.catch(() => setBalance(null));

instance['releaseable()']()
.then(ethers.utils.formatEther)
.then(setReleasable);
.then(setReleasable)
.catch(() => setReleasable(null));

instance.start().then(value => setStart(Number(value)));
instance.cliff().then(value => setCliff(Number(value)));
instance.duration().then(value => setDuration(Number(value)));
instance.start ().then(value => setStart (Number(value))).catch(() => setStart (0));
instance.cliff ().then(value => setCliff (Number(value))).catch(() => setCliff (0));
instance.duration().then(value => setDuration(Number(value))).catch(() => setDuration(0));
}
}, [ instance, props.address, props.provider ]);

Expand Down
22 changes: 22 additions & 0 deletions frontend/src/css/Loading.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
#Loading
{
display: flex;
position: fixed;
height: 100vh;
width: 100vw;
background-color: #23272b;
align-items: center;
justify-content: center;
z-index: 999999;
}
#Loading .path
{
animation: spinner 1.5s infinite;
}
@keyframes spinner
{
50%
{
stroke-dashoffset: 0;
}
}

0 comments on commit 2ce965a

Please sign in to comment.