Adding connect-wallet icon
This commit is contained in:
apanizo
parent
113bc1f4dd
commit
1b380fa165
|
|
@ -0,0 +1,15 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<circle id="a" cx="36.129" cy="36.129" r="36.129"/>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<use fill="#E4E8F1" xlink:href="#a"/>
|
||||
<path fill="#A2A8BA" d="M33.234 36.695l-2.569 15.782h12.58l-2.566-15.782c2.861-1.372 4.848-4.254 4.848-7.603 0-4.662-3.835-8.447-8.57-8.447-4.73 0-8.57 3.785-8.57 8.447-.005 3.352 1.979 6.23 4.847 7.603"/>
|
||||
</g>
|
||||
<g fill-rule="nonzero" transform="translate(38.71 38.71)">
|
||||
<circle cx="20.645" cy="20.645" r="20.645" fill="#FD7890"/>
|
||||
<path fill="#FFF" d="M20.645 30.968l4.301-5.506a7.354 7.354 0 0 0-4.3-1.376 7.354 7.354 0 0 0-4.302 1.376l4.301 5.506zm0-20.645c-4.839 0-9.307 1.536-12.903 4.129l2.15 2.752c2.987-2.156 6.715-3.44 10.753-3.44s7.766 1.284 10.753 3.44l2.15-2.752c-3.596-2.593-8.064-4.13-12.903-4.13zm0 6.881c-3.226 0-6.2 1.021-8.602 2.753l2.15 2.753a10.978 10.978 0 0 1 6.452-2.065c2.425 0 4.66.769 6.452 2.065l2.15-2.753c-2.401-1.732-5.376-2.753-8.602-2.753z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,109 +0,0 @@
|
|||
// @flow
|
||||
import * as React from 'react'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import ExpandLess from '@material-ui/icons/ExpandLess'
|
||||
import ExpandMore from '@material-ui/icons/ExpandMore'
|
||||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import Col from '~/components/layout/Col'
|
||||
import Img from '~/components/layout/Img'
|
||||
import { type Open } from '~/components/hoc/OpenHoc'
|
||||
import { sm, md } from '~/theme/variables'
|
||||
import Identicon from '~/components/Identicon'
|
||||
|
||||
const connectedLogo = require('../../assets/connected.svg')
|
||||
|
||||
type Props = Open & {
|
||||
provider: string,
|
||||
network: string,
|
||||
classes: Object,
|
||||
userAddress: string,
|
||||
connected: boolean,
|
||||
children: Function,
|
||||
}
|
||||
|
||||
const styles = () => ({
|
||||
root: {
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
provider: {
|
||||
padding: `${sm} ${md}`,
|
||||
alignItems: 'center',
|
||||
flex: '0 1 auto',
|
||||
display: 'flex',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
network: {
|
||||
fontFamily: 'Montserrat, sans-serif',
|
||||
},
|
||||
logo: {
|
||||
top: '10px',
|
||||
position: 'relative',
|
||||
right: '13px',
|
||||
},
|
||||
account: {
|
||||
paddingRight: sm,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
address: {
|
||||
letterSpacing: '-0.5px',
|
||||
},
|
||||
expand: {
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
},
|
||||
})
|
||||
|
||||
type ProviderRef = { current: null | HTMLDivElement }
|
||||
|
||||
class Provider extends React.Component<Props> {
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
|
||||
this.myRef = React.createRef()
|
||||
}
|
||||
|
||||
myRef: ProviderRef
|
||||
|
||||
render() {
|
||||
const {
|
||||
open, toggle, provider, network, userAddress, connected, children, classes,
|
||||
} = this.props
|
||||
|
||||
const providerText = connected ? `${provider} [${network}]` : 'Not connected'
|
||||
const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : ''
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div ref={this.myRef} className={classes.root}>
|
||||
<Col end="sm" middle="xs" className={classes.provider}>
|
||||
{ connected &&
|
||||
<React.Fragment>
|
||||
<Identicon address={userAddress} diameter={30} />
|
||||
<Img className={classes.logo} src={connectedLogo} height={20} alt="Status connected" />
|
||||
</React.Fragment>
|
||||
}
|
||||
<Col end="sm" middle="xs" layout="column" className={classes.account}>
|
||||
<Paragraph size="sm" transform="capitalize" className={classes.network} noMargin bold>{providerText}</Paragraph>
|
||||
<Paragraph size="sm" className={classes.address} noMargin>{cutAddress}</Paragraph>
|
||||
</Col>
|
||||
<IconButton
|
||||
onClick={toggle}
|
||||
disableRipple
|
||||
className={classes.expand}
|
||||
>
|
||||
{ open ? <ExpandLess /> : <ExpandMore />}
|
||||
</IconButton>
|
||||
</Col>
|
||||
</div>
|
||||
{ children(this.myRef) }
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(Provider)
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
// @flow
|
||||
import * as React from 'react'
|
||||
import OpenInNew from '@material-ui/icons/OpenInNew'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import Button from '~/components/layout/Button'
|
||||
import List from '@material-ui/core/List'
|
||||
import Identicon from '~/components/Identicon'
|
||||
import Bold from '~/components/layout/Bold'
|
||||
import Hairline from '~/components/layout/Hairline'
|
||||
import Img from '~/components/layout/Img'
|
||||
import Row from '~/components/layout/Row'
|
||||
import Spacer from '~/components/Spacer'
|
||||
import { sm, md, lg, background } from '~/theme/variables'
|
||||
import { upperFirst } from '~/utils/css'
|
||||
|
||||
const metamask = require('../../assets/metamask.svg')
|
||||
const connectedLogo = require('../../assets/connected.svg')
|
||||
const dot = require('../../assets/dotRinkeby.svg')
|
||||
|
||||
type Props = {
|
||||
provider: string,
|
||||
connected: boolean,
|
||||
network: string,
|
||||
userAddress: string,
|
||||
classes: Object,
|
||||
}
|
||||
|
||||
const openIconStyle = {
|
||||
height: '16px',
|
||||
color: '#467ee5',
|
||||
}
|
||||
|
||||
const styles = () => ({
|
||||
root: {
|
||||
backgroundColor: 'white',
|
||||
padding: 0,
|
||||
boxShadow: '0 0 10px 0 rgba(33, 48, 77, 0.1)',
|
||||
},
|
||||
container: {
|
||||
padding: `${md} 12px`,
|
||||
},
|
||||
identicon: {
|
||||
justifyContent: 'center',
|
||||
padding: `0 ${md}`,
|
||||
},
|
||||
user: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: background,
|
||||
padding: sm,
|
||||
},
|
||||
details: {
|
||||
padding: `0 ${lg}`,
|
||||
height: '20px',
|
||||
alignItems: 'center',
|
||||
},
|
||||
address: {
|
||||
flexGrow: 1,
|
||||
textAlign: 'center',
|
||||
},
|
||||
disconnect: {
|
||||
padding: `${md} 32px`,
|
||||
},
|
||||
logo: {
|
||||
margin: '0px 2px',
|
||||
},
|
||||
})
|
||||
|
||||
const UserDetails = ({
|
||||
provider, connected, network, userAddress, classes,
|
||||
}: Props) => {
|
||||
const status = connected ? 'Connected' : 'Not connected'
|
||||
|
||||
return (
|
||||
<List className={classes.root} component="div">
|
||||
<div className={classes.container}>
|
||||
<Row className={classes.identicon} margin="md" align="center">
|
||||
<Identicon address={userAddress} diameter={60} />
|
||||
</Row>
|
||||
<Row className={classes.user} grow >
|
||||
<Paragraph className={classes.address} size="sm" noMargin>{userAddress}</Paragraph>
|
||||
<OpenInNew style={openIconStyle} />
|
||||
</Row>
|
||||
</div>
|
||||
<Hairline margin="xs" />
|
||||
<Row className={classes.details}>
|
||||
<Paragraph size="sm" noMargin align="right">Status </Paragraph>
|
||||
<Spacer />
|
||||
<Img className={classes.logo} src={connectedLogo} height={16} alt="Status connected" />
|
||||
<Paragraph size="sm" noMargin align="right">
|
||||
<Bold>
|
||||
{status}
|
||||
</Bold>
|
||||
</Paragraph>
|
||||
</Row>
|
||||
<Hairline margin="xs" />
|
||||
<Row className={classes.details}>
|
||||
<Paragraph size="sm" noMargin align="right">Client </Paragraph>
|
||||
<Spacer />
|
||||
<Img className={classes.logo} src={metamask} height={16} alt="Metamask client" />
|
||||
<Paragraph size="sm" noMargin align="right">
|
||||
<Bold>
|
||||
{upperFirst(provider)}
|
||||
</Bold>
|
||||
</Paragraph>
|
||||
</Row>
|
||||
<Hairline margin="xs" />
|
||||
<Row className={classes.details}>
|
||||
<Paragraph size="sm" noMargin align="right">Netowrk </Paragraph>
|
||||
<Spacer />
|
||||
<Img className={classes.logo} src={dot} height={16} alt="Network" />
|
||||
<Paragraph size="sm" noMargin align="right">
|
||||
<Bold>{upperFirst(network)}</Bold>
|
||||
</Paragraph>
|
||||
</Row>
|
||||
<Hairline margin="xs" />
|
||||
<Row className={classes.disconnect}>
|
||||
<Button
|
||||
size="medium"
|
||||
variant="raised"
|
||||
color="primary"
|
||||
fullWidth
|
||||
>
|
||||
DISCONNECT
|
||||
</Button>
|
||||
</Row>
|
||||
</List>
|
||||
)
|
||||
}
|
||||
|
||||
export default withStyles(styles)(UserDetails)
|
||||
Loading…
Reference in New Issue