chore: update biome config and apply rules

- Disable some rules and move some other rules to "warn"
- Update lint-staged command
- Commit vscode workspace settings
- Fix all remaining errors or add biome-ignore comments where applicable
- Update exploit og image when >16 chains

.gitignore

@@ -66,3 +66,5 @@ certificates
 
 scripts/chainid-lookup.csv
 scripts/ledger-live-manifest.json
+
+!.vscode/settings.json

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "i18n-ally.localesPaths": ["locales", "lib/i18n"],
+  "i18n-ally.namespace": true,
+  "i18n-ally.keystyle": "nested",
+  "biome.enabled": true,
+  "[typescript][javascript][typescriptreact][javascriptreact][html][css][json][jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.formatOnSave": true
+}

app/[locale]/learn/[category]/page.tsx

@@ -59,7 +59,7 @@ const LearnSectionPage: NextPage<Props> = async ({ params }: Props) => {
         </p>
         {sidebar.map((entry) =>
           entry.path === `/learn/${params.category}` ? (
-            <ArticleCardSection key={entry.title} children={entry.children} />
+            <ArticleCardSection key={entry.title}>{entry.children}</ArticleCardSection>
           ) : null,
         )}
       </Prose>

app/[locale]/merchandise/ClaimCodesSection.tsx

@@ -23,7 +23,10 @@ const ClaimCodesSection = () => {
 
       <div className="not-prose flex flex-wrap gap-4">
         {codes.map((code) => (
-          <div className="border border-black dark:border-white rounded-lg p-4 flex flex-col items-center">
+          <div
+            key={code.code}
+            className="border border-black dark:border-white rounded-lg p-4 flex flex-col items-center"
+          >
             <div className="font-bold">{code.code}</div>
             <div className="text-sm text-zinc-500 dark:text-zinc-400">({shortenAddress(code.address, 4)})</div>
           </div>

app/[locale]/og.jpg/blog/route.tsx

@@ -21,8 +21,8 @@ export const generateStaticParams = () => {
 export async function GET(req: Request, { params }: Props) {
   const t = await getTranslations({ locale: params.locale });
 
-  const title = t(`blog.meta.title`);
-  const background = loadDataUrl(`public/assets/images/blog/cover.jpg`, 'image/jpeg');
+  const title = t('blog.meta.title');
+  const background = loadDataUrl('public/assets/images/blog/cover.jpg', 'image/jpeg');
 
   return generateOgImage({ title, background });
 }

app/[locale]/og.jpg/exploits/[slug]/route.tsx

@@ -1,5 +1,3 @@
-// Note: this file contains TypeScript errors, but these errors are incorrect. I'm not sure how to fix them.
-
 import { locales } from 'lib/i18n/config';
 import { getChainLogo, getChainName, isSupportedChain } from 'lib/utils/chains';
 import { formatExploitAmount, getAllExploits, getExploitBySlug, getUniqueChainIds } from 'lib/utils/exploits';
@@ -28,7 +26,9 @@ export async function GET(req: Request, { params }: Props) {
   const t = await getTranslations({ locale: params.locale });
   const exploit = await getExploitBySlug(params.slug, params.locale);
 
-  const numberOfChainsStr = t('exploits.meta.og.chains', { count: getUniqueChainIds(exploit).length });
+  const uniqueChainIds = getUniqueChainIds(exploit);
+
+  const numberOfChainsStr = t('exploits.meta.og.chains', { count: uniqueChainIds.length });
   const stolenAmountStr = t('exploits.meta.og.amount', { amount: formatExploitAmount(exploit.amount) });
 
   const response = (
@@ -38,21 +38,22 @@ export async function GET(req: Request, { params }: Props) {
       </div>
       <div style={{ display: 'flex', fontFamily: 'Inter' }}>
         <div>{exploit.date}</div>
-        <div tw="border-r border-black h-full mx-8"></div>
+        <div tw="border-r border-black h-full mx-8" />
         <div>{stolenAmountStr}</div>
-        <div tw="border-r border-black h-full mx-8"></div>
+        <div tw="border-r border-black h-full mx-8" />
         <div>{numberOfChainsStr}</div>
       </div>
-      <div tw="flex mt-8 mb-12">
-        {getUniqueChainIds(exploit).map((chainId, index) => (
-          <ChainLogo chainId={chainId} key={index} />
+      <div tw="flex mt-8 mb-12 items-center" style={{ display: 'flex', fontFamily: 'Inter' }}>
+        {uniqueChainIds.slice(0, 16).map((chainId) => (
+          <ChainLogo chainId={chainId} key={chainId} />
         ))}
+        {uniqueChainIds.length > 16 && <div tw="ml-1">{`+${uniqueChainIds.length - 16}`}</div>}
       </div>
       <div tw="flex items-center justify-center">
         <div tw="border-2 border-black bg-black text-white text-4xl py-4 px-10 h-[78px]">
           {t('exploits.meta.og.check')}
         </div>
-        <img src={icon as any} height="78" />
+        <img src={icon} height="78" alt="Revoke icon" />
       </div>
     </div>
   );

app/[locale]/og.jpg/exploits/route.tsx

@@ -21,8 +21,8 @@ export const generateStaticParams = () => {
 export async function GET(req: Request, { params }: Props) {
   const t = await getTranslations({ locale: params.locale });
 
-  const title = t(`exploits.meta.title`);
-  const background = loadDataUrl(`public/assets/images/exploits/cover.jpg`, 'image/jpeg');
+  const title = t('exploits.meta.title');
+  const background = loadDataUrl('public/assets/images/exploits/cover.jpg', 'image/jpeg');
 
   return generateOgImage({ title, background });
 }

app/[locale]/og.jpg/learn/faq/route.tsx

@@ -21,8 +21,8 @@ export const generateStaticParams = () => {
 export async function GET(req: Request, { params }: Props) {
   const t = await getTranslations({ locale: params.locale });
 
-  const title = t(`faq.meta.title`);
-  const background = loadDataUrl(`public/assets/images/learn/faq/cover.jpg`, 'image/jpeg');
+  const title = t('faq.meta.title');
+  const background = loadDataUrl('public/assets/images/learn/faq/cover.jpg', 'image/jpeg');
 
   return generateOgImage({ title, background });
 }

app/[locale]/og.jpg/learn/route.tsx

@@ -21,8 +21,8 @@ export const generateStaticParams = () => {
 export async function GET(req: Request, { params }: Props) {
   const t = await getTranslations({ locale: params.locale });
 
-  const title = t(`learn.meta.title`);
-  const background = loadDataUrl(`public/assets/images/learn/cover.jpg`, 'image/jpeg');
+  const title = t('learn.meta.title');
+  const background = loadDataUrl('public/assets/images/learn/cover.jpg', 'image/jpeg');
 
   return generateOgImage({ title, background });
 }

app/[locale]/og.jpg/learn/wallets/add-network/route.tsx

@@ -21,8 +21,8 @@ export const generateStaticParams = () => {
 export async function GET(req: Request, { params }: Props) {
   const t = await getTranslations({ locale: params.locale });
 
-  const title = t(`learn.add_network.sidebar_title`);
-  const background = loadDataUrl(`public/assets/images/learn/wallets/add-network/cover.jpg`, 'image/jpeg');
+  const title = t('learn.add_network.sidebar_title');
+  const background = loadDataUrl('public/assets/images/learn/wallets/add-network/cover.jpg', 'image/jpeg');
 
   return generateOgImage({ title, background });
 }

app/[locale]/og.jpg/token-approval-checker/[slug]/route.tsx

@@ -25,8 +25,8 @@ export async function GET(req: Request, { params }: Props) {
   const t = await getTranslations({ locale: params.locale });
 
   const chainName = getChainName(getChainIdFromSlug(params.slug));
-  const title = t(`token_approval_checker.meta.title`, { chainName });
-  const background = loadDataUrl(`public/assets/images/token-approval-checker/cover.jpg`, 'image/jpeg');
+  const title = t('token_approval_checker.meta.title', { chainName });
+  const background = loadDataUrl('public/assets/images/token-approval-checker/cover.jpg', 'image/jpeg');
 
   return generateOgImage({ title, background });
 }

app/[locale]/page.tsx

@@ -42,6 +42,7 @@ const LandingPage: NextPage<Props> = ({ params }) => {
           <LandingPageFaq />
         </div>
       </SharedLayout>
+      {/* biome-ignore lint/security/noDangerouslySetInnerHtml: JSON-LD needs to be injected using dangerouslySetInnerHTML */}
       <Script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
     </>
   );

biome.jsonc

@@ -0,0 +1,68 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": [".next", ".yarn", "public/assets", ".vercel"]
+  },
+  "formatter": {
+    "enabled": true,
+    "useEditorconfig": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 120,
+    "attributePosition": "auto",
+    "bracketSpacing": true
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "complexity": {
+        "noForEach": "off" // I prefer to use array methods
+      },
+      "correctness": {
+        "useExhaustiveDependencies": {
+          "level": "error",
+          "options": {
+            "hooks": [{ "name": "useTransactionStore", "stableResult": true }]
+          }
+        }
+      },
+      "performance": {
+        "noAccumulatingSpread": "warn" // I think this only warrants a warning, as it's not a super big deal in most cases
+      },
+      "suspicious": {
+        "noExplicitAny": "warn", // TODO: something to improve later
+        "noShadowRestrictedNames": "warn" // TODO: something to improve later
+      },
+      "style": {
+        "noInferrableTypes": "off", // I prefer to be explicit about types
+        "noNonNullAssertion": "off", // TODO: something to improve later
+        "useNodejsImportProtocol": "off" // Node.js imports seem not te be supported by Next.js
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "all",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "attributePosition": "auto",
+      "bracketSpacing": true
+    }
+  }
+}

components/allowances/controls/batch-revoke/BatchRevokeModalWithButton.tsx

@@ -20,6 +20,7 @@ const BatchRevokeModalWithButton = ({ table }: Props) => {
   const [open, setOpen] = useState(false);
   const { address, selectedChainId } = useAddressPageContext();
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to run this when the modal is opened
   const selectedAllowances = useMemo(() => {
     return table.getGroupedSelectedRowModel().flatRows.map((row) => row.original);
   }, [open]);
@@ -31,7 +32,7 @@ const BatchRevokeModalWithButton = ({ table }: Props) => {
 
   useEffect(() => {
     if (!open) pause();
-  }, [open]);
+  }, [open, pause]);
 
   const totalRevoked = Object.values(results).filter((result) => result.status === 'confirmed').length;
   const totalReverted = Object.values(results).filter((result) => result.status === 'reverted').length;

components/allowances/dashboard/AllowanceDashboard.tsx

@@ -5,13 +5,13 @@ import { ColumnId, columns } from 'components/allowances/dashboard/columns';
 import Table from 'components/common/table/Table';
 import { useAddressAllowances } from 'lib/hooks/page-context/AddressPageContext';
 import { isNullish } from 'lib/utils';
-import type { TokenAllowanceData } from 'lib/utils/allowances';
+import type { Erc721SingleAllowance, TokenAllowanceData } from 'lib/utils/allowances';
 import { useEffect, useMemo, useState } from 'react';
 import NoAllowancesFound from './NoAllowancesFound';
 import AllowanceTableControls from './controls/AllowanceTableControls';
 
 const getRowId = (row: TokenAllowanceData) => {
-  return `${row.chainId}-${row.contract.address}-${row.payload?.spender}-${(row.payload as any)?.tokenId}`;
+  return `${row.chainId}-${row.contract.address}-${row.payload?.spender}-${(row.payload as Erc721SingleAllowance)?.tokenId}`;
 };
 
 const AllowanceDashboard = () => {
@@ -52,8 +52,7 @@ const AllowanceDashboard = () => {
     getSortedRowModel: getSortedRowModel<TokenAllowanceData>(),
     getFilteredRowModel: getFilteredRowModel<TokenAllowanceData>(),
     getRowId,
-    // TODO: Because of declaration merging in @tanstack/table-core we can't have multiple custom fields and need to type as any
-    // See https://github.com/TanStack/table/discussions/4220
+    // biome-ignore lint/suspicious/noExplicitAny: Because of declaration merging in @tanstack/table-core we can't have multiple custom fields and need to type as any. See https://github.com/TanStack/table/discussions/4220
     meta: { onUpdate } as any,
     initialState: {
       sorting: [{ id: ColumnId.LAST_UPDATED, desc: true }],

components/allowances/dashboard/cells/AssetCell.tsx

@@ -13,17 +13,18 @@ interface Props {
 }
 
 const AssetCell = ({ asset }: Props) => {
-  const ref = useRef<any>(null);
+  const ref = useRef<HTMLAnchorElement>(null);
   const [showTooltip, setShowTooltip] = useState(false);
 
   // This is pretty hacky, but it works to detect that we're on the address page, so single chain usage
   const isOnAddressPage = typeof window !== 'undefined' && window.location.pathname.includes('/address/');
 
   useLayoutEffect(() => {
+    if (!ref.current) return;
     if (ref.current.clientWidth < ref.current.scrollWidth) {
       setShowTooltip(true);
     }
-  }, [ref]);
+  }, []);
 
   const explorerUrl = `${getChainExplorerUrl(asset.chainId)}/address/${asset.contract.address}`;
 

components/allowances/dashboard/columns.tsx

@@ -80,6 +80,12 @@ export const accessors = {
     if (isNullish(allowance.metadata.price)) return 0.01;
     return calculateValueAtRisk(allowance);
   },
+  spender: (allowance: TokenAllowanceData) => {
+    return allowance.payload?.spender;
+  },
+  timestamp: (allowance: TokenAllowanceData) => {
+    return allowance.payload?.lastUpdated?.timestamp;
+  },
 };
 
 export const customSortingFns = {
@@ -178,15 +184,15 @@ export const columns = [
     sortingFn: sortingFns.basic,
     sortUndefined: 'last',
   }),
-  columnHelper.accessor('payload.spender', {
+  columnHelper.accessor(accessors.spender, {
     id: ColumnId.SPENDER,
     header: () => <HeaderCell i18nKey="address.headers.spender" />,
     cell: (info) => <SpenderCell allowance={info.row.original} />,
     enableSorting: false,
     enableColumnFilter: true,
     filterFn: customFilterFns.spender,
   }),
-  columnHelper.accessor('payload.lastUpdated.timestamp', {
+  columnHelper.accessor(accessors.timestamp, {
     id: ColumnId.LAST_UPDATED,
     header: () => <HeaderCell i18nKey="address.headers.last_updated" />,
     cell: (info) => (

components/allowances/dashboard/controls/AllowanceSearchBox.tsx

@@ -40,7 +40,7 @@ const AllowanceSearchBox = ({ table }: Props) => {
     const tableFilters = tableFilter.value.length > 0 ? [tableFilter] : [];
     const ignoreIds = Object.values(ColumnId).filter((id) => id !== ColumnId.SPENDER);
     updateTableFilters(table, tableFilters, ignoreIds);
-  }, [searchValues]);
+  }, [table, searchValues]);
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
     const values = event.target.value.trim().split(',');

components/allowances/dashboard/controls/FilterSelect.tsx

@@ -70,7 +70,7 @@ const FilterSelect = ({ table }: Props) => {
     const tableFilters = generateTableFilters(options, selectedFilters);
     const ignoreIds = [ColumnId.SPENDER];
     updateTableFilters(table, tableFilters, ignoreIds);
-  }, [selectedFilters]);
+  }, [table, selectedFilters]);
 
   const displayOption = (option: Option, { selectValue }: FormatOptionLabelMeta<Option>) => {
     return (