migrate to biome (#28)

* migrate to biome

* get biome config from @kremalicious/config

.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

.prettierrc.json

@@ -1,7 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "tabWidth": 2,
-  "endOfLine": "lf"
-}

app/api/prices/route.ts

@@ -1,4 +1,4 @@
-import { type NextRequest } from 'next/server'
+import type { NextRequest } from 'next/server'
 
 export const runtime = 'edge'
 
@@ -21,8 +21,8 @@ export async function GET(request: NextRequest) {
   }
 
   const url = `${apiUrl}/prices?tokens=${tokens}`
-  let data
-  let status
+  let data: unknown
+  let status: number
 
   try {
     const res = await fetch(url, config)

app/api/quote/route.ts

@@ -1,4 +1,4 @@
-import { type NextRequest } from 'next/server'
+import type { NextRequest } from 'next/server'
 
 export const runtime = 'edge'
 
@@ -14,8 +14,8 @@ export async function GET(request: NextRequest) {
     return Response.json(null, { status: 400 })
 
   const url = `${apiUrl}/quote?tokenIn=${tokenIn}&tokenOut=${tokenOut}&amountIn=${amountIn}`
-  let data
-  let status
+  let data: unknown
+  let status: number
 
   try {
     const res = await fetch(url)

app/layout.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from 'next'
 import '@/styles/globals.css'
 import '@/styles/loading-ui.css'
+import { description, font, isProduction, liveUrl, title } from '@/constants'
 import Script from 'next/script'
-import { title, description, font, liveUrl, isProduction } from '@/constants'
 
 export const metadata: Metadata = {
   title,

app/page.tsx

@@ -1,6 +1,6 @@
 import { Content, Footer, Header } from '@/components'
-import { Swap, Buy } from '@/features/strategies'
 import { MarketData } from '@/features/prices'
+import { Buy, Swap } from '@/features/strategies'
 import styles from './page.module.css'
 
 export default function Home() {

biome.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@kremalicious/config/biome"]
+}

components/Content/Content.tsx

@@ -1,6 +1,6 @@
+import content from '@/content.md'
 import Markdown from 'react-markdown'
 import styles from './Content.module.css'
-import content from '@/content.md'
 
 export function Content() {
   return <Markdown className={styles.content}>{content}</Markdown>

components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
+import { repoUrl } from '@/constants'
 import { GitHubLogoIcon } from '@radix-ui/react-icons'
 import styles from './Footer.module.css'
-import { repoUrl } from '@/constants'
 
 export function Footer() {
   return (
@@ -24,7 +24,7 @@ export function Footer() {
         </p>
       </div>
       <div style={{ textAlign: 'right' }}>
-        <p></p>
+        <p />
       </div>
     </footer>
   )

components/Header/Header.tsx

@@ -1,6 +1,6 @@
-import { title, description } from '@/constants'
-import styles from './Header.module.css'
 import { Logo } from '@/components/Logo'
+import { description, title } from '@/constants'
+import styles from './Header.module.css'
 
 export function Header() {
   return (

components/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react'
+import type { InputHTMLAttributes } from 'react'
 import styles from './Input.module.css'
 
 type Props = InputHTMLAttributes<HTMLInputElement>

components/Logo/Logo.tsx

@@ -7,6 +7,7 @@ export function Logo(props: React.SVGProps<SVGSVGElement>) {
       viewBox="0 0 425 282"
       {...props}
     >
+      <title>Logo</title>
       <path
         fill="currentColor"
         d="M175.571415,14.0787055 C184.808914,23.4029964 188.096837,31.950263 188.096837,47.4907477 C188.096837,58.2136822 187.313998,61.9433986 184.495778,67.2271634 C175.571415,84.1662917 163.359129,91.6257244 141.283072,94.112202 C125.000024,95.9770601 115.292822,100.328396 106.838162,109.652687 C98.2269341,119.132382 94.9390108,127.990459 94.9390108,141.355276 C94.9390108,167.7741 113.100873,185.801062 141.909343,188.28754 C158.035824,189.686183 166.960188,193.726709 176.354254,203.983429 C203.910183,233.976565 182.460397,282.462877 141.909343,281.996663 C136.272904,281.996663 128.914218,280.908829 125.626295,279.66559 C107.307865,272.983181 95.8784174,256.976482 93.9996041,235.530613 C92.7470619,221.388772 88.2065964,210.510433 79.9085043,202.429381 C70.9841411,193.571304 63.1557523,190.152398 48.1252458,188.598349 C26.362325,186.422681 11.9580897,177.564605 3.81656532,161.091691 C-1.35017127,150.990376 -1.1936035,130.476936 3.81656532,120.997241 C12.7409285,104.213517 25.1097828,96.132465 45.6201614,94.112202 C74.8983355,91.1595099 90.2419775,76.7068591 93.5299008,49.3556059 C95.5652819,32.5718824 98.8532052,24.0246158 106.055323,15.7881589 C124.060617,-4.56987617 156.000443,-5.3469004 175.571415,14.0787055 Z M316.325846,14.8908632 C325.250209,24.3705589 328.068429,31.2083722 329.790674,47.2150715 C331.356352,62.4447465 335.583682,71.9244422 344.19491,80.316304 C352.962705,88.7081657 361.417365,92.2824772 376.917575,93.9919306 C393.670327,95.8567887 399.619902,98.1878614 408.857401,106.735128 C425.766721,122.120208 429.524347,145.58634 418.0949,165.011946 C409.953375,179.153787 397.114818,186.30241 376.291304,188.633483 C347.482833,191.74158 332.765462,206.81585 329.634107,235.721151 C327.598725,256.545401 320.396608,268.200765 304.583262,276.748031 C293.623518,282.498011 276.401063,283.741249 265.441318,279.389914 C250.097676,273.17372 240.547042,262.29538 236.319712,245.822467 C233.65806,236.187366 233.65806,234.944127 236.319712,225.464432 C239.451068,213.032044 246.183482,203.086133 255.107845,197.025344 C263.24937,191.43077 269.512081,189.565912 283.60318,188.167268 C296.754874,187.079434 305.209534,183.505123 314.133897,175.579475 C324.46737,166.255185 328.851268,156.464679 328.851268,141.545814 C329.007835,131.444499 328.381564,127.714782 325.250209,121.498589 C316.952117,104.87027 303.800424,96.4784081 282.037503,93.9919306 C260.43115,91.6608578 246.496618,82.336567 238.824797,65.3974386 C233.971196,54.9853138 233.971196,38.8232097 238.511661,28.7218946 C252.759329,-2.66988457 292.997247,-9.81850756 316.325846,14.8908632 Z M244.461237,107.756149 C262.623099,125.472301 262.466531,157.4857 244.148101,173.492399 C228.804459,186.701811 209.546623,189.499098 192.324167,180.951832 C175.101712,172.55997 166.960188,158.884344 166.960188,139.303333 C167.116755,99.5196918 215.809334,79.6278713 244.461237,107.756149 Z"

components/Select/Select.tsx

@@ -1,6 +1,6 @@
-import { SelectHTMLAttributes } from 'react'
-import styles from './Select.module.css'
 import { CaretDownIcon } from '@radix-ui/react-icons'
+import type { SelectHTMLAttributes } from 'react'
+import styles from './Select.module.css'
 
 type Props = SelectHTMLAttributes<HTMLSelectElement> & {
   options: { value: string; label: string }[]

components/TokenLogo/TokenLogo.tsx

@@ -1,9 +1,9 @@
-import { Token } from '@/types'
-import styles from './TokenLogo.module.css'
-import oceanImage from '@/images/ocean.png'
 import agixImage from '@/images/agix.png'
-import fetImage from '@/images/fet.png'
 import asiImage from '@/images/asi.png'
+import fetImage from '@/images/fet.png'
+import oceanImage from '@/images/ocean.png'
+import type { Token } from '@/types'
+import styles from './TokenLogo.module.css'
 
 export function TokenLogo({
   token,

constants.ts

@@ -1,4 +1,4 @@
-import { Token } from '@/types'
+import type { Token } from '@/types'
 import { Hanken_Grotesk } from 'next/font/google'
 
 export const title = 'ASI Calculator'

features/prices/components/MarketData/MarketData.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
-import { usePrices, Price } from '@/features/prices'
 import { Badge } from '@/components'
+import { ratioAgixToAsi, ratioFetToAsi, ratioOceanToAsi } from '@/constants'
+import { Price, usePrices } from '@/features/prices'
 import styles from './MarketData.module.css'
 
 export function MarketData() {

features/prices/components/Price/Price.tsx

@@ -1,7 +1,7 @@
-import { useLocale, usePrices, type PriceCoingecko } from '@/features/prices'
-import { PriceChange } from './PriceChange'
-import styles from './Price.module.css'
+import { type PriceCoingecko, useLocale, usePrices } from '@/features/prices'
 import { formatFiat } from '@/lib'
+import styles from './Price.module.css'
+import { PriceChange } from './PriceChange'
 
 export function Price({ price }: { price: PriceCoingecko }) {
   const { isValidating, isLoading } = usePrices()

features/prices/components/Price/PriceChange.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { TriangleUpIcon, TriangleDownIcon } from '@radix-ui/react-icons'
-import styles from './PriceChange.module.css'
 import { useLocale } from '@/features/prices/hooks/use-locale'
+import { TriangleDownIcon, TriangleUpIcon } from '@radix-ui/react-icons'
+import styles from './PriceChange.module.css'
 
 export function PriceChange({ priceChange }: { priceChange: number }) {
   const locale = useLocale()

features/prices/hooks/use-locale.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 export function useLocale() {
   const [locale, setLocale] = useState('en-US')

features/strategies/components/Buy.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { useDebounce } from 'use-debounce'
-import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
+import { ratioAgixToAsi, ratioFetToAsi, ratioOceanToAsi } from '@/constants'
 import { usePrices } from '@/features/prices'
-import { getTokenBySymbol } from '@/lib'
 import { FormAmount, Result, usePersistentState } from '@/features/strategies'
 import stylesShared from '@/features/strategies/styles/shared.module.css'
+import { getTokenBySymbol } from '@/lib'
+import { useDebounce } from 'use-debounce'
 
 export function Buy() {
   const { prices, isValidating, isLoading } = usePrices()

features/strategies/components/FormAmount.tsx

@@ -1,6 +1,6 @@
-import { Dispatch, SetStateAction } from 'react'
-import { TokenSymbol } from '@/types'
-import { Select, Input, FormInline } from '@/components'
+import { FormInline, Input, Select } from '@/components'
+import type { TokenSymbol } from '@/types'
+import type { Dispatch, SetStateAction } from 'react'
 
 export function FormAmount({
   amount,
@@ -20,7 +20,7 @@ export function FormAmount({
 
     if (value === '') {
       setAmount(0)
-    } else if (isNaN(Number(value))) {
+    } else if (Number.isNaN(Number(value))) {
       return
     } else {
       setAmount(Number(value))
@@ -53,7 +53,7 @@ export function FormAmount({
         value={amount}
         onChange={handleAmountChange}
         onFocus={handleFocus}
-        style={{ width: amount.toString().length + 'ch' }}
+        style={{ width: `${amount.toString().length}ch` }}
       />
 
       <Select
@@ -65,7 +65,7 @@ export function FormAmount({
           setToken
             ? {
                 paddingRight: '1.2rem',
-                width: `calc(${token.length + 'em'} - 1.75rem)`,
+                width: `calc(${`${token.length}em`} - 1.75rem)`,
                 minWidth: '1.85rem'
               }
             : undefined

features/strategies/components/FormMarket.tsx

@@ -1,6 +1,6 @@
-import { Dispatch, SetStateAction } from 'react'
-import { Select, FormInline } from '@/components'
-import { type Market } from '@/features/strategies'
+import { FormInline, Select } from '@/components'
+import type { Market } from '@/features/strategies'
+import type { Dispatch, SetStateAction } from 'react'
 
 const options = [
   { value: 'market', label: 'All Markets' },

features/strategies/components/Result/Result.tsx

@@ -1,9 +1,9 @@
-import styles from './Result.module.css'
-import { formatCrypto, formatFiat } from '@/lib'
-import { ArrowRightIcon } from '@radix-ui/react-icons'
 import { TokenLogo } from '@/components'
-import { Token } from '@/types'
 import { useLocale } from '@/features/prices'
+import { formatCrypto, formatFiat } from '@/lib'
+import type { Token } from '@/types'
+import { ArrowRightIcon } from '@radix-ui/react-icons'
+import styles from './Result.module.css'
 
 type Props = {
   token: Token | undefined

features/strategies/components/Swap/Results.tsx

@@ -1,8 +1,8 @@
-import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
-import { getTokenBySymbol } from '@/lib'
-import { type TokenSymbol } from '@/types'
-import { usePrices, type Prices } from '@/features/prices'
+import { ratioAgixToAsi, ratioFetToAsi, ratioOceanToAsi } from '@/constants'
+import { type Prices, usePrices } from '@/features/prices'
 import { type Market, useQuote } from '@/features/strategies'
+import { getTokenBySymbol } from '@/lib'
+import type { TokenSymbol } from '@/types'
 import { Result } from '../Result'
 
 export function SwapResults({

features/strategies/components/Swap/Swap.tsx

@@ -1,15 +1,15 @@
 'use client'
 
-import { useDebounce } from 'use-debounce'
-import { SwapResults } from './Results'
-import { TokenSymbol } from '@/types'
 import {
-  type Market,
   FormAmount,
   FormMarket,
+  type Market,
   usePersistentState
 } from '@/features/strategies'
 import stylesShared from '@/features/strategies/styles/shared.module.css'
+import type { TokenSymbol } from '@/types'
+import { useDebounce } from 'use-debounce'
+import { SwapResults } from './Results'
 
 export function Swap() {
   const [amount, setAmount] = usePersistentState('swapAmount', 100)

features/strategies/hooks/use-persistent-state.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect, Dispatch, SetStateAction } from 'react'
+import { type Dispatch, type SetStateAction, useEffect, useState } from 'react'
 
 function parse(value: string) {
   try {

features/strategies/hooks/use-quote.ts

@@ -1,7 +1,7 @@
 'use client'
 
-import { TokenSymbol } from '@/types'
-import { getTokenAddressBySymbol, fetcher } from '@/lib'
+import { fetcher, getTokenAddressBySymbol } from '@/lib'
+import type { TokenSymbol } from '@/types'
 import useSWR from 'swr'
 
 const options = {

lib/tokens.ts

@@ -1,5 +1,5 @@
 import { tokens } from '@/constants'
-import type { TokenAddress, Token } from '@/types'
+import type { Token, TokenAddress } from '@/types'
 
 export function getTokenBySymbol(symbol: string): Token | undefined {
   const token = tokens.find((t) => t.symbol === symbol)

next.config.mjs

@@ -6,6 +6,12 @@ const nextConfig = {
       type: 'asset/source'
     })
     return config
+  },
+
+  eslint: {
+    // Using Biome instead of ESLint,
+    // see https://github.com/vercel/next.js/discussions/59347
+    ignoreDuringBuilds: true
   }
 }
 

package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "dev": "export GIT_COMMIT_SHA=$(git rev-parse HEAD) && next dev",
     "build": "export GIT_COMMIT_SHA=$(git rev-parse HEAD) && next build",
-    "start": "next start",
-    "lint": "next lint",
+    "start": "export GIT_COMMIT_SHA=$(git rev-parse HEAD) && next start",
+    "lint": "biome check --write .",
     "typecheck": "tsc --noEmit",
     "prepare": "husky"
   },
@@ -22,22 +22,17 @@
     "use-debounce": "^10.0.1"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.8.3",
+    "@kremalicious/config": "^1.0.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.4",
     "husky": "^9.0.11",
-    "prettier": "^3.2.5",
     "typescript": "^5"
   },
   "lint-staged": {
-    "*.{ts,mjs}": [
-      "prettier --write",
-      "eslint"
-    ],
-    "**/*.{json,yml,md}": [
-      "prettier --write"
+    "*": [
+      "biome check --write --no-errors-on-unmatched --files-ignore-unknown=true"
     ]
   }
 }