fix: lint

app/root.tsx

@@ -2,9 +2,8 @@ import type { LinksFunction } from "@remix-run/node";
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
 import "./tailwind.css";
 import { DAppProvider } from "dappkit";
+import config from "../merkl.config";
 import styles from "./tailwind.css?url";
-import config from "../merkl.config"
-
 
 export const links: LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },

app/routes/_merkl.(home).tsx

@@ -1,6 +1,6 @@
 import type { MetaFunction } from "@remix-run/node";
 import { Outlet } from "@remix-run/react";
-import { type Coloring, Container, createColoring } from "dappkit";
+import { Container } from "dappkit";
 import Heading from "src/components/composite/Heading";
 import { http, createConfig } from "wagmi";
 import { mainnet, sepolia } from "wagmi/chains";

app/routes/_merkl.action.$action.tsx

@@ -4,9 +4,7 @@ import { Container } from "dappkit";
 import Heading from "src/components/composite/Heading";
 import { type Action, actions, getAction } from "src/config/actions";
 
-export async function loader({
-  params: { action: _action },
-}: LoaderFunctionArgs) {
+export async function loader({ params: { action: _action } }: LoaderFunctionArgs) {
   const action = getAction(_action ?? "");
 
   if (!action) throw new Error("Unknown action");

app/routes/_merkl.chain.$id.tsx

@@ -45,15 +45,18 @@ export function ErrorBoundary() {
 
   const networks = useMemo(() => {
     const a = Object.keys(chains);
-    return Object.entries(chains).reduce((supported, [chainId, chain]) => {
-      supported[chainId] = (
-        <Group>
-          <Icon size="sm" chain={chainId} />
-          {chain.label}
-        </Group>
-      );
-      return supported;
-    }, {} as { [C in ChainId]?: ReactNode });
+    return Object.entries(chains).reduce(
+      (supported, [chainId, chain]) => {
+        supported[chainId] = (
+          <Group>
+            <Icon size="sm" chain={chainId} />
+            {chain.label}
+          </Group>
+        );
+        return supported;
+      },
+      {} as { [C in ChainId]?: ReactNode },
+    );
   }, []);
 
   return (
@@ -63,7 +66,7 @@ export function ErrorBoundary() {
         {/* <Text h={3}>We don't support this chain</Text> */}
         <div>
           <Select
-            state={[undefined, (c) => navigate(`/chain/${chains?.[c]?.label}`)]}
+            state={[undefined, c => navigate(`/chain/${chains?.[c]?.label}`)]}
             placeholder="Supported Chains"
             options={networks}
           />

app/routes/_merkl.opportunity.$chain.$type.$id.tsx

@@ -1,9 +1,5 @@
 import type { Opportunity } from "@angleprotocol/merkl-api";
-import {
-  type LoaderFunctionArgs,
-  type MetaFunction,
-  json,
-} from "@remix-run/node";
+import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
 import { Meta, Outlet, useLoaderData, useParams } from "@remix-run/react";
 import { api } from "src/api";
 import Heading from "src/components/composite/Heading";
@@ -13,16 +9,12 @@ import Tag from "src/components/element/Tag";
 import { getChainId } from "src/config/chains";
 import useOpportunity from "src/hooks/resources/useOpportunity";
 
-export async function loader({
-  params: { id, type, chain },
-}: LoaderFunctionArgs) {
+export async function loader({ params: { id, type, chain } }: LoaderFunctionArgs) {
   const chainId = getChainId(chain ?? "");
 
   if (!chainId || !id || !type) throw "";
 
-  const { data: opportunity, ...res } = await api.v4
-    .opportunity({ chainId })({ type })({ id })
-    .get();
+  const { data: opportunity, ...res } = await api.v4.opportunity({ chainId })({ type })({ id }).get();
 
   if (!opportunity) throw "";
 
@@ -44,7 +36,7 @@ export default function Index() {
     <Container>
       <Meta />
       <Heading
-        icons={opportunity.tokens.map((t) => ({ src: t.icon }))}
+        icons={opportunity.tokens.map(t => ({ src: t.icon }))}
         navigation={{ label: "Back to opportunities", link: "/" }}
         title={opportunity.name}
         description={description}
@@ -53,15 +45,9 @@ export default function Index() {
           { label: "Leaderboard", link: `${link}/leaderboard` },
           { label: "Analytics", link: `${link}/analytics` },
         ]}
-        tags={tags.map((tag) => (
-          <Tag
-            key={`${tag.type}_${tag.value?.address ?? tag.value}`}
-            {...tag}
-            size="sm"
-            look="bold"
-          />
-        ))}
-      >
+        tags={tags.map(tag => (
+          <Tag key={`${tag.type}_${tag.value?.address ?? tag.value}`} {...tag} size="sm" look="bold" />
+        ))}>
         <Outlet />
       </Heading>
     </Container>

app/routes/_merkl.status.$status.tsx

@@ -4,9 +4,7 @@ import { Container } from "dappkit";
 import Heading from "src/components/composite/Heading";
 import { type Status, getStatus, statuses } from "src/config/status";
 
-export async function loader({
-  params: { status: _status },
-}: LoaderFunctionArgs) {
+export async function loader({ params: { status: _status } }: LoaderFunctionArgs) {
   const status = getStatus(_status ?? "");
 
   if (!status) throw new Error("Unknown status");

app/routes/_merkl.token.$symbol.tsx

@@ -37,8 +37,7 @@ export default function Index() {
         navigation={{ label: "Back to opportunities", link: "/" }}
         title={
           <>
-            {token.name}{" "}
-            <span className="font-mono text-main-8">({token.symbol})</span>
+            {token.name} <span className="font-mono text-main-8">({token.symbol})</span>
           </>
         }
         description={`Deposit or earn ${token.symbol} on ${config.appName}.`}

app/routes/_merkl.user.$address.(rewards).tsx

@@ -1,9 +1,8 @@
 import { useParams } from "@remix-run/react";
-import { Container } from "dappkit";
 import ClaimRewardsLibrary from "src/components/element/rewards/ClaimRewardsLibrary";
 
 export default function Index() {
   const { address } = useParams();
 
-  return <ClaimRewardsLibrary/>;
+  return <ClaimRewardsLibrary />;
 }

app/routes/_merkl.user.$address.tsx

@@ -45,8 +45,7 @@ export default function Index() {
             ),
             link: `/user/${address}/claims`,
           },
-        ]}
-      >
+        ]}>
         <Outlet />
       </Heading>
     </Container>

src/components/composite/Faq.tsx

@@ -1,8 +1,8 @@
-import type { FC } from "react";
 import { Container } from "dappkit";
 import Group from "dappkit/src/components/extenders/Group";
-import Title from "dappkit/src/components/primitives/Title";
 import Accordion from "dappkit/src/components/primitives/Accordion";
+import Title from "dappkit/src/components/primitives/Title";
+import type { FC } from "react";
 import { faqList } from "src/constants/faq";
 
 export type FAQ = {
@@ -11,14 +11,14 @@ export type FAQ = {
   key: string;
 };
 
-const FaqQuestions = faqList.map((faq) => faq.question);
+const FaqQuestions = faqList.map(faq => faq.question);
 
 export type FaqQuestion = (typeof FaqQuestions)[number];
 
 // Utility function to get specific FAQs by question
 export function getFaqsByQuestions(questions: FaqQuestion[]): FAQ[] {
   return questions.reduce<FAQ[]>((acc, question) => {
-    const faq = faqList.find((faq) => faq.question === question);
+    const faq = faqList.find(faq => faq.question === question);
     if (faq) {
       acc.push(faq);
     }
@@ -31,7 +31,7 @@ const Faq: FC<{
 }> = ({ faqs }) => {
   const faqData = getFaqsByQuestions(faqs);
 
-  const accordionItems = faqData.map((faq) => ({
+  const accordionItems = faqData.map(faq => ({
     trigger: faq.question,
     content: faq.answer,
     key: faq.key,
@@ -47,10 +47,7 @@ const Faq: FC<{
             </Title>
           </Group>
           <Group className="w-full lg:w-3/4">
-            <Accordion
-              items={accordionItems}
-              className="w-full flex flex-col"
-            />
+            <Accordion items={accordionItems} className="w-full flex flex-col" />
           </Group>
         </Group>
       </Container>

src/components/composite/layout/Container.tsx

@@ -1,7 +1,5 @@
 import type { PropsWithChildren } from "react";
 
 export default function Container({ children }: PropsWithChildren) {
-  return (
-    <div className="px-lg mx-auto w-full max-w-[1280px] h-full">{children}</div>
-  );
+  return <div className="px-lg mx-auto w-full max-w-[1280px] h-full">{children}</div>;
 }

src/components/element/campaign/CampaignTableRow.tsx

@@ -27,7 +27,11 @@ export default function CampaignTableRow({ campaign, startsOpen, className, ...p
           <Token token={campaign.rewardToken} amount={dailyRewards} />
         </Group>
       }
-      timeRemainingColumn={<Group className="py-xl"><Text>{time}</Text></Group>}
+      timeRemainingColumn={
+        <Group className="py-xl">
+          <Text>{time}</Text>
+        </Group>
+      }
       restrictionsColumn={[]}
       profileColumn={profile}
       arrowColumn={<Icon remix={!open ? "RiArrowDownSLine" : "RiArrowUpSLine"} />}>

src/components/element/rewards/ClaimRewardsLibrary.tsx

@@ -1,4 +1,4 @@
-import { Box, List } from "dappkit";
+import { List } from "dappkit";
 import { ClaimRewardsChainRow, ClaimRewardsChainTable } from "./ClaimRewardsChainTable";
 import { ClaimRewardsTokenRow, ClaimRewardsTokenTable } from "./ClaimRewardsTokenTable";
 

src/components/element/rewards/ClaimRewardsTokenTable.tsx

@@ -31,7 +31,7 @@ export type Rewards = {
         symbol: string;
         amount: number;
         price: number;
-      }
-    }
-  }
-}
+      };
+    };
+  };
+};

src/components/layout/Header.tsx

@@ -11,10 +11,7 @@ export default function Header() {
       </Group>
       <Group>
         <Button size="md" onClick={toggleMode}>
-          <Icon
-            size="sm"
-            remix={mode === "dark" ? "RiMoonClearFill" : "RiSunFill"}
-          />
+          <Icon size="sm" remix={mode === "dark" ? "RiMoonClearFill" : "RiSunFill"} />
         </Button>
         <SearchBar />
         <WalletButton look="hype">Connect</WalletButton>

src/config/type.ts

@@ -1,6 +1,6 @@
 import type { Opportunity } from "@angleprotocol/merkl-api";
 import type { Themes } from "dappkit";
-import { http, createConfig as createWagmiConfig } from "wagmi";
+import { createConfig as createWagmiConfig } from "wagmi";
 
 export function getCampaignType(labelOrShort: string): Opportunity["type"] | undefined {
   //TODO
@@ -9,12 +9,12 @@ export function getCampaignType(labelOrShort: string): Opportunity["type"] | und
 export type MerklConfig<T extends Themes> = {
   themes: T;
   defaultTheme: keyof T;
-  wagmi: Parameters<typeof createWagmiConfig>["0"],
-  appName: string,
+  wagmi: Parameters<typeof createWagmiConfig>["0"];
+  appName: string;
 };
 
-export function createConfig<T extends Themes>({wagmi, ...config}: MerklConfig<T>) {
-  const wagmiConfig = createWagmiConfig(wagmi)
+export function createConfig<T extends Themes>({ wagmi, ...config }: MerklConfig<T>) {
+  const wagmiConfig = createWagmiConfig(wagmi);
 
   return { wagmi: wagmiConfig, ...config };
 }

src/hooks/resources/useCampaign.tsx

@@ -12,7 +12,7 @@ export default function useCampaign(campaign: Opportunity["campaigns"][number])
   }, [campaign?.amount, campaign?.rewardToken?.decimals]);
 
   const time = useMemo(() => {
-    return <Time timestamp={Number(campaign.endTimestamp) * 1000}/>;
+    return <Time timestamp={Number(campaign.endTimestamp) * 1000} />;
   }, [campaign.endTimestamp]);
 
   const profile = useMemo(() => {