diff --git a/src/components/Header/components/Provider.tsx b/src/components/Header/components/Provider.tsx
index 86b30343..8f2032c0 100644
--- a/src/components/Header/components/Provider.tsx
+++ b/src/components/Header/components/Provider.tsx
@@ -6,7 +6,7 @@ import * as React from 'react'
import Col from 'src/components/layout/Col'
import Divider from 'src/components/layout/Divider'
-import { md, screenSm, sm } from 'src/theme/variables'
+import { screenSm, sm } from 'src/theme/variables'
const styles = () => ({
root: {
@@ -26,8 +26,8 @@ const styles = () => ({
flex: '1 1 auto',
padding: sm,
[`@media (min-width: ${screenSm}px)`]: {
- paddingLeft: md,
- paddingRight: md,
+ paddingLeft: sm,
+ paddingRight: sm,
},
},
expand: {
diff --git a/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx b/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
index 1186c809..009455bd 100644
--- a/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
+++ b/src/components/Header/components/ProviderInfo/ProviderAccessible.tsx
@@ -1,18 +1,25 @@
-import { withStyles } from '@material-ui/core/styles'
-import Dot from '@material-ui/icons/FiberManualRecord'
+import { makeStyles } from '@material-ui/core/styles'
import * as React from 'react'
+import NetworkLabel from '../NetworkLabel'
import CircleDot from 'src/components/Header/components/CircleDot'
import Identicon from 'src/components/Identicon'
import Col from 'src/components/layout/Col'
import Paragraph from 'src/components/layout/Paragraph'
import { shortVersionOf } from 'src/logic/wallets/ethAddresses'
+import WalletIcon from '../WalletIcon'
import { connected as connectedBg, screenSm, sm } from 'src/theme/variables'
-const styles = () => ({
+const useStyles = makeStyles({
network: {
fontFamily: 'Averta, sans-serif',
},
+ networkLabel: {
+ '& div': {
+ paddingRight: sm,
+ paddingLeft: sm,
+ },
+ },
identicon: {
display: 'none',
[`@media (min-width: ${screenSm}px)`]: {
@@ -33,6 +40,12 @@ const styles = () => ({
display: 'block',
},
},
+ providerContainer: {
+ display: 'flex',
+ flex: 1,
+ alignItems: 'center',
+ width: '100px',
+ },
account: {
alignItems: 'start',
display: 'flex',
@@ -42,25 +55,27 @@ const styles = () => ({
paddingRight: sm,
},
address: {
+ marginLeft: '5px',
letterSpacing: '-0.5px',
},
})
-const ProviderInfo = ({ classes, connected, network, provider, userAddress }) => {
- const providerText = `${provider} [${network}]`
+interface ProviderInfoProps {
+ connected: boolean
+ provider: string
+ userAddress: string
+}
+
+const ProviderInfo = ({ connected, provider, userAddress }: ProviderInfoProps): React.ReactElement => {
+ const classes = useStyles()
const cutAddress = connected ? shortVersionOf(userAddress, 4) : 'Connection Error'
const color = connected ? 'primary' : 'warning'
const identiconAddress = userAddress || 'random'
return (
<>
- {connected && (
- <>
-
-
-
- )}
{!connected && }
+
weight="bolder"
data-testid="connected-wallet"
>
- {providerText}
-
-
- {cutAddress}
+ {provider}
+
+ {connected &&
}
+
+ {cutAddress}
+
+
+
+ )
+}
+
+export default WalletIcon
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 7fa8242a..0b0def46 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -55,13 +55,13 @@ class HeaderComponent extends React.PureComponent {
getProviderInfoBased = () => {
const { hasError } = this.state
- const { available, loaded, network, provider, userAddress } = this.props
+ const { available, loaded, provider, userAddress } = this.props
if (hasError || !loaded) {
return
}
- return
+ return
}
getProviderDetailsBased = () => {
diff --git a/src/logic/wallets/getWeb3.ts b/src/logic/wallets/getWeb3.ts
index b39878ca..56704214 100644
--- a/src/logic/wallets/getWeb3.ts
+++ b/src/logic/wallets/getWeb3.ts
@@ -28,9 +28,11 @@ export const WALLET_PROVIDER = {
PORTIS: 'PORTIS',
FORTMATIC: 'FORTMATIC',
SQUARELINK: 'SQUARELINK',
+ UNILOGIN: 'UNILOGIN',
WALLETCONNECT: 'WALLETCONNECT',
OPERA: 'OPERA',
DAPPER: 'DAPPER',
+ WALLETLINK: 'WALLETLINK',
AUTHEREUM: 'AUTHEREUM',
LEDGER: 'LEDGER',
TREZOR: 'TREZOR',