fix(account): displays logged in account with checksum

Author: itofarina

example/src/App.js

@@ -17,8 +17,8 @@ import {
 import '@rsksmart/rif-ui/dist/index.css';
 import Routes from './Routes';
 
-const requiredNetworkId = 31
-const requiredNetworkName = 'RSK Testnet'
+const requiredNetworkId = 8545
+const requiredNetworkName = 'Localhost 8545'
 
 const App = () => {
 

package.json

@@ -66,6 +66,7 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-router-dom": "^5.2.0",
+    "web3-utils": "^1.3.0",
     "web3": "^1.2.8"
   },
   "engines": {

src/components/organisms/Account.tsx

@@ -3,6 +3,7 @@ import Web3 from 'web3'
 import { makeStyles, Theme } from '@material-ui/core/styles'
 import Popover from '@material-ui/core/Popover'
 import Typography from '@material-ui/core/Typography'
+import { toChecksumAddress } from 'web3-utils'
 import ProviderInfo, { EProvider } from '../../models/ProviderInfo'
 import { shortenString } from '../../utils'
 import { Button, NetworkIndicator } from '../atoms'
@@ -93,9 +94,8 @@ const Account: FC<AccountProps> = (props) => {
 
     if (connectionStatus === ConnectionStatus.WrongNetwork) return 'Wrong Network'
 
-    if (account) {
-      // means connectionStatus  === ConnectionStatus.LoggedIn
-      return shortenString(account)
+    if (account) { // means connectionStatus  === ConnectionStatus.LoggedIn
+      return shortenString(toChecksumAddress(account))
     }
     return 'Unlock your wallet'
   }