m/asi-calculator
1
0
Fork 0
mirror of https://github.com/kremalicious/asi-calculator.git synced 2024-12-22 09:23:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

ui reorg

Browse Source
This commit is contained in:
Matthias Kretschmann 2024-03-30 18:27:18 +00:00
parent 70398b26c4
commit 2498e5e5cb
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 80 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/page.module.css
View File

@ -11,6 +11,7 @@
.title {
font-size: clamp(1.3rem, 10vw, 2.5rem);
margin-top: 5vh;
}
.description {
@ -19,8 +20,11 @@
.grid {
display: grid;
gap: 2rem;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}
.breakout {
max-width: calc(var(--max-width) * 1.5);
margin: 3rem auto;
}

13
app/page.tsx
View File

@ -2,6 +2,7 @@ import styles from './page.module.css'
import { metadata } from './layout'
import { Swap, Buy } from '@/components/Strategies'
import { Content } from '@/components/Content'
import { CalculationBase } from '@/components/CalculationBase'
export default function Home() {
return (
@ -11,10 +12,14 @@ export default function Home() {
<p className={styles.description}>{`${metadata.description}`}</p>
</header>
<main className={styles.main}>
<div className={styles.grid}>
<Swap />
<Buy />
</div>
<section className={styles.breakout}>
<div className={styles.grid}>
<Swap />
<Buy />
</div>
<CalculationBase />
</section>
<Content />
</main>
<footer className={styles.footer}>

27
components/CalculationBase/CalculationBase.module.css Normal file
View File

@ -0,0 +1,27 @@
.label {
font-size: 0.7rem;
color: rgba(var(--foreground-rgb), 0.6);
border: 1px solid rgba(var(--foreground-rgb), 0.2);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
margin-left: 0.2rem;
margin-right: 0.2rem;
vertical-align: middle;
}
.calculationBase {
border-top: 1px solid rgba(var(--foreground-rgb), 0.2);
border-left: 1px solid rgba(var(--foreground-rgb), 0.2);
border-bottom: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
border-radius: var(--border-radius);
margin-top: 1.5rem;
}
.calculationBase li {
border-bottom: 1px solid rgba(var(--foreground-rgb), 0.2);
border-right: 1px solid rgba(var(--foreground-rgb), 0.2);
padding: 1rem;
font-size: 0.8rem;
}

33
components/CalculationBase/CalculationBase.tsx Normal file
View File

@ -0,0 +1,33 @@
'use client'
import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
import styles from './CalculationBase.module.css'
import { usePrices } from '@/hooks'
export function CalculationBase() {
const prices = usePrices()
return (
<ul className={styles.calculationBase}>
<li>
1 ASI
<br />= ${prices.asi}
</li>
<li>
1 OCEAN = {ratioOceanToAsi} ASI
<span className={styles.label}>fixed</span>
<br />= ${prices.ocean}
</li>
<li>
1 AGIX = {ratioAgixToAsi} ASI
<span className={styles.label}>fixed</span>
<br />= ${prices.agix}
</li>
<li>
1 Fet = {ratioFetToAsi} ASI
<span className={styles.label}>fixed</span>
<br />= ${prices.fet}
</li>
</ul>
)
}

1
components/CalculationBase/index.tsx Normal file
View File

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

30
components/Content/Content.module.css
View File

@ -10,33 +10,3 @@
.content a {
text-decoration: underline;
}
.label {
font-size: 0.7rem;
color: rgba(var(--foreground-rgb), 0.6);
border: 1px solid rgba(var(--foreground-rgb), 0.2);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
margin-left: 0.2rem;
margin-right: 0.2rem;
vertical-align: middle;
}
.calculationBase {
border: 1px solid rgba(var(--foreground-rgb), 0.2);
border-bottom: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
border-radius: var(--border-radius);
margin-top: 2rem;
}
.calculationBase li {
border-bottom: 1px solid rgba(var(--foreground-rgb), 0.2);
padding: 1rem;
font-size: 0.8rem;
}
.calculationBase li:nth-child(odd) {
border-right: 1px solid rgba(var(--foreground-rgb), 0.2);
}

37
components/Content/Content.tsx
View File

@ -1,12 +1,6 @@
'use client'
import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
import styles from './Content.module.css'
import { usePrices } from '@/hooks'
export function Content() {
const prices = usePrices()
return (
<div className={styles.content}>
<p>
@ -15,36 +9,15 @@ export function Content() {
fixed ASI exchange rate
</a>
, the fiat values fetched from{' '}
<a href="https://coingecko.com">Coingecko</a> and the token swap quotes
from <a href="https://uniswap.org">Uniswap</a> v3 routes are constantly
<a href="https://coingecko.com">Coingecko</a> and the quotes from{' '}
<a href="https://uniswap.org">Uniswap</a> v3 swap routes are constantly
changing.
</p>
<p>
There is no guarantee they reflect the value of your investment once the
actual ASI swap mechanism is released. Use at your own risk.
There is no guarantee displayed values reflect the value of your
investment once the actual ASI swap mechanism is released. Use at your
own risk.
</p>
<ul className={styles.calculationBase}>
<li>
1 OCEAN = {ratioOceanToAsi} ASI
<span className={styles.label}>fixed</span>
<br />= ${prices.ocean}
</li>
<li>
1 AGIX = {ratioAgixToAsi} ASI
<span className={styles.label}>fixed</span>
<br />= ${prices.agix}
</li>
<li>
1 Fet = {ratioFetToAsi} ASI
<span className={styles.label}>fixed</span>
<br />= ${prices.fet}
</li>
<li>
1 ASI
<br />= ${prices.asi}
</li>
</ul>
</div>
)
}