add both fields to register an address and paste button
This commit is contained in:
parent
820f6c02d4
commit
f0eb581fa1
|
@ -1,7 +1,8 @@
|
||||||
import web3 from "Embark/web3"
|
import web3 from "Embark/web3"
|
||||||
import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
|
import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Button } from '../../ui/components';
|
import Hidden from '@material-ui/core/Hidden';
|
||||||
|
import { Button, MobileSearch } from '../../ui/components';
|
||||||
import { withFormik } from 'formik';
|
import { withFormik } from 'formik';
|
||||||
import { hash } from 'eth-ens-namehash';
|
import { hash } from 'eth-ens-namehash';
|
||||||
import { zeroAddress, zeroBytes32, formatPrice } from './utils';
|
import { zeroAddress, zeroBytes32, formatPrice } from './utils';
|
||||||
|
@ -47,12 +48,12 @@ const InnerForm = ({
|
||||||
button={
|
button={
|
||||||
<Button
|
<Button
|
||||||
mode="strong"
|
mode="strong"
|
||||||
style={{ marginTop: '5px' }}
|
style={{ marginTop: '5px' }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
ENSSubdomainRegistry.methods.getPrice(hash(values.domainName))
|
ENSSubdomainRegistry.methods.getPrice(hash(values.domainName))
|
||||||
.call()
|
.call()
|
||||||
.then((res) => { setFieldValue('price', fromWei(res)); });
|
.then((res) => { setFieldValue('price', fromWei(res)); });
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Get Price
|
Get Price
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -65,29 +66,50 @@ const InnerForm = ({
|
||||||
label="Domain Price"
|
label="Domain Price"
|
||||||
disabled
|
disabled
|
||||||
value={values.price ? `${formatPrice(values.price)} SNT` : ''} />}
|
value={values.price ? `${formatPrice(values.price)} SNT` : ''} />}
|
||||||
<FieldGroup
|
<Hidden mdDown>
|
||||||
id="statusAddress"
|
<FieldGroup
|
||||||
name="statusAddress"
|
id="statusAddress"
|
||||||
type="text"
|
name="statusAddress"
|
||||||
label="Status messenger address domain resolves to"
|
type="text"
|
||||||
onChange={handleChange}
|
label="Status messenger address domain resolves to"
|
||||||
onBlur={handleBlur}
|
onChange={handleChange}
|
||||||
value={values.statusAddress}
|
onBlur={handleBlur}
|
||||||
error={errors.statusAddress}
|
value={values.statusAddress}
|
||||||
wide="true"
|
error={errors.statusAddress}
|
||||||
/>
|
wide="true"
|
||||||
<FieldGroup
|
/>
|
||||||
id="address"
|
<FieldGroup
|
||||||
name="address"
|
id="address"
|
||||||
type="text"
|
name="address"
|
||||||
label="Ethereum address domain resolves to"
|
type="text"
|
||||||
onChange={handleChange}
|
label="Ethereum address domain resolves to"
|
||||||
onBlur={handleBlur}
|
onChange={handleChange}
|
||||||
value={values.address}
|
onBlur={handleBlur}
|
||||||
error={errors.address}
|
value={values.address}
|
||||||
button={<Button mode="strong" style={{ padding: '5px 15px 5px 15px', marginTop: '5px' }} onClick={() => setFieldValue('address', web3.eth.defaultAccount)}>Use My Primary Address</Button>}
|
error={errors.address}
|
||||||
/>
|
button={<Button mode="strong" style={{ padding: '5px 15px 5px 15px', marginTop: '5px' }} onClick={() => setFieldValue('address', web3.eth.defaultAccount)}>Use My Primary Address</Button>}
|
||||||
{!isSubmitting ? <Button wide mode="strong" type="submit" disabled={isSubmitting || !!Object.keys(errors).length}>{!isSubmitting ? 'Submit' : 'Submitting to the Blockchain - (this may take awhile)'}</Button> : <LinearProgress />}
|
/>
|
||||||
|
{!isSubmitting ? <Button wide mode="strong" type="submit" disabled={isSubmitting || !!Object.keys(errors).length}>{!isSubmitting ? 'Submit' : 'Submitting to the Blockchain - (this may take awhile)'}</Button> : <LinearProgress />}
|
||||||
|
</Hidden>
|
||||||
|
<Hidden mdUp>
|
||||||
|
<MobileSearch
|
||||||
|
name="statusAddress"
|
||||||
|
style={{ marginTop: '10px' }}
|
||||||
|
placeholder="Status Messenger Address"
|
||||||
|
value={values.statusAddress}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
wide />
|
||||||
|
<MobileSearch
|
||||||
|
name="address"
|
||||||
|
style={{ marginTop: '10px' }}
|
||||||
|
placeholder="Ethereum Address"
|
||||||
|
value={values.address}
|
||||||
|
onChange={handleChange}
|
||||||
|
paste={() => setFieldValue('address', web3.eth.defaultAccount)}
|
||||||
|
required
|
||||||
|
wide />
|
||||||
|
</Hidden>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,7 @@ 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';
|
||||||
|
import Button from '@material-ui/core/Button';
|
||||||
|
|
||||||
const searchWrapper = {
|
const searchWrapper = {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
|
@ -14,13 +15,19 @@ const searchWrapper = {
|
||||||
paddingLeft: '11px',
|
paddingLeft: '11px',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const pasteStyle = {
|
||||||
|
...searchWrapper,
|
||||||
|
paddingLeft: '17em',
|
||||||
|
color: theme.accent
|
||||||
|
};
|
||||||
|
|
||||||
const MobileInput = styled.input`
|
const MobileInput = styled.input`
|
||||||
display: block;
|
display: block;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #eef2f5;
|
background-color: #eef2f5;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
border: none;
|
border: none;
|
||||||
height: 7%;
|
height: 3.5em;
|
||||||
width: ${({ wide }) => (wide ? '100%' : 'auto')};
|
width: ${({ wide }) => (wide ? '100%' : 'auto')};
|
||||||
appearance: none;
|
appearance: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
@ -36,7 +43,10 @@ const MobileSearch = props => (
|
||||||
{props.search && <div style={searchWrapper}>
|
{props.search && <div style={searchWrapper}>
|
||||||
<SearchIcon />
|
<SearchIcon />
|
||||||
</div>}
|
</div>}
|
||||||
<MobileInput {...props} />
|
<div style={{ display: 'flex' }}>
|
||||||
|
<MobileInput {...props} />
|
||||||
|
{!props.value && props.paste && <Button style={{ color: theme.accent }} onClick={props.paste}>Paste</Button>}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue