add domain price card mobile
This commit is contained in:
parent
879e939cb7
commit
ef99ab1e72
|
@ -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)}>←</div>
|
<div style={backButton} onClick={() => props.setStatus(null)}>←</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"/>
|
||||||
|
|
|
@ -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;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
Loading…
Reference in New Issue