add web3 provider indicator
This commit is contained in:
Barry Gitarts
parent
9bf399c2ba
commit
b3c1e52511
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="62px" height="98px" viewBox="0 0 62 98" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Group</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<polygon id="path-1" points="0.453356748 55.2658632 30.5000004 72.7014496 60.5810903 55.1361244 30.5000009 97.240191"></polygon>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
|
||||
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0.337254902 0 0 0 0 0.337254902 0 0 0 0 0.337254902 0 0 0 0.5 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
<polygon id="path-3" points="0 49.4579439 30.5000008 0 60.706916 49.4579439 30.5 67.7757009"></polygon>
|
||||
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
|
||||
<feGaussianBlur stdDeviation="1.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
|
||||
<feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
|
||||
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Maker_LANDING_PAGE" transform="translate(-689.000000, -491.000000)">
|
||||
<g id="Group" transform="translate(689.500000, 491.000000)">
|
||||
<g id="Rectangle-3">
|
||||
<use fill="#8C8C8E" fill-rule="evenodd" xlink:href="#path-1"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
|
||||
</g>
|
||||
<g id="Rectangle-4">
|
||||
<use fill="#4C4C51" fill-rule="evenodd" xlink:href="#path-3"></use>
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 17 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 123 KiB |
|
|
@ -0,0 +1,96 @@
|
|||
import React from 'react';
|
||||
import styles from './style.js';
|
||||
import EthereumLogo from './../assets/ethereum-logo.svg';
|
||||
import MetamaskLogo from './../assets/metamask-logo.svg';
|
||||
|
||||
function capitalize(string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
|
||||
const NoConnection = ({ network }) => console.log(network) || (
|
||||
<div style={styles.NoEthereumSection}>
|
||||
<img style={styles.ImgHeaderLogo} alt="Status" src="images/logo.png" />
|
||||
<hr />
|
||||
<img
|
||||
style={styles.ImgEthereumLogo}
|
||||
alt="Ethereum"
|
||||
src={EthereumLogo}
|
||||
/>
|
||||
<h2>NOT CONNECTED TO ETHEREUM {network.toUpperCase()}</h2>
|
||||
<p style={styles.PNotFound}>
|
||||
This application requires an Ethereum client to be running and connected to {capitalize(network)}. A client
|
||||
could not be detected which probably means it's not
|
||||
installed, running or is misconfigured.
|
||||
</p>
|
||||
<p style={styles.PUseClients}>
|
||||
Please use one of the following clients to connect to Ethereum:
|
||||
</p>
|
||||
<div style={styles.DivClients}>
|
||||
<div style={styles.DivSubClients}>
|
||||
<img style={styles.ImgLogo} alt="Metamask" src={MetamaskLogo} />
|
||||
<h2>METAMASK</h2>
|
||||
<p>
|
||||
<span style={styles.AlignNumber}>
|
||||
<span style={styles.NumberCircle}>1</span>
|
||||
</span>Install
|
||||
<a
|
||||
href="https://metamask.io/"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
{" "}
|
||||
Metamask
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<span style={styles.AlignNumber}>
|
||||
<span style={styles.NumberCircle}>2</span>
|
||||
</span>Use Chrome to browse
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
href="https://vote.status.im"
|
||||
target="_blank"
|
||||
>
|
||||
{" "}
|
||||
https://vote.status.im
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div style={styles.DivSubClients}>
|
||||
<img style={styles.ImgLogo} alt="Mist" src="images/mist.png" />
|
||||
<h2>MIST</h2>
|
||||
<p>
|
||||
<span style={styles.AlignNumber}>
|
||||
<span style={styles.NumberCircle}>1</span>
|
||||
</span>Install and run
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
href="https://github.com/ethereum/mist/releases"
|
||||
target="_blank"
|
||||
>
|
||||
{" "}
|
||||
Mist
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<span style={styles.AlignNumber}>
|
||||
<span style={styles.NumberCircle}>2</span>
|
||||
</span>
|
||||
Use Mist to browse
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
href="https://vote.status.im"
|
||||
target="_blank"
|
||||
>
|
||||
{" "}
|
||||
https://vote.status.im
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
NoConnection.displayName = 'NoConnection';
|
||||
|
||||
export default NoConnection;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import NoConnection from './NoConnection';
|
||||
|
||||
const Web3Render = ({ ready, children, network }) => (
|
||||
<Fragment>
|
||||
{ready ? <Fragment>{children}</Fragment> : <NoConnection network={network} />}
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
export default Web3Render;
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
export default {
|
||||
NoEthereumSection: {
|
||||
maxWidth: '980px',
|
||||
margin: '0 auto',
|
||||
textAlign: 'center',
|
||||
fontSize: '24px'
|
||||
},
|
||||
ImgHeaderLogo: {
|
||||
width: '264px',
|
||||
paddingBottom: '30px'
|
||||
},
|
||||
ImgEthereumLogo: {
|
||||
width: '61px',
|
||||
paddingTop: '30px',
|
||||
marginBottom: '40px'
|
||||
},
|
||||
PNotFound: {
|
||||
opacity: 0.50,
|
||||
display: 'inline-block',
|
||||
letterSpacing: '0.6px',
|
||||
margin: 10
|
||||
},
|
||||
PUseClients: {
|
||||
display: 'inline-block',
|
||||
color: '#546979',
|
||||
fontWeight: 700
|
||||
},
|
||||
DivClients: {
|
||||
height: '360px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
fontSize: '21px',
|
||||
marginBottom: '50px',
|
||||
marginTop: '50px'
|
||||
},
|
||||
ImgLogo: {
|
||||
width: '85px'
|
||||
},
|
||||
AlignNumber: {
|
||||
display: 'table-cell',
|
||||
verticalAlign: 'middle',
|
||||
paddingRight: '20px'
|
||||
},
|
||||
NumberCircle: {
|
||||
display: 'inline-block',
|
||||
borderRadius: '50%',
|
||||
height: '28px',
|
||||
width: '28px',
|
||||
lineHeight: '28px',
|
||||
textAlign: 'center',
|
||||
border: 'solid 1px #CFD8DC',
|
||||
fontSize: '18px',
|
||||
color: '#222228',
|
||||
opacity: 0.68
|
||||
},
|
||||
DivSubClients: {
|
||||
backgroundColor: 'white',
|
||||
width: '340px',
|
||||
height: '360px',
|
||||
padding: '33px 10px 33px 27px',
|
||||
opacity: 0.89,
|
||||
border: '2px solid #EFF1F3',
|
||||
boxShadow: '0px 2px 6px 0px rgba(0, 0, 0, 0.13)',
|
||||
borderRadius: '4px',
|
||||
margin: '0 20px'
|
||||
}
|
||||
|
||||
}
|
||||
34
app/dapp.js
34
app/dapp.js
|
|
@ -20,6 +20,7 @@ import Typography from '@material-ui/core/Typography';
|
|||
import Welcome from './components/ens/welcome';
|
||||
import Fade from '@material-ui/core/Fade';
|
||||
import Hidden from '@material-ui/core/Hidden';
|
||||
import Web3Render from './components/standard/Web3Render';
|
||||
|
||||
import './dapp.css';
|
||||
|
||||
|
|
@ -47,6 +48,7 @@ class App extends React.Component {
|
|||
render() {
|
||||
const { admin, network, searching } = this.state;
|
||||
const toggleSearch = () => { this.setState({ searching: !searching }) };
|
||||
const isRopsten = network === 'ropsten';
|
||||
return (
|
||||
<div>
|
||||
<CssBaseline />
|
||||
|
|
@ -59,21 +61,23 @@ class App extends React.Component {
|
|||
</div>
|
||||
</Fade>}
|
||||
{searching && <Fade in={searching}>
|
||||
<div>
|
||||
<NameLookup />
|
||||
<Hidden mdDown>
|
||||
<div style={{ textAlign: 'center', margin: '0px 40px' }}>
|
||||
<TokenPermissions
|
||||
symbol={symbols[network] || 'SNT'}
|
||||
spender={ENSSubdomainRegistry._address}
|
||||
methods={TestToken.methods} />
|
||||
<hr/>
|
||||
<Toggle onChange={() => { this.setState({ admin: !admin })}} />
|
||||
<br/>
|
||||
<span>Admin Mode</span>
|
||||
</div>
|
||||
</Hidden>
|
||||
</div>
|
||||
<Web3Render ready={isRopsten} network="ropsten">
|
||||
<div>
|
||||
<NameLookup />
|
||||
<Hidden mdDown>
|
||||
<div style={{ textAlign: 'center', margin: '0px 40px' }}>
|
||||
<TokenPermissions
|
||||
symbol={symbols[network] || 'SNT'}
|
||||
spender={ENSSubdomainRegistry._address}
|
||||
methods={TestToken.methods} />
|
||||
<hr/>
|
||||
<Toggle onChange={() => { this.setState({ admin: !admin })}} />
|
||||
<br/>
|
||||
<span>Admin Mode</span>
|
||||
</div>
|
||||
</Hidden>
|
||||
</div>
|
||||
</Web3Render>
|
||||
</Fade>}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue