Add make lint and lint

Makefile

@@ -1,5 +1,4 @@
-all:
-	make web & make docs & make bridge
+all: web docs bridge
 
 web:
 	yarn workspace @app/web dev --port 3000
@@ -9,3 +8,11 @@ docs:
 
 bridge:
 	yarn workspace @app/bridge dev --port 3002
+
+lint: lint-web lint-bridge
+
+lint-web:
+	yarn workspace @app/web lint
+
+lint-bridge:
+	yarn workspace @app/bridge lint

apps/bridge/pages/_app.tsx

@@ -1,7 +1,6 @@
 import './global.css';
 import '@rainbow-me/rainbowkit/styles.css';
 
-// eslint-disable-next-line @cbhq/react-prefer-named-module-import
 import React, { Fragment } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import Bugsnag from '@bugsnag/js';
@@ -19,7 +18,6 @@ import getConfig from 'next/config';
 import { useRouter } from 'next/router';
 import { WagmiConfig } from 'wagmi';
 
-const DEFAULT_LOCALE = 'en';
 const { publicRuntimeConfig } = getConfig();
 
 if (publicRuntimeConfig.bugsnagApiKey) {

apps/bridge/src/components/BridgeInput/BridgeInput.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useRef } from 'react';
+import { Dispatch, SetStateAction, useCallback, useRef } from 'react';
 import { ArrowRightIcon } from '@heroicons/react/24/outline';
 import { AssetList } from 'apps/bridge/src/components/AssetList/AssetList';
 import { Asset, CustomChain } from 'apps/bridge/src/types/Asset';
@@ -82,13 +82,15 @@ export function BridgeInput({
     setAmount(e.target.value);
   }
 
-  function handleChangeAsset(asset: Asset) {
-    return () => {
-      onClose();
-      setSelectedAsset(asset);
-      setAmount('0');
-    };
-  }
+  const handleChangeAsset = useCallback(
+    (asset: Asset) => {
+      return () => {
+        onClose();
+        setSelectedAsset(asset);
+        setAmount('0');
+      };
+    }
+    , [onClose, setAmount, setSelectedAsset]);
 
   function setMaxBalance() {
     setAmount((parseFloat(balance) * 0.99).toFixed(6).toString());
@@ -134,6 +136,7 @@ export function BridgeInput({
         </div>
       </div>
       <span className="mt-8 font-mono text-sm font-medium text-white">AMOUNT</span>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div
         className="flex max-w-[100vw] cursor-text flex-row items-center justify-between"
         onClick={handleFocus}

apps/bridge/src/components/Faq/FaqSidebar.tsx

@@ -15,19 +15,19 @@ export function FaqSidebar() {
       />
       <QuestionAccordion
         question="What if I have a question, issue or problem?"
-        answer={
+        answer={(
           <>
             The{' '}
             <a href="https://base.org/discord" className="underline">
               Base Discord
             </a>{' '}
             community is available around the clock for general questions, assistance and support!
           </>
-        }
+        )}
       />
       <QuestionAccordion
         question="How do you withdraw from Base?"
-        answer={
+        answer={(
           <div className="flex flex-col space-y-4">
             <p>
               Connect your wallet and confirm that it is set to Base network. Choose the digital
@@ -55,7 +55,7 @@ export function FaqSidebar() {
               .
             </p>
           </div>
-        }
+        )}
       />
     </div>
   );

apps/bridge/src/components/Transactions/DepositRow/DepositRow.tsx

@@ -33,9 +33,9 @@ export const DepositRow = memo(function WithdrawalRow({ transaction }: DepositRo
     : undefined;
   const dateMonthDayOnly = transaction.blockTimestamp
     ? new Date(Number(transaction.blockTimestamp) * 1000).toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-      })
+      month: 'short',
+      day: 'numeric',
+    })
     : undefined;
   const time = transaction.blockTimestamp
     ? new Date(Number(transaction.blockTimestamp) * 1000).toLocaleTimeString('en-US', {
@@ -55,7 +55,7 @@ export const DepositRow = memo(function WithdrawalRow({ transaction }: DepositRo
   const amountFiat =
     conversionRateData && depositAmount
       ? usdFormatter(conversionRateData * +depositAmount)
-      : `$0.00`;
+      : '$0.00';
 
   const { isLoading: isDepositLoading, isSuccess: isDepositSuccess } = useWaitForTransaction({
     chainId: parseInt(publicRuntimeConfig.l1ChainID),

apps/bridge/src/components/Transactions/WithdrawalRow/WithdrawalRow.tsx

@@ -60,9 +60,9 @@ export const WithdrawalRow = memo(function WithdrawalRow({
     : undefined;
   const dateMonthDayOnly = transaction.blockTimestamp
     ? new Date(Number(transaction.blockTimestamp) * 1000).toLocaleDateString('en-US', {
-        month: 'short',
-        day: 'numeric',
-      })
+      month: 'short',
+      day: 'numeric',
+    })
     : undefined;
   const time = transaction.blockTimestamp
     ? new Date(Number(transaction.blockTimestamp) * 1000).toLocaleTimeString('en-US', {
@@ -81,7 +81,7 @@ export const WithdrawalRow = memo(function WithdrawalRow({
   const amountFiat =
     conversionRateData && withdrawalAmount
       ? usdFormatter(conversionRateData * +withdrawalAmount)
-      : `$0.00`;
+      : '$0.00';
 
   const explorerURL =
     transaction.type === 'Deposit'

apps/bridge/src/http/fetchJSON.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-parameter-properties */
 export class HTTPError extends Error {
   constructor(
     readonly status: number,
@@ -53,6 +55,7 @@ export async function request<T>(
   const response = await fetch(fullURL, init);
 
   if (response.status >= 400) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const { error } = await response.json();
     throw new HTTPError(
       response.status,
@@ -65,6 +68,7 @@ export async function request<T>(
 
   return {
     status: response.status,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     body: response.ok ? await response.json() : null,
     headers: Object.fromEntries((response.headers as ResponseHeaders)?.entries() ?? []),
   };

apps/web/pages/api/auth.ts

@@ -3,5 +3,5 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 export default function handler(_: NextApiRequest, res: NextApiResponse) {
   res.setHeader('WWW-authenticate', 'Basic realm="Secure Area"');
   res.statusCode = 401;
-  res.end(`Auth Required.`);
+  res.end('Auth Required.');
 }

package.json

@@ -4,9 +4,9 @@
   "description": "Base web monorepo",
   "repository": "git@github.com::base-org/base-web.git",
   "license": "Apache-2.0",
-  "private": false,
   "scripts": {
-    "build": ""
+    "build": "",
+    "lint": "make lint"
   },
   "workspaces": [
     "apps/*",