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 (