fix(zero-warnings): tackle easy lint warnings #3

ui/helpers/higher-order-components/with-router-hooks/with-router-hooks.test.tsx

@@ -25,13 +25,9 @@ jest.mock('react-router-dom', () => ({
   useParams: () => getMockUseParams(),
 }));
 
-type BaseTestComponentProps = {
-  testProp?: string;
-};
+type TestComponentProps = RouterHooksProps;
 
-type TestComponentProps = BaseTestComponentProps & RouterHooksProps;
-
-const TestComponent: React.FC<TestComponentProps> = ({
+const TestComponent: React.FC<TestComponentProps & { testProp?: string }> = ({
   navigate,
   location,
   params,
@@ -83,7 +79,7 @@ describe('withRouterHooks HOC', () => {
   it('sets correct displayName for debugging', () => {
     const testComponentWithDisplayName: React.FC<TestComponentProps> = (
       props,
-    ) => <div>{props.testProp}</div>;
+    ) => <div>{props.navigate?.toString()}</div>;
     testComponentWithDisplayName.displayName = 'TestComponentWithDisplayName';
     const WrappedComponent = withRouterHooks(testComponentWithDisplayName);
     expect(WrappedComponent.displayName).toBe(
@@ -134,24 +130,24 @@ describe('withRouterHooks HOC', () => {
       // verifies that useShallowEqualityCheck stabilizes references when values match
       const paramsReferences: ReturnType<typeof useParams>[] = [];
 
-      const TestComponentForMemo: React.FC<
-        TestComponentProps & { renderCount?: number }
-      > = ({ params }) => {
+      const TestComponentForMemo: React.FC<TestComponentProps> = ({
+        params,
+      }) => {
         paramsReferences.push(params);
         return <div>Memoization test</div>;
       };
 
       const WrappedComponent = withRouterHooks(TestComponentForMemo);
       const { rerender } = render(
         <MemoryRouter>
-          <WrappedComponent renderCount={1} />
+          <WrappedComponent />
         </MemoryRouter>,
       );
 
       // Force re-render with different prop - getMockUseParams() returns new object
       rerender(
         <MemoryRouter>
-          <WrappedComponent renderCount={2} />
+          <WrappedComponent />
         </MemoryRouter>,
       );
 
@@ -164,17 +160,17 @@ describe('withRouterHooks HOC', () => {
       // Complementary test: verify memoization correctly detects value changes
       const paramsReferences: ReturnType<typeof useParams>[] = [];
 
-      const TestComponentForMemo: React.FC<
-        TestComponentProps & { renderCount?: number }
-      > = ({ params }) => {
+      const TestComponentForMemo: React.FC<TestComponentProps> = ({
+        params,
+      }) => {
         paramsReferences.push(params);
         return <div>Memoization test</div>;
       };
 
       const WrappedComponent = withRouterHooks(TestComponentForMemo);
       const { rerender } = render(
         <MemoryRouter>
-          <WrappedComponent renderCount={1} />
+          <WrappedComponent />
         </MemoryRouter>,
       );
 
@@ -183,7 +179,7 @@ describe('withRouterHooks HOC', () => {
 
       rerender(
         <MemoryRouter>
-          <WrappedComponent renderCount={2} />
+          <WrappedComponent />
         </MemoryRouter>,
       );
 
@@ -197,24 +193,24 @@ describe('withRouterHooks HOC', () => {
     it('maintains stable location reference when values are unchanged', () => {
       const locationReferences: ReturnType<typeof useLocation>[] = [];
 
-      const TestComponentForMemo: React.FC<
-        TestComponentProps & { renderCount?: number }
-      > = ({ location }) => {
+      const TestComponentForMemo: React.FC<TestComponentProps> = ({
+        location,
+      }) => {
         locationReferences.push(location);
         return <div>Memoization test</div>;
       };
 
       const WrappedComponent = withRouterHooks(TestComponentForMemo);
       const { rerender } = render(
         <MemoryRouter>
-          <WrappedComponent renderCount={1} />
+          <WrappedComponent />
         </MemoryRouter>,
       );
 
       // Force re-render with different prop
       rerender(
         <MemoryRouter>
-          <WrappedComponent renderCount={2} />
+          <WrappedComponent />
         </MemoryRouter>,
       );
 
@@ -278,9 +274,9 @@ describe('withRouterHooks HOC', () => {
       // We change the mock values (not props) to exercise useShallowEqualityCheck.
       const paramsReceived: ReturnType<typeof useParams>[] = [];
 
-      const TestComponentForMemo: React.FC<
-        TestComponentProps & { renderCount?: number }
-      > = ({ params }) => {
+      const TestComponentForMemo: React.FC<TestComponentProps> = ({
+        params,
+      }) => {
         paramsReceived.push(params);
         return <div>Comma collision test</div>;
       };
@@ -291,7 +287,7 @@ describe('withRouterHooks HOC', () => {
       const WrappedComponent = withRouterHooks(TestComponentForMemo);
       const { rerender } = render(
         <MemoryRouter>
-          <WrappedComponent renderCount={1} />
+          <WrappedComponent />
         </MemoryRouter>,
       );
 
@@ -300,7 +296,7 @@ describe('withRouterHooks HOC', () => {
 
       rerender(
         <MemoryRouter>
-          <WrappedComponent renderCount={2} />
+          <WrappedComponent />
         </MemoryRouter>,
       );
 
@@ -316,9 +312,9 @@ describe('withRouterHooks HOC', () => {
       // React Router changes key on every navigation, even to the same path.
       const locationsReceived: ReturnType<typeof useLocation>[] = [];
 
-      const TestComponentForMemo: React.FC<
-        TestComponentProps & { renderCount?: number }
-      > = ({ location }) => {
+      const TestComponentForMemo: React.FC<TestComponentProps> = ({
+        location,
+      }) => {
         locationsReceived.push(location);
         return <div>Location key test</div>;
       };
@@ -329,7 +325,7 @@ describe('withRouterHooks HOC', () => {
       const WrappedComponent = withRouterHooks(TestComponentForMemo);
       const { rerender } = render(
         <MemoryRouter>
-          <WrappedComponent renderCount={1} />
+          <WrappedComponent />
         </MemoryRouter>,
       );
 
@@ -338,7 +334,7 @@ describe('withRouterHooks HOC', () => {
 
       rerender(
         <MemoryRouter>
-          <WrappedComponent renderCount={2} />
+          <WrappedComponent />
         </MemoryRouter>,
       );
 

ui/pages/confirmations/components/confirm/info/shared/gas-fee-token-toast/gas-fee-token-toast.tsx

@@ -54,7 +54,7 @@ export function GasFeeTokenToast() {
       <Toast
         onClose={hideToast}
         text={t('confirmGasFeeTokenToast', [
-          <b>{selectedGasFeeToken?.symbol}</b>,
+          <b key="symbol">{selectedGasFeeToken?.symbol}</b>,
         ])}
         startAdornment={
           <>

ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign-v4-simulation/decoded-simulation/decoded-simulation.tsx

@@ -174,6 +174,7 @@ const DecodedSimulation: React.FC<object> = () => {
     return Object.entries(stateChangesGrouped).flatMap(([_, changeList]) =>
       changeList.map((change: DecodingDataStateChange, index: number) => (
         <StateChangeRow
+          key={`${change.changeType}-${change.assetType}-${index}`}
           stateChangeList={decodingData?.stateChanges ?? []}
           stateChange={change}
           chainId={chainId}

ui/pages/confirmations/components/confirm/row/typed-sign-data/typedSignData.tsx

@@ -16,7 +16,6 @@ export const ConfirmInfoRowTypedSignData = ({
   chainId,
 }: {
   data: string;
-  isPermit?: boolean;
   tokenDecimals?: number;
   chainId: string;
 }) => {

ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx

@@ -35,6 +35,7 @@ export const SnapInsight: React.FunctionComponent<SnapInsightProps> = ({
     <Text>
       {t('insightsFromSnap', [
         <Text
+          key="snap-name"
           fontWeight={FontWeight.Medium}
           variant={TextVariant.inherit}
           color={TextColor.inherit}

ui/pages/confirmations/components/send/recipient-filter-input/recipient-filter-input.tsx

@@ -14,7 +14,6 @@ import { useI18nContext } from '../../../../../hooks/useI18nContext';
 type RecipientFilterInputProps = {
   searchQuery: string;
   onChange: (value: string) => void;
-  placeholder?: string;
 };
 
 export const RecipientFilterInput = ({

ui/pages/permissions-connect/connect-page/connect-page.stories.tsx

@@ -84,7 +84,6 @@ export const Default: Story = {
     approveConnection: (request) => {
       console.log('Approved connection:', request);
     },
-    activeTabOrigin: 'https://metamask.github.io',
     targetSubjectMetadata: mockTargetSubjectMetadata,
   },
 };

ui/pages/permissions-connect/connect-page/connect-page.test.tsx

@@ -64,7 +64,6 @@ const render = (
       permissionsRequestId: '1',
       rejectPermissionsRequest: jest.fn(),
       approveConnection: jest.fn(),
-      activeTabOrigin: mockTestDappUrl,
       targetSubjectMetadata: mockTargetSubjectMetadata,
     },
     state,
@@ -116,7 +115,6 @@ describe('ConnectPage', () => {
         permissionsRequestId: '1',
         rejectPermissionsRequest: jest.fn(),
         approveConnection: jest.fn(),
-        activeTabOrigin: mockTestDappUrl,
         targetSubjectMetadata: {
           ...mockTargetSubjectMetadata,
           iconUrl: null,
@@ -135,7 +133,6 @@ describe('ConnectPage', () => {
         permissionsRequestId: '1',
         rejectPermissionsRequest: jest.fn(),
         approveConnection: jest.fn(),
-        activeTabOrigin: mockTestDappUrl,
         targetSubjectMetadata: {
           ...mockTargetSubjectMetadata,
           iconUrl: null,
@@ -266,7 +263,6 @@ describe('ConnectPage', () => {
         permissionsRequestId: '1',
         rejectPermissionsRequest: jest.fn(),
         approveConnection: jest.fn(),
-        activeTabOrigin: mockTestDappUrl,
         targetSubjectMetadata: mockTargetSubjectMetadata,
       },
     });
@@ -311,7 +307,6 @@ describe('ConnectPage', () => {
         permissionsRequestId: '1',
         rejectPermissionsRequest: jest.fn(),
         approveConnection: jest.fn(),
-        activeTabOrigin: mockTestDappUrl,
         targetSubjectMetadata: mockTargetSubjectMetadata,
       },
     });
@@ -352,7 +347,6 @@ describe('ConnectPage', () => {
         permissionsRequestId: '1',
         rejectPermissionsRequest: jest.fn(),
         approveConnection: jest.fn(),
-        activeTabOrigin: mockTestDappUrl,
         targetSubjectMetadata: mockTargetSubjectMetadata,
       },
     });
@@ -393,7 +387,6 @@ describe('ConnectPage', () => {
         permissionsRequestId: '1',
         rejectPermissionsRequest: jest.fn(),
         approveConnection: jest.fn(),
-        activeTabOrigin: mockTestDappUrl,
         targetSubjectMetadata: mockTargetSubjectMetadata,
       },
     });
@@ -438,7 +431,6 @@ describe('ConnectPage', () => {
         permissionsRequestId: '1',
         rejectPermissionsRequest: jest.fn(),
         approveConnection: jest.fn(),
-        activeTabOrigin: mockTestDappUrl,
         targetSubjectMetadata: mockTargetSubjectMetadata,
       },
     });

ui/pages/permissions-connect/connect-page/connect-page.tsx

@@ -111,7 +111,6 @@ export type ConnectPageProps = {
   permissionsRequestId: string;
   rejectPermissionsRequest: (id: string) => void;
   approveConnection: (request: ConnectPageRequest) => void;
-  activeTabOrigin: string;
   targetSubjectMetadata: {
     extensionId: string | null;
     iconUrl: string | null;

ui/pages/permissions-connect/permissions-connect.tsx

@@ -591,7 +591,6 @@ function PermissionsConnect() {
     const connectPageProps = {
       rejectPermissionsRequest: (requestId: string) =>
         cancelPermissionsRequest(requestId),
-      activeTabOrigin: origin,
       request: permissionsRequest || {},
       permissionsRequestId: permissionsRequestId || '',
       approveConnection,
@@ -601,7 +600,6 @@ function PermissionsConnect() {
     return <MultichainAccountsConnectPage {...connectPageProps} />;
   }, [
     cancelPermissionsRequest,
-    origin,
     permissionsRequest,
     permissionsRequestId,
     approveConnection,

ui/pages/settings/developer-options-tab/sentry-test.tsx

@@ -204,7 +204,7 @@ function GeneratePageCrash({ currentLocale }: { currentLocale: string }) {
       description={
         <span>
           Trigger the crash on extension to send user feedback to sentry. You
-          can click "Try again" to reload extension
+          can click &quot;Try again&quot; to reload extension
         </span>
       }
       onClick={handleClick}