implement receive funds modal
This commit is contained in:
parent
b8d5b383bd
commit
d2915356b2
|
@ -77,6 +77,7 @@
|
|||
"immutable": "^4.0.0-rc.9",
|
||||
"material-ui-search-bar": "^1.0.0-beta.13",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"qrcode.react": "^0.9.3",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-final-form": "^4.1.0",
|
||||
|
|
|
@ -31,10 +31,26 @@ type Props = {
|
|||
}
|
||||
|
||||
const Col = ({
|
||||
children, margin, layout = 'inherit', overflow,
|
||||
xs, sm, md, lg,
|
||||
start, center, end, top, middle, bottom, around, between,
|
||||
xsOffset, smOffset, mdOffset, lgOffset,
|
||||
children,
|
||||
margin,
|
||||
layout = 'inherit',
|
||||
overflow,
|
||||
xs,
|
||||
sm,
|
||||
md,
|
||||
lg,
|
||||
start,
|
||||
center,
|
||||
end,
|
||||
top,
|
||||
middle,
|
||||
bottom,
|
||||
around,
|
||||
between,
|
||||
xsOffset,
|
||||
smOffset,
|
||||
mdOffset,
|
||||
lgOffset,
|
||||
className,
|
||||
...props
|
||||
}: Props) => {
|
||||
|
|
|
@ -3,14 +3,25 @@ import * as React from 'react'
|
|||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Close from '@material-ui/icons/Close'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import OpenInNew from '@material-ui/icons/OpenInNew'
|
||||
import Link from '~/components/layout/Link'
|
||||
import QRCode from 'qrcode.react'
|
||||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import Identicon from '~/components/Identicon'
|
||||
import Button from '~/components/layout/Button'
|
||||
import Block from '~/components/layout/Block'
|
||||
import Row from '~/components/layout/Row'
|
||||
import { lg, md } from '~/theme/variables'
|
||||
import Hairline from '~/components/layout/Hairline'
|
||||
import Col from '~/components/layout/Col'
|
||||
import {
|
||||
xxl, lg, sm, md, background, secondary,
|
||||
} from '~/theme/variables'
|
||||
|
||||
const styles = () => ({
|
||||
heading: {
|
||||
padding: `${md} ${lg}`,
|
||||
padding: `${sm} ${lg}`,
|
||||
justifyContent: 'space-between',
|
||||
maxHeight: '75px',
|
||||
},
|
||||
manage: {
|
||||
fontSize: '24px',
|
||||
|
@ -19,22 +30,81 @@ const styles = () => ({
|
|||
height: '35px',
|
||||
width: '35px',
|
||||
},
|
||||
detailsContainer: {
|
||||
backgroundColor: background,
|
||||
},
|
||||
qrContainer: {
|
||||
backgroundColor: '#fff',
|
||||
padding: md,
|
||||
borderRadius: '3px',
|
||||
boxShadow: '0 0 5px 0 rgba(74, 85, 121, 0.5)',
|
||||
},
|
||||
safeName: {
|
||||
margin: `${xxl} 0 20px`,
|
||||
},
|
||||
buttonRow: {
|
||||
height: '84px',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
button: {
|
||||
height: '42px',
|
||||
},
|
||||
addressContainer: {
|
||||
marginTop: '28px',
|
||||
},
|
||||
address: {
|
||||
marginLeft: '6px',
|
||||
},
|
||||
})
|
||||
|
||||
const openIconStyle = {
|
||||
height: '16px',
|
||||
color: secondary,
|
||||
}
|
||||
|
||||
type Props = {
|
||||
onClose: () => void,
|
||||
classes: Object,
|
||||
safeName: string,
|
||||
safeAddress: string,
|
||||
etherScanLink: string,
|
||||
}
|
||||
|
||||
const Send = ({ classes, onClose }: Props) => (
|
||||
const Receive = ({
|
||||
classes, onClose, safeAddress, safeName, etherScanLink,
|
||||
}: Props) => (
|
||||
<React.Fragment>
|
||||
<Row align="center" grow className={classes.heading}>
|
||||
<Paragraph className={classes.manage} noMargin>Receive Funds</Paragraph>
|
||||
<Paragraph className={classes.manage} weight="bolder" noMargin>
|
||||
Receive funds
|
||||
</Paragraph>
|
||||
<IconButton onClick={onClose} disableRipple>
|
||||
<Close className={classes.close} />
|
||||
</IconButton>
|
||||
</Row>
|
||||
<Col layout="column" middle="xs" className={classes.detailsContainer}>
|
||||
<Hairline />
|
||||
<Paragraph className={classes.safeName} weight="bolder" size="xl" noMargin>
|
||||
{safeName}
|
||||
</Paragraph>
|
||||
<Block className={classes.qrContainer}>
|
||||
<QRCode value={safeAddress} size={135} />
|
||||
</Block>
|
||||
<Block align="center" className={classes.addressContainer}>
|
||||
<Identicon address={safeAddress} diameter={32} />
|
||||
<Paragraph className={classes.address}>{safeAddress}</Paragraph>
|
||||
<Link className={classes.open} to={etherScanLink} target="_blank">
|
||||
<OpenInNew style={openIconStyle} />
|
||||
</Link>
|
||||
</Block>
|
||||
</Col>
|
||||
<Hairline />
|
||||
<Row align="center" className={classes.buttonRow}>
|
||||
<Button color="primary" className={classes.button} minWidth={140} onClick={onClose} variant="contained">
|
||||
Done
|
||||
</Button>
|
||||
</Row>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
export default withStyles(styles)(Send)
|
||||
export default withStyles(styles)(Receive)
|
||||
|
|
|
@ -44,7 +44,15 @@ const INITIAL_FORM_STATE = {
|
|||
|
||||
const AddCustomToken = (props: Props) => {
|
||||
const {
|
||||
classes, setActiveScreen, onClose, addToken, updateActiveTokens, safeAddress, activeTokens, tokens, activateTokenForAllSafes,
|
||||
classes,
|
||||
setActiveScreen,
|
||||
onClose,
|
||||
addToken,
|
||||
updateActiveTokens,
|
||||
safeAddress,
|
||||
activeTokens,
|
||||
tokens,
|
||||
activateTokenForAllSafes,
|
||||
} = props
|
||||
const [formValues, setFormValues] = useState(INITIAL_FORM_STATE)
|
||||
|
||||
|
|
|
@ -38,6 +38,8 @@ type Props = {
|
|||
tokens: List<Token>,
|
||||
activeTokens: List<Token>,
|
||||
safeAddress: string,
|
||||
safeName: string,
|
||||
etherScanLink: string,
|
||||
}
|
||||
|
||||
type Action = 'Token' | 'Send' | 'Receive'
|
||||
|
@ -69,7 +71,7 @@ class Balances extends React.Component<Props, State> {
|
|||
hideZero, showToken, showReceive, showSend,
|
||||
} = this.state
|
||||
const {
|
||||
classes, granted, tokens, safeAddress, activeTokens,
|
||||
classes, granted, tokens, safeAddress, activeTokens, safeName, etherScanLink,
|
||||
} = this.props
|
||||
|
||||
const columns = generateColumns()
|
||||
|
@ -166,7 +168,12 @@ class Balances extends React.Component<Props, State> {
|
|||
handleClose={this.onHide('Receive')}
|
||||
open={showReceive}
|
||||
>
|
||||
<Receive onClose={this.onHide('Receive')} />
|
||||
<Receive
|
||||
safeName={safeName}
|
||||
safeAddress={safeAddress}
|
||||
etherScanLink={etherScanLink}
|
||||
onClose={this.onHide('Receive')}
|
||||
/>
|
||||
</Modal>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
|
|
@ -96,7 +96,8 @@ class Layout extends React.Component<Props, State> {
|
|||
return <NoSafe provider={provider} text="Safe not found" />
|
||||
}
|
||||
|
||||
const { address, ethBalance } = safe
|
||||
const { address, ethBalance, name } = safe
|
||||
const etherScanLink = getEtherScanLink(address, network)
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
@ -105,7 +106,7 @@ class Layout extends React.Component<Props, State> {
|
|||
<Block className={classes.name}>
|
||||
<Row>
|
||||
<Heading tag="h2" color="secondary">
|
||||
{safe.get('name')}
|
||||
{name}
|
||||
</Heading>
|
||||
{!granted && <Block className={classes.readonly}>Read Only</Block>}
|
||||
</Row>
|
||||
|
@ -113,7 +114,7 @@ class Layout extends React.Component<Props, State> {
|
|||
<Paragraph size="md" color="disabled" onClick={this.copyAddress} title="Click to copy" noMargin>
|
||||
{address}
|
||||
</Paragraph>
|
||||
<Link className={classes.open} to={getEtherScanLink(address, network)} target="_blank">
|
||||
<Link className={classes.open} to={etherScanLink} target="_blank">
|
||||
<OpenInNew style={openIconStyle} />
|
||||
</Link>
|
||||
</Block>
|
||||
|
@ -134,6 +135,8 @@ class Layout extends React.Component<Props, State> {
|
|||
activeTokens={activeTokens}
|
||||
granted={granted}
|
||||
safeAddress={address}
|
||||
safeName={name}
|
||||
etherScanLink={etherScanLink}
|
||||
/>
|
||||
)}
|
||||
</React.Fragment>
|
||||
|
|
21
yarn.lock
21
yarn.lock
|
@ -12895,6 +12895,19 @@ q@^1.1.2:
|
|||
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
|
||||
integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
|
||||
|
||||
qr.js@0.0.0:
|
||||
version "0.0.0"
|
||||
resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
|
||||
integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
|
||||
|
||||
qrcode.react@^0.9.3:
|
||||
version "0.9.3"
|
||||
resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-0.9.3.tgz#91de1287912bdc5ccfb3b091737b828d6ced60c5"
|
||||
integrity sha512-gGd30Ez7cmrKxyN2M3nueaNLk/f9J7NDRgaD5fVgxGpPLsYGWMn9UQ+XnDpv95cfszTQTdaf4QGLNMf3xU0hmw==
|
||||
dependencies:
|
||||
prop-types "^15.6.0"
|
||||
qr.js "0.0.0"
|
||||
|
||||
qs@6.5.2, qs@~6.5.2:
|
||||
version "6.5.2"
|
||||
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
|
||||
|
@ -13230,6 +13243,14 @@ react-popper@^1.3.3:
|
|||
typed-styles "^0.0.7"
|
||||
warning "^4.0.2"
|
||||
|
||||
react-qr-svg@^2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-qr-svg/-/react-qr-svg-2.2.1.tgz#f6f25820fdb2c39ad0d66a14a758e2f575717c68"
|
||||
integrity sha512-rLDCZI9pIqD5lbBIatrqUMhP1gqQ7glqubXO/m/X87ikEPhXuY0hMLhYMuKoH4834G36ap8Az0HI4bXEJUN//w==
|
||||
dependencies:
|
||||
prop-types "^15.5.8"
|
||||
qr.js "0.0.0"
|
||||
|
||||
react-redux@7.0.2:
|
||||
version "7.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.0.2.tgz#34b280a3482aaf60e7d4a504b1295165cbe6b86a"
|
||||
|
|
Loading…
Reference in New Issue