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

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 '@/styles/loading-ui.css'
import Script from 'next/script' import Script from 'next/script'
import { title, description, font, liveUrl, isProduction } from '@/constants' import { title, description, font, liveUrl, isProduction } from '@/constants'
import { headers } from 'next/headers'
export const metadata: Metadata = { export const metadata: Metadata = {
title, title,
@ -17,11 +16,8 @@ export default function RootLayout({
}: Readonly<{ }: Readonly<{
children: React.ReactNode children: React.ReactNode
}>) { }>) {
const headersList = headers()
const locale = headersList.get('x-locale')
return ( return (
<html lang="en" data-locale={locale}> <html lang="en">
<head> <head>
{isProduction ? ( {isProduction ? (
<Script <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 { Swap, Buy } from '@/features/strategies'
import { MarketData } from '@/features/prices' import { MarketData } from '@/features/prices'
import { Content, Footer, Header } from '@/components' import styles from './page.module.css'
export default function Home() { export default function Home() {
return ( return (

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

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

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

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

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

@ -6,13 +6,13 @@
} }
/* culture-sensitive color psychology */ /* culture-sensitive color psychology */
[data-locale|='zh'] .change, .change[data-locale|='zh'],
[data-locale|='ja'] .change { .change[data-locale|='ja'] {
--color-positive: #ff4136; --color-positive: #ff4136;
--color-negative: #2ecc40; --color-negative: #2ecc40;
} }
[data-locale|='ko'] .change { .change[data-locale|='ko'] {
--color-positive: #0074d9; --color-positive: #0074d9;
--color-negative: #2ecc40; --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 { TriangleUpIcon, TriangleDownIcon } from '@radix-ui/react-icons'
import styles from './PriceChange.module.css' import styles from './PriceChange.module.css'
import { useEffect, useState } from 'react'
export function PriceChange({ priceChange }: { priceChange: number }) { export function PriceChange({ priceChange }: { priceChange: number }) {
const [locale, setLocale] = useState('en-US')
const styleClasses = priceChange > 0 ? styles.positive : styles.negative const styleClasses = priceChange > 0 ? styles.positive : styles.negative
useEffect(() => {
const userLocale = navigator?.languages?.length
? navigator.languages[0]
: navigator.language
setLocale(userLocale)
}, [])
return ( return (
<span className={`${styles.change} ${styleClasses}`} title="24h change"> <span
className={`${styles.change} ${styleClasses}`}
title="24h change"
data-locale={locale}
>
{priceChange > 0 ? <TriangleUpIcon /> : <TriangleDownIcon />} {priceChange > 0 ? <TriangleUpIcon /> : <TriangleDownIcon />}
{Math.abs(priceChange).toFixed(1)}% {Math.abs(priceChange).toFixed(1)}%
</span> </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() const tokenAddresses = tokens.map((token) => token.address).toString()
export type PriceCoingecko = {
usd: number
usd_24h_change: number
}
export type Prices = { export type Prices = {
ocean: { ocean: PriceCoingecko
usd: number fet: PriceCoingecko
usd_24h_change: number agix: PriceCoingecko
} asi: PriceCoingecko
fet: {
usd: number
usd_24h_change: number
}
agix: {
usd: number
usd_24h_change: number
}
asi: {
usd: number
usd_24h_change: number
}
} }
export function usePrices(): { export function usePrices(): {

2
features/prices/index.tsx
View File

@ -1,2 +1,2 @@
export * from './components/MarketData' export * from './components'
export * from './hooks' 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 { useDebounce } from 'use-debounce'
import { SwapResults } from './Results' import { SwapResults } from './Results'
import { TokenSymbol } from '@/types' 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 stylesShared from '@/features/strategies/styles/shared.module.css'
import { type Market } from '@/features/strategies'
export function Swap() { export function Swap() {
const [amount, setAmount] = useState(100) 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
}