add domain price card mobile

This commit is contained in:
Barry Gitarts 2018-07-10 14:41:46 -04:00
parent 879e939cb7
commit ef99ab1e72
3 changed files with 38 additions and 14 deletions

View File

@ -3,6 +3,7 @@ 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 } 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 ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry'; import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
import { Button, Field, TextInput, MobileSearch, Card, Info, Text } from '../../ui/components' import { Button, Field, TextInput, MobileSearch, Card, Info, Text } from '../../ui/components'
import { IconCheck } from '../../ui/icons' import { IconCheck } from '../../ui/icons'
@ -72,6 +73,28 @@ class RenderAddresses extends PureComponent {
} }
} }
const RegisterInfoCard = ({ formattedDomain, domainPrice }) => (
<Fragment>
<Hidden mdDown>
<Info.Action title="No address is associated with this domain">
<span style={{ color: theme.accent }}>{formattedDomain.toUpperCase()}</span> can be registered for {!!domainPrice && formatPrice(fromWei(domainPrice))} SNT
</Info.Action>
</Hidden>
<Hidden mdUp>
<Info background="#415be3">
<Typography variant="title" style={
{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
}>
<b>{formattedDomain.toUpperCase()}</b>
<div style={{ border: '1px solid', borderRadius: '9px', width: '5em' }}>
{!!domainPrice && formatPrice(fromWei(domainPrice))} SNT
</div>
</Typography>
</Info>
</Hidden>
</Fragment>
)
class Register extends PureComponent { class Register extends PureComponent {
state = { domainPrice: null }; state = { domainPrice: null };
@ -98,9 +121,7 @@ class Register extends PureComponent {
<Fragment> <Fragment>
{!registered ? {!registered ?
<Fragment> <Fragment>
<Info.Action title="No address is associated with this domain"> <RegisterInfoCard {...{ formattedDomain, domainPrice }}/>
<span style={{ color: theme.accent }}>{formattedDomain.toUpperCase()}</span> can be registered for {!!domainPrice && formatPrice(fromWei(domainPrice))} SNT
</Info.Action>
<RegisterSubDomain <RegisterSubDomain
subDomain={formattedDomainArray[0]} subDomain={formattedDomainArray[0]}
domainName={formattedDomainArray.slice(1).join('.')} domainName={formattedDomainArray.slice(1).join('.')}
@ -127,9 +148,12 @@ const DisplayAddress = (props) => (
{validAddress(props.address) ? {validAddress(props.address) ?
<RenderAddresses {...props} /> <RenderAddresses {...props} />
: :
<Info.Action title="No address is associated with this domain"> <Hidden mdUp>
{props.domainName.toUpperCase()} <Info.Action title="No address is associated with this domain">
</Info.Action>} {props.domainName.toUpperCase()}
</Info.Action>
</Hidden>
}
<div style={backButton} onClick={() => props.setStatus(null)}>&larr;</div> <div style={backButton} onClick={() => props.setStatus(null)}>&larr;</div>
</Fragment> </Fragment>
) )
@ -137,7 +161,7 @@ const DisplayAddress = (props) => (
const LookupForm = ({ handleSubmit, values, handleChange }) => ( const LookupForm = ({ handleSubmit, values, handleChange }) => (
<Fragment> <Fragment>
<form onSubmit={handleSubmit} style={{ marginTop: '3em' }}> <form onSubmit={handleSubmit} style={{ marginTop: '3em' }}>
<Hidden smDown> <Hidden mdDown>
<Field label="Enter Domain or Status Name" wide> <Field label="Enter Domain or Status Name" wide>
<TextInput <TextInput
value={values.domainName} value={values.domainName}
@ -147,7 +171,7 @@ const LookupForm = ({ handleSubmit, values, handleChange }) => (
required /> required />
</Field> </Field>
</Hidden> </Hidden>
<Hidden smUp> <Hidden mdUp>
<Field label="Search for vacant names in domains stateofus.eth and domains associated with this registry" style={{ textAlign: 'center', padding: '0px 10px 0 10px' }} wide> <Field label="Search for vacant names in domains stateofus.eth and domains associated with this registry" style={{ textAlign: 'center', padding: '0px 10px 0 10px' }} wide>
<MobileSearch <MobileSearch
name="domainName" name="domainName"
@ -159,7 +183,7 @@ const LookupForm = ({ handleSubmit, values, handleChange }) => (
wide /> wide />
</Field> </Field>
</Hidden> </Hidden>
<Hidden smDown> <Hidden mdDown>
<Button mode="strong" type="submit" wide> <Button mode="strong" type="submit" wide>
Lookup Address Lookup Address
</Button> </Button>
@ -180,7 +204,7 @@ const InnerForm = ({
setStatus setStatus
}) => ( }) => (
<div style={{ margin: '10px' }}> <div style={{ margin: '10px' }}>
<Hidden smDown> <Hidden mdDown>
<span style={{ display: 'flex', justifyContent: 'space-evenly', marginBottom: '10px' }}> <span style={{ display: 'flex', justifyContent: 'space-evenly', marginBottom: '10px' }}>
<StatusLogo /> <StatusLogo />
<img style={{ maxWidth: '150px', alignSelf: 'center' }} src={EnsLogo} alt="Ens Logo"/> <img style={{ maxWidth: '150px', alignSelf: 'center' }} src={EnsLogo} alt="Ens Logo"/>

View File

@ -22,7 +22,7 @@ Info.defaultProps = {
const Main = styled.section` const Main = styled.section`
background: ${({ background }) => background}; background: ${({ background }) => background};
padding: 15px; padding: 15px;
border-radius: 3px; border-radius: 4px;
word-wrap: break-word; word-wrap: break-word;
` `

View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react';
import styled, { css } from 'styled-components' import styled, { css } from 'styled-components';
import theme from '../theme' import theme from '../theme';
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@material-ui/icons/Search';
const searchWrapper = { const searchWrapper = {