diff --git a/app/components/ens/DisplayBox.js b/app/components/ens/DisplayBox.js index f52a704..41e0f10 100644 --- a/app/components/ens/DisplayBox.js +++ b/app/components/ens/DisplayBox.js @@ -3,15 +3,35 @@ import Typography from '@material-ui/core/Typography'; import { connect } from 'react-redux'; import { YOUR_CONTACT_CODE } from './constants'; import { checkAndDispatchStatusContactCode } from '../../actions/accounts'; +import styled from "styled-components"; -const WrappedDisplayBox = ({ displayType, pubKey, getStatusContactCode }) => ( +const DisplayLabel = styled.div` + font-size: 14px; + color: #939BA1; + margin: 0 1em; +`; + +const DisplayBox = styled.div` + border: 1px solid #EEF2F5; + border-radius: 8px; + margin: 7px 12px 14px 12px; + display: flex; + flex-direction: column; + justifyContent: space-around; + min-height: 4em; + word-wrap: break-word; +`; + +const WrappedDisplayBox = ({displayType, pubKey, getStatusContactCode}) => (
getStatusContactCode(displayType, pubKey)}> -
{displayType}
-
-
+ + {displayType} + + +
{pubKey}
-
+
); diff --git a/app/components/ens/constants.js b/app/components/ens/constants.js index 213b3b0..afa62d8 100644 --- a/app/components/ens/constants.js +++ b/app/components/ens/constants.js @@ -1 +1,2 @@ export const YOUR_CONTACT_CODE = 'Your contact code'; +export const YOUR_WALLET_ADDRESS = 'Your wallet address'; \ No newline at end of file diff --git a/app/components/ens/nameLookup.js b/app/components/ens/nameLookup.js index 0a7a0ee..d8ae6a7 100644 --- a/app/components/ens/nameLookup.js +++ b/app/components/ens/nameLookup.js @@ -34,6 +34,7 @@ import { nullAddress, getResolver } from './utils/domain'; import { YOUR_CONTACT_CODE } from './constants'; import DisplayBox from './DisplayBox'; import styled from "styled-components"; +import { Route } from "react-router-dom"; const normalizer = new IDNANormalizer(); const invalidSuffix = '0000000000000000000000000000000000000000' @@ -240,6 +241,7 @@ class Register extends PureComponent { const formattedDomain = formatName(domainName); const formattedDomainArray = formattedDomain.split('.'); const isOwner = defaultAccount === ownerAddress; + return (
{!registered && !submitted ? @@ -267,7 +269,7 @@ const mapDispatchToProps = dispatch => ({ const mapStateToProps = state => ({ defaultAccount: getDefaultAccount(state) -}) +}); const ConnectedRegister = connect(mapStateToProps, mapDispatchToProps)(Register); @@ -283,94 +285,51 @@ const DisplayAddress = connect(mapStateToProps)((props) => ( } -)) +)); -const LookupForm = ({ handleSubmit, values, handleChange, isWarningDisplayed }) => ( - -
- - - - - - - - {isWarningDisplayed && Names are made with
letters and numbers only} - - - - -
- -) +class LookupForm extends React.Component { + render() { + const { handleSubmit, values, handleChange, isWarningDisplayed } = this.props; -const InnerForm = ({ - values, - errors, - touched, - handleChange, - handleBlur, - handleSubmit, - isSubmitting, - status, - setStatus, - defaultAccount -}) => ( -
- - - - Ens Logo - - - {!status || !status.address ? - - : - validAddress(status.address) || defaultAccount === status.ownerAddress ? - : -
- - -
- } -
-); + return ( + +
+ + + + + + + + {isWarningDisplayed && Names are made with
letters and numbers only} + + + + +
+ + ); + } +} const isValidDomainName = val => /^([a-z0-9]+)$/.test(val.toLowerCase()); -const NameLookup = withFormik({ - mapPropsToValues: props => ({ domainName: '' }), - - async handleSubmit(values, { status, setSubmitting, setStatus }) { - const { domainName } = values; - +class SearchResultsPage extends React.Component { + async loadDomainInformation({setStatus, domainName}) { if (isValidDomainName(domainName)) { const { methods: { owner, resolver } } = ENSRegistry; const lookupHash = hash(formatName(domainName)); @@ -403,6 +362,109 @@ const NameLookup = withFormik({ setStatus({isInvalidDomain: true }); } } -})(InnerForm); -export default connect(mapStateToProps)(NameLookup); + componentDidMount() { + const { setValues } = this.props; + const domainName = this.props.match.params.domainName; + setValues({domainName: domainName}); + + this.loadDomainInformation({ + setStatus: this.props.setStatus, + domainName: domainName + }); + } + + componentWillReceiveProps(nextProps) { + const { setValues, match } = this.props; + + const oldDomainName = match.params.domainName; + const newDomainName = nextProps.match.params.domainName; + + if (oldDomainName !== newDomainName) { + setValues({domainName: newDomainName}); + this.loadDomainInformation({ + setStatus: this.props.setStatus, + domainName: newDomainName + }); + } + } + + render() { + const { + values, + handleChange, + handleSubmit, + status, + setStatus, + defaultAccount + } = this.props; + + return ( +
+ {!status || !status.address ? + + : + validAddress(status.address) || defaultAccount === status.ownerAddress ? + : +
+ + +
+ } +
+ ); + } +} + +class NameLookupContainer extends React.Component { + render() { + const {match, status} = this.props; + + return ( +
+ + + + Ens Logo + + + + {match && +
+ }/> + }/> +
+ } +
+ ) + } +} + +const NameLookupContainerWrapped = withFormik({ + mapPropsToValues: () => ({ domainName: '' }), + + async handleSubmit(values, { props }) { + const { domainName } = values; + props.history.push(`${props.match.url}/${domainName}`); + } +})(NameLookupContainer); + +export default connect(mapStateToProps)(NameLookupContainerWrapped); diff --git a/app/components/ens/registerSubDomain.js b/app/components/ens/registerSubDomain.js index b8f4a6a..2ab0d05 100644 --- a/app/components/ens/registerSubDomain.js +++ b/app/components/ens/registerSubDomain.js @@ -2,27 +2,44 @@ import web3 from "Embark/web3" import UsernameRegistrar from 'Embark/contracts/UsernameRegistrar'; import TestToken from 'Embark/contracts/TestToken'; import React from 'react'; -import { connect } from 'react-redux'; +import {connect} from 'react-redux'; import Hidden from '@material-ui/core/Hidden'; +import {withStyles} from '@material-ui/core/styles'; import CircularProgress from '@material-ui/core/CircularProgress'; -import { Button, MobileButton } from '../../ui/components'; -import { withFormik } from 'formik'; -import { hash } from 'eth-ens-namehash'; -import { zeroAddress, zeroBytes32, formatPrice } from './utils'; -import { getStatusContactCode, getSNTAllowance, getCurrentAccount } from '../../reducers/accounts'; +import {Button, MobileButton} from '../../ui/components'; +import {withFormik} from 'formik'; +import {hash} from 'eth-ens-namehash'; +import {zeroAddress, zeroBytes32, formatPrice} from './utils'; +import {getStatusContactCode, getSNTAllowance, getCurrentAccount} from '../../reducers/accounts'; import FieldGroup from '../standard/FieldGroup'; import LinearProgress from '@material-ui/core/LinearProgress'; import Terms from './terms'; -import { generateXY } from '../../utils/ecdsa'; -import { getResolver } from './utils/domain'; +import {generateXY} from '../../utils/ecdsa'; +import {getResolver} from './utils/domain'; import DisplayBox from './DisplayBox'; -import { YOUR_CONTACT_CODE } from './constants'; +import { YOUR_CONTACT_CODE, YOUR_WALLET_ADDRESS } from './constants'; +import classNames from "classnames"; const { soliditySha3, fromWei } = web3.utils; +const styles = theme => ({ + button: { + margin: theme.spacing.unit, + backgroundColor: 'rgba(67, 96, 223, 0.1)', + }, + buttonText: { + color: '#4360df', + margin: '0 20px', + fontWeight: 400, + textTransform: 'uppercase' + } +}); + const formRef = React.createRef(); const displayTerms = status => status === 'terms'; + const InnerForm = ({ + classes, values, errors, handleChange, @@ -64,13 +81,14 @@ const InnerForm = ({ button={ } @@ -110,41 +128,18 @@ const InnerForm = ({ - + - {/*
Your contact code
*/} - {/*
*/} - {/*
*/} - {/* setFieldValue('statusAddress', '')} style={{ textAlign: 'center', padding: '30px 0', color: 'blue', cursor: 'pointer'}}>*/} - {/*Grant Access*/} - {/**/} - {/*
*/} - {/*
*/} - - {/**/} - {/* setFieldValue('address', '')}*/} - {/*required*/} - {/*wide />*/} - {/**/} - {/**/} - {/* setFieldValue('statusAddress', '')}*/} - {/*wide />*/} - {/**/} -
- {!isSubmitting ? { setStatus('terms') }} text={`${editAccount ? 'Save' : 'Register'} with transaction`} style={{ width: '100%' }} /> : } +
+ {!isSubmitting ? + + : + } { setStatus(null); formRef.current.dispatchEvent(new Event('submit')) }} form={formRef} />
@@ -152,6 +147,8 @@ const InnerForm = ({ ); +const StyledInnerForm = withStyles(styles)(InnerForm); + const RegisterSubDomain = withFormik({ mapPropsToValues: props => ({ subDomain: '', domainName: '', price: '', statusAddress: props.statusContactCode || '', address: web3.eth.defaultAccount || '' }), validate(values, props) { @@ -219,7 +216,7 @@ const RegisterSubDomain = withFormik({ }); } } -})(InnerForm); +})(StyledInnerForm); const mapStateToProps = state => ({ statusContactCode: getStatusContactCode(state), diff --git a/app/components/ens/welcome.js b/app/components/ens/welcome.js index 26dace8..2a8bf30 100644 --- a/app/components/ens/welcome.js +++ b/app/components/ens/welcome.js @@ -1,54 +1,65 @@ import React from 'react'; import classNames from 'classnames'; -import { withStyles } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; +import {withStyles} from '@material-ui/core/styles'; +import {Button} from '../../ui/components'; import StatusCards from '../../ui/icons/svg/intro_name.svg'; +import {BrowserRouter as Router, Route, Link} from "react-router-dom"; import './welcome.css'; const styles = theme => ({ button: { margin: theme.spacing.unit, - borderRadius: '4px', backgroundColor: 'rgba(67, 96, 223, 0.1)', + }, + buttonText: { + color: '#4360df', + margin: '0 20px', + fontWeight: 400, + textTransform: 'uppercase' } }); -const buttonText = { color: '#4360df', margin: '0 20px', fontWeight: 300 }; - const WelcomeContent = () => ( -
-
How it works
+
+
How it works
-
    -
  1. -
    Simplify your ETH address
    -
    Your complex wallet address (0x...) becomes an easy to read, remember & share URL: myname.stateofus.eth
    -
    2. -
  2. -
    100 SNT to register
    -
    Register once to keep the name forever. After 1 year, you can release the name and get your SNT back.
    -
    3. -
  3. -
    Connect & get paid
    -
    Share your name to chat on Status or receive ETH and tokens.
    -
    4. -
-
Already have a Status subdomain? Manage it
-
Powered by Ethereum Name Services
+
    +
  1. +
    Simplify your ETH address
    +
    Your complex wallet address (0x...) becomes an easy to read, remember & share URL: myname.stateofus.eth
    +
    2. +
  2. +
    100 SNT to register
    +
    Register once to keep the name forever. After 1 year, you can release the name and get + your SNT back. +
    +
    3. +
  3. +
    Connect & get paid
    +
    Share your name to chat on Status or receive ETH and tokens.
    +
    4. +
+
Already have a Status subdomain? Manage it
+
+ Powered by Ethereum Name Services
+
); -const Welcome = ({ classes, toggleSearch }) => ( +const Welcome = ({ classes }) => (

ENS names transform those crazy-long addresses into unique usernames

- - + + + +
); diff --git a/app/dapp.js b/app/dapp.js index 38dcae5..7cabf36 100644 --- a/app/dapp.js +++ b/app/dapp.js @@ -1,43 +1,54 @@ -import React, { Fragment } from 'react'; -import ReactDOM from 'react-dom'; +import React from 'react'; import 'typeface-roboto' -import CssBaseline from '@material-ui/core/CssBaseline'; -import { Tabs, Tab } from 'react-bootstrap'; import Toggle from 'react-toggle'; import EmbarkJS from 'Embark/EmbarkJS'; -import TopNavbar from './components/topnavbar'; -import TestTokenUI from './components/testtoken'; -import ERC20TokenUI from './components/erc20token'; import TestToken from 'Embark/contracts/TestToken'; -import ENSSubManagement from './components/ensSubManagement'; import UsernameRegistrar from 'Embark/contracts/UsernameRegistrar'; import NameLookup from './components/ens/nameLookup'; import AdminMode from './components/AdminMode'; import TokenPermissions from './components/standard/TokenPermissionConnect'; import web3 from "Embark/web3"; -import Paper from '@material-ui/core/Paper'; -import Typography from '@material-ui/core/Typography'; import Welcome from './components/ens/welcome'; -import Fade from '@material-ui/core/Fade'; import Hidden from '@material-ui/core/Hidden'; import Web3Render from './components/standard/Web3Render'; import StatusOptimized from './components/standard/StatusOptimized'; - +import { HashRouter, Route } from "react-router-dom"; import './dapp.css'; const { getNetworkType } = web3.eth.net; - const symbols = { 'ropsten': 'STT', 'private': 'SNT', 'main': 'SNT' } +const Web3RenderContent = ({ network, history, match }) => ( + +
+ + +
+ +
+ { + this.setState({admin: !admin}) + }}/> +
+ Admin Mode +
+ +
+ +); + class App extends React.Component { constructor(props) { super(props) } - state = { admin: false, searching: false }; + state = { admin: false }; componentDidMount(){ EmbarkJS.onReady((err) => { @@ -46,43 +57,24 @@ class App extends React.Component { } render() { - const { admin, network, searching } = this.state; - const toggleSearch = () => { this.setState({ searching: !searching }) }; - const isRopsten = network === 'ropsten'; - const isMainnet = network === 'main'; + const { admin, network } = this.state; + return ( -
- - - -
- -
- {!searching && -
- + +
+ + + +
+
- } - {searching && - -
- - -
- -
- { this.setState({ admin: !admin })}} /> -
- Admin Mode -
- -
- - } -
+ + + ( + + )}/> +
+ ); } } diff --git a/app/ui/components/Button/Button.js b/app/ui/components/Button/Button.js index b475d5b..ddaf7df 100644 --- a/app/ui/components/Button/Button.js +++ b/app/ui/components/Button/Button.js @@ -177,7 +177,7 @@ const StyledButton = styled.button.attrs({ type: 'button' })` color: ${textSecondary}; background: ${contentBackground}; border: 0; - border-radius: 3px; + border-radius: 4px; outline: 0; cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')}; &, diff --git a/package.json b/package.json index d19f2a7..3b30599 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,8 @@ "react-copy-to-clipboard": "^5.0.1", "react-dom": "^16.4.2", "react-redux": "^5.0.7", + "react-router": "^4.3.1", + "react-router-dom": "^4.3.1", "react-toggle": "^4.0.2", "redux": "^4.0.0", "redux-action-creator": "^2.3.0",