316 lines
12 KiB
JavaScript
316 lines
12 KiB
JavaScript
import React, { Fragment, PureComponent } from 'react';
|
|
import web3 from 'web3';
|
|
import { connect } from 'react-redux';
|
|
import { actions as accountActions, getDefaultAccount } from '../../reducers/accounts';
|
|
import { hash } from 'eth-ens-namehash';
|
|
import Hidden from '@material-ui/core/Hidden';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import ENSSubdomainRegistry from 'Embark/contracts/ENSSubdomainRegistry';
|
|
import { Button, Field, TextInput, MobileSearch, MobileButton, Card, Info, Text } from '../../ui/components'
|
|
import { IconCheck } from '../../ui/icons'
|
|
import { keyFromXY } from '../../utils/ecdsa';
|
|
import EditOptions from './EditOptions';
|
|
import ReleaseDomainAlert from './ReleaseDomain';
|
|
import theme from '../../ui/theme'
|
|
import { withFormik } from 'formik';
|
|
import PublicResolver from 'Embark/contracts/PublicResolver';
|
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
import RegisterSubDomain from '../ens/registerSubDomain';
|
|
import StatusLogo from '../../ui/icons/components/StatusLogo'
|
|
import EnsLogo from '../../ui/icons/logos/ens.png';
|
|
import { formatPrice } from '../ens/utils';
|
|
import CheckCircle from '../../ui/icons/components/baseline_check_circle_outline.png';
|
|
const { getPrice, getExpirationTime, release } = ENSSubdomainRegistry.methods;
|
|
import NotInterested from '@material-ui/icons/NotInterested';
|
|
import Face from '@material-ui/icons/Face';
|
|
|
|
const invalidSuffix = '0000000000000000000000000000000000000000'
|
|
const nullAddress = '0x0000000000000000000000000000000000000000'
|
|
const validAddress = address => address != nullAddress;
|
|
const validStatusAddress = address => !address.includes(invalidSuffix);
|
|
const formatName = domainName => domainName.includes('.') ? domainName : `${domainName}.stateofus.eth`;
|
|
const getDomain = fullDomain => formatName(fullDomain).split('.').slice(1).join('.');
|
|
const hashedDomain = domainName => hash(getDomain(domainName));
|
|
const { soliditySha3, fromWei } = web3.utils;
|
|
|
|
|
|
const cardStyle = {
|
|
width: '100%',
|
|
padding: '30px',
|
|
height: '425px'
|
|
}
|
|
|
|
const addressStyle = {
|
|
fontSize: '18px',
|
|
fontWeight: 400,
|
|
cursor: 'copy',
|
|
wordWrap: 'break-word',
|
|
}
|
|
|
|
const backButton = {
|
|
fontSize: '40px',
|
|
color: theme.accent,
|
|
cursor: 'pointer'
|
|
}
|
|
|
|
const generatePrettyDate = (timestamp) => new Date(timestamp * 1000).toDateString();
|
|
|
|
const DisplayBox = ({ displayType, pubKey }) => (
|
|
<div style={{ border: '1px solid #EEF2F5', borderRadius: '8px', margin: '1em', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', minHeight: '4em' }}>
|
|
<div style={{ margin: '3%', wordBreak: 'break-word' }}>
|
|
<div style={{ fontSize: '14px', color: '#939BA1' }}>{displayType}</div>
|
|
<Typography type='body1'>{pubKey}</Typography>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const MobileAddressDisplay = ({ domainName, address, statusAccount, expirationTime, defaultAccount, isOwner }) => (
|
|
<Fragment>
|
|
<Info background={isOwner ? '#44D058' : '#000000'} style={{ margin: '0.4em', boxShadow: '0px 6px 10px rgba(0, 0, 0, 0.2)' }}>
|
|
<Typography variant="title" style={
|
|
{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
|
|
}>
|
|
{isOwner ? <Face style={{ marginBottom: '0.5em', fontSize: '2em' }} /> : <NotInterested style={{ marginBottom: '0.5em', fontSize: '2em' }}/>}
|
|
<b>{formatName(domainName)}</b>
|
|
<div style={{ fontWeight: 300 }}>
|
|
{expirationTime && <i>Locked until {generatePrettyDate(expirationTime)}</i>}
|
|
</div>
|
|
</Typography>
|
|
</Info>
|
|
<Typography type='subheading' style={{ textAlign: 'center', fontSize: '17px', margin: '1em 0 0.3em 0' }}>{isOwner ? 'You\'re the owner of this name' : 'Name is unavailable'}</Typography>
|
|
<Typography type='body2' style={{ textAlign: 'center' }}>registered to the addresses below</Typography>
|
|
<DisplayBox displayType='Wallet Address' pubKey={address} />
|
|
{validStatusAddress(statusAccount) && <DisplayBox displayType='Contact Code' pubKey={statusAccount} />}
|
|
</Fragment>
|
|
)
|
|
|
|
class RenderAddresses extends PureComponent {
|
|
state = { copied: false, editMenu: false }
|
|
|
|
render() {
|
|
const { domainName, address, statusAccount, expirationTime, defaultAccount } = this.props
|
|
const { copied, editMenu, editAction } = this.state
|
|
const markCopied = (v) => { this.setState({ copied: v }) }
|
|
const isCopied = address => address == copied;
|
|
const renderCopied = address => isCopied(address) && <span style={{ color: theme.positive }}><IconCheck/>Copied!</span>;
|
|
const isOwner = defaultAccount === address;
|
|
const onClose = value => { this.setState({ editAction: value, editMenu: false }) }
|
|
const closeReleaseAlert = value => {
|
|
if (value) {
|
|
release(
|
|
soliditySha3(domainName),
|
|
hash('stateofus.eth'),
|
|
)
|
|
.send()
|
|
}
|
|
this.setState({ editAction: null })
|
|
}
|
|
return (
|
|
<Fragment>
|
|
<Hidden mdDown>
|
|
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
|
<Info.Action title="Click to copy"><b>{formatName(domainName)}</b>{expirationTime && <i> (Expires {generatePrettyDate(expirationTime)})</i>} Resolves To:</Info.Action>
|
|
{address && <Text style={{ marginTop: '1em' }}>Ethereum Address {renderCopied(address)}</Text>}
|
|
<CopyToClipboard text={address} onCopy={markCopied}>
|
|
<div style={addressStyle}>{address}</div>
|
|
</CopyToClipboard>
|
|
{validStatusAddress(statusAccount) && <Text style={{ marginTop: '1em' }}>Status Address {renderCopied(statusAccount)}</Text>}
|
|
{validStatusAddress(statusAccount) && <CopyToClipboard text={statusAccount} onCopy={markCopied}>
|
|
<div style={{ ...addressStyle, color: isCopied ? theme.primary : null }}>{statusAccount}</div>
|
|
</CopyToClipboard>}
|
|
</div>
|
|
</Hidden>
|
|
<Hidden mdUp>
|
|
<MobileAddressDisplay {...this.props} isOwner={isOwner} />
|
|
{isOwner && <MobileButton text="Edit" style={{ marginLeft: '35%' }} onClick={() => { this.setState({ editMenu: true }) } }/>}
|
|
{editMenu && <EditOptions open={editMenu} onClose={onClose} />}
|
|
<ReleaseDomainAlert open={editAction === 'release'} handleClose={closeReleaseAlert} />
|
|
</Hidden>
|
|
</Fragment>
|
|
)
|
|
}
|
|
}
|
|
|
|
const RegisterInfoCard = ({ formattedDomain, domainPrice }) => (
|
|
<Fragment>
|
|
<Hidden mdDown>
|
|
<Info.Action title="No address is associated with this domain">
|
|
<span style={{ color: theme.accent }}>{formattedDomain.toLowerCase()}</span> can be registered for {!!domainPrice && formatPrice(fromWei(domainPrice))} SNT
|
|
</Info.Action>
|
|
</Hidden>
|
|
<Hidden mdUp>
|
|
<Info background="#415be3" style={{ margin: '0.4em' }}>
|
|
<Typography variant="title" style={
|
|
{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-evenly', height: '4em', color: '#ffffff', textAlign: 'center', margin: '10%' }
|
|
}>
|
|
<img src={CheckCircle} style={{ maxWidth: '2.5em', marginBottom: '0.5em' }} />
|
|
<b>{formattedDomain.toLowerCase()}</b>
|
|
<div style={{ fontWeight: 300 }}>
|
|
{!!domainPrice && formatPrice(fromWei(domainPrice))} SNT / 1 year
|
|
</div>
|
|
</Typography>
|
|
</Info>
|
|
</Hidden>
|
|
<Hidden mdUp>
|
|
<Typography style={{ textAlign: 'center', padding: '1.5em' }}>
|
|
This name will be pointed to the wallet address and contact code below
|
|
</Typography>
|
|
</Hidden>
|
|
</Fragment>
|
|
)
|
|
|
|
class Register extends PureComponent {
|
|
state = { domainPrice: null };
|
|
|
|
componentDidMount() {
|
|
const { domainName } = this.props;
|
|
getPrice(hashedDomain(domainName))
|
|
.call()
|
|
.then((res) => { this.setState({ domainPrice: res })});
|
|
}
|
|
|
|
onRegistered = (address, statusAccount) => {
|
|
const { domainPrice } = this.state;
|
|
const { subtractFromBalance } = this.props;
|
|
subtractFromBalance(domainPrice);
|
|
this.setState({ registered: { address, statusAccount } });
|
|
}
|
|
|
|
render() {
|
|
const { domainName, setStatus, style } = this.props;
|
|
const { domainPrice, registered } = this.state;
|
|
const formattedDomain = formatName(domainName);
|
|
const formattedDomainArray = formattedDomain.split('.')
|
|
return (
|
|
<div style={style}>
|
|
{!registered ?
|
|
<Fragment>
|
|
<RegisterInfoCard {...{ formattedDomain, domainPrice }}/>
|
|
<RegisterSubDomain
|
|
subDomain={formattedDomainArray[0]}
|
|
domainName={formattedDomainArray.slice(1).join('.')}
|
|
domainPrice={domainPrice}
|
|
registeredCallbackFn={this.onRegistered} />
|
|
</Fragment> :
|
|
<RenderAddresses {...this.props} address={registered.address} statusAccount={registered.statusAccount} />}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
subtractFromBalance(amount) {
|
|
dispatch(accountActions.subtractfromSntTokenBalance(amount));
|
|
},
|
|
});
|
|
|
|
const mapStateToProps = state => ({
|
|
defaultAccount: getDefaultAccount(state)
|
|
})
|
|
|
|
const ConnectedRegister = connect(mapStateToProps, mapDispatchToProps)(Register);
|
|
|
|
const DisplayAddress = connect(mapStateToProps)((props) => (
|
|
<Fragment>
|
|
{validAddress(props.address) ?
|
|
<RenderAddresses {...props} />
|
|
:
|
|
<Hidden mdUp>
|
|
<Info.Action title="No address is associated with this domain">
|
|
{props.domainName}
|
|
</Info.Action>
|
|
</Hidden>
|
|
}
|
|
</Fragment>
|
|
))
|
|
|
|
const LookupForm = ({ handleSubmit, values, handleChange, justSearch }) => (
|
|
<Fragment>
|
|
<form onSubmit={handleSubmit} onBlur={handleSubmit} >
|
|
<Hidden mdDown>
|
|
<Field label="Enter Domain or Status Name" wide>
|
|
<TextInput
|
|
value={values.domainName}
|
|
name="domainName"
|
|
onChange={handleChange}
|
|
wide
|
|
required />
|
|
</Field>
|
|
</Hidden>
|
|
<Hidden mdUp>
|
|
<MobileSearch
|
|
search
|
|
name="domainName"
|
|
placeholder='Search for vacant name'
|
|
value={values.domainName}
|
|
onChange={handleChange}
|
|
required
|
|
wide />
|
|
{!justSearch && <Typography variant="subheading" style={{ color: '#939ba1', textAlign: 'center', marginTop: '25vh' }}>
|
|
Symbols * / <br/>
|
|
are not supported
|
|
</Typography>}
|
|
</Hidden>
|
|
<Hidden mdDown>
|
|
<Button mode="strong" type="submit" wide>
|
|
Lookup Address
|
|
</Button>
|
|
</Hidden>
|
|
</form>
|
|
</Fragment>
|
|
)
|
|
|
|
const InnerForm = ({
|
|
values,
|
|
errors,
|
|
touched,
|
|
handleChange,
|
|
handleBlur,
|
|
handleSubmit,
|
|
isSubmitting,
|
|
status,
|
|
setStatus
|
|
}) => (
|
|
<div>
|
|
<Hidden mdDown>
|
|
<span style={{ display: 'flex', justifyContent: 'space-evenly', marginBottom: '10px' }}>
|
|
<StatusLogo />
|
|
<img style={{ maxWidth: '150px', alignSelf: 'center' }} src={EnsLogo} alt="Ens Logo"/>
|
|
</span>
|
|
</Hidden>
|
|
{!status
|
|
? <LookupForm {...{ handleSubmit, values, handleChange }} />
|
|
: validAddress(status.address) ?
|
|
<DisplayAddress
|
|
domainName={values.domainName}
|
|
address={status.address}
|
|
statusAccount={status.statusAccount}
|
|
expirationTime={status.expirationTime}
|
|
setStatus={setStatus} /> :
|
|
<div>
|
|
<LookupForm {...{ handleSubmit, values, handleChange }} justSearch />
|
|
<ConnectedRegister
|
|
style={{ position: 'relative' }}
|
|
setStatus={setStatus}
|
|
domainName={values.domainName} />
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
|
|
const NameLookup = withFormik({
|
|
mapPropsToValues: props => ({ domainName: '' }),
|
|
async handleSubmit(values, { status, setSubmitting, setStatus }) {
|
|
const { domainName } = values;
|
|
const { addr, pubkey } = PublicResolver.methods;
|
|
const lookupHash = hash(formatName(domainName));
|
|
const address = await addr(lookupHash).call();
|
|
const keys = await pubkey(lookupHash).call();
|
|
const statusAccount = keyFromXY(keys[0], keys[1]);
|
|
const expirationTime = await getExpirationTime(lookupHash).call();
|
|
setStatus({ address, statusAccount, expirationTime });
|
|
}
|
|
})(InnerForm)
|
|
|
|
export default NameLookup;
|