fix(linter): fix issues from linter in packages/extension

packages/extension/src/App.tsx

@@ -109,7 +109,10 @@ const App: FC = () => {
 
   useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
-      const messageListener = (message: any, sender: chrome.runtime.MessageSender) => {
+      const messageListener = (
+        message: { app: string; type: string },
+        sender: chrome.runtime.MessageSender
+      ) => {
         if (message.app !== GEM_WALLET || sender.id !== chrome.runtime.id) {
           return; // exit early if the message is not from gem-wallet or the sender is not the extension itself
         }

packages/extension/src/chromeServices/background/index.ts

@@ -85,7 +85,7 @@ chrome.runtime.onStartup.addListener(createOffscreen);
 chrome.runtime.onMessage.addListener(() => {}); // keepAlive
 
 const session = Session.getInstance();
-let currentReceivingMessage: string | undefined = undefined; // For reject message on popup close
+let currentReceivingMessage: ReceiveMessage | undefined = undefined; // For reject message on popup close
 
 // Used to send a message to the view through the chrome.storage.local memory.
 // Useful when the data to send is big.
@@ -866,7 +866,14 @@ chrome.windows.onRemoved.addListener(function (windowId) {
   isPopupWindow(windowId).then((isPopup) => {
     if (isPopup && currentReceivingMessage) {
       const response = buildRejectMessage(currentReceivingMessage);
-      sendToActiveTabs(response);
+
+      if (!response) return;
+
+      sendToActiveTabs({
+        app: response.app,
+        type: response.type,
+        source: 'GEM_WALLET_MSG_REQUEST'
+      });
     }
   });
 });
@@ -909,7 +916,11 @@ chrome.runtime.onMessage.addListener((request, sender) => {
   }
 });
 
-const sendToActiveTabs = (payload: Omit<EventEventData, 'messageId'>) => {
+const sendToActiveTabs = (
+  payload: Pick<EventEventData, 'app' | 'payload' | 'source'> & {
+    type: string;
+  }
+) => {
   activeTabs.forEach((tabId) => {
     chrome.tabs.get(tabId, () => {
       if (!chrome.runtime.lastError) {

packages/extension/src/chromeServices/background/utils/focusOrCreatePopupWindow.ts

@@ -9,6 +9,8 @@ import {
 import { MAIN_FILE } from '../../../constants/paths';
 import { POPUP_HEIGHT, POPUP_WIDTH, WINDOWS_POPUP_PADDING } from '../../../constants/sizes';
 import { STORAGE_CURRENT_WINDOW_ID } from '../../../constants/storage';
+import { isBoolean, isString } from '../../../utils';
+import { isNumber } from 'xrpl/dist/npm/models/transactions/common';
 
 const isWindows = navigator.userAgent.includes('Win');
 
@@ -19,11 +21,20 @@ const isWindows = navigator.userAgent.includes('Win');
 const getLastFocusedWindow = (): Promise<chrome.windows.Window> =>
   new Promise((resolve) => chrome.windows.getLastFocused(resolve));
 
-export const serializeToQueryString = (payload?: Record<string, any>) =>
+/**
+ * Its a helper function to encode only compatible values
+ * Necessary to avoid types errors from TS
+ */
+const encodeOnlyCompatibleValueURIComponent = (uriComponent?: unknown) => {
+  if (isString(uriComponent) || isNumber(uriComponent) || isBoolean(uriComponent))
+    return encodeURIComponent(uriComponent);
+};
+
+export const serializeToQueryString = (payload?: Record<string, unknown | undefined>) =>
   payload
     ? '?' +
       Object.entries(payload)
-        .map(([key, value]) => [key, value].map(encodeURIComponent).join('='))
+        .map(([key, value]) => [key, value].map(encodeOnlyCompatibleValueURIComponent).join('='))
         .join('&')
     : '';
 

packages/extension/src/chromeServices/background/utils/rejectOnClose.ts

@@ -1,10 +1,16 @@
-import { GEM_WALLET } from '@gemwallet/constants';
+import { GEM_WALLET, ReceiveMessage } from '@gemwallet/constants';
 
 const defaultPayload = {
   result: null
 };
 
-export const buildRejectMessage = (type: string): any => {
+type RejectMessage = {
+  app: typeof GEM_WALLET;
+  type: ReceiveMessage;
+  payload: Record<string, unknown>;
+};
+
+export const buildRejectMessage = (type: ReceiveMessage): RejectMessage | undefined => {
   if (type === 'RECEIVE_SEND_PAYMENT/V3' || type === 'RECEIVE_PAYMENT_HASH') {
     return {
       app: GEM_WALLET,

packages/extension/src/components/molecules/DataCard/DataCard.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, ReactNode, useEffect, useRef, useState } from 'react';
 
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
@@ -7,7 +7,7 @@ import { IconButton, Paper, Typography } from '@mui/material';
 import { SECONDARY_GRAY } from '../../../constants';
 
 export interface DataCardProps {
-  formattedData: any;
+  formattedData: ReactNode;
   dataName?: string;
   isExpanded: boolean;
   setIsExpanded: (value: boolean) => void;

packages/extension/src/components/molecules/TransactionDisplay/TransactionDisplay.tsx

@@ -32,73 +32,90 @@ export const TransactionDisplay: FC<XRPLTxProps> = ({
   mainToken
 }) => {
   const { selectedWallet, wallets } = useWallet();
-  const keyMap: Record<string, (value: any) => JSX.Element | null> = {
-    TransactionType: (value: string) =>
+  const keyMap: Record<string, (value: unknown) => JSX.Element | null> = {
+    TransactionType: (value) =>
       renderSimpleText({
         title: 'Transaction Type',
-        value,
+        value: value as string,
         useLegacy
       }),
-    Amount: (value: Amount) =>
+    Amount: (value) =>
       renderAmount({
         title: 'Amount',
-        value,
+        value: value as Amount,
         useLegacy,
         mainToken,
         hasMultipleAmounts
       }),
-    Amount2: (value: Amount) =>
+    Amount2: (value) =>
       renderAmount({
         title: 'Amount 2',
-        value,
+        value: value as Amount,
         useLegacy,
         hasMultipleAmounts
       }),
-    Account: (value: string) =>
+    Account: (value) =>
       wallets[selectedWallet].publicAddress === value
         ? null
-        : renderSimpleText({ title: 'Account', value, hasTooltip: true, useLegacy }),
-    NFTokenID: (value: string) =>
-      renderSimpleText({ title: 'NFT', value, hasTooltip: true, useLegacy }),
-    DeliverMin: (value: Amount) =>
+        : renderSimpleText({
+            title: 'Account',
+            value: value as string,
+            hasTooltip: true,
+            useLegacy
+          }),
+    NFTokenID: (value) =>
+      renderSimpleText({ title: 'NFT', value: value as string, hasTooltip: true, useLegacy }),
+    DeliverMin: (value) =>
       renderAmount({
         title: 'Deliver Min',
-        value,
+        value: value as Amount,
         useLegacy
       }),
-    Destination: (value: string) =>
-      renderSimpleText({ title: 'Destination', value, hasTooltip: true, useLegacy }),
-    DestinationTag: (value?: number) =>
-      renderSimpleText({ title: 'Destination Tag', value, useLegacy }),
-    Flags: (value?: GlobalFlags) =>
+    Destination: (value) =>
+      renderSimpleText({
+        title: 'Destination',
+        value: value as string,
+        hasTooltip: true,
+        useLegacy
+      }),
+    DestinationTag: (value?) =>
+      renderSimpleText({ title: 'Destination Tag', value: value as number | undefined, useLegacy }),
+    Flags: (value?) =>
       value !== undefined
         ? renderSimpleText({
             title: 'Flags',
-            value: formatFlags(value, tx.TransactionType),
+            value: formatFlags(value as GlobalFlags, tx.TransactionType),
             useLegacy
           })
         : null,
-    Memos: (value?: Memo[]) => renderMemos({ memos: value, useLegacy }),
-    NFTokenOffers: (value: string[]) => renderArray({ title: 'Offer', value, useLegacy }),
-    Signers: (value?: Signer[]) => renderArray({ title: 'Signer', value, useLegacy }),
+    Memos: (value?) => renderMemos({ memos: value as Memo[] | undefined, useLegacy }),
+    NFTokenOffers: (value) => renderArray({ title: 'Offer', value: value as string[], useLegacy }),
+    Signers: (value?) =>
+      renderArray({ title: 'Signer', value: value as Signer[] | undefined, useLegacy }),
     LimitAmount: (value) =>
       renderAmount({
         title: 'Limit Amount',
         value: value as Amount,
         useLegacy,
         mainToken
       }),
-    NFTokenSellOffer: (value?: string) =>
-      value !== undefined ? renderSimpleText({ title: 'Sell Offer', value, useLegacy }) : null,
-    NFTokenBuyOffer: (value?: string) =>
-      value !== undefined ? renderSimpleText({ title: 'Buy Offer', value, useLegacy }) : null,
-    NFTokenBrokerFee: (value?: Amount) =>
+    NFTokenSellOffer: (value?) =>
+      value !== undefined
+        ? renderSimpleText({ title: 'Sell Offer', value: value as string, useLegacy })
+        : null,
+    NFTokenBuyOffer: (value?) =>
+      value !== undefined
+        ? renderSimpleText({ title: 'Buy Offer', value: value as string, useLegacy })
+        : null,
+    NFTokenBrokerFee: (value?) =>
+      value !== undefined
+        ? renderAmount({ title: 'Broker Fee', value: value as Amount, useLegacy, mainToken })
+        : null,
+    NFTokenMinter: (value?) =>
       value !== undefined
-        ? renderAmount({ title: 'Broker Fee', value, useLegacy, mainToken })
+        ? renderSimpleText({ title: 'Minter', value: value as string | undefined, useLegacy })
         : null,
-    NFTokenMinter: (value?: string) =>
-      value !== undefined ? renderSimpleText({ title: 'Minter', value, useLegacy }) : null,
-    URI: (value?: string | null) =>
+    URI: (value?) =>
       value !== undefined
         ? renderSimpleText({
             title: 'URI',
@@ -108,36 +125,43 @@ export const TransactionDisplay: FC<XRPLTxProps> = ({
           })
         : null,
     Fee: () => null, // Fee is rendered in the BaseTransaction component
-    TakerGets: (value: Amount) =>
-      renderAmount({ title: 'Taker Gets', value, useLegacy, mainToken }),
-    TakerPays: (value: Amount) =>
-      renderAmount({ title: 'Taker Pays', value, useLegacy, mainToken }),
-    TransferFee: (value?: number) =>
+    TakerGets: (value) =>
+      renderAmount({ title: 'Taker Gets', value: value as Amount, useLegacy, mainToken }),
+    TakerPays: (value) =>
+      renderAmount({ title: 'Taker Pays', value: value as Amount, useLegacy, mainToken }),
+    TransferFee: (value?) =>
       renderSimpleText({
         title: 'Transfer Fee',
-        value: value ? `${formatTransferFee(value)}%` : '',
+        value: value ? `${formatTransferFee(value as number)}%` : '',
         useLegacy
       }),
-    OfferSequence: (value?: number) =>
-      renderSimpleText({ title: 'Offer Sequence', value, useLegacy }),
-    EmailHash: (value?: string) => renderSimpleText({ title: 'Email Hash', value, useLegacy }),
-    NFTokenTaxon: (value?: string) => renderSimpleText({ title: 'Taxon', value, useLegacy }),
-    RegularKey: (value?: string) =>
-      renderSimpleText({ title: 'Regular Key', value, hasTooltip: true, useLegacy }),
-    Asset: (value: Currency) => renderCurrency({ title: 'Asset', value }),
-    Asset2: (value: Currency) => renderCurrency({ title: 'Asset 2', value }),
-    SendMax: (value: Amount) =>
+    OfferSequence: (value?) =>
+      renderSimpleText({ title: 'Offer Sequence', value: value as number | undefined, useLegacy }),
+    EmailHash: (value?) =>
+      renderSimpleText({ title: 'Email Hash', value: value as string | undefined, useLegacy }),
+    NFTokenTaxon: (value?) =>
+      renderSimpleText({ title: 'Taxon', value: value as string | undefined, useLegacy }),
+    RegularKey: (value?) =>
+      renderSimpleText({
+        title: 'Regular Key',
+        value: value as string | undefined,
+        hasTooltip: true,
+        useLegacy
+      }),
+    Asset: (value) => renderCurrency({ title: 'Asset', value: value as Currency }),
+    Asset2: (value) => renderCurrency({ title: 'Asset 2', value: value as Currency }),
+    SendMax: (value) =>
       renderAmount({
         title: 'Send Max',
-        value,
+        value: value as Amount,
         useLegacy
       }),
-    Hooks: (value?: Hook[]) => renderHooks({ hooks: value })
+    Hooks: (value?) => renderHooks({ hooks: value as Hook[] | undefined })
   };
 
   const renderSimpleText = (params: {
     title: string;
-    value: any;
+    value: string | number | undefined;
     hasTooltip?: boolean;
     useLegacy: boolean;
   }): JSX.Element | null => {

packages/extension/src/components/pages/SendPayment/PreparePayment/PreparePayment.tsx

@@ -146,7 +146,7 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
         } else {
           setErrorTokens("Impossible to fetch tokens, we couldn't get your current wallet");
         }
-      } catch (e: any) {
+      } catch (e) {
         setErrorTokens('Impossible to fetch tokens, please try again');
         Sentry.captureException(e);
       }

packages/extension/src/components/pages/SubmitBulkTransactions/RecapView/RecapView.tsx

@@ -9,8 +9,8 @@ import { TransactionPage } from '../../../templates';
 
 interface RecapProps {
   transactionsListParam: TransactionWithID[];
-  estimatedFees: any;
-  errorFees: any;
+  estimatedFees: string;
+  errorFees: string | undefined;
   hasEnoughFunds: boolean;
   handleReject: () => void;
   beginProcess: () => void;

packages/extension/src/components/pages/SubmitBulkTransactions/StepperView/StepperView.tsx

@@ -100,21 +100,25 @@ export const StepperView: FC<StepperViewProps> = ({
         const URI = NFTInfo.result.uri;
 
         resolveNFTDataFromURI(URI, index, amount);
-      } catch (error) {}
+      } catch (error) {
+        // nothing
+      }
     };
     const resolveNFTDataFromNFTOfferID = async (NFTOfferID: string, index: number) => {
       try {
         const ledgerEntry = await getLedgerEntry(NFTOfferID);
-        const NFTokenID = (ledgerEntry?.result?.node as any)?.NFTokenID;
+        const NFTokenID = ledgerEntry?.result?.node?.NFTokenID;
         if (!NFTokenID) return;
 
-        const amount = (ledgerEntry?.result?.node as any)?.Amount;
+        const amount = ledgerEntry?.result?.node?.Amount;
 
         resolveNFTDataFromNFTokenID(NFTokenID, index, amount);
-      } catch (error) {}
+      } catch (error) {
+        // nothing
+      }
     };
-    for (let key in transactionsToDisplay) {
-      if (transactionsToDisplay.hasOwnProperty(key)) {
+    for (const key in transactionsToDisplay) {
+      if (Object.prototype.hasOwnProperty.call(transactionsToDisplay, key)) {
         if (transactionsToDisplay[key].TransactionType === 'NFTokenMint') {
           // We can only resolve using the URI. No NFT data since the NFT does not exist
           const URI = (transactionsToDisplay[key] as NFTokenMint).URI;