more refactor for feature structure

app/layout.tsx

@@ -3,16 +3,14 @@ import { Hanken_Grotesk } from 'next/font/google'
 import '@/styles/globals.css'
 import '@/styles/loading-ui.css'
 import Script from 'next/script'
+import { title, description } from '@/constants'
 
 const hankenGrotesk = Hanken_Grotesk({
   subsets: ['latin'],
   variable: '--font-hanken-grotesk'
 })
 
-export const metadata: Metadata = {
-  title: 'ASI Calculator',
-  description: 'See how much ASI you get for your OCEAN, AGIX, or FET.'
-}
+export const metadata: Metadata = { title, description }
 
 export default function RootLayout({
   children

app/page.tsx

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

components/Header/Header.tsx

@@ -1,11 +1,11 @@
-import { metadata } from '@/app/layout'
+import { title, description } from '@/constants'
 import styles from './Header.module.css'
 
 export function Header() {
   return (
     <header>
-      <h1 className={styles.title}>{`${metadata.title}`}</h1>
-      <p className={styles.description}>{`${metadata.description}`}</p>
+      <h1 className={styles.title}>{`${title}`}</h1>
+      <p className={styles.description}>{`${description}`}</p>
     </header>
   )
 }

components/Input/Input.tsx

@@ -0,0 +1,8 @@
+import { InputHTMLAttributes } from 'react'
+import styles from './Input.module.css'
+
+type Props = InputHTMLAttributes<HTMLInputElement>
+
+export function Input(props: Props) {
+  return <input className={styles.input} {...props} />
+}

components/Input/index.tsx

@@ -0,0 +1 @@
+export * from './Input'

components/index.tsx

@@ -0,0 +1,7 @@
+export * from './Content'
+export * from './Footer'
+export * from './Header'
+export * from './Input'
+export * from './Label'
+export * from './Select'
+export * from './TokenLogo'

constants.ts

@@ -1,5 +1,9 @@
 import { Token } from '@/types'
 
+export const title = 'ASI Calculator'
+export const description =
+  'See how much ASI you get for your OCEAN, AGIX, or FET.'
+
 export const ratioOceanToAsi = 0.433226
 export const ratioAgixToAsi = 0.43335
 export const ratioFetToAsi = 1

features/prices/components/MarketData/MarketData.tsx

@@ -2,8 +2,8 @@
 
 import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
 import styles from './MarketData.module.css'
-import { usePrices } from '@/features/prices/hooks'
-import { Label } from '@/components/Label'
+import { usePrices } from '@/features/prices'
+import { Label } from '@/components'
 
 export function MarketData() {
   const { prices, isValidating, isLoading } = usePrices()

features/prices/hooks/use-prices.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { tokens } from '@/constants'
 import { fetcher, getTokenAddressBySymbol } from '@/lib/utils'
 import useSWR from 'swr'

features/strategies/components/FormAmount/FormAmount.tsx

@@ -1,8 +1,7 @@
-import { InputAmount } from './Inputs/InputAmount'
 import styles from './FormAmount.module.css'
 import { Dispatch, SetStateAction } from 'react'
 import { TokenSymbol } from '@/types'
-import { Select } from '@/components/Select'
+import { Select, Input } from '@/components'
 
 export function FormAmount({
   amount,
@@ -17,6 +16,16 @@ export function FormAmount({
   setToken?: Dispatch<SetStateAction<TokenSymbol>>
   isFiat?: boolean
 }) {
+  function handleAmountChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const { value } = e.target
+
+    if (value === '') {
+      setAmount(0)
+    } else {
+      setAmount(Number(value))
+    }
+  }
+
   function handleTokenChange(e: React.ChangeEvent<HTMLSelectElement>) {
     if (!setToken) return
     setToken(e.target.value as TokenSymbol)
@@ -32,7 +41,16 @@ export function FormAmount({
 
   return (
     <form className={styles.form}>
-      <InputAmount amount={amount} setAmount={setAmount} />
+      <Input
+        type="text"
+        inputMode="numeric"
+        pattern="[0-9]*"
+        value={amount}
+        onChange={handleAmountChange}
+        style={{
+          width: Math.min(Math.max(amount.toString().length, 2), 50) + 'ch'
+        }}
+      />
 
       <Select
         options={options}

features/strategies/components/FormAmount/Inputs/InputAmount.tsx

@@ -1,34 +0,0 @@
-import { Dispatch, SetStateAction } from 'react'
-import styles from './InputAmount.module.css'
-
-export function InputAmount({
-  amount,
-  setAmount
-}: {
-  amount: number
-  setAmount: Dispatch<SetStateAction<number>>
-}) {
-  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const { value } = e.target
-
-    if (value === '') {
-      setAmount(0)
-    } else {
-      setAmount(Number(value))
-    }
-  }
-
-  return (
-    <input
-      className={styles.input}
-      type="text"
-      inputMode="numeric"
-      pattern="[0-9]*"
-      value={amount}
-      onChange={handleChange}
-      style={{
-        width: Math.min(Math.max(amount.toString().length, 2), 50) + 'ch'
-      }}
-    />
-  )
-}

features/strategies/components/FormMarket/FormMarket.tsx

@@ -1,6 +1,6 @@
 import styles from './FormMarket.module.css'
 import { Dispatch, SetStateAction } from 'react'
-import { Select } from '@/components/Select'
+import { Select } from '@/components'
 import { type Market } from '@/features/strategies'
 
 export function FormMarket({

features/strategies/components/Result/Result.tsx

@@ -1,7 +1,7 @@
 import styles from './Result.module.css'
 import { formatNumber } from '@/lib/utils'
 import { ArrowRightIcon } from '@radix-ui/react-icons'
-import { TokenLogo } from '../../../../components/TokenLogo/TokenLogo'
+import { TokenLogo } from '@/components'
 import { Token } from '@/types'
 
 type Props = {

features/strategies/components/Swap/Results.tsx

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

features/strategies/components/Swap/index.tsx

@@ -0,0 +1 @@
+export * from './Swap'

features/strategies/hooks/use-quote.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import { TokenSymbol } from '@/types'
 import { getTokenAddressBySymbol, fetcher } from '@/lib/utils'
 import useSWR from 'swr'

features/strategies/index.tsx

@@ -1,4 +1,4 @@
 export * from './components/Buy'
-export * from './components/Swap/Swap'
+export * from './components/Swap'
 export * from './hooks'
 export * from './types'