Assets Table (evmos#8)

* feat: assets table

* move AssetsTable to dedicated components folder

* format asset value to readable format

* remove the json log

* pass token decimals to humanReadableValue

.prettierrc

@@ -3,5 +3,6 @@
   "printWidth": 120,
   "trailingComma": "all",
   "singleQuote": true,
-  "semi": false
+  "semi": false,
+  "endOfLine": "auto"
 }

components/balances/AssetsTable/index.tsx

@@ -0,0 +1,44 @@
+import { SafeBalanceResponse } from '@gnosis.pm/safe-react-gateway-sdk'
+import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core'
+import { ReactElement } from 'react'
+import { BigNumber } from 'bignumber.js'
+
+export const humanReadableValue = (value: string, decimals = 18): string => {
+  return new BigNumber(value).times(`1e-${decimals}`).toFixed()
+}
+
+interface AssetsTableProps {
+  items?: SafeBalanceResponse['items']
+}
+
+const AssetsTable = ({ items }: AssetsTableProps): ReactElement => {
+  return (
+    <TableContainer component={Paper}>
+      <Table aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Asset</TableCell>
+            <TableCell align="right">Balance</TableCell>
+            <TableCell align="right">Value</TableCell>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {items?.map((row) => (
+            <TableRow key={row.tokenInfo.name}>
+              <TableCell component="th" scope="row">
+                {row.tokenInfo.name}
+              </TableCell>
+              <TableCell align="right">
+                {humanReadableValue(row.balance, row.tokenInfo.decimals)} {row.tokenInfo.symbol}
+              </TableCell>
+              <TableCell align="right">{row.fiatBalance}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}
+
+export default AssetsTable

components/balances/AssetsTable/styles.module.css

@@ -0,0 +1,2 @@
+.container {
+}

package.json

@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "@gnosis.pm/safe-react-components": "^1.1.2",
+    "@material-ui/core": "^4.12.4",
     "@reduxjs/toolkit": "^1.8.1",
     "@sentry/react": "^6.19.6",
+    "bignumber.js": "^9.0.2",
     "ethereum-blockies-base64": "^1.0.2",
     "next": "12.1.5",
     "react": "18.0.0",

pages/[safeAddress]/balances/index.tsx

@@ -5,6 +5,7 @@ import useSafeAddress from 'services/useSafeAddress'
 import { useAppSelector } from 'store'
 import { selectChainById } from 'store/chainsSlice'
 import { selectBalances } from 'store/balancesSlice'
+import AssetsTable from 'components/balances/AssetsTable'
 
 const Balances: NextPage = () => {
   const { chainId } = useSafeAddress()
@@ -17,7 +18,7 @@ const Balances: NextPage = () => {
       <h1>Hello Safe on {chainConfig?.chainName}</h1>
       Owners: {safe.owners.map((item) => item.value).join(', ')}
       <h2>Balances</h2>
-      {balances ? <pre>{JSON.stringify(balances, null, 2)}</pre> : null}
+      <AssetsTable items={balances?.items} />
     </main>
   )
 }