Merge pull request #1283 from oasisprotocol/csillag/improve-balances-…

…with-multiple-tokens Improve displaying balances containing different tokens
oasisprotocol · Feb 21, 2024 · cec93f7 · cec93f7
2 parents a69897d + 01101f7
commit cec93f7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/.changelog/1283.trivial.md b/.changelog/1283.trivial.md
@@ -0,0 +1 @@
+Improve displaying balances containing different tokens
diff --git a/src/app/components/Balance/RuntimeBalanceDisplay.tsx b/src/app/components/Balance/RuntimeBalanceDisplay.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 import { RuntimeSdkBalance } from '../../../oasis-nexus/api'
 import { useTranslation } from 'react-i18next'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
+import Box from '@mui/material/Box'
 
 export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefined }> = ({
   balances = [],
@@ -11,15 +12,15 @@ export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefin
     return t('common.missing')
   }
   return (
-    <>
+    <Box>
       {balances.map(balance => (
-        <span key={balance.token_symbol}>
+        <div key={balance.token_symbol}>
           {t('common.valueInToken', {
             ...getPreciseNumberFormat(balance.balance),
             ticker: balance.token_symbol,
           })}
-        </span>
+        </div>
       ))}
-    </>
+    </Box>
   )
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Improve displaying balances containing different tokens