From f2991d22dfefeb7edb560722276e537e4e9dada1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 1 Apr 2024 14:23:01 +0100
Subject: [PATCH] more refactor for feature structure

---
 app/layout.tsx                                |  6 ++--
 app/page.tsx                                  |  4 +--
 components/Header/Header.tsx                  |  6 ++--
 .../Input/Input.module.css                    |  0
 components/Input/Input.tsx                    |  8 +++++
 components/Input/index.tsx                    |  1 +
 components/index.tsx                          |  7 ++++
 constants.ts                                  |  4 +++
 .../components/MarketData/MarketData.tsx      |  4 +--
 features/prices/hooks/{index.ts => index.tsx} |  0
 features/prices/hooks/use-prices.tsx          |  2 ++
 .../components/FormAmount/FormAmount.tsx      | 24 +++++++++++--
 .../FormAmount/Inputs/InputAmount.tsx         | 34 -------------------
 .../components/FormMarket/FormMarket.tsx      |  2 +-
 .../strategies/components/Result/Result.tsx   |  2 +-
 .../strategies/components/Swap/Results.tsx    |  6 ++--
 features/strategies/components/Swap/index.tsx |  1 +
 features/strategies/hooks/use-quote.ts        |  2 ++
 features/strategies/index.tsx                 |  2 +-
 19 files changed, 60 insertions(+), 55 deletions(-)
 rename features/strategies/components/FormAmount/Inputs/InputAmount.module.css => components/Input/Input.module.css (100%)
 create mode 100644 components/Input/Input.tsx
 create mode 100644 components/Input/index.tsx
 create mode 100644 components/index.tsx
 rename features/prices/hooks/{index.ts => index.tsx} (100%)
 delete mode 100644 features/strategies/components/FormAmount/Inputs/InputAmount.tsx
 create mode 100644 features/strategies/components/Swap/index.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 0ccf9e5..364e640 100644
--- a/app/layout.tsx
+++ b/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
diff --git a/app/page.tsx b/app/page.tsx
index bad550e..79f0236 100644
--- a/app/page.tsx
+++ b/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 (
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index 7e150b7..78c7e33 100644
--- a/components/Header/Header.tsx
+++ b/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>
   )
 }
diff --git a/features/strategies/components/FormAmount/Inputs/InputAmount.module.css b/components/Input/Input.module.css
similarity index 100%
rename from features/strategies/components/FormAmount/Inputs/InputAmount.module.css
rename to components/Input/Input.module.css
diff --git a/components/Input/Input.tsx b/components/Input/Input.tsx
new file mode 100644
index 0000000..90969ad
--- /dev/null
+++ b/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} />
+}
diff --git a/components/Input/index.tsx b/components/Input/index.tsx
new file mode 100644
index 0000000..54e51f6
--- /dev/null
+++ b/components/Input/index.tsx
@@ -0,0 +1 @@
+export * from './Input'
diff --git a/components/index.tsx b/components/index.tsx
new file mode 100644
index 0000000..caafba3
--- /dev/null
+++ b/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'
diff --git a/constants.ts b/constants.ts
index 9705db9..a384df9 100644
--- a/constants.ts
+++ b/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
diff --git a/features/prices/components/MarketData/MarketData.tsx b/features/prices/components/MarketData/MarketData.tsx
index d2364a6..c388866 100644
--- a/features/prices/components/MarketData/MarketData.tsx
+++ b/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()
diff --git a/features/prices/hooks/index.ts b/features/prices/hooks/index.tsx
similarity index 100%
rename from features/prices/hooks/index.ts
rename to features/prices/hooks/index.tsx
diff --git a/features/prices/hooks/use-prices.tsx b/features/prices/hooks/use-prices.tsx
index 9a3e743..7bea155 100644
--- a/features/prices/hooks/use-prices.tsx
+++ b/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'
diff --git a/features/strategies/components/FormAmount/FormAmount.tsx b/features/strategies/components/FormAmount/FormAmount.tsx
index 02ae5d0..a8b8e09 100644
--- a/features/strategies/components/FormAmount/FormAmount.tsx
+++ b/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}
diff --git a/features/strategies/components/FormAmount/Inputs/InputAmount.tsx b/features/strategies/components/FormAmount/Inputs/InputAmount.tsx
deleted file mode 100644
index 64b35af..0000000
--- a/features/strategies/components/FormAmount/Inputs/InputAmount.tsx
+++ /dev/null
@@ -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'
-      }}
-    />
-  )
-}
diff --git a/features/strategies/components/FormMarket/FormMarket.tsx b/features/strategies/components/FormMarket/FormMarket.tsx
index feaa14b..875d98f 100644
--- a/features/strategies/components/FormMarket/FormMarket.tsx
+++ b/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({
diff --git a/features/strategies/components/Result/Result.tsx b/features/strategies/components/Result/Result.tsx
index f378288..1e75173 100644
--- a/features/strategies/components/Result/Result.tsx
+++ b/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 = {
diff --git a/features/strategies/components/Swap/Results.tsx b/features/strategies/components/Swap/Results.tsx
index 19f6767..9c0c2f3 100644
--- a/features/strategies/components/Swap/Results.tsx
+++ b/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({
diff --git a/features/strategies/components/Swap/index.tsx b/features/strategies/components/Swap/index.tsx
new file mode 100644
index 0000000..0fba608
--- /dev/null
+++ b/features/strategies/components/Swap/index.tsx
@@ -0,0 +1 @@
+export * from './Swap'
diff --git a/features/strategies/hooks/use-quote.ts b/features/strategies/hooks/use-quote.ts
index 61a7d4e..91c7700 100644
--- a/features/strategies/hooks/use-quote.ts
+++ b/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'
diff --git a/features/strategies/index.tsx b/features/strategies/index.tsx
index 43b8607..22d2f5f 100644
--- a/features/strategies/index.tsx
+++ b/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'