feat: format 'available' for known assets

CoreumFoundation · Jan 19, 2024 · c601e1c · c601e1c
1 parent 14ac4cc
commit c601e1c
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 5 deletions.
diff --git a/apps/web-coreum/package.json b/apps/web-coreum/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-coreum",
-  "version": "2.19.3-71",
+  "version": "2.19.3-72",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {

diff --git a/packages/ui/src/screens/account_details/components/other_tokens/components/desktop/index.tsx b/packages/ui/src/screens/account_details/components/other_tokens/components/desktop/index.tsx
@@ -5,12 +5,13 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import { useTranslation } from 'next-i18next';
 import { FC } from 'react';
-import { formatNumber } from '@/utils/format_token';
+import { formatNumber, getFormatString } from '@/utils/format_token';
 import type { OtherTokenType } from '@/screens/account_details/types';
 import { columns } from '@/screens/account_details/components/other_tokens/components/desktop/utils';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { ASSETS_DETAILS } from '@/utils/go_to_page';
+import numeral from 'numeral';
 import useStyles from './styles';
 
 type DesktopProps = {
@@ -27,7 +28,9 @@ const Desktop: FC<DesktopProps> = ({ className, items }) => {
     key: i,
     token: x.denom,
     commission: formatNumber(x.commission.value, x.commission.exponent),
-    available: formatNumber(x.available.value, x.available.exponent),
+    available: x.exponent
+      ? numeral(+x.available.value / 10 ** x.exponent).format(getFormatString(x.exponent))
+      : formatNumber(x.available.value, x.available.exponent),
     reward: x.reward ? formatNumber(x.reward.value, x.reward.exponent) : '',
     ...(x.logoURL && { logo: x.logoURL }),
     ...(x.displayName && { displayName: x.displayName }),

diff --git a/packages/ui/src/screens/account_details/hooks.ts b/packages/ui/src/screens/account_details/hooks.ts
@@ -195,6 +195,7 @@ const formatOtherTokens = (data: Data, assets: Asset[]) => {
         displayName: asset.ibc_info.display_name,
         logoURL: asset.logo_URIs.svg || asset.logo_URIs.png,
         chain: asset.ibc_info.source_chain,
+        exponent: asset.ibc_info.precision,
       }),
     });
   });

diff --git a/packages/ui/src/screens/account_details/types.ts b/packages/ui/src/screens/account_details/types.ts
@@ -22,6 +22,7 @@ export interface OtherTokenType {
   logoURL?: string;
   displayName?: string;
   chain?: string;
+  exponent?: number;
 }
 
 export interface RewardsType {

diff --git a/packages/ui/src/screens/assets/components/list/components/tabs/index.tsx b/packages/ui/src/screens/assets/components/list/components/tabs/index.tsx
@@ -25,12 +25,13 @@ const TabsHeader: FC<TabsHeaderProps> = ({ className, tab, handleTabChange }) =>
           if (x === 'nonFungibleToken') {
             return (
               <Tooltip
+                key={x}
                 TransitionComponent={Zoom}
                 title={<p>{t('commingSoon')}</p>}
                 placement="top"
                 arrow
               >
-                <Tab key={x} label={t(x)} {...a11yProps(i)} />
+                <Tab label={t(x)} {...a11yProps(i)} />
               </Tooltip>
             );
           }

diff --git a/packages/ui/src/screens/assets/components/list/components/tabs/styles.ts b/packages/ui/src/screens/assets/components/list/components/tabs/styles.ts
@@ -27,7 +27,7 @@ const useStyles = makeStyles()((theme) => ({
       fontSize: theme.spacing(1.75),
       padding: `${theme.spacing(1.5)} ${theme.spacing(3.5)}`,
 
-      '&:first-child': {
+      '&:first-of-type': {
         borderTopLeftRadius: theme.spacing(0.5),
         borderBottomLeftRadius: theme.spacing(0.5),
       },