Feedback PR

src/components/Header/components/ProviderInfo/ProviderAccessible.tsx

@@ -1,4 +1,4 @@
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import * as React from 'react'
 
 import NetworkLabel from '../NetworkLabel'
@@ -10,7 +10,7 @@ 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',
   },
@@ -61,13 +61,13 @@ const styles = () => ({
 })
 
 interface ProviderInfoProps {
-  classes: Record<string, any>
   connected: boolean
   provider: string
   userAddress: string
 }
 
-const ProviderInfo: React.FC<ProviderInfoProps> = ({ classes, connected, provider, userAddress }) => {
+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'
@@ -101,4 +101,4 @@ const ProviderInfo: React.FC<ProviderInfoProps> = ({ classes, connected, provide
   )
 }
 
-export default withStyles(styles as any)(ProviderInfo)
+export default ProviderInfo

src/components/Header/components/WalletIcon/icons/index.ts

@@ -1,11 +1,9 @@
 // Icons
 import metamaskIcon from './icon-metamask.png'
-import metamaskIcon2x from './icon-metamask@2x.png'
 import walletConnectIcon from './icon-wallet-connect.svg'
 import trezorIcon from './icon-trezor.svg'
 import ledgerIcon from './icon-ledger.svg'
 import dapperIcon from './icon-dapper.png'
-import dapperIcon2x from './icon-dapper@2x.png'
 import fortmaticIcon from './icon-fortmatic.svg'
 import portisIcon from './icon-portis.svg'
 import authereumIcon from './icon-authereum.png'
@@ -13,79 +11,67 @@ import torusIcon from './icon-torus.svg'
 import uniloginIcon from './icon-unilogin.svg'
 import coinbaseIcon from './icon-coinbase.svg'
 import operaIcon from './icon-opera.png'
-import operaIcon2x from './icon-opera@2x.png'
 
 import { WALLET_PROVIDER } from 'src/logic/wallets/getWeb3'
 
-interface WalletObjectsProps<TValue> {
-  [key: string]: TValue
-}
+type WalletProviderNames = typeof WALLET_PROVIDER[keyof typeof WALLET_PROVIDER]
 
 interface IconValue {
   src: string
-  srcSet: string
   height: number
 }
 
+type WalletObjectsProps<Tvalue> = {
+  [key in WalletProviderNames]: Tvalue
+}
+
 const WALLET_ICONS: WalletObjectsProps<IconValue> = {
   [WALLET_PROVIDER.METAMASK]: {
     src: metamaskIcon,
-    srcSet: metamaskIcon2x,
     height: 25,
   },
   [WALLET_PROVIDER.WALLETCONNECT]: {
     src: walletConnectIcon,
-    srcSet: walletConnectIcon,
     height: 25,
   },
   [WALLET_PROVIDER.TREZOR]: {
     src: trezorIcon,
-    srcSet: trezorIcon,
     height: 25,
   },
   [WALLET_PROVIDER.LEDGER]: {
     src: ledgerIcon,
-    srcSet: ledgerIcon,
     height: 25,
   },
   [WALLET_PROVIDER.DAPPER]: {
     src: dapperIcon,
-    srcSet: dapperIcon2x,
     height: 25,
   },
   [WALLET_PROVIDER.FORTMATIC]: {
     src: fortmaticIcon,
-    srcSet: fortmaticIcon,
     height: 25,
   },
   [WALLET_PROVIDER.PORTIS]: {
     src: portisIcon,
-    srcSet: portisIcon,
     height: 25,
   },
   [WALLET_PROVIDER.AUTHEREUM]: {
     src: authereumIcon,
-    srcSet: authereumIcon,
     height: 25,
   },
   [WALLET_PROVIDER.TORUS]: {
     src: torusIcon,
-    srcSet: torusIcon,
     height: 30,
   },
   [WALLET_PROVIDER.UNILOGIN]: {
     src: uniloginIcon,
-    srcSet: uniloginIcon,
     height: 25,
   },
   [WALLET_PROVIDER.OPERA]: {
     src: operaIcon,
-    srcSet: operaIcon2x,
     height: 25,
   },
   [WALLET_PROVIDER.WALLETLINK]: {
     src: coinbaseIcon,
-    srcSet: coinbaseIcon,
     height: 25,
   },
 }

src/components/Header/components/WalletIcon/index.tsx

@@ -20,7 +20,7 @@ interface WalletIconProps {
   provider: string
 }
 
-const WalletIcon: React.FC<WalletIconProps> = ({ provider }) => {
+const WalletIcon = ({ provider }: WalletIconProps): React.ReactElement => {
   const classes = useStyles()
   return (
     <Col className={classes.container} layout="column" start="sm">
@@ -29,7 +29,6 @@ const WalletIcon: React.FC<WalletIconProps> = ({ provider }) => {
         className={classes.icon}
         height={WALLET_ICONS[provider].height}
         src={WALLET_ICONS[provider].src}
-        srcSet={WALLET_ICONS[provider].srcSet}
       />
     </Col>
   )