diff --git a/src/components/Header/component/ProviderInfo/UserDetails.jsx b/src/components/Header/component/ProviderInfo/UserDetails.jsx index 82ce6ae3..8d7202bb 100644 --- a/src/components/Header/component/ProviderInfo/UserDetails.jsx +++ b/src/components/Header/component/ProviderInfo/UserDetails.jsx @@ -9,9 +9,11 @@ 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 Block from '~/components/layout/Block' import Spacer from '~/components/Spacer' -import { sm, md, lg, background } from '~/theme/variables' +import { xs, sm, md, lg, background } from '~/theme/variables' import { upperFirst } from '~/utils/css' +import { shortVersionOf } from '~/logic/wallets/ethAddresses' const metamask = require('../../assets/metamask.svg') const connectedLogo = require('../../assets/connected.svg') @@ -33,14 +35,17 @@ const openIconStyle = { const styles = () => ({ container: { padding: `${md} 12px`, + display: 'flex', + flexDirection: 'column', }, identicon: { justifyContent: 'center', padding: `0 ${md}`, }, user: { - alignItems: 'center', + borderRadius: '3px', backgroundColor: background, + margin: '0 auto', padding: sm, }, details: { @@ -51,12 +56,20 @@ const styles = () => ({ address: { flexGrow: 1, textAlign: 'center', + letterSpacing: '-0.5px', + }, + open: { + paddingLeft: sm, + width: 'auto', }, disconnect: { - padding: `${md} 32px`, + padding: `${md} ${lg}`, + }, + disconnectText: { + letterSpacing: '1px', }, logo: { - margin: '0px 2px', + margin: `0px ${xs}`, }, }) @@ -64,18 +77,19 @@ const UserDetails = ({ provider, connected, network, userAddress, classes, }: Props) => { const status = connected ? 'Connected' : 'Not connected' + const address = shortVersionOf(userAddress, 6) return ( -
+ - - {userAddress} - - -
+ + {address} + + + Status @@ -115,7 +129,7 @@ const UserDetails = ({ color="primary" fullWidth > - DISCONNECT + DISCONNECT
diff --git a/src/components/Header/component/ProviderInfo/index.jsx b/src/components/Header/component/ProviderInfo/index.jsx index 34a48150..2961bfb9 100644 --- a/src/components/Header/component/ProviderInfo/index.jsx +++ b/src/components/Header/component/ProviderInfo/index.jsx @@ -6,6 +6,7 @@ import Col from '~/components/layout/Col' import Img from '~/components/layout/Img' import { sm } from '~/theme/variables' import Identicon from '~/components/Identicon' +import { shortVersionOf } from '~/logic/wallets/ethAddresses' const connectedLogo = require('../../assets/connected.svg') @@ -41,7 +42,7 @@ const ProviderInfo = ({ provider, network, userAddress, connected, classes, }: Props) => { const providerText = connected ? `${provider} [${network}]` : 'Not connected' - const cutAddress = connected ? `${userAddress.substring(0, 8)}...${userAddress.substring(36)}` : '' + const cutAddress = connected ? shortVersionOf(userAddress, 6) : '' return (