mirror of
https://github.com/status-im/ens-usernames.git
synced 2025-02-09 00:53:42 +00:00
have terms trigger registration
This commit is contained in:
Barry Gitarts
Barry G
parent
5187000513
commit
15f636f4b1
@ -15,6 +15,7 @@ import FieldGroup from '../standard/FieldGroup';
|
||||
import LinearProgress from '@material-ui/core/LinearProgress';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import TokenPermissions from '../standard/TokenPermissionConnect';
|
||||
import Terms from './terms';
|
||||
import { generateXY } from '../../utils/ecdsa';
|
||||
import { getResolver } from './utils/domain';
|
||||
|
||||
@ -22,16 +23,17 @@ const { soliditySha3, fromWei } = web3.utils;
|
||||
|
||||
|
||||
const DisplayBox = ({ displayType, pubKey }) => (
|
||||
<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={{ margin: '3%', wordBreak: 'break-word' }}>
|
||||
<Typography type='body1'>{pubKey}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<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={{ margin: '3%', wordBreak: 'break-word' }}>
|
||||
<Typography type='body1'>{pubKey}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const displayTerms = status => status === 'terms';
|
||||
const InnerForm = ({
|
||||
values,
|
||||
errors,
|
||||
@ -44,10 +46,12 @@ const InnerForm = ({
|
||||
domainName,
|
||||
domainPrice,
|
||||
editAccount,
|
||||
setStatus,
|
||||
status,
|
||||
SNTAllowance,
|
||||
SNTBalance,
|
||||
}) => (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit} ref={node => (this.form = node)}>
|
||||
<div style={{ margin: '10px' }}>
|
||||
{!subDomain &&
|
||||
<FieldGroup
|
||||
@ -75,8 +79,8 @@ const InnerForm = ({
|
||||
style={{ marginTop: '5px' }}
|
||||
onClick={() => {
|
||||
UsernameRegistrar.methods.getPrice()
|
||||
.call()
|
||||
.then((res) => { setFieldValue('price', fromWei(res)); });
|
||||
.call()
|
||||
.then((res) => { setFieldValue('price', fromWei(res)); });
|
||||
}}
|
||||
>
|
||||
Get Price
|
||||
@ -119,41 +123,41 @@ const InnerForm = ({
|
||||
<Hidden mdUp>
|
||||
|
||||
<DisplayBox displayType='Your wallet address' pubKey={values.address} />
|
||||
|
||||
<DisplayBox displayType='Your contact code' pubKey={values.statusAddress} />
|
||||
|
||||
{/*<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={{ margin: '3%', wordBreak: 'break-word' }}>*/}
|
||||
{/*<Typography type='body1' onClick={() => setFieldValue('statusAddress', '')} style={{ textAlign: 'center', padding: '30px 0', color: 'blue', cursor: 'pointer'}}>*/}
|
||||
{/*Grant Access*/}
|
||||
{/*</Typography>*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div style={{ margin: '3%', wordBreak: 'break-word' }}>*/}
|
||||
{/*<Typography type='body1' onClick={() => setFieldValue('statusAddress', '')} style={{ textAlign: 'center', padding: '30px 0', color: 'blue', cursor: 'pointer'}}>*/}
|
||||
{/*Grant Access*/}
|
||||
{/*</Typography>*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
{/*<Field label="Your Wallet Address">*/}
|
||||
{/*<MobileSearch*/}
|
||||
{/*name="address"*/}
|
||||
{/*style={{ marginTop: '10px' }}*/}
|
||||
{/*placeholder="Your wallet address"*/}
|
||||
{/*value={values.address}*/}
|
||||
{/*onChange={handleChange}*/}
|
||||
{/*onClick={() => setFieldValue('address', '')}*/}
|
||||
{/*required*/}
|
||||
{/*wide />*/}
|
||||
{/*</Field>*/}
|
||||
{/*name="address"*/}
|
||||
{/*style={{ marginTop: '10px' }}*/}
|
||||
{/*placeholder="Your wallet address"*/}
|
||||
{/*value={values.address}*/}
|
||||
{/*onChange={handleChange}*/}
|
||||
{/*onClick={() => setFieldValue('address', '')}*/}
|
||||
{/*required*/}
|
||||
{/*wide />*/}
|
||||
{/*</Field>*/}
|
||||
{/*<Field label="Your contact code">*/}
|
||||
{/*<MobileSearch*/}
|
||||
{/*name="statusAddress"*/}
|
||||
{/*style={{ marginTop: '10px' }}*/}
|
||||
{/*placeholder="Status Messenger Address"*/}
|
||||
{/*value={values.statusAddress}*/}
|
||||
{/*onChange={handleChange}*/}
|
||||
{/*onClick={() => setFieldValue('statusAddress', '')}*/}
|
||||
{/*wide />*/}
|
||||
{/*</Field>*/}
|
||||
{/*name="statusAddress"*/}
|
||||
{/*style={{ marginTop: '10px' }}*/}
|
||||
{/*placeholder="Status Messenger Address"*/}
|
||||
{/*value={values.statusAddress}*/}
|
||||
{/*onChange={handleChange}*/}
|
||||
{/*onClick={() => setFieldValue('statusAddress', '')}*/}
|
||||
{/*wide />*/}
|
||||
{/*</Field>*/}
|
||||
<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>
|
||||
</Hidden>
|
||||
</div>
|
||||
|
||||
@ -2,48 +2,54 @@ import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
|
||||
import './terms.css';
|
||||
|
||||
const styles = theme => ({
|
||||
button: {
|
||||
margin: theme.spacing.unit,
|
||||
borderRadius: '4px',
|
||||
backgroundColor: 'rgba(67, 96, 223, 0.1)',
|
||||
}
|
||||
button: {
|
||||
margin: theme.spacing.unit,
|
||||
borderRadius: '4px',
|
||||
backgroundColor: 'rgba(67, 96, 223, 0.1)',
|
||||
}
|
||||
});
|
||||
|
||||
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">
|
||||
<h2 className="ens-terms__title">Terms of name registration</h2>
|
||||
<ul>
|
||||
<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>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>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>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>
|
||||
<h2 className="ens-terms__title">Terms of name registration</h2>
|
||||
<ul>
|
||||
<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>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>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>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>
|
||||
|
||||
<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>
|
||||
<li>0xb1C47B61CDaeee3fA85Fe8B93FcE6311165E6291 (ENSSubdomainRegistry — Status)</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>0xb1C47B61CDaeee3fA85Fe8B93FcE6311165E6291 (ENSSubdomainRegistry — Status)</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul>
|
||||
<li>0x112234455C3a32FD11230C42E7Bccd4A84e02010 (ENS).</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>0x112234455C3a32FD11230C42E7Bccd4A84e02010 (ENS).</li>
|
||||
</ul>
|
||||
|
||||
<Button size="large" className={classNames(classes.button)} onClick={toggleSearch}>
|
||||
<div style={buttonText}>Let's Go</div>
|
||||
</Button>
|
||||
<Button type="submit" size="large" className={classNames(classes.button)} onClick={onSubmit}>
|
||||
<div style={buttonText}>Let's Go</div>
|
||||
</Button>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
export default withStyles(styles)(Terms);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user