add: linting & type checking (#13)

* add: biome config + lint github action

* add: biome config + lint github action

* fix: errors & lint

.github/workflows/code_quality.yml

@@ -0,0 +1,28 @@
+name: Check code quality
+
+on:
+  pull_request:
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  check-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Check dependencies
+        run: bun install
+
+      - name: Check codebase linting
+        run: bun lint:ci
+
+      - name: Check codebase typing
+        run: bun typecheck

biome.json

@@ -0,0 +1,76 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.6.3/schema.json",
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "suspicious": {
+        "noAssignInExpressions": "warn",
+        "noConfusingVoidType": "warn",
+        "noExplicitAny": "warn",
+        "noFallthroughSwitchClause": "warn",
+        "noImplicitAnyLet": "warn",
+        "noPrototypeBuiltins": "warn",
+        "recommended": true
+      },
+      "correctness": {
+        "recommended": true,
+        "noUnusedImports": "error",
+        "noUnusedVariables": "warn",
+        "noChildrenProp": "off"
+      },
+      "style": {
+        "recommended": true,
+        "noUnusedTemplateLiteral": "warn",
+        "noNonNullAssertion": "off",
+        "useNodejsImportProtocol": "warn",
+        "noParameterAssign": "off"
+      },
+      "complexity": {
+        "noStaticOnlyClass": "off",
+        "noBannedTypes": "error",
+        "noExcessiveCognitiveComplexity": "off",
+        "noExtraBooleanCast": "off",
+        "noForEach": "off",
+        "noThisInStatic": "error",
+        "noUselessCatch": "warn",
+        "noUselessConstructor": "error",
+        "noUselessEmptyExport": "warn",
+        "noUselessFragments": "warn",
+        "noUselessLabel": "off",
+        "noUselessRename": "error",
+        "noUselessSwitchCase": "error",
+        "noUselessThisAlias": "off",
+        "noUselessTypeConstraint": "warn",
+        "noVoid": "error",
+        "useLiteralKeys": "warn"
+      }
+    }
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "javascript": {
+    "formatter": {
+      "enabled": true,
+      "indentWidth": 2,
+      "indentStyle": "space",
+      "lineEnding": "lf",
+      "semicolons": "always",
+      "quoteStyle": "double",
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "arrowParentheses": "asNeeded",
+      "lineWidth": 120,
+      "bracketSameLine": true,
+      "bracketSpacing": true
+    }
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "enabled": true,
+    "formatWithErrors": true,
+    "indentWidth": 2,
+    "lineWidth": 120,
+    "lineEnding": "lf"
+  }
+}

package.json

@@ -7,14 +7,17 @@
   "scripts": {
     "build": "remix vite:build",
     "dev": "remix vite:dev",
-    "lint": "biome check --fix ./src ./app",
+    "lint": "biome check --fix ./src",
+    "lint:ci": "biome check --diagnostic-level error ./src",
     "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc"
   },
   "dependencies": {
     "@ariakit/react": "^0.4.12",
     "@elysiajs/eden": "^1.1.3",
+    "@merkl/api": "^0.10.103",
     "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
@@ -43,6 +46,7 @@
     "isbot": "^4.1.0",
     "lucide-react": "^0.439.0",
     "match-sorter": "^6.3.4",
+    "moment": "^2.30.1",
     "numerable": "^0.3.15",
     "qs": "^6.13.0",
     "react": "^18.2.0",
@@ -65,7 +69,7 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.2",
     "@remix-run/dev": "^2.11.2",
-    "@types/bun": "latest",
+    "@types/bun": "^1.1.14",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.4",

src/components/dapp/Countdown.tsx

@@ -1,6 +1,6 @@
-import { Divider, Group, Text, Title } from "dappkit";
 import type React from "react";
 import { useEffect, useState } from "react";
+import { Divider, Group, Text, Title } from "../..";
 
 interface CountdownProps {
   targetDate: Date;

src/components/dapp/TransactionButton.tsx

@@ -1,8 +1,6 @@
 import { type ReactNode, useCallback } from "react";
 import { type ResolvedRegister, type UseSendTransactionReturnType, useSendTransaction } from "wagmi";
-import Dropdown from "../extenders/Dropdown";
 import Button, { type ButtonProps } from "../primitives/Button";
-import TransactionHelper from "./TransactionHelper";
 import Icon from "../primitives/Icon";
 
 export type TransactionButtonProps = ButtonProps & {
@@ -12,7 +10,7 @@ export type TransactionButtonProps = ButtonProps & {
 
 export default function TransactionButton({ tx, name, children, ...props }: TransactionButtonProps) {
   const sendTxHook = useSendTransaction();
-  const { sendTransaction, status} = sendTxHook;
+  const { sendTransaction, status } = sendTxHook;
 
   const execute = useCallback(() => {
     if (!tx) return;
@@ -24,9 +22,9 @@ export default function TransactionButton({ tx, name, children, ...props }: Tran
   }, [tx, sendTransaction]);
 
   return (
-    <Button {...props} onClick={execute} >
+    <Button {...props} onClick={execute}>
       {children}
-      {status === "pending" && <Icon className="animate-spin" remix="RiLoader2Line"/>}
+      {status === "pending" && <Icon className="animate-spin" remix="RiLoader2Line" />}
     </Button>
   );
 }

src/components/dapp/TransactionHelper.tsx

@@ -13,7 +13,7 @@ export type TransactionHelperProps = UseSendTransactionReturnType<ResolvedRegist
   execute?: () => void;
 };
 
-export default function TransactionHelper({ status, data, variables, execute }: TransactionHelperProps) {
+export default function TransactionHelper({ status, data, variables }: TransactionHelperProps) {
   const statusBar = useMemo(() => {
     switch (status) {
       case "error":

src/components/dapp/WalletButton.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 import { useWalletContext } from "../../context/Wallet.context";
 import { Format } from "../../utils/format";
 import Dropdown from "../extenders/Dropdown";
@@ -7,62 +7,45 @@ import Modal from "../extenders/Modal";
 import Select from "../extenders/Select";
 import Button, { type ButtonProps } from "../primitives/Button";
 import Divider from "../primitives/Divider";
+import Hash from "../primitives/Hash";
 import Icon from "../primitives/Icon";
 import Image from "../primitives/Image";
 import Text from "../primitives/Text";
 import WalletConnectors from "./WalletConnectors";
-import Hash from "../primitives/Hash";
 
 export type WalletButton = ButtonProps;
 
 export default function WalletButton(props: ButtonProps) {
-  const {
-    address,
-    disconnect,
-    connected,
-    connector,
-    chainId,
-    switchChain,
-    chains,
-  } = useWalletContext();
+  const { address, disconnect, connected, connector, chainId, switchChain, chains } = useWalletContext();
 
   const chainOptions = useMemo(() => {
     if (!chains) return [];
-    return chains.reduce((obj, chain) => {
-      obj[chain.id] = (
-        <Group>
-          <Icon src={chain?.icon} />
-          {chain.name}
-        </Group>
-      );
-      return obj;
-    }, {});
+    return chains.reduce(
+      (obj, chain) => {
+        obj[chain.id] = (
+          <Group>
+            <Icon src={chain?.icon} />
+            {chain.name}
+          </Group>
+        );
+        return obj;
+      },
+      {} as { [chainId: number]: ReactNode },
+    );
   }, [chains]);
 
-  const chain = useMemo(
-    () => chains.find(({ id }) => id === chainId),
-    [chains, chainId]
-  );
-
   if (!connected)
     return (
-      <Modal
-        title="Connect Wallet"
-        className="mx-auto w-full max-w-[500px]"
-        modal={<WalletConnectors />}
-      >
-        <Button look="hype" size="lg">
+      <Modal title="Connect Wallet" className="mx-auto w-full max-w-[500px]" modal={<WalletConnectors />}>
+        <Button look="hype" size="lg" {...props}>
           Connect wallet
         </Button>
       </Modal>
     );
 
   return (
     <>
-      <Select
-        state={[chainId, (c) => switchChain(+c)]}
-        options={chainOptions}
-      />
+      <Select state={[chainId, c => switchChain(+c)]} options={chainOptions} />
       <Dropdown
         size="lg"
         padding="xs"
@@ -71,20 +54,13 @@ export default function WalletButton(props: ButtonProps) {
             <Group className="items-center justify-between" size="xl">
               <Group className="items-center">
                 {/* TODO: Show the account icon by default if there is no ENS icon */}
-                <Icon
-                  className="text-main-11 !w-xl*2 !h-xl*2"
-                  remix="RiAccountCircleFill"
-                />
+                <Icon className="text-main-11 !w-xl*2 !h-xl*2" remix="RiAccountCircleFill" />
                 <Image className="h-lg*2 w-lg*2" src={connector?.icon} />
                 <Hash size="lg" bold copy format="short">
                   {address}
                 </Hash>
               </Group>
-              <Button
-                look="soft"
-                onClick={disconnect}
-                className="bg-main-5 !p-sm"
-              >
+              <Button look="soft" onClick={disconnect} className="bg-main-5 !p-sm">
                 <Icon className="text-main-11" remix="RiShutDownLine" />
               </Button>
             </Group>
@@ -102,8 +78,7 @@ export default function WalletButton(props: ButtonProps) {
               </Button>
             </Group>
           </>
-        }
-      >
+        }>
         <Button look="tint" className="w-full justify-center">
           {Format.address(address, "short")}
         </Button>

src/components/dapp/WalletConnectors.tsx

@@ -8,12 +8,12 @@ import Input from "../primitives/Input";
 import Text from "../primitives/Text";
 
 export default function WalletConnectors() {
-  const { config, connect, connector: connected } = useWalletContext();
+  const { config, connect, connector: _connected } = useWalletContext();
 
   return (
     <Group className="flex-col w-full">
       <div className="grid grid-flow-row gap-lg">
-        {config.connectors.map((connector) => {
+        {config.connectors.map(connector => {
           return (
             <Button
               look="base"
@@ -22,27 +22,19 @@ export default function WalletConnectors() {
               size="xl"
               bold
               className="gap-sm*2"
-              key={connector.id}
-            >
-              <Image
-                className="h-lg*2 w-lg*2 rounded-md"
-                alt={connector.name}
-                src={connector.icon}
-                fallback="WC"
-              />
+              key={connector.id}>
+              <Image className="h-lg*2 w-lg*2 rounded-md" alt={connector.name} src={connector.icon} fallback="WC" />
               {connector.name}
               <Icon remix="RiArrowRightUpLine" />
             </Button>
           );
         })}
       </div>
       <Divider horizontal look="soft" className="my-xl" />
-      <Text size={5} className="text-main-11">Spy address</Text>
-      <Input
-        size="lg"
-        placeholder="Address"
-        suffix={<Icon className="text-main-12" remix="RiSearchLine" />}
-      />
+      <Text size={5} className="text-main-11">
+        Spy address
+      </Text>
+      <Input size="lg" placeholder="Address" suffix={<Icon className="text-main-12" remix="RiSearchLine" />} />
     </Group>
   );
 }