diff --git a/packages/react-components/src/assets/metamask.png b/packages/react-components/src/assets/metamask.png
new file mode 100644
index 0000000..0e9caee
Binary files /dev/null and b/packages/react-components/src/assets/metamask.png differ
diff --git a/packages/react-components/src/assets/svg/metamask.svg b/packages/react-components/src/assets/svg/metamask.svg
deleted file mode 100644
index eb78c2b..0000000
--- a/packages/react-components/src/assets/svg/metamask.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/packages/react-components/src/components/Networks.tsx b/packages/react-components/src/components/Networks.tsx
index 055f9f2..12defb8 100644
--- a/packages/react-components/src/components/Networks.tsx
+++ b/packages/react-components/src/components/Networks.tsx
@@ -2,14 +2,23 @@ import React from 'react'
import styled from 'styled-components'
import dapp from '../assets/svg/dapp.svg'
import status from '../assets/svg/status.svg'
-import metamask from '../assets/svg/metamask.svg'
+import metamask from '../assets/metamask.png'
export function Networks() {
return (
-
-
-
+
+
+
+
+ {' '}
+
+
+
+ {' '}
+
+ MetaMask
+
)
}
@@ -22,11 +31,25 @@ const NetworksWrapper = styled.div`
`
const Network = styled.a`
+ display: flex;
+ align-items: center;
+ justify-content: center;
width: 176px;
height: 64px;
margin-top: 32px;
border: none;
- background-repeat: no-repeat;
- background-position: center;
- background-color: transparent;
+ font-weight: bold;
+ font-size: 17px;
+ line-height: 24px;
+ text-decoration: none;
+ color: #000000;
+`
+const NetworkLogo = styled.img`
+ width: auto;
+`
+
+const NetworkLogoMeta = styled(NetworkLogo)`
+ width: 64px;
+ height: 64px;
+ margin-right: 16px;
`
diff --git a/packages/react-components/src/components/TopBar.tsx b/packages/react-components/src/components/TopBar.tsx
index 13ccb16..bda4b0e 100644
--- a/packages/react-components/src/components/TopBar.tsx
+++ b/packages/react-components/src/components/TopBar.tsx
@@ -1,11 +1,9 @@
import React, { useState } from 'react'
import styled from 'styled-components'
import { useEthers, shortenAddress } from '@usedapp/core'
-import metamaskIcon from '../assets/svg/metamask.svg'
-import statusIcon from '../assets/svg/status.svg'
-import dappIcon from '../assets/svg/dapp.svg'
import { Modal } from './Modal'
import { ConnectButton, Account, ButtonDisconnect } from './misc/Buttons'
+import { Networks } from './Networks'
type TopBarProps = {
logo: string
@@ -59,11 +57,7 @@ export function TopBar({ logo, title, theme }: TopBarProps) {
{selectConnect && (
-
-
-
-
-
+
)}
@@ -124,19 +118,3 @@ const ContentWrapper = styled.div`
padding-left: 24px;
}
`
-const Networks = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 100%;
-`
-
-const Network = styled.a`
- width: 176px;
- height: 64px;
- margin-top: 32px;
- border: none;
- background-repeat: no-repeat;
- background-position: center;
- background-color: transparent;
-`
diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx
index 57809dd..6816863 100644
--- a/packages/react-components/src/index.tsx
+++ b/packages/react-components/src/index.tsx
@@ -11,7 +11,7 @@ import addIcon from './assets/svg/addIcon.svg'
import checkIcon from './assets/svg/checkIcon.svg'
import closeIcon from './assets/svg/close.svg'
import dappIcon from './assets/svg/dapp.svg'
-import metamaskIcon from './assets/svg/metamask.svg'
+import metamaskIcon from './assets/metamask.png'
import statusIcon from './assets/svg/status.svg'
export {