feat: iome setup and formatting (#243)

Co-authored-by: Rosco Kalis <[email protected]>

.github/workflows/prettier.yml → .github/workflows/biome.yml

@@ -1,12 +1,11 @@
-name: Prettier Linter check
-
+name: Biome Format and linter check
 on:
   push:
   pull_request:
     branches: [master]
 
 jobs:
-  prettier:
+  biome:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -20,5 +19,5 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      - name: Run Prettier
-        run: yarn prettier --check .
+      - name: Run Biome
+        run: yarn lint

.gitignore

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

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit $1

.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/ThemeScript.tsx

@@ -10,6 +10,7 @@ const ThemeScript = () => {
     })()
   `;
 
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: the theme script only works with dangerouslySetInnerHTML
   return <script dangerouslySetInnerHTML={{ __html: themeScript }} />;
 };
 

app/[locale]/[...rest]/page.tsx

@@ -1,4 +1,4 @@
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
 import { notFound } from 'next/navigation';
 
 const CatchAllPage: NextPage = () => {

app/[locale]/address/[addressOrName]/layout.tsx

@@ -5,7 +5,7 @@ import NextIntlClientProvider from 'lib/i18n/NextIntlClientProvider';
 import { getAddressAndDomainName } from 'lib/utils/whois';
 import { getMessages, unstable_setRequestLocale } from 'next-intl/server';
 import { notFound } from 'next/navigation';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;

app/[locale]/blog/[...slug]/layout.tsx

@@ -4,11 +4,11 @@ import PageNavigation from 'components/common/PageNavigation';
 import Prose from 'components/common/Prose';
 import TranslateButton from 'components/common/TranslateButton';
 import ArticleMeta from 'components/learn/ArticleMeta';
-import { BreadcrumbEntry } from 'lib/interfaces';
+import type { BreadcrumbEntry } from 'lib/interfaces';
 import { getSidebar, getTranslationUrl, readAndParseContentFile } from 'lib/utils/markdown-content';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import Image from 'next/image';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 interface Props {
   params: {

app/[locale]/blog/[...slug]/page.tsx

@@ -1,7 +1,7 @@
 import MarkdownProse from 'components/common/MarkdownProse';
 import { locales } from 'lib/i18n/config';
 import { getAllContentSlugs, readAndParseContentFile } from 'lib/utils/markdown-content';
-import { Metadata, NextPage } from 'next';
+import type { Metadata, NextPage } from 'next';
 import { unstable_setRequestLocale } from 'next-intl/server';
 
 interface Props {

app/[locale]/blog/layout.tsx

@@ -1,6 +1,6 @@
 import SharedLayout from 'app/layouts/SharedLayout';
 import { unstable_setRequestLocale } from 'next-intl/server';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;

app/[locale]/blog/page.tsx

@@ -1,7 +1,7 @@
 import ArticleCard from 'components/learn/ArticleCard';
 import { getSidebar } from 'lib/utils/markdown-content';
 import { getOpenGraphImageUrl } from 'lib/utils/og';
-import { Metadata, NextPage } from 'next';
+import type { Metadata, NextPage } from 'next';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 interface Props {

app/[locale]/disclaimer/page.tsx

@@ -1,7 +1,7 @@
 import ContentPageLayout from 'app/layouts/ContentPageLayout';
 import MarkdownProse from 'components/common/MarkdownProse';
 import { readAndParseContentFile } from 'lib/utils/markdown-content';
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
 import { unstable_setRequestLocale } from 'next-intl/server';
 
 interface Props {

app/[locale]/exploits/[slug]/ExploitChecker.tsx

@@ -3,9 +3,9 @@
 import AddressForm from 'components/exploits/AddressForm';
 import ExploitChecker from 'components/exploits/ExploitChecker';
 import { AddressPageContextProvider } from 'lib/hooks/page-context/AddressPageContext';
-import { Exploit, getUniqueChainIds } from 'lib/utils/exploits';
+import { type Exploit, getUniqueChainIds } from 'lib/utils/exploits';
 import { Suspense, useMemo, useState } from 'react';
-import { Address } from 'viem';
+import type { Address } from 'viem';
 
 interface Props {
   exploit: Exploit;

app/[locale]/exploits/[slug]/page.tsx

@@ -9,7 +9,7 @@ import NextIntlClientProvider from 'lib/i18n/NextIntlClientProvider';
 import { locales } from 'lib/i18n/config';
 import { formatExploitAmount, getAllExploits } from 'lib/utils/exploits';
 import { getOpenGraphImageUrl } from 'lib/utils/og';
-import { Metadata } from 'next';
+import type { Metadata } from 'next';
 import { getMessages, getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import ExploitCheckerWrapper from './ExploitChecker';
 

app/[locale]/exploits/page.tsx

@@ -5,7 +5,7 @@ import ExploitCard from 'components/exploits/ExploitCard';
 import ReportExploitButton from 'components/exploits/ReportExploitButton';
 import { getAllExploits, getGlobalExploitStats } from 'lib/utils/exploits';
 import { getOpenGraphImageUrl } from 'lib/utils/og';
-import { Metadata, NextPage } from 'next';
+import type { Metadata, NextPage } from 'next';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 interface Props {

app/[locale]/layout.tsx

@@ -10,7 +10,7 @@ import { EthereumProvider } from 'lib/hooks/ethereum/EthereumProvider';
 import { ColorThemeProvider } from 'lib/hooks/useColorTheme';
 import NextIntlClientProvider from 'lib/i18n/NextIntlClientProvider';
 import { locales } from 'lib/i18n/config';
-import { Metadata } from 'next';
+import type { Metadata } from 'next';
 import { useMessages } from 'next-intl';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';

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

@@ -2,7 +2,7 @@ import LearnLayout from 'app/layouts/LearnLayout';
 import MarkdownProse from 'components/common/MarkdownProse';
 import { locales } from 'lib/i18n/config';
 import { getAllContentSlugs, getSidebar, getTranslationUrl, readAndParseContentFile } from 'lib/utils/markdown-content';
-import { Metadata, NextPage } from 'next';
+import type { Metadata, NextPage } from 'next';
 import { unstable_setRequestLocale } from 'next-intl/server';
 
 interface Props {

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

@@ -5,7 +5,7 @@ import ArticleCardSection from 'components/learn/ArticleCardSection';
 import { locales } from 'lib/i18n/config';
 import { getAllLearnCategories, getSidebar } from 'lib/utils/markdown-content';
 import { getOpenGraphImageUrl } from 'lib/utils/og';
-import { Metadata, NextPage } from 'next';
+import type { Metadata, NextPage } from 'next';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 interface Props {
@@ -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]/learn/page.tsx

@@ -4,7 +4,7 @@ import Prose from 'components/common/Prose';
 import ArticleCardSection from 'components/learn/ArticleCardSection';
 import { getSidebar } from 'lib/utils/markdown-content';
 import { getOpenGraphImageUrl } from 'lib/utils/og';
-import { Metadata, NextPage } from 'next';
+import type { Metadata, NextPage } from 'next';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 interface Props {

app/[locale]/learn/wallets/add-network/[slug]/AddNetworkButton.tsx

@@ -4,7 +4,7 @@ import Button from 'components/common/Button';
 import ConnectButton from 'components/header/ConnectButton';
 import { useSwitchChain } from 'lib/hooks/ethereum/useSwitchChain';
 import { useMounted } from 'lib/hooks/useMounted';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useAccount } from 'wagmi';
 
 interface Props {

app/[locale]/learn/wallets/add-network/[slug]/page.tsx

@@ -6,7 +6,7 @@ import { locales } from 'lib/i18n/config';
 import { SUPPORTED_CHAINS, getChainIdFromSlug, getChainName, getChainSlug } from 'lib/utils/chains';
 import { getSidebar } from 'lib/utils/markdown-content';
 import { getOpenGraphImageUrl } from 'lib/utils/og';
-import { Metadata, NextPage } from 'next';
+import type { Metadata, NextPage } from 'next';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import Image from 'next/image';
 import AddNetworkChainSelect from './AddNetworkChainSelect';

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]/not-found.tsx

@@ -2,7 +2,7 @@ import { GlobeEuropeAfricaIcon, QuestionMarkCircleIcon } from '@heroicons/react/
 import ContentPageLayout from 'app/layouts/ContentPageLayout';
 import Href from 'components/common/Href';
 import NotFoundLink from 'components/common/NotFoundLink';
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import NotFoundLinkMyApprovals from './NotFoundLinkMyApprovals';
 

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) }} />
     </>
   );

app/[locale]/privacy-policy/page.tsx

@@ -1,7 +1,7 @@
 import ContentPageLayout from 'app/layouts/ContentPageLayout';
 import MarkdownProse from 'components/common/MarkdownProse';
 import { readAndParseContentFile } from 'lib/utils/markdown-content';
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
 import { unstable_setRequestLocale } from 'next-intl/server';
 
 interface Props {

app/[locale]/terms/page.tsx

@@ -1,7 +1,7 @@
 import ContentPageLayout from 'app/layouts/ContentPageLayout';
 import MarkdownProse from 'components/common/MarkdownProse';
 import { readAndParseContentFile } from 'lib/utils/markdown-content';
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
 import { unstable_setRequestLocale } from 'next-intl/server';
 
 interface Props {

app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerSearchBox.tsx

@@ -3,7 +3,7 @@
 import AddressSearchBox from 'components/common/AddressSearchBox';
 import Button from 'components/common/Button';
 import { useCsrRouter } from 'lib/i18n/csr-navigation';
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import { useRef, useState } from 'react';
 import { twMerge } from 'tailwind-merge';

app/[locale]/token-approval-checker/[slug]/page.tsx

@@ -5,7 +5,7 @@ import Prose from 'components/common/Prose';
 import { locales } from 'lib/i18n/config';
 import { SUPPORTED_CHAINS, getChainIdFromSlug, getChainName, getChainSlug } from 'lib/utils/chains';
 import { getOpenGraphImageUrl } from 'lib/utils/og';
-import { Metadata, NextPage } from 'next';
+import type { Metadata, NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import TokenApprovalCheckerChainSelect from './TokenApprovalCheckerChainSelect';