chore: use biome 🚀 (#317)

* chore: use biome

* chore: use biome

.github/lighthouse/budget.json

@@ -24,4 +24,4 @@
       }
     ]
   }
-]
+]

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.codeActionsOnSave": {
+    "source.organizeImports.biome": "explicit"
+  }
+}

README.md

@@ -55,13 +55,9 @@ Please refer to the [webapp README.md](/apps/webapp/README.md) for more details
 
 ### Packages
 
-#### Config ESLint (`/packages/config-eslint`)
-
-This package provides a shared ESLint configuration to ensure consistent coding styles and practices across the project's JavaScript and TypeScript codebases.
-
 #### Config TypeScript (`/packages/config-typescript`)
 
-Similar to `config-eslint`, this package offers a shared TypeScript configuration to standardize TypeScript compilation options across the project.
+This package offers a shared TypeScript configuration to standardize TypeScript compilation options across the project.
 
 #### Smartsale Contracts (`/packages/app-contracts`)
 

apps/alchemy/package.json

@@ -12,4 +12,4 @@
     "alchemy-sdk": "^3.4.1",
     "dotenv": "^16.4.5"
   }
-}
+}

apps/alchemy/src/index.ts

@@ -1,4 +1,4 @@
-require('dotenv').config();
+require('dotenv').config()
 import { Alchemy, Network, WebhookType } from 'alchemy-sdk'
 
 // authToken is required to use Notify APIs. Found on the top right corner of
@@ -7,22 +7,22 @@ async function createAddressActivityNotification() {
   const settings = {
     authToken: process.env.ALCHEMY_NOTIFY_TOKEN,
     network: Network.MATIC_MAINNET, // Replace with your network.
-  };
+  }
 
-  const alchemy = new Alchemy(settings);
+  const alchemy = new Alchemy(settings)
   const addressActivityWebhook = await alchemy.notify.createWebhook(
-		// TO DO: You will replace this URL in Step #3 of this guide!
+    // TO DO: You will replace this URL in Step #3 of this guide!
     'https://webhook.site/f18c0350-6479-4686-b48a-3d16aa238b7b',
     WebhookType.ADDRESS_ACTIVITY,
     {
       // use any address you want to monitor activity on!
       addresses: ['0x6F76670A66e7909Af9B76f0D84E39317FCc0B2e1'],
       network: Network.MATIC_MAINNET,
-    }
-  );
-	console.log(
-    'Alchemy Notify address activity notification created, go to https://dashboard.alchemy.com/notify to see details of your custom hook.'
-  );
+    },
+  )
+  console.log(
+    'Alchemy Notify address activity notification created, go to https://dashboard.alchemy.com/notify to see details of your custom hook.',
+  )
 }
 
-createAddressActivityNotification();
+createAddressActivityNotification()

apps/faucet/README.md

@@ -1,30 +1,8 @@
 # React + TypeScript + Vite
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This template provides a minimal setup to get React working in Vite with HMR.
 
 Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    project: ["./tsconfig.json", "./tsconfig.node.json"],
-    tsconfigRootDir: __dirname,
-  },
-};
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

apps/faucet/components.json

@@ -13,4 +13,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

apps/faucet/package.json

@@ -6,7 +6,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -36,13 +35,8 @@
     "@types/node": "latest",
     "@types/react": "18.x",
     "@types/react-dom": "18.x",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.7.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.9",
     "typescript": "^5.5.4",
     "vite": "^5.3.4"
   }
-}
+}

apps/faucet/src/App.tsx

@@ -1,10 +1,10 @@
-import { FaucetForm } from "./components/faucet-form";
-import { useUsdtBalance } from "./hooks/use-usdt-balance";
-import { Button } from "./components/ui/button";
-import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { FaucetForm } from './components/faucet-form'
+import { Button } from './components/ui/button'
+import { useUsdtBalance } from './hooks/use-usdt-balance'
 
 export default function Component() {
-  const balance = useUsdtBalance();
+  const balance = useUsdtBalance()
   return (
     <div className="min-h-screen bg-[#f0f0f0]">
       <nav className="flex items-center justify-between p-6 bg-white shadow-md">
@@ -28,5 +28,5 @@ export default function Component() {
         </div>
       </main>
     </div>
-  );
+  )
 }

apps/faucet/src/components/add-token-to-metamask.tsx

@@ -1,6 +1,6 @@
-import { EVMTokenContractData } from "app-contracts";
-import { useSwitchChain } from "wagmi";
-import { Button } from "./ui/button";
+import type { EVMTokenContractData } from 'app-contracts'
+import { useSwitchChain } from 'wagmi'
+import { Button } from './ui/button'
 
 export function AddTokenToWallet({
   address,
@@ -10,31 +10,31 @@ export function AddTokenToWallet({
   name,
   chainId,
 }: EVMTokenContractData) {
-  const { switchChain } = useSwitchChain();
+  const { switchChain } = useSwitchChain()
   // console.log({ address, symbol, decimals, image, name })
   const addTokenToMetaMask = async () => {
     try {
       if (!window.ethereum && !window.ethereum.isMetaMask)
-        alert("MetaMask is not installed");
-      if (chainId) await switchChain({ chainId });
+        alert('MetaMask is not installed')
+      if (chainId) await switchChain({ chainId })
       await window.ethereum.request({
-        method: "wallet_watchAsset",
+        method: 'wallet_watchAsset',
         params: {
-          type: "ERC20",
+          type: 'ERC20',
           options: {
             address,
             symbol,
             decimals,
             image,
           },
         },
-      });
-      alert("Token added to MetaMask");
+      })
+      alert('Token added to MetaMask')
     } catch (error) {
-      console.error("Error adding token to MetaMask", error);
-      alert("Error adding token to MetaMask");
+      console.error('Error adding token to MetaMask', error)
+      alert('Error adding token to MetaMask')
     }
-  };
+  }
 
   return (
     <Button
@@ -43,12 +43,11 @@ export function AddTokenToWallet({
     >
       Add {name} to MetaMask
     </Button>
-  );
+  )
 }
 
 interface CustomWindow extends Window {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ethereum?: any;
+  ethereum?: any
 }
 
-declare let window: CustomWindow;
+declare let window: CustomWindow

apps/faucet/src/components/connect-metamask.tsx

@@ -1,21 +1,20 @@
-"use client";
-import { useConnect, useConnectors } from "wagmi";
-import { Button } from "./ui/button";
+'use client'
+import { useConnect, useConnectors } from 'wagmi'
+import { Button } from './ui/button'
 
 export function ConnectWalletButton() {
-  const connectors = useConnectors();
-  const { connect } = useConnect();
+  const connectors = useConnectors()
+  const { connect } = useConnect()
 
   const handleConnect = async () => {
     // Find the WalletConnect connector
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const injectedConnector = connectors.find(
-      (connector) => connector.id === "injected",
-    );
+      (connector) => connector.id === 'injected',
+    )
     if (injectedConnector) {
-      await connect({ connector: injectedConnector });
+      await connect({ connector: injectedConnector })
     }
-  };
+  }
 
   return (
     <div>
@@ -24,5 +23,5 @@ export function ConnectWalletButton() {
       </Button>
       {/* {error && <p style={{ color: 'red' }}>{error.message}</p>} */}
     </div>
-  );
+  )
 }

apps/faucet/src/components/connect-walletconnect.tsx

@@ -1,21 +1,20 @@
-"use client";
-import { useConnect, useConnectors } from "wagmi";
-import { Button } from "./ui/button";
+'use client'
+import { useConnect, useConnectors } from 'wagmi'
+import { Button } from './ui/button'
 
 export function ConnectWalletButton() {
-  const connectors = useConnectors();
-  const { connect } = useConnect();
+  const connectors = useConnectors()
+  const { connect } = useConnect()
 
   const handleConnect = async () => {
     // Find the WalletConnect connector
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const walletConnectConnector = connectors.find(
-      (connector) => connector.id === "walletConnect",
-    );
+      (connector) => connector.id === 'walletConnect',
+    )
     if (walletConnectConnector) {
-      await connect({ connector: walletConnectConnector });
+      await connect({ connector: walletConnectConnector })
     }
-  };
+  }
 
   return (
     <div>
@@ -24,5 +23,5 @@ export function ConnectWalletButton() {
       </Button>
       {/* {error && <p style={{ color: 'red' }}>{error.message}</p>} */}
     </div>
-  );
+  )
 }