adds support for multiple backing token types in Gnosis Safe + lint f…

…ixes (#17)

* adds support for multiple backing token types in Gnosis Safe + lint fixes
* Remove leftover console.log from Deposit.tsx
* adjust config files now that eUSD RToken is live

.internal-ci/charts/reserve-auditor/mainnet-values.yaml

@@ -46,7 +46,7 @@ gnosisConfig:
         "0x196f4727526ea7fb1e17b2071b3d8eaa38486988",
         "0xA0d69E286B938e21CBf7E51D71F6A4c8918f482F"
       ]
-      name: "RSV"
+      name: "eUSD"
       symbol: "Token"
       decimals: 18
       logo_uri: ""

.internal-ci/charts/reserve-auditor/testnet-values.yaml

@@ -38,7 +38,7 @@ gnosisConfig:
       - token_id: 1
         token_type: ERC20_TRANSFER
         eth_token_contract_addrs: ["0xeC76FbFD75481839e456C4cb2cd23cda813f19B1"]
-        name: gRSV
+        name: geUSD
         symbol: Token
         decimals: 18
         logo_uri: ""

.internal-ci/charts/reserve-auditor/values.yaml

@@ -77,7 +77,7 @@ gnosisConfig:
     - token_id: 1
       token_type: ERC20_TRANSFER
       eth_token_contract_addrs: ["0xeC76FbFD75481839e456C4cb2cd23cda813f19B1"]
-      name: gRSV
+      name: geUSD
       symbol: Token
       decimals: 18
       logo_uri: ""

frontend/src/App.tsx

@@ -6,10 +6,10 @@ import { AuditList } from './layout/AuditList'
 import { Balances } from './layout/Balances'
 import { GnosisSafeProvider } from './contexts'
 
-let bg_color = "#004e80" // mainnet background color is a shade of blue
-if (typeof MC_NETWORK  !== 'undefined') {
+let bg_color = '#004e80' // mainnet background color is a shade of blue
+if (typeof MC_NETWORK !== 'undefined') {
   if (MC_NETWORK == 'testnet') {
-    bg_color = "#774e80" // testnet background color is lavender
+    bg_color = '#774e80' // testnet background color is lavender
   }
 }
 
@@ -42,7 +42,7 @@ export const App = () => {
             height: '100vh',
             display: 'flex',
             flexDirection: 'column',
-            backgroundColor: `${bg_color}`
+            backgroundColor: `${bg_color}`,
           }}
         >
           <Header />

frontend/src/components/GnosisSafe.tsx

@@ -2,12 +2,11 @@ import { Box, Link, Tooltip, Typography } from '@mui/material'
 import React, { FC, useContext, useEffect, useState } from 'react'
 import { getGnosisSafeBalance, sumGnosisSafeBalance } from '../api/apiHandler'
 import { GnosisSafeContext } from '../contexts'
-import { TGnosisSafeUsdBalanceResponse } from '../types'
 
-let gnosis_net = 'eth'; // default to a safe on the eth main network
+let gnosis_net = 'eth' // default to a safe on the eth main network
 if (typeof MC_NETWORK !== 'undefined') {
   if (MC_NETWORK == 'testnet') {
-    gnosis_net = 'gor'; // the testnet bridge uses the goerli eth test network
+    gnosis_net = 'gor' // the testnet bridge uses the goerli eth test network
   }
 }
 
@@ -30,8 +29,9 @@ export const GnosisSafe: FC = () => {
     textOverflow: 'ellipsis',
   }
 
-  const [tokenSymbol, setTokenSymbol] = useState('')
-  const [tokenBalance, setTokenBalance] = useState('0')
+  const [safeBalances, setSafeBalances] = useState()
+  const [safeSumBalance, setSafeSumBalance] = useState()
+
   useEffect(() => {
     const getBalance = async () => {
       if (!gnosisSafeConfig) {
@@ -42,35 +42,86 @@ export const GnosisSafe: FC = () => {
         (balance) => balance.token?.symbol === gnosisSafeConfig.tokens[0].name
       )
       if (token !== undefined) {
-        setTokenSymbol(token.token.symbol)
-        setTokenBalance(token.balance)
-      }
-      else {
+        setSafeBalances(balances)
+      } else {
         // if we didn't find a balance of our target token, fall back to summing transfers
-        // (this is necessary for testnet currently as the goerli Safe doesn't grok the goerli RSV)
-        const balances = await sumGnosisSafeBalance(gnosisSafeConfig.safeAddr)
-        setTokenBalance(balances)
-        setTokenSymbol(gnosisSafeConfig.tokens[0].name)
+        // (this is necessary for testnet currently as the goerli Safe doesn't grok the goerli eUSD)
+        const sumBalance = await sumGnosisSafeBalance(gnosisSafeConfig.safeAddr)
+        setSafeSumBalance(sumBalance)
       }
     }
     getBalance()
   }, [gnosisSafeConfig])
+
+  const tokenBalanceStrings = []
+  let runningBalance = 0
+  let runningSymbols = ''
+  let balanceBlock = ''
+
+  if (safeBalances !== undefined) {
+    // iterate over the various token balances in the Safe to sum them for display while also
+    // preparing to display the itemized details
+    safeBalances.forEach((balance) => {
+      if (balance !== undefined) {
+        if (balance.tokenAddress !== null) {
+          const thisBalance =
+            Number(balance.balance) / 10 ** Number(balance.token.decimals)
+          runningBalance += thisBalance
+          tokenBalanceStrings.push(
+            balance.token.symbol +
+              ': ' +
+              thisBalance.toLocaleString(locale, localeOptions)
+          )
+          if (balanceBlock != '') {
+            balanceBlock += ','
+          }
+          balanceBlock +=
+            ' ' +
+            balance.token.symbol +
+            ': ' +
+            thisBalance.toLocaleString(locale, localeOptions)
+          if (runningSymbols == '') {
+            runningSymbols += ' '
+          } else {
+            runningSymbols += '+'
+          }
+          runningSymbols += balance.token.symbol
+        }
+      }
+    })
+    if (tokenBalanceStrings.length == 1) {
+      // No need to itemize the backing tokens when there is only 1 kind
+      balanceBlock = <br />
+    }
+  } else if (safeSumBalance !== undefined) {
+    // Alternate way of calculating the Safe balance for use on testnet as the testnet
+    // erc20s are not recognized by getGnosisSafeBalance
+    runningBalance = safeSumBalance / 10 ** gnosisSafeConfig.tokens[0].decimals
+    runningSymbols = ' ' + gnosisSafeConfig.tokens[0].name
+    tokenBalanceStrings.push(
+      gnosisSafeConfig.tokens[0].name +
+        ': ' +
+        runningBalance.toLocaleString(locale, localeOptions)
+    )
+    balanceBlock = <br />
+  }
+
+  const totalBalanceString =
+    runningBalance.toLocaleString(locale, localeOptions) + runningSymbols
+
   return gnosisSafeConfig ? (
     <Box sx={style}>
       <Typography sx={{ fontWeight: 'bold' }}>Gnosis Safe Summary</Typography>
-      {tokenBalance ? (
+      {tokenBalanceStrings ? (
         <Typography>
-          Amount Locked:{' '}
-          {(
-            Number(tokenBalance) /
-            10 ** gnosisSafeConfig.tokens[0].decimals
-          ).toLocaleString(locale, localeOptions)}{' '}
-          {tokenSymbol}
+          Amount Locked: {totalBalanceString}
+          <br />
+          {balanceBlock}
         </Typography>
       ) : (
         <Typography>loading...</Typography>
       )}
-      <Typography>&nbsp;</Typography>
+      {/* <Typography>&nbsp;</Typography> */}
       <Box sx={noWrapStyle}>
         Safe:{' '}
         <Tooltip

frontend/src/components/Withdrawal.tsx

@@ -71,7 +71,7 @@ export const Withdrawal: FC<TProps> = ({ withdrawal }: TProps) => {
         </Tooltip>
       </Box>
     </Box>
-  )  : (
+  ) : (
     <Box>
       <Typography>Loading</Typography>
     </Box>

frontend/src/layout/AuditList.tsx

@@ -110,7 +110,7 @@ export const AuditList: FC = (): ReactElement => {
               boxShadow: 'rgba(0, 0, 0, 1) 0px 5px 15px',
             }}
           >
-            {burns.length > 0 && 
+            {burns.length > 0 && (
               <InfiniteScroll
                 dataLength={burns.length}
                 next={fetchBurns}
@@ -120,12 +120,9 @@ export const AuditList: FC = (): ReactElement => {
                 {burns.map((i, index) => (
                   <AuditedBurn auditedBurn={i} key={index} />
                 ))}
-
               </InfiniteScroll>
-            }
-            {burns.length == 0 &&
-              <h4>&nbsp;&nbsp;None</h4>
-            }
+            )}
+            {burns.length == 0 && <h4>&nbsp;&nbsp;None</h4>}
           </div>
         </Grid>
       </Grid>

frontend/src/layout/Header.tsx

@@ -2,8 +2,9 @@ import React, { FC, ReactElement } from 'react'
 import { Box, Container, Toolbar, Typography } from '@mui/material'
 import { eUSDIcon } from '../components/icons'
 
-let net_name = ""; // network name prefix for the header, blank for mainnet.
-if (typeof MC_NETWORK !== 'undefined') {  // env variable set in webpack.<net>.js.
+let net_name = '' // network name prefix for the header, blank for mainnet.
+if (typeof MC_NETWORK !== 'undefined') {
+  // env variable set in webpack.<net>.js.
   if (MC_NETWORK == 'testnet') {
     net_name = 'TestNet'
   }

frontend/src/types/api.ts

@@ -215,4 +215,4 @@ export type TGnosisSafeAllTransactionsListResponse = {
     | SafeMultisigTransactionWithTransfersResponse
     | EthereumTxWithTransfersResponse
   >
-}
+}

frontend/webpack/webpack.local.js

@@ -5,8 +5,8 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       AUDITOR_URL: JSON.stringify('http://localhost:8080'),
-      GNOSIS_SAFE_API_URL: JSON.stringify('https://safe-transaction.goerli.gnosis.io'),
-      ETHERSCAN_URL: JSON.stringify('https://goerli.etherscan.io'),
+      GNOSIS_SAFE_API_URL: JSON.stringify('https://safe-transaction-mainnet.safe.global'),
+      ETHERSCAN_URL: JSON.stringify('https://etherscan.io'),
     })
   ]
 }

mainnet.gnosis-safe.json

@@ -10,7 +10,7 @@
                     "0x196f4727526ea7fb1e17b2071b3d8eaa38486988",
                     "0xA0d69E286B938e21CBf7E51D71F6A4c8918f482F"
                 ],
-                "name": "RSV",
+                "name": "eUSD",
                 "symbol": "Token",
                 "decimals": 18,
                 "logo_uri": "",

testnet.gnosis-safe.json

@@ -7,7 +7,7 @@
                 "token_id": 1,
                 "token_type": "ERC20_TRANSFER",
                 "eth_token_contract_addrs": ["0xeC76FbFD75481839e456C4cb2cd23cda813f19B1"],
-                "name": "gRSV",
+                "name": "geUSD",
                 "symbol": "Token",
                 "decimals": 18,
                 "logo_uri": "",