diff --git a/features/strategies/components/FormAmount/FormAmount.module.css b/components/FormInline/FormInline.module.css similarity index 81% rename from features/strategies/components/FormAmount/FormAmount.module.css rename to components/FormInline/FormInline.module.css index 738f394..fa94c51 100644 --- a/features/strategies/components/FormAmount/FormAmount.module.css +++ b/components/FormInline/FormInline.module.css @@ -3,6 +3,6 @@ border: 1px solid rgba(var(--foreground-rgb), 0.15); border-radius: var(--border-radius); overflow: hidden; - margin: -0.15em 0.25rem 0 0.25rem; + margin-top: -0.15em; font-size: 0.9em; } diff --git a/components/FormInline/FormInline.tsx b/components/FormInline/FormInline.tsx new file mode 100644 index 0000000..d3b632b --- /dev/null +++ b/components/FormInline/FormInline.tsx @@ -0,0 +1,5 @@ +import styles from './FormInline.module.css' + +export function FormInline({ children }: { children: React.ReactNode }) { + return
+} diff --git a/components/FormInline/index.tsx b/components/FormInline/index.tsx new file mode 100644 index 0000000..85ea750 --- /dev/null +++ b/components/FormInline/index.tsx @@ -0,0 +1 @@ +export * from './FormInline' diff --git a/components/Input/Input.module.css b/components/Input/Input.module.css index 0da69f2..06427d0 100644 --- a/components/Input/Input.module.css +++ b/components/Input/Input.module.css @@ -6,20 +6,10 @@ } .input:hover { - background-color: rgba(var(--background-rgb), 0.5); + background-color: rgba(var(--background-rgb), 0.1); } .input:focus-within { outline: none; - background-color: rgba(var(--background-rgb), 0.9); -} - -@media (prefers-color-scheme: dark) { - .input:hover { - background-color: rgba(var(--foreground-rgb), 0.1); - } - - .input:focus-within { - background-color: rgba(var(--foreground-rgb), 0.2); - } + background-color: rgba(var(--background-rgb), 0.3); } diff --git a/components/Select/Select.module.css b/components/Select/Select.module.css index 579e51d..2e13981 100644 --- a/components/Select/Select.module.css +++ b/components/Select/Select.module.css @@ -9,22 +9,12 @@ } .select:hover:not(.select[disabled]) { - background-color: rgba(var(--background-rgb), 0.5); + background-color: rgba(var(--background-rgb), 0.1); } .select:focus-within { outline: none; - background-color: rgba(var(--background-rgb), 0.9); -} - -@media (prefers-color-scheme: dark) { - .select:hover:not(.select[disabled]) { - background-color: rgba(var(--foreground-rgb), 0.1); - } - - .select:focus-within { - background-color: rgba(var(--foreground-rgb), 0.2); - } + background-color: rgba(var(--background-rgb), 0.3); } .icon { diff --git a/components/index.tsx b/components/index.tsx index caafba3..aa71048 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -1,5 +1,6 @@ export * from './Content' export * from './Footer' +export * from './FormInline' export * from './Header' export * from './Input' export * from './Label' diff --git a/content.md b/content.md index 23bcf84..986b632 100644 --- a/content.md +++ b/content.md @@ -1,6 +1,6 @@ The **→ lines** show what you would get with the displayed token amount at the moment of the ASI swap, along with the converted value based on the current market price of FET. -The fiat values are fetched from [Coingecko](https://coingecko.com), and the token swap estimations directly from [Uniswap](https://uniswap.org) v3 swap routes. +The fiat values are fetched from [Coingecko](https://coingecko.com) and used to calculate the _All Markets_ scenario. The token swap estimations for Uniswap are fetched directly from [Uniswap](https://uniswap.org) v3 swap routes. All displayed values should be seen as estimates. Except for the [fixed ASI exchange rate](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e), all other values are constantly changing based on market conditions. There is no guarantee the displayed values reflect the value of your investment once the actual ASI swap mechanism is released. Use at your own risk. diff --git a/features/strategies/components/FormAmount/FormAmount.tsx b/features/strategies/components/FormAmount.tsx similarity index 90% rename from features/strategies/components/FormAmount/FormAmount.tsx rename to features/strategies/components/FormAmount.tsx index a8b8e09..3569c66 100644 --- a/features/strategies/components/FormAmount/FormAmount.tsx +++ b/features/strategies/components/FormAmount.tsx @@ -1,7 +1,6 @@ -import styles from './FormAmount.module.css' import { Dispatch, SetStateAction } from 'react' import { TokenSymbol } from '@/types' -import { Select, Input } from '@/components' +import { Select, Input, FormInline } from '@/components' export function FormAmount({ amount, @@ -40,7 +39,7 @@ export function FormAmount({ ] return ( - + ) } diff --git a/features/strategies/components/FormAmount/index.tsx b/features/strategies/components/FormAmount/index.tsx deleted file mode 100644 index 02478c5..0000000 --- a/features/strategies/components/FormAmount/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './FormAmount' diff --git a/features/strategies/components/FormMarket/FormMarket.tsx b/features/strategies/components/FormMarket.tsx similarity index 80% rename from features/strategies/components/FormMarket/FormMarket.tsx rename to features/strategies/components/FormMarket.tsx index 875d98f..715d452 100644 --- a/features/strategies/components/FormMarket/FormMarket.tsx +++ b/features/strategies/components/FormMarket.tsx @@ -1,6 +1,5 @@ -import styles from './FormMarket.module.css' import { Dispatch, SetStateAction } from 'react' -import { Select } from '@/components' +import { Select, FormInline } from '@/components' import { type Market } from '@/features/strategies' export function FormMarket({ @@ -15,13 +14,13 @@ export function FormMarket({ { value: 'uniswap-v3', label: 'Uniswap v3' } ] return ( - + ) } diff --git a/features/strategies/components/FormMarket/FormMarket.module.css b/features/strategies/components/FormMarket/FormMarket.module.css deleted file mode 100644 index 738f394..0000000 --- a/features/strategies/components/FormMarket/FormMarket.module.css +++ /dev/null @@ -1,8 +0,0 @@ -.form { - display: inline-flex; - border: 1px solid rgba(var(--foreground-rgb), 0.15); - border-radius: var(--border-radius); - overflow: hidden; - margin: -0.15em 0.25rem 0 0.25rem; - font-size: 0.9em; -} diff --git a/features/strategies/components/FormMarket/index.tsx b/features/strategies/components/FormMarket/index.tsx deleted file mode 100644 index 02153f2..0000000 --- a/features/strategies/components/FormMarket/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './FormMarket' diff --git a/features/strategies/components/index.tsx b/features/strategies/components/index.tsx index f59a09f..43a71f7 100644 --- a/features/strategies/components/index.tsx +++ b/features/strategies/components/index.tsx @@ -1,3 +1,5 @@ export * from './FormAmount' export * from './FormMarket' export * from './Result' +export * from './Buy' +export * from './Swap' diff --git a/features/strategies/index.tsx b/features/strategies/index.tsx index 22d2f5f..dadf59b 100644 --- a/features/strategies/index.tsx +++ b/features/strategies/index.tsx @@ -1,4 +1,3 @@ -export * from './components/Buy' -export * from './components/Swap' +export * from './components' export * from './hooks' export * from './types'