breakout displaybox
This commit is contained in:
parent
e9a4f6c72b
commit
2db0c7171d
|
@ -0,0 +1,25 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Typography from '@material-ui/core/Typography';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { YOUR_CONTACT_CODE } from './constants';
|
||||||
|
import { checkAndDispatchStatusContactCode } from '../../actions/accounts';
|
||||||
|
|
||||||
|
|
||||||
|
const WrappedDisplayBox = ({ displayType, pubKey, getStatusContactCode }) => (
|
||||||
|
<div onClick={() => getStatusContactCode(displayType, pubKey)}>
|
||||||
|
<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 mapDispatchToDisplayBoxProps = dispatch => ({
|
||||||
|
getStatusContactCode(displayType, pubKey) {
|
||||||
|
if (displayType === YOUR_CONTACT_CODE && !pubKey) checkAndDispatchStatusContactCode(dispatch);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(null, mapDispatchToDisplayBoxProps)(WrappedDisplayBox);
|
|
@ -0,0 +1 @@
|
||||||
|
export const YOUR_CONTACT_CODE = 'Your contact code';
|
|
@ -31,6 +31,8 @@ import Face from '@material-ui/icons/Face';
|
||||||
import Copy from './copy';
|
import Copy from './copy';
|
||||||
import IDNANormalizer from 'idna-normalize';
|
import IDNANormalizer from 'idna-normalize';
|
||||||
import { nullAddress, getResolver } from './utils/domain';
|
import { nullAddress, getResolver } from './utils/domain';
|
||||||
|
import { YOUR_CONTACT_CODE } from './constants';
|
||||||
|
import DisplayBox from './DisplayBox';
|
||||||
|
|
||||||
const normalizer = new IDNANormalizer();
|
const normalizer = new IDNANormalizer();
|
||||||
const invalidSuffix = '0000000000000000000000000000000000000000'
|
const invalidSuffix = '0000000000000000000000000000000000000000'
|
||||||
|
@ -117,7 +119,7 @@ const MobileAddressDisplay = ({ domainName, address, statusAccount, expirationTi
|
||||||
preRegisteredCallback={onSubmit}
|
preRegisteredCallback={onSubmit}
|
||||||
registeredCallbackFn={console.log} />}
|
registeredCallbackFn={console.log} />}
|
||||||
{!edit && <DisplayBox displayType='Your wallet address' pubKey={address} />}
|
{!edit && <DisplayBox displayType='Your wallet address' pubKey={address} />}
|
||||||
{!edit && validStatusAddress(statusAccount) && <DisplayBox displayType='Your contact code' pubKey={statusAccount} />}
|
{!edit && validStatusAddress(statusAccount) && <DisplayBox displayType={YOUR_CONTACT_CODE} pubKey={statusAccount} />}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -1,38 +1,26 @@
|
||||||
import web3 from "Embark/web3"
|
import web3 from "Embark/web3"
|
||||||
import UsernameRegistrar from 'Embark/contracts/UsernameRegistrar';
|
import UsernameRegistrar from 'Embark/contracts/UsernameRegistrar';
|
||||||
import PublicResolver from 'Embark/contracts/PublicResolver';
|
|
||||||
import TestToken from 'Embark/contracts/TestToken';
|
import TestToken from 'Embark/contracts/TestToken';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import Hidden from '@material-ui/core/Hidden';
|
import Hidden from '@material-ui/core/Hidden';
|
||||||
import CircularProgress from '@material-ui/core/CircularProgress';
|
import CircularProgress from '@material-ui/core/CircularProgress';
|
||||||
import { Button, MobileSearch, MobileButton, Field } from '../../ui/components';
|
import { Button, MobileButton } from '../../ui/components';
|
||||||
import { withFormik } from 'formik';
|
import { withFormik } from 'formik';
|
||||||
import { hash } from 'eth-ens-namehash';
|
import { hash } from 'eth-ens-namehash';
|
||||||
import { zeroAddress, zeroBytes32, formatPrice } from './utils';
|
import { zeroAddress, zeroBytes32, formatPrice } from './utils';
|
||||||
import { getStatusContactCode, getSNTAllowance, getCurrentAccount } from '../../reducers/accounts';
|
import { getStatusContactCode, getSNTAllowance, getCurrentAccount } from '../../reducers/accounts';
|
||||||
import FieldGroup from '../standard/FieldGroup';
|
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 TokenPermissions from '../standard/TokenPermissionConnect';
|
|
||||||
import Terms from './terms';
|
import Terms from './terms';
|
||||||
import { generateXY } from '../../utils/ecdsa';
|
import { generateXY } from '../../utils/ecdsa';
|
||||||
import { getResolver } from './utils/domain';
|
import { getResolver } from './utils/domain';
|
||||||
|
import DisplayBox from './DisplayBox';
|
||||||
|
import { YOUR_CONTACT_CODE } from './constants';
|
||||||
|
|
||||||
const { soliditySha3, fromWei } = web3.utils;
|
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>
|
|
||||||
);
|
|
||||||
|
|
||||||
const formRef = React.createRef();
|
const formRef = React.createRef();
|
||||||
const displayTerms = status => status === 'terms';
|
const displayTerms = status => status === 'terms';
|
||||||
const InnerForm = ({
|
const InnerForm = ({
|
||||||
|
@ -123,8 +111,8 @@ 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' }}>*/}
|
||||||
|
|
Loading…
Reference in New Issue