frontend: use sat spacing in all-accounts

This also simplifes and remove some dry code in all-accounts comp.

Author: thisconnect

frontends/web/src/components/amount/amount-with-unit.module.css

@@ -2,6 +2,7 @@
   cursor: default;
   line-height: 1;
   margin: 0;
+  max-width: 100%;
   white-space: nowrap;
 }
 

frontends/web/src/components/amount/amount-with-unit.tsx

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { useContext } from 'react';
 import { CoinUnit, ConversionUnit, TAmountWithConversions } from '@/api/account';
 import { RatesContext } from '@/contexts/RatesContext';
@@ -22,7 +23,7 @@ import { isBitcoinCoin } from '@/routes/account/utils';
 import style from './amount-with-unit.module.css';
 
 type TAmountWithUnitProps = {
-    amount: TAmountWithConversions;
+    amount: TAmountWithConversions | undefined;
     tableRow?: boolean;
     enableRotateUnit?: boolean;
     sign?: string;
@@ -42,6 +43,9 @@ export const AmountWithUnit = ({
 }: TAmountWithUnitProps) => {
   const { rotateDefaultCurrency, defaultCurrency, rotateBtcUnit } = useContext(RatesContext);
 
+  if (!amount) {
+    return null;
+  }
   let displayedAmount: string = '';
   let displayedUnit: CoinUnit | ConversionUnit;
   let onClick: () => Promise<void>;

frontends/web/src/routes/accounts/all-accounts.module.css

@@ -62,18 +62,6 @@
   justify-content: flex-end;
 }
 
-.accountBalance {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin-right: 4px;
-}
-
-.coinUnit {
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
 .chevron {
   margin-top: 6px;
   color: var(--color-mediumgray);

frontends/web/src/routes/accounts/all-accounts.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { useState, useEffect, useContext } from 'react';
 import { useOnlyVisitableOnMobile } from '@/hooks/onlyvisitableonmobile';
 import * as accountApi from '@/api/account';
 import { getBalance } from '@/api/account';
@@ -27,16 +27,20 @@ import { HideAmountsButton } from '@/components/hideamountsbutton/hideamountsbut
 import { Main, Header } from '@/components/layout';
 import { Badge } from '@/components/badge/badge';
 import { ChevronRightDark, USBSuccess } from '@/components/icon/icon';
-import { AppContext } from '@/contexts/AppContext';
 import { AllAccountsGuide } from '@/routes/accounts/all-accounts-guide';
 import { useMountedRef } from '@/hooks/mount';
+import { AmountWithUnit } from '@/components/amount/amount-with-unit';
 import styles from './all-accounts.module.css';
 
 type AllAccountsProps = {
   accounts?: accountApi.IAccount[];
 };
 
-const AccountItem = ({ account, hideAmounts }: { account: accountApi.IAccount, hideAmounts: boolean }) => {
+type TAccountItemProp = {
+  account: accountApi.IAccount;
+};
+
+const AccountItem = ({ account }: TAccountItemProp) => {
   const [balance, setBalance] = useState<accountApi.TAmountWithConversions>();
   const mounted = useMountedRef();
 
@@ -70,12 +74,7 @@ const AccountItem = ({ account, hideAmounts }: { account: accountApi.IAccount, h
       </p>
 
       <div className={styles.accountBalanceContainer}>
-        <div className={styles.accountBalance}>
-          {balance ? (hideAmounts ? '***' : balance.amount) : '...'}
-        </div>
-        <div className={styles.coinUnit}>
-          {balance ? balance.unit : ''}
-        </div>
+        <AmountWithUnit amount={balance} />
       </div>
       <div className={styles.chevron}>
         <ChevronRightDark />
@@ -84,18 +83,15 @@ const AccountItem = ({ account, hideAmounts }: { account: accountApi.IAccount, h
   );
 };
 
-
 /**
  * This component will only be shown on mobile.
  **/
 export const AllAccounts = ({ accounts = [] }: AllAccountsProps) => {
   const { t } = useTranslation();
-  const { hideAmounts } = useContext(AppContext);
   const accountsByKeystore = getAccountsByKeystore(accounts);
   useOnlyVisitableOnMobile('/settings/manage-accounts');
 
   return (
-
     <Main>
       <Header title={<h2>{t('settings.accounts')}</h2>}>
         <HideAmountsButton />
@@ -124,7 +120,7 @@ export const AllAccounts = ({ accounts = [] }: AllAccountsProps) => {
                 </div>
                 <div className={styles.accountsList}>
                   {keystore.accounts.map(account => (
-                    <AccountItem hideAmounts={hideAmounts} key={`account-${account.code}`} account={account} />
+                    <AccountItem key={`account-${account.code}`} account={account} />
                   ))}
                 </div>
               </div>
@@ -134,6 +130,5 @@ export const AllAccounts = ({ accounts = [] }: AllAccountsProps) => {
       </View>
       <AllAccountsGuide />
     </Main >
-
   );
 };