switch format/lint to biome; add knip code analyzer (#48)

* add knip

* replace prettier and eslint with biome

.github/workflows/pr.yml

@@ -19,8 +19,8 @@ jobs:
           MAGICSWAPV2_API_URL: ${{ vars.MAGICSWAPV2_API_URL }}
       - name: Lint code
         run: npm run lint
-      # - name: Analyze code
-      #   run: npm run knip
+      - name: Analyze code
+        run: npm run knip
       - name: Test code
         run: npm test
       - name: Check types

.husky/pre-commit

@@ -1 +1 @@
-npx lint-staged
+npx lint-staged && npm run knip

app/api/collections.server.ts

@@ -1,4 +1,3 @@
-import { fetchTroveTokenMapping } from "./tokens.server";
 import { getCachedValue } from "~/lib/cache.server";
 import { ENV } from "~/lib/env.server";
 import type {
@@ -7,6 +6,7 @@ import type {
   TroveCollectionMapping,
   TroveTokenMapping,
 } from "~/types";
+import { fetchTroveTokenMapping } from "./tokens.server";
 
 /**
  * Fetches NFT collection metadata
@@ -19,7 +19,7 @@ const fetchCollections = (addresses: string[]) =>
       "slugs",
       addresses
         .map((address) => `${ENV.TROVE_API_NETWORK}/${address}`)
-        .join(",")
+        .join(","),
     );
 
     const response = await fetch(url.toString(), {
@@ -32,13 +32,13 @@ const fetchCollections = (addresses: string[]) =>
   });
 
 export const fetchTokensCollections = async (
-  tokens: Token[]
+  tokens: Token[],
 ): Promise<[TroveCollectionMapping, TroveTokenMapping]> => {
   const addresses = [
     ...new Set(
       tokens.flatMap(({ vaultCollections }) =>
-        vaultCollections.map(({ collection }) => collection.id)
-      )
+        vaultCollections.map(({ collection }) => collection.id),
+      ),
     ),
   ];
 
@@ -47,9 +47,9 @@ export const fetchTokensCollections = async (
       tokens.flatMap(({ vaultCollections }) =>
         vaultCollections.flatMap(
           ({ collection: { id: address }, tokenIds }) =>
-            tokenIds?.map((tokenId) => `${address}/${tokenId}`) ?? []
-        )
-      )
+            tokenIds?.map((tokenId) => `${address}/${tokenId}`) ?? [],
+        ),
+      ),
     ),
   ];
 

app/api/pools.server.ts

@@ -1,5 +1,11 @@
 import type { ExecutionResult } from "graphql";
 
+import { uniswapV2PairAbi } from "~/generated";
+import { client } from "~/lib/chain.server";
+import type { Pool } from "~/lib/pools.server";
+import { createPoolFromPair } from "~/lib/pools.server";
+import { itemToTroveTokenItem } from "~/lib/tokens.server";
+import type { AddressString, Pair } from "~/types";
 import {
   GetPairDocument,
   type GetPairQuery,
@@ -12,12 +18,6 @@ import {
 import { fetchTokensCollections } from "./collections.server";
 import { fetchMagicUSD } from "./stats.server";
 import { fetchTroveTokenMapping } from "./tokens.server";
-import { uniswapV2PairAbi } from "~/generated";
-import { client } from "~/lib/chain.server";
-import type { Pool } from "~/lib/pools.server";
-import { createPoolFromPair } from "~/lib/pools.server";
-import { itemToTroveTokenItem } from "~/lib/tokens.server";
-import type { AddressString, Pair } from "~/types";
 
 export const fetchTransactions = async (pool: Pool) => {
   const result = (await execute(GetPairTransactionsDocument, {
@@ -29,10 +29,10 @@ export const fetchTransactions = async (pool: Pool) => {
     ...new Set([
       ...transactions.flatMap((transaction) => [
         ...(transaction.items0?.map(
-          ({ collection, tokenId }) => `${collection.id}/${tokenId}`
+          ({ collection, tokenId }) => `${collection.id}/${tokenId}`,
         ) ?? []),
         ...(transaction.items1?.map(
-          ({ collection, tokenId }) => `${collection.id}/${tokenId}`
+          ({ collection, tokenId }) => `${collection.id}/${tokenId}`,
         ) ?? []),
       ]),
     ]),
@@ -55,7 +55,7 @@ export const createPoolsFromPairs = async (pairs: Pair[]) => {
   const [[collectionMapping, tokenMapping], magicUSD, reserves] =
     await Promise.all([
       fetchTokensCollections(
-        pairs.flatMap(({ token0, token1 }) => [token0, token1])
+        pairs.flatMap(({ token0, token1 }) => [token0, token1]),
       ),
       fetchMagicUSD(),
       client.multicall({
@@ -78,15 +78,15 @@ export const createPoolsFromPairs = async (pairs: Pair[]) => {
       magicUSD,
       reserve?.status === "success"
         ? [reserve.result[0], reserve.result[1]]
-        : undefined
+        : undefined,
     );
   });
 };
 
 export const fetchPools = async () => {
   const result = (await execute(
     GetPairsDocument,
-    {}
+    {},
   )) as ExecutionResult<GetPairsQuery>;
   const { pairs = [] } = result.data ?? {};
   return createPoolsFromPairs(pairs);

app/api/stats.server.ts

@@ -5,7 +5,7 @@ import { GetStatsDocument, type GetStatsQuery, execute } from ".graphclient";
 export const fetchStats = async () => {
   const result = (await execute(
     GetStatsDocument,
-    {}
+    {},
   )) as ExecutionResult<GetStatsQuery>;
   const { factories = [] } = result.data ?? {};
   return factories[0];

app/api/tokens.server.ts

@@ -1,5 +1,10 @@
 import type { ExecutionResult } from "graphql";
 
+import { sumArray } from "~/lib/array";
+import { getCachedValue } from "~/lib/cache.server";
+import { ENV } from "~/lib/env.server";
+import { createPoolToken } from "~/lib/tokens.server";
+import type { PoolToken, TroveToken, TroveTokenMapping } from "~/types";
 import { fetchTokensCollections } from "./collections.server";
 import { fetchMagicUSD } from "./stats.server";
 import {
@@ -11,27 +16,22 @@ import {
   type GetTokensQuery,
   execute,
 } from ".graphclient";
-import { sumArray } from "~/lib/array";
-import { getCachedValue } from "~/lib/cache.server";
-import { ENV } from "~/lib/env.server";
-import { createPoolToken } from "~/lib/tokens.server";
-import type { PoolToken, TroveToken, TroveTokenMapping } from "~/types";
 
 /**
  * Fetches tokens available for swapping with NFT metadata and USD prices
  */
 export const fetchTokens = async () => {
   const result = (await execute(
     GetTokensDocument,
-    {}
+    {},
   )) as ExecutionResult<GetTokensQuery>;
   const { tokens: rawTokens = [] } = result.data ?? {};
   const [[collectionMapping, tokenMapping], magicUSD] = await Promise.all([
     fetchTokensCollections(rawTokens),
     fetchMagicUSD(),
   ]);
   return rawTokens.map((token) =>
-    createPoolToken(token, collectionMapping, tokenMapping, magicUSD)
+    createPoolToken(token, collectionMapping, tokenMapping, magicUSD),
   );
 };
 
@@ -80,8 +80,12 @@ const fetchTroveTokens = async (ids: string[]) =>
 export const fetchTroveTokenMapping = async (ids: string[]) => {
   const tokens = await fetchTroveTokens(ids);
   return tokens.reduce((acc, token) => {
-    const collection = (acc[token.collectionAddr.toLowerCase()] ??= {});
-    collection[token.tokenId] = token;
+    const address = token.collectionAddr.toLowerCase();
+    if (!acc[address]) {
+      acc[address] = {};
+    }
+
+    acc[address][token.tokenId] = token;
     return acc;
   }, {} as TroveTokenMapping);
 };
@@ -91,14 +95,14 @@ export const fetchTroveTokenMapping = async (ids: string[]) => {
  */
 export const fetchPoolTokenBalance = async (
   token: PoolToken,
-  address: string
+  address: string,
 ) => {
   const url = new URL(`${ENV.TROVE_API_URL}/tokens-for-user`);
   url.searchParams.append("userAddress", address);
   url.searchParams.append("projection", "queryUserQuantityOwned");
 
   const tokenIds = token.collections.flatMap(({ id, tokenIds }) =>
-    tokenIds.map((tokenId) => `${ENV.TROVE_API_NETWORK}/${id}/${tokenId}`)
+    tokenIds.map((tokenId) => `${ENV.TROVE_API_NETWORK}/${id}/${tokenId}`),
   );
   if (tokenIds.length > 0) {
     url.searchParams.append("ids", tokenIds.join(","));
@@ -107,7 +111,7 @@ export const fetchPoolTokenBalance = async (
       "slugs",
       token.collections
         .map(({ id }) => `${ENV.TROVE_API_NETWORK}/${id}`)
-        .join(",")
+        .join(","),
     );
   }
 
@@ -147,8 +151,8 @@ export const fetchVaultUserInventory = async ({
     token.vaultCollections.flatMap(
       ({ collection: { id: collectionId }, tokenIds }) =>
         tokenIds?.map(
-          (tokenId) => `${ENV.TROVE_API_NETWORK}/${collectionId}/${tokenId}`
-        ) ?? []
+          (tokenId) => `${ENV.TROVE_API_NETWORK}/${collectionId}/${tokenId}`,
+        ) ?? [],
     ) ?? [];
   if (tokenIds.length > 0) {
     url.searchParams.append("ids", tokenIds.join(","));
@@ -158,9 +162,9 @@ export const fetchVaultUserInventory = async ({
       token.vaultCollections
         .map(
           ({ collection: { id: collectionId } }) =>
-            `${ENV.TROVE_API_NETWORK}/${collectionId}`
+            `${ENV.TROVE_API_NETWORK}/${collectionId}`,
         )
-        .join(",")
+        .join(","),
     );
   }
 
@@ -199,7 +203,7 @@ export const fetchVaultReserveItems = async ({
       acc[`${collectionId.toLowerCase()}/${tokenId}`] = amount;
       return acc;
     },
-    {} as Record<string, number>
+    {} as Record<string, number>,
   );
 
   // Fetch token metadata

app/api/user.server.ts

@@ -1,10 +1,10 @@
 import type { ExecutionResult } from "graphql";
 
-import { createPoolsFromPairs } from "./pools.server";
-import { GetUserDocument, type GetUserQuery, execute } from ".graphclient";
 import { getCachedValue } from "~/lib/cache.server";
 import { ENV } from "~/lib/env.server";
 import type { AccountDomains } from "~/types";
+import { createPoolsFromPairs } from "./pools.server";
+import { GetUserDocument, type GetUserQuery, execute } from ".graphclient";
 
 export const fetchUser = async (address: string) => {
   const result = (await execute(GetUserDocument, {
@@ -18,7 +18,7 @@ export const fetchUser = async (address: string) => {
   return {
     ...user,
     pools: await createPoolsFromPairs(
-      user.liquidityPositions.map(({ pair }) => pair)
+      user.liquidityPositions.map(({ pair }) => pair),
     ),
   };
 };

app/assets/Svgs.tsx

@@ -2,58 +2,6 @@ interface Props {
   className?: string;
 }
 
-export const ExchangeIcon = ({ className }: Props) => (
-  <svg
-    viewBox="0 0 132 132"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M104.5 99L82.5 121L74.525 113.3L83.325 104.5L44 104.5C37.95 104.5 32.7708 102.346 28.4625 98.0375C24.1542 93.7292 22 88.55 22 82.5C22 76.45 24.1542 71.2708 28.4625 66.9625C32.7708 62.6542 37.95 60.5 44 60.5L82.5 60.5C85.525 60.5 88.1146 59.4229 90.2688 57.2687C92.4229 55.1146 93.5 52.525 93.5 49.5C93.5 46.475 92.4229 43.8854 90.2688 41.7312C88.1146 39.5771 85.525 38.5 82.5 38.5L43.175 38.5L51.975 47.3L44 55L22 33L44 11L51.975 18.7L43.175 27.5L82.5 27.5C88.55 27.5 93.7292 29.6542 98.0375 33.9625C102.346 38.2708 104.5 43.45 104.5 49.5C104.5 55.55 102.346 60.7292 98.0375 65.0375C93.7292 69.3458 88.55 71.5 82.5 71.5L44 71.5C40.975 71.5 38.3854 72.5771 36.2312 74.7312C34.0771 76.8854 33 79.475 33 82.5C33 85.525 34.0771 88.1146 36.2313 90.2687C38.3854 92.4229 40.975 93.5 44 93.5L83.325 93.5L74.525 84.7L82.5 77L104.5 99Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const FlatMagicIcon = ({ className }: Props) => (
-  <svg
-    viewBox="0 0 132 132"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M105.014 64.7157L93.2022 60.715C88.8614 59.2519 85.6402 55.5713 84.7263 51.0905L79.7458 26.469C79.6088 25.8518 79.0605 25.3945 78.4208 25.3945C77.7811 25.3945 77.2328 25.8518 77.0957 26.469L72.1153 51.0905C71.2014 55.5713 67.9801 59.2519 63.6393 60.715L51.8279 64.7157C51.2796 64.8986 50.9141 65.4244 50.9141 65.996C50.9141 66.5675 51.2796 67.0933 51.8279 67.2762L63.6393 71.2769C67.9801 72.74 71.2014 76.4207 72.1153 80.9014L77.0957 105.5C77.2328 106.117 77.7811 106.575 78.4208 106.575C79.0605 106.575 79.6088 106.117 79.7458 105.5L84.7263 80.9014C85.6402 76.4207 88.8614 72.74 93.2022 71.2769L105.014 67.2762C105.562 67.0933 105.928 66.5675 105.928 65.996C105.928 65.4244 105.562 64.8986 105.014 64.7157"
-      fill="currentColor"
-    />
-    <path
-      d="M41.5464 42.1517L45.7044 43.5691C47.2351 44.0949 48.3774 45.3752 48.6973 46.9754L50.4564 55.6627C50.5021 55.8913 50.6849 56.0513 50.9133 56.0513C51.1418 56.0513 51.3246 55.8913 51.3702 55.6627L53.1294 46.9754C53.4492 45.398 54.5915 44.0949 56.1222 43.5691L60.2802 42.1517C60.463 42.0832 60.6001 41.9003 60.6001 41.6945C60.6001 41.4888 60.463 41.3059 60.2802 41.2373L56.1222 39.8199C54.5915 39.2941 53.4492 38.0139 53.1294 36.4136L51.3702 27.7263C51.3246 27.4977 51.1418 27.3377 50.9133 27.3377C50.6849 27.3377 50.5021 27.4977 50.4564 27.7263L48.6973 36.4136C48.3774 37.991 47.2351 39.2941 45.7044 39.8199L41.5464 41.2373C41.3636 41.3059 41.2266 41.4888 41.2266 41.6945C41.2266 41.9003 41.3636 42.0832 41.5464 42.1517"
-      fill="currentColor"
-    />
-    <path
-      d="M51.2574 84.8336L45.683 82.9361C43.6268 82.2502 42.0961 80.5128 41.6849 78.3867L39.3317 66.7504C39.2632 66.4532 39.0119 66.2474 38.7149 66.2474C38.4179 66.2474 38.1437 66.4532 38.0981 66.7504L35.7449 78.3867C35.3108 80.5128 33.7801 82.2502 31.7468 82.9361L26.1724 84.8336C25.9211 84.925 25.7383 85.1536 25.7383 85.428C25.7383 85.7023 25.9211 85.9538 26.1724 86.0223L31.7468 87.9198C33.803 88.6057 35.3337 90.3431 35.7449 92.4692L38.0981 104.106C38.1666 104.403 38.4179 104.608 38.7149 104.608C39.0119 104.608 39.286 104.403 39.3317 104.106L41.6849 92.4692C42.119 90.3431 43.6497 88.6057 45.683 87.9198L51.2574 86.0223C51.5087 85.9309 51.6915 85.7023 51.6915 85.428C51.6915 85.1536 51.5087 84.9021 51.2574 84.8336"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const ChartIcon = ({ className }: Props) => (
-  <svg
-    viewBox="0 0 132 132"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g mask="url(#mask0_3773_55023)">
-      <path
-        d="M19.2457 106.15L6.5957 93.5L52.2457 47.85L73.9707 69.575L113.021 25.575L125.396 37.675L74.5207 95.425L52.2457 73.15L19.2457 106.15Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
 export const RoyaltiesIcon = ({ className }: Props) => (
   <svg
     viewBox="0 0 42 42"

app/components/Badge.tsx

@@ -11,10 +11,10 @@ type Props = {
 export const Badge = ({ children, color, rounded }: Props) => (
   <div
     className={cn(
-      "rounded-3xl bg-night-700 px-3.5 py-0.5 text-xs font-medium leading-[160%] text-white",
+      "rounded-3xl bg-night-700 px-3.5 py-0.5 font-medium text-white text-xs leading-[160%]",
       color === "primary" && "bg-ruby-800/10 text-ruby-700",
       color === "secondary" && "bg-honey-500/25 text-honey-700",
-      rounded === "partially" && "rounded-md"
+      rounded === "partially" && "rounded-md",
     )}
   >
     {children}