diff --git a/packages/web/components/PageHeader.tsx b/packages/web/components/PageHeader.tsx index b4b4747a..136fd467 100644 --- a/packages/web/components/PageHeader.tsx +++ b/packages/web/components/PageHeader.tsx @@ -2,6 +2,7 @@ import { Box, Button, Flex, Image, Stack } from '@metafam/ds'; import MetaGameImage from 'assets/metagame.png'; import { MetaLink } from 'components/Link'; import { LoginButton } from 'components/LoginButton'; +import { Ticker } from 'components/Ticker'; import React from 'react'; const MenuItem: React.FC> = ({ @@ -92,10 +93,12 @@ export const PageHeader: React.FC = () => { + diff --git a/packages/web/components/Ticker.tsx b/packages/web/components/Ticker.tsx new file mode 100644 index 00000000..bad808cd --- /dev/null +++ b/packages/web/components/Ticker.tsx @@ -0,0 +1,35 @@ +import { Flex, Heading, Image } from '@metafam/ds'; +import MetaGameLogo from 'assets/logo.png'; +import fetch from 'node-fetch'; +import React, { useEffect, useState } from 'react'; + +export const Ticker: React.FC = () => { + const [price, setPrice] = useState(0); + + useEffect(() => { + fetch( + `https://api.coingecko.com/api/v3/simple/price?ids=metagame&vs_currencies=usd`, + ) + .then((response) => response.json()) + .then((data) => setPrice(data.metagame.usd)); + }, [price, setPrice]); + + return ( + 0 ? 'flex' : 'none'} + > + MetaGameLogo + + SEED ${price.toFixed(2)} + + + ); +}; diff --git a/packages/web/package.json b/packages/web/package.json index d646ebcf..8e7a4c2c 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -22,6 +22,7 @@ "next": "latest", "next-images": "^1.4.1", "next-urql": "2.0.0", + "node-fetch": "^2.6.1", "opensea-js": "^1.1.10", "react": "^16.13.1", "react-dom": "^16.13.1",