Balance table formatting (#472)

* fix: fixed the balances formatting

* fix: prevent flicker

* tidy: refactor

.env.example

@@ -5,14 +5,14 @@ NEXT_PUBLIC_GQL=https://devnet-osmosis-gql.marsprotocol.io/graphql
 NEXT_PUBLIC_REST=https://lcd.devnet.osmosis.zone/
 NEXT_PUBLIC_SWAP=https://testnet.osmosis.zone
 NEXT_PUBLIC_APOLLO_APR=https://api.apollo.farm/api/vault_infos/v2/osmosis-1
-NEXT_PUBLIC_ACCOUNT_NFT=osmo1j0m37hqpaeh79cjrdna4sep6yfyu278rrm4qta6s4hjq6fv3njxqsvhcex
-NEXT_PUBLIC_ORACLE=osmo1dh8f3rhg4eruc9w7c9d5e06eupqqrth7v32ladwkyphvnn66muzqxcfe60
-NEXT_PUBLIC_RED_BANK=osmo1pvrlpmdv3ee6lgmxd37n29gtdahy4tec7c5nyer9aphvfr526z6sff9zdg
-NEXT_PUBLIC_CREDIT_MANAGER=osmo12wd0rwuvu7wwujztkww5c7sg4fw4e6t235jyftwy5ydc48uxd24q4s9why
-NEXT_PUBLIC_INCENTIVES=osmo1aemnaq5x3jkttnd38g7lewh24nh90r9zwh8853qv3tkf47p2hnasaae0e4
-NEXT_PUBLIC_ZAPPER=osmo1yhh8mhthj5jn5c6ty59z3tpsk554qxmlkrkcderw6jls0pcg8zxsdjdj94
-NEXT_PUBLIC_SWAPPER=osmo17c4retwuyxjxzv9f2q9r0272s8smktpzhjetssttxxdavarjtujsjqafa2
-NEXT_PUBLIC_PARAMS=osmo1dpwu03xc45vpqur6ry69xjhltq4v0snrhaukcp4fvhucx0wypzhs978lnp
+NEXT_PUBLIC_ACCOUNT_NFT=osmo1pdr8mvj2ky9hzj5pjp026apfmd0pacd3xrzx3mzazy7lulnsdrkq96gzk3
+NEXT_PUBLIC_ORACLE=osmo156elt2tp5455q9a6vfrvnpncxyd33cxm9z2lgguwg6dgws9tedps5tq3rc
+NEXT_PUBLIC_RED_BANK=osmo1vxpdcw092n9rngvekve8g324c2yjx56496ck98ag4sdxr4p4zd4q0wr7x6
+NEXT_PUBLIC_CREDIT_MANAGER=osmo1m83kw2vehyt9urxf79qa9rxk8chgs4464e5h8s37yhnw3pwauuqq7lux8r
+NEXT_PUBLIC_INCENTIVES=osmo1r9w7k774vcxeuvq6ctq0z2j6wkkxpskucgjkqt0uu7u07l03s3js6ukge4
+NEXT_PUBLIC_ZAPPER=osmo1q4kkvuy8wc9fs8sfm7zyeh4k25vssd0l68nrph8s7unvq5jdq67swrepj4
+NEXT_PUBLIC_SWAPPER=osmo1xmhhdxgk9e83n4kmtlluzx38mya8q9r4hku5nys8cr7jg7sgpx5s8zkkg2
+NEXT_PUBLIC_PARAMS=osmo1pzszwkyy0x9cu6p2uknwa3wccr79xwmqn9gj66fnjnayr28tzp6qh2n4qg
 NEXT_PUBLIC_PYTH=osmo13ge29x4e2s63a8ytz2px8gurtyznmue4a69n5275692v3qn3ks8q7cwck7
 NEXT_PUBLIC_API=http://localhost:3000/api
 NEXT_PUBLIC_PYTH_ENDPOINT=https://xc-mainnet.pyth.network/api

src/components/Account/AccountBalancesTable/index.tsx

@@ -84,18 +84,36 @@ export default function Index(props: Props) {
         accessorKey: 'size',
         header: 'Size',
         cell: ({ row }) => {
-          if (row.original.type === 'vault')
+          const asset = getAssetByDenom(row.original.denom)
+
+          if (row.original.type === 'vault' || !asset)
             return <p className='text-xs text-right number'>&ndash;</p>
+
           const color = getAmountChangeColor(row.original.type, row.original.amountChange)
+          const className = classNames('text-xs text-right', color)
           const amount = demagnify(
             row.original.amount,
             getAssetByDenom(row.original.denom) ?? ASSETS[0],
           )
+          if (amount >= 0.01)
+            return (
+              <FormattedNumber
+                className={className}
+                amount={amount}
+                options={{ abbreviated: true }}
+                animate
+              />
+            )
+
+          const formattedAmount = formatAmountToPrecision(amount, 1)
           return (
             <FormattedNumber
-              className={classNames('text-xs text-right', color)}
-              amount={formatAmountToPrecision(amount, baseCurrency.decimals)}
-              options={{ maxDecimals: baseCurrency.decimals, minDecimals: 0, abbreviated: true }}
+              className={className}
+              amount={formattedAmount}
+              options={{
+                maxDecimals: baseCurrency.decimals,
+                minDecimals: 0,
+              }}
               animate
             />
           )
@@ -216,6 +234,7 @@ export default function Index(props: Props) {
                     className={classNames(
                       cell.column.id === 'symbol' ? `border-l ${borderClass}` : 'text-right',
                       'p-2',
+                      cell.column.id === 'size' && 'min-w-20 pl-0',
                     )}
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}

src/components/Wallet/WalletConnectedButton.tsx

@@ -23,6 +23,7 @@ import { ChainInfoID } from 'types/enums/wallet'
 import { getBaseAsset, getEnabledMarketAssets } from 'utils/assets'
 import { truncate } from 'utils/formatters'
 import { getPage, getRoute } from 'utils/route'
+
 import WalletSelect from './WalletSelect'
 
 export default function WalletConnectedButton() {

tailwind.config.js

@@ -188,6 +188,7 @@ module.exports = {
       minWidth: {
         15: '60px',
         16: '64px',
+        20: '80px',
         92.5: '370px',
       },
       padding: {