diff --git a/src/components/molecules/AccountStatus/Faucet.tsx b/src/components/molecules/AccountStatus/Faucet.tsx index 4febe8e..0836c08 100644 --- a/src/components/molecules/AccountStatus/Faucet.tsx +++ b/src/components/molecules/AccountStatus/Faucet.tsx @@ -2,23 +2,32 @@ import React, { PureComponent } from 'react' import Button from '../../atoms/Button' import { User } from '../../../context/User' +interface FaucetProps { + togglePopover: any +} + interface FaucetState { isLoading: boolean + success?: string error?: string } -export default class Faucet extends PureComponent<{}, FaucetState> { +export default class Faucet extends PureComponent { public state = { isLoading: false, + success: undefined, error: undefined } private getTokens = async (requestFromFaucet: any) => { + // prevent popup from closing on click + this.props.togglePopover() + this.setState({ isLoading: true }) try { await requestFromFaucet() - this.setState({ isLoading: false }) + this.setState({ isLoading: false, success: 'Tokens added!' }) } catch (error) { this.setState({ isLoading: false, error }) } @@ -32,6 +41,8 @@ export default class Faucet extends PureComponent<{}, FaucetState> { 'Getting tokens...' ) : this.state.error ? ( this.state.error + ) : this.state.success ? ( + this.state.success ) : ( ) } diff --git a/src/components/molecules/AccountStatus/Popover.tsx b/src/components/molecules/AccountStatus/Popover.tsx index 47d51a4..570f4b5 100644 --- a/src/components/molecules/AccountStatus/Popover.tsx +++ b/src/components/molecules/AccountStatus/Popover.tsx @@ -9,6 +9,23 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => ( onMouseOver={togglePopover} onMouseOut={togglePopover} > +
+ + 30 ETH + + {/* + {(eth / 1e18).toFixed(3).slice(0, -1)} ETH + */} + + {/* {ocn} OCEAN */} + 2474290 OCEAN + +
+ +
+ +
+
{states => @@ -22,28 +39,14 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => ( }
+
- Network:   Fake Network Name - {/* Network: + Fake Network Name + {/* - {states => states.network && {states.network}} + {states => states.network && states.network} */}
-
- - 30 ETH - - {/* - {(eth / 1e18).toFixed(3).slice(0, -1)} ETH - */} - - {/* {ocn} OCEAN */} - 2474290 OCEAN - -
-
- -
)