new page is supported: etherium airdrops

apps/website/src/app/demos/dashboard-etherium-airdrops/Content.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import {useState} from 'react'
+
+import Collapse from '@mui/material/Collapse'
+
+import AdaptiveGridTwoEqualItems from '@/components/AdaptiveGrid/TwoEqualItems'
+
+import TableBody from '@/components/Coingecko/TableBody'
+import TableHeader from '@/components/Coingecko/TableHeader'
+import CustomAlert from '@/components/Coingecko/CustomAlert'
+import PageHeaderContainer from '@/components/Coingecko/PageHeaderContainer'
+
+import {Slogan} from '@/styled-components'
+import Table from '@/styled-components/Coingecko/Table/Table'
+
+import {
+  useCryptoCurrencyList,
+  useSortingCryptoCurrencyList,
+} from '@/hooks/coingecko/simplePrices'
+
+import {getCoingeckoRequestParams} from './db'
+
+import stack from './stack'
+
+import {coinCellParams, usdCellParams} from './setting'
+
+const Content = () => {
+  const [priceListNotifacationIsVisible, setPriceListNotifacationIsVisible] =
+    useState(false)
+
+  const params = getCoingeckoRequestParams()
+  const {prices, setPrices, apiRequest} = useCryptoCurrencyList({
+    setPriceListNotifacationIsVisible,
+    params,
+  })
+
+  const {sorting, setSorting} = useSortingCryptoCurrencyList({
+    prices,
+    setPrices,
+    setPriceListNotifacationIsVisible,
+  })
+
+  return (
+    <>
+      <Slogan>Coingecko portfolio fetcher</Slogan>
+      <AdaptiveGridTwoEqualItems
+        ItemA={
+          <>
+            <div>Technologies: {stack.join(', ')}</div>
+            <p>
+              Sort by usd price, Old price USD (24h), Old price BTC (24h), Old
+              price ETH (24h)
+            </p>
+          </>
+        }
+        ItemB={<PageHeaderContainer apiRequest={apiRequest} />}
+      />
+
+      <Collapse in={priceListNotifacationIsVisible}>
+        <CustomAlert sorting={sorting} />
+      </Collapse>
+
+      <Table>
+        <TableHeader
+          setSorting={setSorting}
+          sorting={sorting}
+          coinCellParams={coinCellParams}
+          usdCellParams={usdCellParams}
+        />
+        <TableBody
+          items={prices}
+          coinCellParams={coinCellParams}
+          usdCellParams={usdCellParams}
+        />
+      </Table>
+    </>
+  )
+}
+
+export default Content

apps/website/src/app/demos/dashboard-etherium-airdrops/db/index.ts

@@ -0,0 +1,21 @@
+import {CoingeckoSimplePriceRequest} from '@/types/coingecko/simplePrices/RequestParams'
+import Currency from '@/enums/CoingeckoCryptoCurrency'
+
+export function getCoingeckoRequestParams(): CoingeckoSimplePriceRequest {
+  const coingeckoIds = [
+    Currency.BTC,
+    Currency.ETHEREUM,
+    Currency.ENA,
+    Currency.ETHFI,
+    Currency.REZ,
+    Currency.MANTA,
+  ]
+
+  return {
+    ids: coingeckoIds.join(','),
+    vs_currencies: 'usd',
+    include_24hr_change: true,
+    include_7d_change: true,
+    include_last_updated_at: true,
+  }
+}

apps/website/src/app/demos/dashboard-etherium-airdrops/layout.tsx

@@ -0,0 +1,7 @@
+import layout from '@/components/NextjsLayout'
+import generateMetadata from '@/seo/metadata'
+import props from './seo'
+
+export const metadata = generateMetadata(props)
+
+export default layout

apps/website/src/app/demos/dashboard-etherium-airdrops/page.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import type {NextPage} from 'next'
+
+import Content from './Content'
+
+import Layout from '@/components/MainLayout'
+import LeftDrawer from '@/components/Drawers/LeftDrawer'
+import {menuItems} from '@/menu'
+
+import {drawerWidth} from '@/config/layout'
+import {LayoutProvider} from '@/providers'
+
+import {title} from './seo'
+
+const Title = () => {
+  return <h1>{title}</h1>
+}
+
+const PageContent = () => {
+  return (
+    <LayoutProvider>
+      <Content />
+    </LayoutProvider>
+  )
+}
+
+const Page: NextPage = () => {
+  return (
+    <Layout
+      PageContent={PageContent}
+      HeaderTitle={Title}
+      drawerWidth={drawerWidth}
+      LeftDrawer={<LeftDrawer items={menuItems} />}
+    />
+  )
+}
+
+export default Page

apps/website/src/app/demos/dashboard-etherium-airdrops/seo.ts

@@ -0,0 +1,15 @@
+import {InternalMetadata} from '@/seo/metadata'
+
+const title = 'Coingecko: etherium airdrop price checker (2024 edition)'
+const description = 'Pairs are'
+const canonical = '/demos/dashboard-etherium-airdrops'
+
+const props: InternalMetadata = {
+  title,
+  description,
+  canonical,
+}
+
+export default props
+
+export {title}

apps/website/src/app/demos/dashboard-etherium-airdrops/setting.ts

@@ -0,0 +1,28 @@
+import {UICellParams, UICoinCellParams} from '@/types/coingecko/cells'
+
+export const coinCellParams: UICoinCellParams = {
+  label: 'Coin',
+  width: '8%',
+  mobile: {
+    hidden: false,
+  },
+}
+
+export const usdCellParams: UICellParams = {
+  lastUpdatedItemParams: {
+    label: 'USD',
+    width: '46%',
+    mobile: {
+      hidden: false,
+      width: '46%',
+    },
+  },
+  historicItemParams: {
+    label: 'Day ago',
+    width: '46%',
+    mobile: {
+      hidden: false,
+      width: '46%',
+    },
+  },
+}

apps/website/src/app/demos/dashboard-etherium-airdrops/stack.tsx

@@ -0,0 +1,3 @@
+const stack = ['React', 'React Custom Hooks', 'Coingecko API']
+
+export default stack

apps/website/src/enums/CoingeckoCryptoCurrency.ts

@@ -31,6 +31,12 @@ enum CoingeckoCryptoCurrency {
   EZETH = 'renzo-restaked-eth',
   STONE = 'stakestone-ether',
   CBETH = 'coinbase-wrapped-staked-eth',
+
+  // ETHEREUM AIRDROPS
+  ENA = 'ethena',
+  MANTA = 'manta-network',
+  ETHFI = 'ether-fi',
+  REZ = 'renzo',
 }
 
 export default CoingeckoCryptoCurrency