last fixes — better error handling, arrow button instead of old one
This commit is contained in:
parent
94530050bf
commit
3e64c00806
|
@ -322,6 +322,7 @@ class LookupForm extends React.Component {
|
|||
<Hidden mdUp>
|
||||
<MobileSearch
|
||||
name="domainName"
|
||||
type="search"
|
||||
placeholder='Search for available name'
|
||||
value={values.domainName}
|
||||
onChange={handleChange}
|
||||
|
|
|
@ -5,7 +5,7 @@ import React from 'react';
|
|||
import {connect} from 'react-redux';
|
||||
import Hidden from '@material-ui/core/Hidden';
|
||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||
import {Button, StyledButton} from '../../ui/components';
|
||||
import {ArrowButton, Button} from '../../ui/components';
|
||||
import {withFormik} from 'formik';
|
||||
import {hash} from 'eth-ens-namehash';
|
||||
import {zeroAddress, zeroBytes32, formatPrice} from './utils';
|
||||
|
@ -142,15 +142,22 @@ class InnerForm extends React.Component {
|
|||
showBlueBox={!values.statusAddress}
|
||||
onClick={() => this.requestStatusContactCode(this.props)}/>
|
||||
|
||||
<div style={{position: 'relative', left: 0, right: 0, bottom: 0, textAlign: 'center'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'row-reverse', marginTop: '16px', marginBottom: '16px'}}>
|
||||
{!isSubmitting ?
|
||||
<StyledButton onClick={() => this.onRegisterClick(this.props)}>
|
||||
<ArrowButton onClick={(e) => {
|
||||
this.onRegisterClick(this.props);
|
||||
e.preventDefault();
|
||||
}}>
|
||||
<div>
|
||||
{`${editAccount ? 'Save' : 'Register'}`}
|
||||
</div>
|
||||
</StyledButton>
|
||||
</ArrowButton>
|
||||
:
|
||||
<CircularProgress/>}
|
||||
<div style={{flex: 1, textAlign: 'center'}}>
|
||||
<CircularProgress/>
|
||||
</div>
|
||||
}
|
||||
|
||||
<Terms open={displayTerms(status)}
|
||||
onSubmit={() => {
|
||||
setStatus(null);
|
||||
|
@ -158,6 +165,8 @@ class InnerForm extends React.Component {
|
|||
}}
|
||||
form={formRef}/>
|
||||
</div>
|
||||
|
||||
|
||||
</Hidden>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import Dialog from '@material-ui/core/Dialog';
|
||||
import {StyledButton} from '../../ui/components';
|
||||
import {ArrowButton} from '../../ui/components';
|
||||
import styled from "styled-components";
|
||||
|
||||
const TermsContainer = styled.div`
|
||||
|
@ -33,9 +33,7 @@ const ListContainer = styled.ul`
|
|||
}
|
||||
`;
|
||||
|
||||
const buttonText = { color: '#4360df', margin: '0 20px', fontWeight: 300 };
|
||||
|
||||
const Terms = ({ classes, open, onSubmit }) => (
|
||||
const Terms = ({ open, onSubmit }) => (
|
||||
<Dialog fullScreen open={open}>
|
||||
<TermsContainer>
|
||||
<InfoHeading className="ens-terms__title">Terms of name registration</InfoHeading>
|
||||
|
@ -58,12 +56,14 @@ const Terms = ({ classes, open, onSubmit }) => (
|
|||
<li>Registering an illegal name via the registry contract will result in the loss of your SNT deposit and removal of the name.</li>
|
||||
<li>Contact codes and wallet addresses associated with your name are publicly available information.</li>
|
||||
</ListContainer>
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<StyledButton type="submit" onClick={onSubmit}>
|
||||
<div>Let's Go</div>
|
||||
</StyledButton>
|
||||
</div>
|
||||
</TermsDescription>
|
||||
|
||||
<div style={{display: 'flex', flexDirection: 'row-reverse', marginBottom: '16px', marginRight: '8px'}}>
|
||||
<ArrowButton type="submit" onClick={onSubmit}>
|
||||
<div>Send SNT</div>
|
||||
</ArrowButton>
|
||||
</div>
|
||||
|
||||
</TermsContainer>
|
||||
</Dialog>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
import RightIcon from '../../ui/icons/svg/right.svg';
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledContainer = styled.button`
|
||||
border: 0;
|
||||
background: none;
|
||||
color: #4360DF;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 15px;
|
||||
line-height: 18px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
`;
|
||||
|
||||
const StyledIcon = styled.img`
|
||||
margin-left: 14px;
|
||||
`;
|
||||
|
||||
const ArrowButton = ({ text, ...props }) => (
|
||||
<StyledContainer {...props}>
|
||||
{props.children}
|
||||
<StyledIcon src={RightIcon} />
|
||||
</StyledContainer>
|
||||
)
|
||||
|
||||
export default ArrowButton;
|
|
@ -5,18 +5,18 @@ import styled from "styled-components";
|
|||
const StyledContainer = styled.div`
|
||||
text-align: center;
|
||||
margin-top: 40vh;
|
||||
`
|
||||
`;
|
||||
|
||||
const StyledIcon = styled.img`
|
||||
display: block;
|
||||
margin: 0 auto 15px;
|
||||
`
|
||||
`;
|
||||
|
||||
const Warning = ({ text, ...props }) => (
|
||||
<StyledContainer>
|
||||
<StyledIcon src={WarningIcon} />
|
||||
{props.children}
|
||||
</StyledContainer>
|
||||
)
|
||||
);
|
||||
|
||||
export default Warning;
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
export * from './Button';
|
||||
export { default as StyledButton } from './StyledButton.js';
|
||||
export { default as ArrowButton } from './ArrowButton.js';
|
||||
export { default as Card } from './Card.js';
|
||||
export { default as Field } from './Field.js';
|
||||
export { default as Text } from './Text.js';
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.70719 8.71434L1.69578 15.7079C1.3074 16.0953 0.681196 16.0988 0.291074 15.7097C-0.0963472 15.3232 -0.0907033 14.6911 0.292809 14.3085L6.61881 7.99859L0.292809 1.68865C-0.0955705 1.30126 -0.0990483 0.676638 0.291074 0.287507C0.678495 -0.0989301 1.31227 -0.0933004 1.69578 0.289237L8.70719 7.28284C8.93181 7.50689 9.02769 7.81029 8.99313 8.10159C8.97295 8.32613 8.8772 8.54476 8.70719 8.71434Z" fill="#4360DF"/>
|
||||
</svg>
|
After Width: | Height: | Size: 563 B |
Loading…
Reference in New Issue