Refactor Provider Details. Creating general component #72
This commit is contained in:
parent
f2e88fca88
commit
4c50494bd5
|
@ -3,13 +3,9 @@ import * as React from 'react'
|
|||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import Button from '~/components/layout/Button'
|
||||
import Dot from '@material-ui/icons/FiberManualRecord'
|
||||
import Block from '~/components/layout/Block'
|
||||
import Img from '~/components/layout/Img'
|
||||
import Row from '~/components/layout/Row'
|
||||
import { md, lg, fancy } from '~/theme/variables'
|
||||
|
||||
const connectedLogo = require('../../assets/key.svg')
|
||||
import { md, lg } from '~/theme/variables'
|
||||
import KeyRing from './KeyRing'
|
||||
|
||||
type Props = {
|
||||
classes: Object,
|
||||
|
@ -37,25 +33,6 @@ const styles = () => ({
|
|||
img: {
|
||||
margin: '0px 2px',
|
||||
},
|
||||
status: {
|
||||
height: '25px',
|
||||
width: '25px',
|
||||
borderRadius: '20px',
|
||||
bottom: '93px',
|
||||
position: 'absolute',
|
||||
right: '98px',
|
||||
backgroundColor: '#ffffff',
|
||||
color: fancy,
|
||||
},
|
||||
key: {
|
||||
width: '75px',
|
||||
height: '75px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#e4e8f1',
|
||||
borderRadius: '40px',
|
||||
},
|
||||
})
|
||||
|
||||
const ConnectDetails = ({ classes, onConnect }: Props) => (
|
||||
|
@ -66,10 +43,7 @@ const ConnectDetails = ({ classes, onConnect }: Props) => (
|
|||
</Row>
|
||||
</div>
|
||||
<Row className={classes.logo} margin="lg">
|
||||
<Block className={classes.key}>
|
||||
<Img src={connectedLogo} height={32} alt="Status disconnected" />
|
||||
</Block>
|
||||
<Dot className={classes.status} />
|
||||
<KeyRing keySize={32} circleSize={75} dotSize={25} dotTop={50} dotRight={25} center />
|
||||
</Row>
|
||||
<Row className={classes.connect}>
|
||||
<Button
|
||||
|
|
|
@ -0,0 +1,71 @@
|
|||
// @flow
|
||||
import * as React from 'react'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Block from '~/components/layout/Block'
|
||||
import Dot from '@material-ui/icons/FiberManualRecord'
|
||||
import Img from '~/components/layout/Img'
|
||||
import { fancy, border } from '~/theme/variables'
|
||||
|
||||
const key = require('../../assets/key.svg')
|
||||
|
||||
const styles = () => ({
|
||||
root: {
|
||||
display: 'flex',
|
||||
},
|
||||
dot: {
|
||||
position: 'relative',
|
||||
backgroundColor: '#ffffff',
|
||||
color: fancy,
|
||||
},
|
||||
key: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: border,
|
||||
},
|
||||
})
|
||||
|
||||
type Props = {
|
||||
classes: Object,
|
||||
keySize: number,
|
||||
circleSize: number,
|
||||
dotSize: number,
|
||||
dotTop: number,
|
||||
dotRight: number,
|
||||
center?: boolean,
|
||||
}
|
||||
|
||||
const buildKeyStyleFrom = (size: number, center: boolean, dotSize: number) => ({
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
marginLeft: center ? `${dotSize}px` : 'none',
|
||||
borderRadius: `${size}px`,
|
||||
})
|
||||
|
||||
const buildDotStyleFrom = (size: number, top: number, right: number) => ({
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
borderRadius: `${size}px`,
|
||||
top: `${top}px`,
|
||||
right: `${right}px`,
|
||||
})
|
||||
|
||||
const KeyRing = ({
|
||||
classes, circleSize, keySize, dotSize, dotTop, dotRight, center = false,
|
||||
}: Props) => {
|
||||
const keyStyle = buildKeyStyleFrom(circleSize, center, dotSize)
|
||||
const dotStyle = buildDotStyleFrom(dotSize, dotTop, dotRight)
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Block className={classes.root}>
|
||||
<Block className={classes.key} style={keyStyle}>
|
||||
<Img src={key} height={keySize} alt="Status disconnected" />
|
||||
</Block>
|
||||
<Dot className={classes.dot} style={dotStyle} />
|
||||
</Block>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default withStyles(styles)(KeyRing)
|
|
@ -1,15 +1,11 @@
|
|||
// @flow
|
||||
import * as React from 'react'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Dot from '@material-ui/icons/FiberManualRecord'
|
||||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import Block from '~/components/layout/Block'
|
||||
import Col from '~/components/layout/Col'
|
||||
import Img from '~/components/layout/Img'
|
||||
import { type Open } from '~/components/hoc/OpenHoc'
|
||||
import { sm, fancy } from '~/theme/variables'
|
||||
|
||||
const connectWallet = require('../../assets/key.svg')
|
||||
import { sm } from '~/theme/variables'
|
||||
import KeyRing from './KeyRing'
|
||||
|
||||
type Props = Open & {
|
||||
classes: Object,
|
||||
|
@ -31,33 +27,11 @@ const styles = () => ({
|
|||
connect: {
|
||||
letterSpacing: '-0.5px',
|
||||
},
|
||||
logo: {
|
||||
height: '15px',
|
||||
width: '15px',
|
||||
top: '12px',
|
||||
position: 'relative',
|
||||
right: '10px',
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: '15px',
|
||||
color: fancy,
|
||||
},
|
||||
key: {
|
||||
width: '38px',
|
||||
height: '35px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#e4e8f1',
|
||||
borderRadius: '20px',
|
||||
},
|
||||
})
|
||||
|
||||
const ProviderDesconnected = ({ classes }: Props) => (
|
||||
<React.Fragment>
|
||||
<Block className={classes.key}>
|
||||
<Img src={connectWallet} height={18} alt="Status disconnected" />
|
||||
</Block>
|
||||
<Dot className={classes.logo} />
|
||||
<KeyRing keySize={17} circleSize={35} dotSize={16} dotTop={24} dotRight={11} />
|
||||
<Col end="sm" middle="xs" layout="column" className={classes.account}>
|
||||
<Paragraph size="sm" transform="capitalize" className={classes.network} noMargin weight="bold">Not Connected</Paragraph>
|
||||
<Paragraph size="sm" color="fancy" className={classes.connect} noMargin>Connect Wallet</Paragraph>
|
||||
|
|
Loading…
Reference in New Issue