feat(lint): created local rule to use isNullish and nonNullish

.eslintrc.cjs

@@ -63,6 +63,7 @@ module.exports = {
 		curly: 'error',
 		'local-rules/prefer-object-params': 'warn',
 		'local-rules/no-svelte-store-in-api': 'error',
+		'local-rules/use-nullish-checks': 'warn',
 		'local-rules/use-option-type-wrapper': 'warn',
 		'import/no-duplicates': ['error', { 'prefer-inline': true }],
 		'no-console': ['error', { allow: ['error', 'warn'] }],

eslint-local-rules.cjs

@@ -172,5 +172,54 @@ module.exports = {
 				}
 			};
 		}
+	},
+	'use-nullish-checks': {
+		meta: {
+			type: 'suggestion',
+			docs: {
+				description: 'Enforce the use of isNullish functions for nullish checks',
+				category: 'Best Practices',
+				recommended: true
+			},
+			fixable: 'code',
+			schema: []
+		},
+		create(context) {
+			const isNullishMessage =
+				'Use isNullish() instead of direct variable check for nullish checks.';
+			const nonNullishMessage =
+				'Use nonNullish() instead of direct variable check for nullish checks.';
+
+			const binaryCheck = (node) => {
+				if (node.type === 'BinaryExpression') {
+					return (
+						(node.operator === '===' || node.operator === '!==') &&
+						((node.right.type === 'Identifier' && node.right.name === 'undefined') ||
+							(node.right.type === 'Literal' && node.right.value === null))
+					);
+				}
+			};
+
+			const binaryReportCheck = (node) => {
+				context.report({
+					node,
+					message: node.operator === '===' ? isNullishMessage : nonNullishMessage,
+					fix(fixer) {
+						return fixer.replaceText(
+							node,
+							`${node.operator === '===' ? 'isNullish' : 'nonNullish'}(${context.getSourceCode().getText(node.left)})`
+						);
+					}
+				});
+			};
+
+			return {
+				BinaryExpression(node) {
+					if (binaryCheck(node)) {
+						binaryReportCheck(node);
+					}
+				}
+			};
+		}
 	}
 };

scripts/build.copy-workers.mjs

@@ -9,6 +9,8 @@ await cp(
 		filter: (source) => extname(source) !== '.map'
 	},
 	(err) => {
+		// TODO: Remove ESLint exception and use nullish checks
+		// eslint-disable-next-line local-rules/use-nullish-checks
 		if (err === null) {
 			return;
 		}

scripts/build.tokens.ckerc20.mjs

@@ -74,6 +74,8 @@ const buildOrchestratorInfo = async (orchestratorId) => {
 
 	const assertUniqueTokenSymbol = Object.values(tokens).find((value) => value.length > 1);
 
+	// TODO: Remove ESLint exception and use nullish checks
+	// eslint-disable-next-line local-rules/use-nullish-checks
 	if (assertUniqueTokenSymbol !== undefined) {
 		throw new Error(
 			`More than one pair of ledger and index canisters were used for the token symbol ${assertUniqueTokenSymbol}.`

src/frontend/src/eth/components/tokens/AddTokenReview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { isNullish } from '@dfinity/utils';
+	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import { erc20Tokens } from '$eth/derived/erc20.derived';
@@ -41,9 +41,11 @@
 		}
 
 		if (
-			$erc20Tokens?.find(
-				({ address }) => address.toLowerCase() === contractAddress?.toLowerCase()
-			) !== undefined
+			nonNullish(
+				$erc20Tokens?.find(
+					({ address }) => address.toLowerCase() === contractAddress?.toLowerCase()
+				)
+			)
 		) {
 			toastsError({
 				msg: { text: $i18n.tokens.error.already_available }
@@ -67,11 +69,13 @@
 			}
 
 			if (
-				$erc20Tokens?.find(
-					({ symbol, name }) =>
-						symbol.toLowerCase() === (metadata?.symbol.toLowerCase() ?? '') ||
-						name.toLowerCase() === (metadata?.name.toLowerCase() ?? '')
-				) !== undefined
+				nonNullish(
+					$erc20Tokens?.find(
+						({ symbol, name }) =>
+							symbol.toLowerCase() === (metadata?.symbol.toLowerCase() ?? '') ||
+							name.toLowerCase() === (metadata?.name.toLowerCase() ?? '')
+					)
+				)
 			) {
 				toastsError({
 					msg: { text: $i18n.tokens.error.duplicate_metadata }

src/frontend/src/eth/derived/erc20.derived.ts

@@ -116,6 +116,7 @@ export const enabledErc20TokensAddresses: Readable<ContractAddressText[]> = deri
 
 export const erc20UserTokensInitialized: Readable<boolean> = derived(
 	[erc20UserTokensStore],
+	// eslint-disable-next-line local-rules/use-nullish-checks -- We want to check only for non-initiated state
 	([$erc20UserTokensStore]) => $erc20UserTokensStore !== undefined
 );
 

src/frontend/src/icp-eth/services/cketh.services.ts

@@ -23,6 +23,7 @@ export const loadCkEthMinterInfo = async ({
 	const minterInfoInStore = get(ckEthMinterInfoStore);
 
 	// We try to load only once per session the helpers (ckETH and ckErc20) contract addresses
+	// eslint-disable-next-line local-rules/use-nullish-checks -- We want to check for not-undefined values but null is allowed
 	if (minterInfoInStore?.[tokenId] !== undefined) {
 		return;
 	}

src/frontend/src/icp/services/ic-add-custom-tokens.service.ts

@@ -6,7 +6,7 @@ import { i18n } from '$lib/stores/i18n.store';
 import { toastsError } from '$lib/stores/toasts.store';
 import type { OptionIdentity } from '$lib/types/identity';
 import type { Identity } from '@dfinity/agent';
-import { assertNonNullish, isNullish } from '@dfinity/utils';
+import { assertNonNullish, isNullish, nonNullish } from '@dfinity/utils';
 import { get } from 'svelte/store';
 
 export interface ValidateTokenData {
@@ -99,11 +99,13 @@ const assertExistingTokens = ({
 	token: IcTokenWithoutId;
 }): { valid: boolean } => {
 	if (
-		icrcTokens.find(
-			({ symbol, name }) =>
-				symbol.toLowerCase() === token.symbol.toLowerCase() ||
-				name.toLowerCase() === token.name.toLowerCase()
-		) !== undefined
+		nonNullish(
+			icrcTokens.find(
+				({ symbol, name }) =>
+					symbol.toLowerCase() === token.symbol.toLowerCase() ||
+					name.toLowerCase() === token.name.toLowerCase()
+			)
+		)
 	) {
 		toastsError({
 			msg: { text: get(i18n).tokens.error.duplicate_metadata }
@@ -121,7 +123,7 @@ const assertAlreadyAvailable = ({
 }: {
 	icrcTokens: IcToken[];
 } & IcCanisters): { alreadyAvailable: boolean } => {
-	if (icrcTokens?.find(({ ledgerCanisterId: id }) => id === ledgerCanisterId) !== undefined) {
+	if (nonNullish(icrcTokens?.find(({ ledgerCanisterId: id }) => id === ledgerCanisterId))) {
 		toastsError({
 			msg: { text: get(i18n).tokens.error.already_available }
 		});

src/frontend/src/icp/utils/cketh-transactions.utils.ts

@@ -77,6 +77,8 @@ export const mapCkEthereumTransaction = ({
 		const memoInfo = nonNullish(memo) ? mintMemoInfo(memo) : undefined;
 
 		const from =
+			// TODO: Remove ESLint exception and use nullish checks
+			// eslint-disable-next-line local-rules/use-nullish-checks
 			memoInfo?.fromAddress !== undefined
 				? mapAddressStartsWith0x(memoInfo.fromAddress)
 				: undefined;
@@ -102,6 +104,8 @@ export const mapCkEthereumTransaction = ({
 		const burnMemo = burnMemoInfo(memo);
 
 		const to =
+			// TODO: Remove ESLint exception and use nullish checks
+			// eslint-disable-next-line local-rules/use-nullish-checks
 			burnMemo?.toAddress !== undefined ? mapAddressStartsWith0x(burnMemo.toAddress) : undefined;
 
 		return {

src/frontend/src/lib/components/tokens/TokenBalanceSkeleton.svelte

@@ -5,6 +5,7 @@
 	export let token: TokenUi;
 </script>
 
+<!-- eslint-disable-next-line local-rules/use-nullish-checks -- We want to check for undefined and not null, since they mean different situations -->
 {#if token.balance === undefined}
 	<span class="w-full max-w-[100px] mt-2"><SkeletonText /></span>
 {:else}

src/frontend/src/lib/components/tokens/TokenExchangeValueSkeleton.svelte

@@ -6,6 +6,7 @@
 	export let token: TokenUi;
 </script>
 
+<!-- eslint-disable-next-line local-rules/use-nullish-checks -- We want to check for undefined and not null, since they mean different situations -->
 {#if token.balance === undefined || !$exchangeInitialized}
 	<span class="w-full max-w-[50px]"><SkeletonText /></span>
 {:else}

src/frontend/src/lib/components/ui/Json.svelte

@@ -21,6 +21,7 @@
 		| 'undefined';
 
 	const getValueType = (value: unknown): ValueType => {
+		// eslint-disable-next-line local-rules/use-nullish-checks -- We want to check for null and not undefined
 		if (value === null) {
 			return 'null';
 		}

src/frontend/src/lib/derived/auth.derived.ts

@@ -4,6 +4,8 @@ import { derived, type Readable } from 'svelte/store';
 
 export const authSignedIn: Readable<boolean> = derived(
 	authStore,
+	// TODO: Remove ESLint exception and use nullish checks
+	// eslint-disable-next-line local-rules/use-nullish-checks
 	({ identity }) => identity !== null && identity !== undefined
 );
 

src/frontend/src/lib/utils/certified-store.utils.ts

@@ -2,4 +2,5 @@ import type { CertifiedData } from '$lib/types/store';
 import type { Option } from '$lib/types/utils';
 
 export const mapCertifiedData = <T>(certifiedData: Option<CertifiedData<T>>): Option<T> =>
+	// eslint-disable-next-line local-rules/use-nullish-checks -- We need to check for null explicitly, since it is the scope of this function.
 	certifiedData === null ? null : certifiedData?.data;

src/frontend/src/lib/utils/json.utils.ts

@@ -1,9 +1,10 @@
 import type { Principal } from '@dfinity/principal';
+import { isNullish } from '@dfinity/utils';
 
 // e.g. payloads.did/state_hash
 export const isHash = (bytes: number[]): boolean =>
 	bytes.length === 32 &&
-	bytes.find((value) => !Number.isInteger(value) || value < 0 || value > 255) === undefined;
+	isNullish(bytes.find((value) => !Number.isInteger(value) || value < 0 || value > 255));
 
 // Convert a byte array to a hex string
 const bytesToHexString = (bytes: number[]): string =>
@@ -58,6 +59,8 @@ export const stringifyJson = ({
 					break;
 				}
 				case 'bigint': {
+					// TODO: Remove ESLint exception and use nullish checks
+					// eslint-disable-next-line local-rules/use-nullish-checks
 					if (options?.devMode !== undefined && options.devMode) {
 						return `BigInt('${value.toString()}')`;
 					}

src/frontend/src/lib/utils/nav.utils.ts

@@ -73,6 +73,8 @@ export const loadRouteParams = ($event: LoadEvent): RouteParams => {
 	const token = searchParams?.get('token');
 
 	const replaceEmoji = (input: string | null): string | null => {
+		// TODO: Remove ESLint exception and use nullish checks
+		// eslint-disable-next-line local-rules/use-nullish-checks
 		if (input === null) {
 			return null;
 		}

src/frontend/src/lib/utils/route.utils.ts

@@ -15,6 +15,8 @@ export const replaceHistory = (url: URL) => {
  * Source: https://stackoverflow.com/a/6825002/5404186
  */
 const supportsHistory = (): boolean =>
+	// TODO: Remove ESLint exception and use nullish checks
+	// eslint-disable-next-line local-rules/use-nullish-checks
 	window.history !== undefined &&
 	'pushState' in window.history &&
 	typeof window.history.pushState !== 'undefined';

src/frontend/src/lib/workers/auth.worker.ts

@@ -38,6 +38,8 @@ const onIdleSignOut = async () => {
 	const [auth, chain] = await Promise.all([checkAuthentication(), checkDelegationChain()]);
 
 	// Both identity and delegation are alright, so all good
+	// TODO: Remove ESLint exception and use nullish checks
+	// eslint-disable-next-line local-rules/use-nullish-checks
 	if (auth && chain.valid && chain.delegation !== null) {
 		emitExpirationTime(chain.delegation);
 		return;
@@ -68,9 +70,13 @@ const checkDelegationChain = async (): Promise<{
 	const idbStorage: IdbStorage = new IdbStorage();
 	const delegationChain: string | null = await idbStorage.get(KEY_STORAGE_DELEGATION);
 
+	// TODO: Remove ESLint exception and use nullish checks
+	// eslint-disable-next-line local-rules/use-nullish-checks
 	const delegation = delegationChain !== null ? DelegationChain.fromJSON(delegationChain) : null;
 
 	return {
+		// TODO: Remove ESLint exception and use nullish checks
+		// eslint-disable-next-line local-rules/use-nullish-checks
 		valid: delegation !== null && isDelegationValid(delegation),
 		delegation
 	};
@@ -88,6 +94,8 @@ const emitExpirationTime = (delegation: DelegationChain) => {
 	const expirationTime: bigint | undefined = delegation.delegations[0]?.delegation.expiration;
 
 	// That would be unexpected here because the delegation has just been tested and is valid
+	// TODO: Remove ESLint exception and use nullish checks
+	// eslint-disable-next-line local-rules/use-nullish-checks
 	if (expirationTime === undefined) {
 		return;
 	}

src/frontend/src/routes/(app)/transactions/+page.svelte

@@ -15,8 +15,7 @@
 			await goto('/');
 		}
 
-		const unknownNetwork =
-			$networks.find(({ id }) => id.description === $routeNetwork) === undefined;
+		const unknownNetwork = isNullish($networks.find(({ id }) => id.description === $routeNetwork));
 
 		if (unknownNetwork) {
 			await goto('/');

src/frontend/src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Spinner, Toasts } from '@dfinity/gix-components';
-	import { nonNullish } from '@dfinity/utils';
+	import { isNullish, nonNullish } from '@dfinity/utils';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 	import { browser } from '$app/environment';
@@ -75,7 +75,7 @@
 		}
 
 		// We want to display a spinner until the authentication is loaded. This to avoid a glitch when either the landing page or effective content (sign-in / sign-out) is presented.
-		if ($authStore === undefined) {
+		if (isNullish($authStore)) {
 			return;
 		}
 

src/frontend/src/tests/mocks/qr-generator.mock.ts

@@ -42,6 +42,7 @@ export const generateUrn = ({
 
 	const queryString = new URLSearchParams();
 	for (const [key, value] of Object.entries(params)) {
+		// eslint-disable-next-line local-rules/use-nullish-checks -- We want to check for not-undefined values but null is allowed
 		if (value !== undefined) {
 			queryString.append(key, value.toString());
 		}

vite.config.ts

@@ -1,3 +1,4 @@
+import { isNullish, nonNullish } from '@dfinity/utils';
 import inject from '@rollup/plugin-inject';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { basename, dirname, resolve } from 'node:path';
@@ -36,16 +37,18 @@ const config: UserConfig = {
 					const lazy = ['@dfinity/nns', '@dfinity/nns-proto', 'html5-qrcode', 'qr-creator'];
 
 					if (
-						['@sveltejs', 'svelte', '@dfinity/gix-components', ...lazy].find((lib) =>
-							folder.includes(lib)
-						) === undefined &&
+						isNullish(
+							['@sveltejs', 'svelte', '@dfinity/gix-components', ...lazy].find((lib) =>
+								folder.includes(lib)
+							)
+						) &&
 						folder.includes('node_modules')
 					) {
 						return 'vendor';
 					}
 
 					if (
-						lazy.find((lib) => folder.includes(lib)) !== undefined &&
+						nonNullish(lazy.find((lib) => folder.includes(lib))) &&
 						folder.includes('node_modules')
 					) {
 						return 'lazy';

vite.utils.ts

@@ -53,6 +53,8 @@ const readRemoteCanisterIds = ({ prefix }: { prefix?: string }): Record<string,
 		return Object.entries(canisters).reduce((acc, current: [string, Details]) => {
 			const [canisterName, canisterDetails] = current;
 
+			// TODO: Remove ESLint exception and use nullish checks
+			// eslint-disable-next-line local-rules/use-nullish-checks
 			if (canisterDetails.remote !== undefined) {
 				const ids = Object.entries(canisterDetails.remote.id).reduce(
 					(acc, [network, id]) => ({