status-im
/
ens-usernames
mirror of https://github.com/status-im/ens-usernames.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add both fields to register an address and paste button

This commit is contained in:
Barry Gitarts 2018-07-10 17:34:28 -04:00
parent 820f6c02d4
commit f0eb581fa1
2 changed files with 63 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
app/components/ens/registerSubDomain.js
View File

@ -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>
); );

14
app/ui/components/MobileSearch.js
View File

@ -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>
); );