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

static rendering for front page again

Browse Source
This commit is contained in:
Matthias Kretschmann 2024-04-14 12:52:37 +02:00
parent dd44cc864e
commit 64e138248d
Signed by: m
GPG Key ID: 606EEEF3C479A91F
11 changed files with 48 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/layout.tsx
View File

@ -3,7 +3,6 @@ import '@/styles/globals.css'
import '@/styles/loading-ui.css'
import Script from 'next/script'
import { title, description, font, liveUrl, isProduction } from '@/constants'
import { headers } from 'next/headers'
export const metadata: Metadata = {
title,
@ -17,11 +16,8 @@ export default function RootLayout({
}: Readonly<{
children: React.ReactNode
}>) {
const headersList = headers()
const locale = headersList.get('x-locale')
return (
<html lang="en" data-locale={locale}>
<html lang="en">
<head>
{isProduction ? (
<Script

4
app/page.tsx
View File

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

19
features/prices/components/MarketData/MarketData.tsx
View File

@ -1,10 +1,9 @@
'use client'
import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
import styles from './MarketData.module.css'
import { usePrices } from '@/features/prices'
import { usePrices, Price } from '@/features/prices'
import { Badge } from '@/components'
import { Price } from '../Price'
import styles from './MarketData.module.css'
export function MarketData() {
const { prices } = usePrices()
@ -13,14 +12,14 @@ export function MarketData() {
<ul className={styles.marketData}>
<li>
<p>1 ASI</p>
<Price price={prices.asi.usd} priceChange={prices.asi.usd_24h_change} />
<Price price={prices.asi} />
</li>
<li>
<p>
1 Fet = {ratioFetToAsi} ASI
<Badge>fixed</Badge>
</p>
<Price price={prices.fet.usd} priceChange={prices.fet.usd_24h_change} />
<Price price={prices.fet} />
</li>
<li>
<p>
@ -29,10 +28,7 @@ export function MarketData() {
ASI
<Badge>fixed</Badge>
</p>
<Price
price={prices.ocean.usd}
priceChange={prices.ocean.usd_24h_change}
/>
<Price price={prices.ocean} />
</li>
<li>
<p>
@ -41,10 +37,7 @@ export function MarketData() {
ASI
<Badge>fixed</Badge>
</p>
<Price
price={prices.agix.usd}
priceChange={prices.agix.usd_24h_change}
/>
<Price price={prices.agix} />
</li>
</ul>
)

18
features/prices/components/Price/Price.tsx
View File

@ -1,14 +1,8 @@
import styles from './Price.module.css'
import { usePrices } from '@/features/prices'
import { usePrices, type PriceCoingecko } from '@/features/prices'
import { PriceChange } from './PriceChange'
import styles from './Price.module.css'
export function Price({
price,
priceChange
}: {
price: number
priceChange?: number
}) {
export function Price({ price }: { price: PriceCoingecko }) {
const { isValidating, isLoading } = usePrices()
const feedbackClasses = isLoading
@ -19,8 +13,10 @@ export function Price({
return (
<p className={styles.price}>
<span className={`${styles.fiat} ${feedbackClasses}`}>${price} </span>
{priceChange ? <PriceChange priceChange={priceChange} /> : null}
<span className={`${styles.fiat} ${feedbackClasses}`}>${price.usd} </span>
{price?.usd_24h_change ? (
<PriceChange priceChange={price.usd_24h_change} />
) : null}
</p>
)
}

6
features/prices/components/Price/PriceChange.module.css
View File

@ -6,13 +6,13 @@
}
/* culture-sensitive color psychology */
[data-locale|='zh'] .change,
[data-locale|='ja'] .change {
.change[data-locale|='zh'],
.change[data-locale|='ja'] {
--color-positive: #ff4136;
--color-negative: #2ecc40;
}
[data-locale|='ko'] .change {
.change[data-locale|='ko'] {
--color-positive: #0074d9;
--color-negative: #2ecc40;
}

17
features/prices/components/Price/PriceChange.tsx
View File

@ -1,11 +1,26 @@
'use client'
import { TriangleUpIcon, TriangleDownIcon } from '@radix-ui/react-icons'
import styles from './PriceChange.module.css'
import { useEffect, useState } from 'react'
export function PriceChange({ priceChange }: { priceChange: number }) {
const [locale, setLocale] = useState('en-US')
const styleClasses = priceChange > 0 ? styles.positive : styles.negative
useEffect(() => {
const userLocale = navigator?.languages?.length
? navigator.languages[0]
: navigator.language
setLocale(userLocale)
}, [])
return (
<span className={`${styles.change} ${styleClasses}`} title="24h change">
<span
className={`${styles.change} ${styleClasses}`}
title="24h change"
data-locale={locale}
>
{priceChange > 0 ? <TriangleUpIcon /> : <TriangleDownIcon />}
{Math.abs(priceChange).toFixed(1)}%
</span>

2
features/prices/components/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from './MarketData'
export * from './Price'

25
features/prices/hooks/use-prices.tsx
View File

@ -6,23 +6,16 @@ import useSWR from 'swr'
const tokenAddresses = tokens.map((token) => token.address).toString()
export type PriceCoingecko = {
usd: number
usd_24h_change: number
}
export type Prices = {
ocean: {
usd: number
usd_24h_change: number
}
fet: {
usd: number
usd_24h_change: number
}
agix: {
usd: number
usd_24h_change: number
}
asi: {
usd: number
usd_24h_change: number
}
ocean: PriceCoingecko
fet: PriceCoingecko
agix: PriceCoingecko
asi: PriceCoingecko
}
export function usePrices(): {

2
features/prices/index.tsx
View File

@ -1,2 +1,2 @@
export * from './components/MarketData'
export * from './components'
export * from './hooks'

3
features/strategies/components/Swap/Swap.tsx
View File

@ -4,9 +4,8 @@ import { useState } from 'react'
import { useDebounce } from 'use-debounce'
import { SwapResults } from './Results'
import { TokenSymbol } from '@/types'
import { FormAmount, FormMarket } from '@/features/strategies/components'
import { type Market, FormAmount, FormMarket } from '@/features/strategies'
import stylesShared from '@/features/strategies/styles/shared.module.css'
import { type Market } from '@/features/strategies'
export function Swap() {
const [amount, setAmount] = useState(100)

11
middleware.ts
View File

@ -1,11 +0,0 @@
import { NextResponse, type NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
// add x-locale header to all responses
const locale =
request.headers.get('accept-language')?.split(',')?.[0] || 'en-US'
const response = NextResponse.next()
response.headers.set('x-locale', locale)
return response
}