SEED ticker using CoinGecko (#223)

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<React.ComponentProps<typeof MetaLink>> = ({
@@ -92,10 +93,12 @@ export const PageHeader: React.FC = () => {
       </Box>
 
       <Box
-        display={{ base: show ? 'flex' : 'none', md: 'block' }}
+        display={{ base: show ? 'block' : 'none', md: 'flex' }}
         justifyContent="center"
+        alignItems="center"
         width={{ base: 'full', md: 'auto' }}
       >
+        <Ticker />
         <LoginButton />
       </Box>
     </Flex>

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 (
+    <Flex
+      alignItems="center"
+      margin="15px"
+      display={price > 0 ? 'flex' : 'none'}
+    >
+      <Image
+        src={MetaGameLogo}
+        alt="MetaGameLogo"
+        objectFit="contain"
+        boxSize="2rem"
+        margin="0 15px 0 0"
+      />
+      <Heading size="xs" color="white" margin="0 15px 0 0">
+        SEED ${price.toFixed(2)}
+      </Heading>
+    </Flex>
+  );
+};

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",