refactor: [LW-11802] enable strict null checks (#1536)

* chore: enable strict null checks in tsconfig
* separate tags requiring co-signer and those which don't
* enable strict null checks
* update function return types to include nulls
* refactor(nami): remove src director from tsconfig exclusions
* refactor(core): make currentTimelineStep a required property of onboarding steps
* refactor(core): update deep partial types for governance actions
* add translation package to tsconfig references

Author: mchappell

apps/browser-extension-wallet/src/tsconfig.json

@@ -6,6 +6,7 @@
     "baseUrl": "../src",
     "resolveJsonModule": true,
     "noEmitOnError": false,
+    "strictNullChecks": false,
     "paths": {
       "@assets/*": ["assets/*"],
       "@components/*": ["components/*"],

apps/browser-extension-wallet/src/utils/format-number.ts

@@ -54,7 +54,7 @@ export const formatLocaleNumber = (value: string, decimalPlaces: number = DEFAUL
  * @param maxDecimals The maximum number of decimal places to include. Default is 0.
  * @returns The formatted number string.
  */
-export const formatNumberForDisplay = (value: string, maxDecimals = 0): string => {
+export const formatNumberForDisplay = (value?: string, maxDecimals = 0): string => {
   if (!value) return '0';
   // Remove any character that is not a dot or a number
   const parsedStringValue = value.replace(/[^\d.]/g, '');
@@ -137,7 +137,7 @@ export const handleFormattedValueChange = (
  * @param decimals The desired decimal places (default = 2)
  * @returns The formatted value with the desired decimals and the unit as a string
  */
-export const compactNumberWithUnit = (value: number | string, decimals = DEFAULT_DECIMALS): string => {
+export const compactNumberWithUnit = (value?: number | string, decimals = DEFAULT_DECIMALS): string => {
   const bigNumberValue = value ? new BigNumber(value) : new BigNumber(0);
 
   if (bigNumberValue.isNaN()) return formatLocaleNumber('0', decimals);

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/useSelectedCoins.tsx

@@ -27,7 +27,7 @@ import { MAX_NFT_TICKER_LENGTH, MAX_TOKEN_TICKER_LENGTH } from '../../../constan
 
 interface InputFieldActionParams {
   id: string;
-  value: string;
+  value?: string;
   maxDecimals?: number;
 }
 
@@ -176,10 +176,10 @@ export const useSelectedCoins = ({
         coinBalance,
         spendableCoin?.toString(),
         tokensUsed[cardanoCoin.id] || '0',
-        assetInputItem?.value || '0'
+        assetInputItem?.value ?? '0'
       );
       const fiatValue = Wallet.util.convertAdaToFiat({
-        ada: assetInputItem?.value || '0',
+        ada: assetInputItem?.value ?? '0',
         fiat: prices?.cardano?.price
       });
       return {

apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingInfo/StakePoolInfo.tsx

@@ -18,8 +18,8 @@ export const StakePoolInfo = ({
   onClick?: () => void;
   popupView: boolean;
 }): React.ReactElement => {
-  const title = name || ticker || '-';
-  const subTitle: string | React.ReactElement = ticker || (
+  const title = name ?? ticker ?? '-';
+  const subTitle: string | React.ReactElement = ticker ?? (
     <Ellipsis className={styles.id} text={id} beforeEllipsis={6} afterEllipsis={8} />
   );
 

apps/browser-extension-wallet/test/__mocks__/set-env-vars.js

@@ -20,3 +20,7 @@ process.env.USE_POSTHOG_ANALYTICS = 'true';
 process.env.USE_POSTHOG_ANALYTICS_FOR_OPTED_OUT = 'false';
 process.env.POSTHOG_HOST = 'https://e.lw.iog.io';
 process.env.POSTHOG_DEV_TOKEN = 'test-token';
+process.env.MIN_NUMBER_OF_COSIGNERS = '2';
+process.env.TWITTER_URL = 'TWITTER_URL';
+process.env.YOUTUBE_URL = 'YOUTUBE_URL';
+process.env.DISCORD_URL = 'DISCORD_URL';

packages/cardano/src/ui/components/StakePoolMetricsBrowser/StakePoolMetricsBrowser.tsx

@@ -3,11 +3,14 @@ import isNil from 'lodash/isNil';
 import cn from 'classnames';
 import styles from './StakePoolMetricsBrowser.module.scss';
 
-const formatNumericValue = (val: number | string, suffix: number | string): React.ReactElement => (
-  <>
-    {val ?? '-'} {!isNil(val) && <span className={styles.suffix}>{suffix}</span>}
-  </>
-);
+const formatNumericValue = ({ value, unit }: { value?: number | string; unit: number | string }): React.ReactNode =>
+  !isNil(value) ? (
+    <>
+      {value} <span className={styles.suffix}>{unit}</span>
+    </>
+  ) : (
+    '-'
+  );
 
 export interface StakePoolMetricsBrowserProps {
   data: {
@@ -27,7 +30,7 @@ export const StakePoolMetricsBrowser = ({ data, popupView }: StakePoolMetricsBro
           {t}
         </div>
         <div className={styles.statBody} data-testid={`${testId}-value`}>
-          {unit ? formatNumericValue(value, unit) : value}
+          {unit ? formatNumericValue({ value, unit }) : value}
         </div>
       </div>
     ))}

packages/cardano/src/ui/components/StakePoolNameBrowser/StakePoolNameBrowser.tsx

@@ -32,9 +32,9 @@ export const StakePoolNameBrowser = ({
   isOversaturated,
   translations
 }: StakePoolNameBrowserProps): React.ReactElement => {
-  const title = name || ticker || '-';
-  const subTitle: string | React.ReactElement = ticker || (
-    <Ellipsis className={styles.id} text={id} beforeEllipsis={6} afterEllipsis={8} />
+  const title = name ?? ticker ?? '-';
+  const subTitle: string | React.ReactElement = ticker ?? (
+    <Ellipsis className={styles.id} text={id ?? ''} beforeEllipsis={6} afterEllipsis={8} />
   );
 
   return (
@@ -48,13 +48,15 @@ export const StakePoolNameBrowser = ({
           <p className={styles.subTitle} data-testid="stake-pool-item-ticker">
             {subTitle}
           </p>
-          <StatusLogo
-            status={status}
-            isDelegated={isDelegated}
-            isOversaturated={isOversaturated}
-            className={styles.statusLogo}
-            translations={translations}
-          />
+          {status && (
+            <StatusLogo
+              status={status}
+              isDelegated={!!isDelegated}
+              isOversaturated={isOversaturated}
+              className={styles.statusLogo}
+              translations={translations}
+            />
+          )}
         </div>
       </div>
     </div>

packages/cardano/src/ui/components/StakePoolNameBrowser/__tests__/StakePoolNameBrowser.test.tsx

@@ -5,17 +5,19 @@ import { StakePoolNameBrowser, StakePoolNameBrowserProps } from '../StakePoolNam
 import '@testing-library/jest-dom';
 
 describe('Testing StakePoolNameBrowser component', () => {
+  const name = 'name';
+  const ticker = 'ticker';
   const props: StakePoolNameBrowserProps = {
-    name: 'name',
-    ticker: 'ticker',
+    name,
+    ticker,
     isDelegated: true,
     translations: { retiring: 'retiring', retired: 'retired', delegating: 'delegating', saturated: 'saturated' }
   };
   test('should display all stake pool metrics with icons', async () => {
     const { findByText, findByTestId } = render(<StakePoolNameBrowser {...props} />);
     const roiLabel = await findByTestId('stake-pool-item-logo');
-    const nameValue = await findByText(props.name);
-    const tickerValue = await findByText(props.ticker);
+    const nameValue = await findByText(name);
+    const tickerValue = await findByText(ticker);
 
     expect(roiLabel).toBeVisible();
     expect(nameValue).toBeVisible();

packages/cardano/src/ui/components/StakePoolStatusLogo/StatusLogo.tsx

@@ -44,8 +44,8 @@ export const StatusLogo = ({
   if (status === 'retired' || status === 'retiring') {
     currentStatus = status;
   }
-  const icon = statusIcons[currentStatus];
-  const description = statusInfo[currentStatus];
+  const icon = currentStatus ? statusIcons[currentStatus] : undefined;
+  const description = currentStatus ? statusInfo[currentStatus] : undefined;
 
   return (
     <>

packages/cardano/src/ui/components/Voting/CatalystConfirmationStep.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './Voting.module.scss';
 import { Button } from '@lace/common';
 import CatalystLogo from '../../assets/images/catalyst-logo.png';
-import Icon, { InfoCircleOutlined } from '@ant-design/icons';
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { TranslationsFor } from '@wallet/util/types';
 
 export interface CatalystConfirmationStepProps {
@@ -52,7 +52,7 @@ export const CatalystConfirmationStep = ({
         <>
           <div className={styles.fee}>
             <p>
-              {translations.totalFee} <Icon component={InfoCircleOutlined} />
+              {translations.totalFee} <InfoCircleOutlined />
             </p>
             <b>{fee}</b>
           </div>