Merge branch 'frontend-ts-rule'

Author: thisconnect

frontends/web/src/api/account.ts

@@ -15,10 +15,11 @@
  */
 
 import type { LineData } from 'lightweight-charts';
-import { apiGet, apiPost } from '@/utils/request';
+import type { Slip24 } from 'request-address';
 import type { TDetailStatus } from './bitsurance';
 import type { SuccessResponse } from './response';
-import { Slip24 } from 'request-address';
+import type { NonEmptyArray } from '@/utils/types';
+import { apiGet, apiPost } from '@/utils/request';
 
 export type NativeCoinCode = 'btc' | 'tbtc' | 'rbtc' | 'ltc' | 'tltc' | 'eth' | 'sepeth';
 
@@ -304,11 +305,11 @@ export interface IReceiveAddress {
 
 export interface ReceiveAddressList {
     scriptType: ScriptType | null;
-    addresses: IReceiveAddress[];
+    addresses: NonEmptyArray<IReceiveAddress>;
 }
 
 export const getReceiveAddressList = (code: AccountCode) => {
-  return (): Promise<ReceiveAddressList[] | null> => {
+  return (): Promise<NonEmptyArray<ReceiveAddressList> | null> => {
     return apiGet(`account/${code}/receive-addresses`);
   };
 };

frontends/web/src/app.tsx

@@ -58,6 +58,9 @@ export const App = () => {
 
   const prevDevices = usePrevious(devices);
 
+  const deviceIDs = Object.keys(devices);
+  const firstDevice = deviceIDs[0];
+
   useEffect(() => {
     return syncNewTxs((meta) => {
       notifyUser(t('notification.newTxs', {
@@ -71,7 +74,6 @@ export const App = () => {
     const currentURL = window.location.hash.replace(/^#/, '');
     const isIndex = currentURL === '' || currentURL === '/';
     const inAccounts = currentURL.startsWith('/account/');
-    const deviceIDs = Object.keys(devices);
 
     // QT and Android start their apps in '/index.html' and '/android_asset/web/index.html' respectively
     // This re-routes them to '/' so we have a simpler uri structure
@@ -106,9 +108,10 @@ export const App = () => {
     // if device is connected route to device settings
     if (
       deviceIDs.length === 1
+      && firstDevice
       && currentURL === '/settings/no-device-connected'
     ) {
-      navigate(`/settings/device-settings/${deviceIDs[0]}`);
+      navigate(`/settings/device-settings/${firstDevice}`);
       return;
     }
     // if on an account that isn't registered route to /
@@ -138,7 +141,7 @@ export const App = () => {
       return;
     }
 
-  }, [accounts, devices, navigate]);
+  }, [accounts, deviceIDs, firstDevice, navigate]);
 
   useEffect(() => {
     const oldDeviceIDList = Object.keys(prevDevices || {});
@@ -155,10 +158,13 @@ export const App = () => {
       // We don't bother implementing the same for the bitbox01.
       // The bb02 bootloader screen is not full screen, so we don't mount it globally and instead
       // route to it.
-      const productName = devices[newDeviceIDList[0]];
-      if (productName === 'bitbox' || productName === 'bitbox02-bootloader') {
-        navigate(`settings/device-settings/${newDeviceIDList[0]}`);
-        return;
+      const firstNewDevice = newDeviceIDList[0];
+      if (firstNewDevice) {
+        const productName = devices[firstNewDevice];
+        if (productName === 'bitbox' || productName === 'bitbox02-bootloader') {
+          navigate(`settings/device-settings/${firstNewDevice}`);
+          return;
+        }
       }
     }
     maybeRoute();
@@ -170,10 +176,9 @@ export const App = () => {
     return prefix + ':' + JSON.stringify(devices, Object.keys(devices).sort());
   };
 
-  const deviceIDs: string[] = Object.keys(devices);
   const activeAccounts = accounts.filter(acct => acct.active);
 
-  const isBitboxBootloader = devices[deviceIDs[0]] === 'bitbox02-bootloader';
+  const isBitboxBootloader = firstDevice && devices[firstDevice] === 'bitbox02-bootloader';
   const showBottomNavigation = (deviceIDs.length > 0 || activeAccounts.length > 0) && !isBitboxBootloader;
 
 
@@ -187,7 +192,10 @@ export const App = () => {
             accounts={activeAccounts}
             devices={devices}
           />
-          <div className={`${styles.appContent} ${showBottomNavigation ? styles.hasBottomNavigation : ''}`}>
+          <div className={`
+            ${styles.appContent || ''}
+            ${showBottomNavigation && styles.hasBottomNavigation || ''}
+          `}>
             <WCSigningRequest />
             <Aopp />
             <KeystoreConnectPrompt />

frontends/web/src/components/actionable-item/actionable-item.tsx

@@ -38,14 +38,14 @@ export const ActionableItem = ({
   return (
     <>
       {notButton ? (
-        <div className={`${styles.container} ${className}`}>
+        <div className={`${styles.container || ''} ${className}`}>
           {children}
           {icon && icon}
         </div>
       ) : (
         <button
           type="button"
-          className={`${styles.container} ${styles.isButton} ${className}`}
+          className={`${styles.container || ''} ${styles.isButton || ''} ${className}`}
           onClick={onClick}>
           {children}
           {icon ? icon : (

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

@@ -83,7 +83,10 @@ export const AmountWithUnit = ({
     );
   }
   return (
-    <span className={ `${style.rates} ${!displayedAmount ? style.notAvailable : ''}`}>
+    <span className={`
+      ${style.rates || ''}
+      ${!displayedAmount && style.notAvailable || ''}
+    `.trim()}>
       {!!displayedAmount ? sign : ''}
       {formattedAmount}
       {' '}
@@ -98,7 +101,11 @@ type TAmountUnitProps = {
 }
 
 export const AmountUnit = ({ rotateUnit, unit }: TAmountUnitProps) => {
-  const classRototable = rotateUnit ? style.rotatable : '';
-  const textStyle = `${style.unit} ${classRototable}`;
-  return <span className={textStyle} onClick={rotateUnit}>{unit}</span>;
+  const classRototable = rotateUnit ? (style.rotatable || '') : '';
+  const textStyle = `${style.unit || ''} ${classRototable}`;
+  return (
+    <span className={textStyle} onClick={rotateUnit}>
+      {unit}
+    </span>
+  );
 };

frontends/web/src/components/anchor/anchor.tsx

@@ -49,7 +49,10 @@ export const A = ({
 }: TProps) => {
   return (
     <span
-      className={`${runningInIOS() ? style.linkIos : style.link} ${className || ''}`}
+      className={`
+        ${(runningInIOS() ? style.linkIos : style.link) || ''}
+        ${className || ''}
+      `}
       title={props.title || href}
       onClick={(e: SyntheticEvent) => {
         e.preventDefault();

frontends/web/src/components/aopp/vasp.tsx

@@ -63,11 +63,14 @@ export const Vasp = ({
     );
   }
 
-  const logoClasses = prominent ? `${styles.logo} ${styles.prominent}` : styles.logo;
+  const logoClasses = prominent ? `
+    ${styles.logo || ''}
+    ${styles.prominent || ''}
+  ` : styles.logo as string;
   return (
     <div>
       <img className={logoClasses} src={VASPLogoMap[knownVasp]} alt={knownVasp} />
-      <p className={`${styles.hostname} ${styles.capitalized}`}>
+      <p className={`${styles.hostname as string} ${styles.capitalized as string}`}>
         {knownVasp in VASPHostnameMap ? VASPHostnameMap[knownVasp] : knownVasp}
       </p>
       {withLogoText ? (<p>{withLogoText}</p>) : null}

frontends/web/src/components/badge/badge.tsx

@@ -36,9 +36,17 @@ export const Badge = ({
   const iconOnlyStyle = (children === undefined && icon) ? style.iconOnly : '';
   return (
     <span
-      className={`${style.badge} ${style[type]} ${withChildrenStyle} ${iconOnlyStyle} ${className || ''}`}
+      className={`
+        ${style.badge || ''}
+        ${style[type] || ''}
+        ${withChildrenStyle || ''}
+        ${iconOnlyStyle || ''}
+        ${className || ''}
+      `}
       {...props}>
-      {icon && icon({ className: style.badgeIcon })}
+      {icon && style.badgeIcon && icon({
+        className: style.badgeIcon || ''
+      })}
       {children}
     </span>
   );

frontends/web/src/components/banners/backup.tsx

@@ -58,12 +58,13 @@ export const BackupReminder = ({ keystore, accountsBalanceSummary }: BackupRemin
     const connectResult = await connectKeystore(keystore.rootFingerprint);
     if (connectResult.success) {
       const devices = await getDeviceList();
-      if (Object.keys(devices).length === 0) {
+      const firstDevice = Object.keys(devices)[0];
+      if (!firstDevice) {
         // If no devices are connected, we cannot navigate to settings.
         // This shouldn't happen in theory, as the connectKeystore functions has succeeded.
         return;
       }
-      const deviceSettingsURL = `/settings/device-settings/recovery-words/${Object.keys(devices)[0]}`;
+      const deviceSettingsURL = `/settings/device-settings/recovery-words/${firstDevice}`;
       // Proceed to the setting screen if the keystore was connected.
       navigate(deviceSettingsURL);
     }

frontends/web/src/components/banners/banner.tsx

@@ -28,6 +28,7 @@ type TBannerProps = {
 
 export const Banner = ({ msgKey }: TBannerProps) => {
   const { i18n, t } = useTranslation();
+  const { fallbackLng } = i18n.options;
   const [banner, setBanner] = useState<TBannerInfo>();
 
   useEffect(() => {
@@ -37,18 +38,24 @@ export const Banner = ({ msgKey }: TBannerProps) => {
 
   if (
     !banner
-    || !i18n.options.fallbackLng
+    || !fallbackLng
     || !i18n.resolvedLanguage
   ) {
     return null;
   }
   const { message, link } = banner;
 
+  const maybeFallbackLng: string = (
+    Array.isArray(fallbackLng) && fallbackLng.length > 0
+      ? fallbackLng[0]
+      : fallbackLng
+  );
+
   return (
     <Status
       dismissible={banner.dismissible ? `banner-${msgKey}-${banner.id}` : ''}
       type={banner.type ? banner.type : 'warning'}>
-      {message[i18n.resolvedLanguage] || message[(i18n.options.fallbackLng as string[])[0]]}
+      {message[i18n.resolvedLanguage] || message[maybeFallbackLng || 'en']}
       &nbsp;
       {link && (
         <A href={link.href} className={style.link}>

frontends/web/src/components/bottom-navigation/bottom-navigation.tsx

@@ -33,7 +33,7 @@ export const BottomNavigation = ({ activeAccounts, devices }: Props) => {
   const { t } = useTranslation();
   const { pathname } = useLocation();
   const deviceID = Object.keys(devices)[0];
-  const isBitBox02 = devices[deviceID] === 'bitbox02';
+  const isBitBox02 = deviceID && devices[deviceID] === 'bitbox02';
   const versionInfo = useLoad(isBitBox02 ? () => getVersion(deviceID) : null, [deviceID]);
   const canUpgrade = versionInfo ? versionInfo.canUpgrade : false;
 
@@ -43,14 +43,20 @@ export const BottomNavigation = ({ activeAccounts, devices }: Props) => {
   return (
     <div className={styles.container}>
       <Link
-        className={`${styles.link} ${pathname.startsWith('/account-summary') ? styles.active : ''}`}
+        className={`
+          ${styles.link || ''}
+          ${pathname.startsWith('/account-summary') && styles.active || ''}
+        `}
         to="/account-summary"
       >
         <PortfolioIconSVG />
         {t('accountSummary.portfolio')}
       </Link>
       <Link
-        className={`${styles.link} ${pathname.startsWith('/account/') || pathname.startsWith('/accounts/') ? styles.active : ''}`}
+        className={`
+          ${styles.link || ''}
+          ${pathname.startsWith('/account/') || pathname.startsWith('/accounts/') ? (styles.active || '') : ''}
+        `}
         to={
           onlyHasOneAccount && accountCode ?
             `/account/${accountCode}` :
@@ -61,14 +67,20 @@ export const BottomNavigation = ({ activeAccounts, devices }: Props) => {
         {onlyHasOneAccount ? t('account.account') : t('account.accounts')}
       </Link>
       <Link
-        className={`${styles.link} ${pathname.startsWith('/market/') ? styles.active : ''}`}
+        className={`
+          ${styles.link || ''}
+          ${pathname.startsWith('/market/') && styles.active || ''}
+        `}
         to="/market/info"
       >
         <MarketIconSVG />
         {t('generic.buySell')}
       </Link>
       <Link
-        className={`${styles.link} ${pathname.startsWith('/settings') || pathname.startsWith('/bitsurance/') ? styles.active : ''}`}
+        className={`
+          ${styles.link || ''}
+          ${pathname.startsWith('/settings') || pathname.startsWith('/bitsurance/') ? (styles.active || '') : ''}
+        `}
         to="/settings/more"
       >
         <MoreIconSVG />