status-im/ens-usernames
2
0
Fork 0
mirror of https://github.com/status-im/ens-usernames.git synced 2025-02-13 02:46:34 +00:00
Code Issues Projects Releases Wiki Activity

have terms trigger registration

Browse Source
This commit is contained in:
Barry Gitarts 2018-09-28 12:20:43 -04:00 committed by Barry G
parent 5187000513
commit 15f636f4b1
2 changed files with 71 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ import FieldGroup from '../standard/FieldGroup';
import LinearProgress from '@material-ui/core/LinearProgress'; import LinearProgress from '@material-ui/core/LinearProgress';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import TokenPermissions from '../standard/TokenPermissionConnect'; import TokenPermissions from '../standard/TokenPermissionConnect';
import Terms from './terms';
import { generateXY } from '../../utils/ecdsa'; import { generateXY } from '../../utils/ecdsa';
import { getResolver } from './utils/domain'; import { getResolver } from './utils/domain';
@ -22,16 +23,17 @@ const { soliditySha3, fromWei } = web3.utils;
const DisplayBox = ({ displayType, pubKey }) => ( const DisplayBox = ({ displayType, pubKey }) => (
<div> <div>
<div style={{ fontSize: '14px', color: '#939BA1', margin: '0 1em' }}>{displayType}</div> <div style={{ fontSize: '14px', color: '#939BA1', margin: '0 1em' }}>{displayType}</div>
<div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '0.5 1em 1em', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}> <div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '0.5 1em 1em', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}>
<div style={{ margin: '3%', wordBreak: 'break-word' }}> <div style={{ margin: '3%', wordBreak: 'break-word' }}>
<Typography type='body1'>{pubKey}</Typography> <Typography type='body1'>{pubKey}</Typography>
</div> </div>
</div>
</div> </div>
</div>
); );
const displayTerms = status => status === 'terms';
const InnerForm = ({ const InnerForm = ({
values, values,
errors, errors,
@ -44,10 +46,12 @@ const InnerForm = ({
domainName, domainName,
domainPrice, domainPrice,
editAccount, editAccount,
setStatus,
status,
SNTAllowance, SNTAllowance,
SNTBalance, SNTBalance,
}) => ( }) => (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit} ref={node => (this.form = node)}>
<div style={{ margin: '10px' }}> <div style={{ margin: '10px' }}>
{!subDomain && {!subDomain &&
<FieldGroup <FieldGroup
@ -75,8 +79,8 @@ const InnerForm = ({
style={{ marginTop: '5px' }} style={{ marginTop: '5px' }}
onClick={() => { onClick={() => {
UsernameRegistrar.methods.getPrice() UsernameRegistrar.methods.getPrice()
.call() .call()
.then((res) => { setFieldValue('price', fromWei(res)); }); .then((res) => { setFieldValue('price', fromWei(res)); });
}} }}
> >
Get Price Get Price
@ -119,41 +123,41 @@ const InnerForm = ({
<Hidden mdUp> <Hidden mdUp>
<DisplayBox displayType='Your wallet address' pubKey={values.address} /> <DisplayBox displayType='Your wallet address' pubKey={values.address} />
<DisplayBox displayType='Your contact code' pubKey={values.statusAddress} /> <DisplayBox displayType='Your contact code' pubKey={values.statusAddress} />
{/*<div style={{ fontSize: '14px', color: '#939BA1', margin: '0 1em' }}>Your contact code</div>*/} {/*<div style={{ fontSize: '14px', color: '#939BA1', margin: '0 1em' }}>Your contact code</div>*/}
{/*<div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '0.5 1em 1em', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}>*/} {/*<div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '0.5 1em 1em', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}>*/}
{/*<div style={{ margin: '3%', wordBreak: 'break-word' }}>*/} {/*<div style={{ margin: '3%', wordBreak: 'break-word' }}>*/}
{/*<Typography type='body1' onClick={() => setFieldValue('statusAddress', '')} style={{ textAlign: 'center', padding: '30px 0', color: 'blue', cursor: 'pointer'}}>*/} {/*<Typography type='body1' onClick={() => setFieldValue('statusAddress', '')} style={{ textAlign: 'center', padding: '30px 0', color: 'blue', cursor: 'pointer'}}>*/}
{/*Grant Access*/} {/*Grant Access*/}
{/*</Typography>*/} {/*</Typography>*/}
{/*</div>*/} {/*</div>*/}
{/*</div>*/} {/*</div>*/}
{/*<Field label="Your Wallet Address">*/} {/*<Field label="Your Wallet Address">*/}
{/*<MobileSearch*/} {/*<MobileSearch*/}
{/*name="address"*/} {/*name="address"*/}
{/*style={{ marginTop: '10px' }}*/} {/*style={{ marginTop: '10px' }}*/}
{/*placeholder="Your wallet address"*/} {/*placeholder="Your wallet address"*/}
{/*value={values.address}*/} {/*value={values.address}*/}
{/*onChange={handleChange}*/} {/*onChange={handleChange}*/}
{/*onClick={() => setFieldValue('address', '')}*/} {/*onClick={() => setFieldValue('address', '')}*/}
{/*required*/} {/*required*/}
{/*wide />*/} {/*wide />*/}
{/*</Field>*/} {/*</Field>*/}
{/*<Field label="Your contact code">*/} {/*<Field label="Your contact code">*/}
{/*<MobileSearch*/} {/*<MobileSearch*/}
{/*name="statusAddress"*/} {/*name="statusAddress"*/}
{/*style={{ marginTop: '10px' }}*/} {/*style={{ marginTop: '10px' }}*/}
{/*placeholder="Status Messenger Address"*/} {/*placeholder="Status Messenger Address"*/}
{/*value={values.statusAddress}*/} {/*value={values.statusAddress}*/}
{/*onChange={handleChange}*/} {/*onChange={handleChange}*/}
{/*onClick={() => setFieldValue('statusAddress', '')}*/} {/*onClick={() => setFieldValue('statusAddress', '')}*/}
{/*wide />*/} {/*wide />*/}
{/*</Field>*/} {/*</Field>*/}
<div style={{ position: 'relative', left: 0, right: 0, bottom: 0 }}> <div style={{ position: 'relative', left: 0, right: 0, bottom: 0 }}>
{!isSubmitting ? <MobileButton type="submit" text={`${editAccount ? 'Save' : 'Register'} with transaction`} style={{ width: '100%' }} /> : <CircularProgress style={{ marginLeft: '45%' }} />} {!isSubmitting ? <MobileButton onClick={() => { setStatus('terms') }} text={`${editAccount ? 'Save' : 'Register'} with transaction`} style={{ width: '100%' }} /> : <CircularProgress style={{ marginLeft: '45%' }} />}
<Terms open={displayTerms(status)} onSubmit={() => { setStatus(null); this.form.dispatchEvent(new Event('submit')) }} />
</div> </div>
</Hidden> </Hidden>
</div> </div>

58
app/components/ens/terms.js
View File

@ -2,48 +2,54 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import './terms.css'; import './terms.css';
const styles = theme => ({ const styles = theme => ({
button: { button: {
margin: theme.spacing.unit, margin: theme.spacing.unit,
borderRadius: '4px', borderRadius: '4px',
backgroundColor: 'rgba(67, 96, 223, 0.1)', backgroundColor: 'rgba(67, 96, 223, 0.1)',
} }
}); });
const buttonText = { color: '#4360df', margin: '0 20px', fontWeight: 300 }; const buttonText = { color: '#4360df', margin: '0 20px', fontWeight: 300 };
const Terms = ({ classes, toggleSearch }) => ( const Terms = ({ classes, open, onSubmit }) => (
<Dialog
fullScreen
open={open}
>
<div className="ens-terms"> <div className="ens-terms">
<h2 className="ens-terms__title">Terms of name registration</h2> <h2 className="ens-terms__title">Terms of name registration</h2>
<ul> <ul>
<li>Funds are deposited for 1 year. Your SNT 
will be locked, but not spent.</li> <li>Funds are deposited for 1 year. Your SNT 
will be locked, but not spent.</li>
<li>After 1 year, you can release the name and get your deposit back, or take no action to keep the name.</li> <li>After 1 year, you can release the name and get your deposit back, or take no action to keep the name.</li>
<li>If terms of the contract change — e.g. Status makes contract upgrades — user has the right to release the username regardless of time held.</li> <li>If terms of the contract change — e.g. Status makes contract upgrades — user has the right to release the username regardless of time held.</li>
<li>The contract controller cannot access your deposited funds. They can only be moved back to the address that sent them.</li> <li>The contract controller cannot access your deposited funds. They can only be moved back to the address that sent them.</li>
<li>Your address(es) will be publicly associated with your ENS name.</li> <li>Your address(es) will be publicly associated with your ENS name.</li>
<li>Usernames are created as subdomain nodes of stateofus.eth and are subject to the ENS smart contract terms.</li> <li>Usernames are created as subdomain nodes of stateofus.eth and are subject to the ENS smart contract terms.</li>
<li>You authorize the contract to transfer SNT on your behalf. This can only occur when you approve a transaction to authorize the transfer.</li> <li>You authorize the contract to transfer SNT on your behalf. This can only occur when you approve a transaction to authorize the transfer.</li>
</ul> </ul>
<p>These terms are guaranteed by the smart contract logic at addresses:</p> <p>These terms are guaranteed by the smart contract logic at addresses:</p>
<ul> <ul>
<li>0xb1C47B61CDaeee3fA85Fe8B93FcE6311165E6291 (ENSSubdomainRegistry — Status)</li> <li>0xb1C47B61CDaeee3fA85Fe8B93FcE6311165E6291 (ENSSubdomainRegistry — Status)</li>
</ul> </ul>
<ul> <ul>
<li>0x112234455C3a32FD11230C42E7Bccd4A84e02010 (ENS).</li> <li>0x112234455C3a32FD11230C42E7Bccd4A84e02010 (ENS).</li>
</ul> </ul>
<Button size="large" className={classNames(classes.button)} onClick={toggleSearch}> <Button type="submit" size="large" className={classNames(classes.button)} onClick={onSubmit}>
<div style={buttonText}>Let's Go</div> <div style={buttonText}>Let's Go</div>
</Button> </Button>
</div> </div>
</Dialog>
); );
export default withStyles(styles)(Terms); export default withStyles(styles)(Terms);