status-im/ens-usernames
2
0
Fork 0
mirror of https://github.com/status-im/ens-usernames.git synced 2025-03-03 11:30:43 +00:00
Code Issues Projects Releases Wiki Activity

breakout MobileAddressDisplay

Browse Source 
create setup for conditional display based on if owner of account
This commit is contained in:
Barry Gitarts 2018-08-01 16:00:15 -04:00
parent 62ad3449cc
commit 1805bb4759
1 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/components/ens/nameLookup.js
View File

@ -1,7 +1,7 @@
import React, { Fragment, PureComponent } from 'react'; import React, { Fragment, PureComponent } from 'react';
import web3 from 'web3'; import web3 from 'web3';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { actions as accountActions } from '../../reducers/accounts'; import { actions as accountActions, getDefaultAccount } from '../../reducers/accounts';
import Hidden from '@material-ui/core/Hidden'; import Hidden from '@material-ui/core/Hidden';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry'; import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
@ -59,11 +59,33 @@ const DisplayBox = ({ displayType, pubKey }) => (
</div> </div>
); );
const MobileAddressDisplay = ({ domainName, address, statusAccount, expirationTime, defaultAccount }) => (
<Fragment>
<Info background="#000000" style={{ margin: '0.4em', boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.2)' }}>
<Typography variant="title" style={
{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
}>
<NotInterested style={{ marginBottom: '0.5em', fontSize: '2em' }}/>
<b>{formatName(domainName).toUpperCase()}</b>
<div style={{ fontWeight: 300 }}>
{expirationTime && <i>Expires {generatePrettyDate(expirationTime)}</i>}
</div>
</Typography>
</Info>
<Typography type='subheading' style={{ textAlign: 'center', fontSize: '26px', marginTop: '0.5em' }}>Name is unavailable</Typography>
<Typography type='body2' style={{ textAlign: 'center' }}>It is pointed to the following addresses</Typography>
<DisplayBox displayType='Wallet Address' pubKey={address} />
{validStatusAddress(statusAccount) && <DisplayBox displayType='Contact Code' pubKey={statusAccount} />}
</Fragment>
)
class RenderAddresses extends PureComponent { class RenderAddresses extends PureComponent {
state = { copied: false } state = { copied: false }
render() { render() {
const { domainName, address, statusAccount, expirationTime } = this.props const { domainName, address, statusAccount, expirationTime, defaultAccount } = this.props
// TODO ADD CONDITIONAL RENDER TO MobileAddressDisplay
console.log(defaultAccount)
const { copied } = this.state const { copied } = this.state
const markCopied = (v) => { this.setState({ copied: v }) } const markCopied = (v) => { this.setState({ copied: v }) }
const isCopied = address => address == copied; const isCopied = address => address == copied;
@ -84,21 +106,7 @@ class RenderAddresses extends PureComponent {
</div> </div>
</Hidden> </Hidden>
<Hidden mdUp> <Hidden mdUp>
<Info background="#000000" style={{ margin: '0.4em', boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.2)' }}> <MobileAddressDisplay {...this.props} />
<Typography variant="title" style={
{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
}>
<NotInterested style={{ marginBottom: '0.5em', fontSize: '2em' }}/>
<b>{formatName(domainName).toUpperCase()}</b>
<div style={{ fontWeight: 300 }}>
{expirationTime && <i>Expires {generatePrettyDate(expirationTime)}</i>}
</div>
</Typography>
</Info>
<Typography type='subheading' style={{ textAlign: 'center', fontSize: '26px', marginTop: '0.5em' }}>Name is unavailable</Typography>
<Typography type='body2' style={{ textAlign: 'center' }}>It is pointed to the following addresses</Typography>
<DisplayBox displayType='Wallet Address' pubKey={address} />
{validStatusAddress(statusAccount) && <DisplayBox displayType='Contact Code' pubKey={statusAccount} />}
</Hidden> </Hidden>
</Fragment> </Fragment>
) )
@ -179,9 +187,13 @@ const mapDispatchToProps = dispatch => ({
}, },
}); });
const ConnectedRegister = connect(null, mapDispatchToProps)(Register); const mapStateToProps = state => ({
defaultAccount: getDefaultAccount(state)
})
const DisplayAddress = (props) => ( const ConnectedRegister = connect(mapStateToProps, mapDispatchToProps)(Register);
const DisplayAddress = connect(mapStateToProps)((props) => (
<Fragment> <Fragment>
{validAddress(props.address) ? {validAddress(props.address) ?
<RenderAddresses {...props} /> <RenderAddresses {...props} />
@ -194,7 +206,7 @@ const DisplayAddress = (props) => (
} }
<div style={backButton} onClick={() => props.setStatus(null)}>&larr;</div> <div style={backButton} onClick={() => props.setStatus(null)}>&larr;</div>
</Fragment> </Fragment>
) ))
const LookupForm = ({ handleSubmit, values, handleChange, justSearch }) => ( const LookupForm = ({ handleSubmit, values, handleChange, justSearch }) => (
<Fragment> <Fragment>