added view details & view select screens 🏋🏾

MetaFam · Mar 21, 2022 · 8291e65 · 8291e65
1 parent 22c52ec
commit 8291e65
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 40 deletions.
diff --git a/packages/ui/pages/index.tsx b/packages/ui/pages/index.tsx
@@ -6,7 +6,7 @@ import NextLink from 'next/link'
 import {
   Box, Container, Flex, Image, Stack, Tooltip,
   Table, Thead, Tbody, Tr, Th, Td,
-  Spinner, Text, Link as ChakraLink,
+  Spinner, Text, Link as ChakraLink, chakra,
 } from '@chakra-ui/react'
 import Markdown from 'react-markdown'
 import { httpURL } from 'lib/helpers'
@@ -42,7 +42,7 @@ const Home: NextPage = () => {
   )
 
   const setToken = (index: number, info: Record<string, unknown>) => {
-    setTokens((tkns) => ([
+    setTokens((tkns: Array<TokenState>) => ([
       ...tkns.slice(0, index),
       { ...tkns[index], ...info },
       ...tkns.slice(index + 1),
@@ -87,8 +87,11 @@ const Home: NextPage = () => {
   return (
     <Container maxW="full">
       <Head>
-        <title>’Chievemint NFTs</title>
-        <meta name="description" content="MetaGame’s ’Chievemint NFTs" />
+        <chakra.title>’Chievemint NFTs</chakra.title>
+        <chakra.meta
+          name="description"
+          content="MetaGame’s ’Chievemint NFTs"
+        />
       </Head>
 
       <Flex h="33vh" maxW="40rem" margin="auto">
@@ -118,7 +121,7 @@ const Home: NextPage = () => {
           </Tr>
         </Thead>
         <Tbody>
-          {tokens.map((token) => {
+          {tokens.map((token: TokenState) => {
             if(token.state === 'loaded') {
               return (
                 <Tr key={token.id}>

diff --git a/packages/ui/pages/view/[nft_id].tsx b/packages/ui/pages/view/[nft_id].tsx
@@ -1,36 +1,48 @@
 import { useEffect, useMemo, useState } from 'react'
 import {
   Alert, AlertDescription, AlertIcon, AlertTitle, Box,
-  Button, Container, Image, Input,
+  Button, Container, Image, Input, chakra, Heading,
+  Flex, Spinner, Text,
 } from '@chakra-ui/react'
 import { ethers } from 'ethers'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import type { NextPage } from 'next'
-import { httpURL, isEmpty } from '../../lib/helpers'
-import { Maybe } from '../../lib/types'
-import address from '../../contracts/BulkDisbersableNFTs.address'
-import abi from '../../contracts/BulkDisbersableNFTs.abi'
+import ReactMarkdown from 'react-markdown'
+import { httpURL, isEmpty } from 'lib/helpers'
+import { Maybe } from 'lib/types'
+import address from 'contracts/BulkDisbersableNFTs.address'
+import abi from 'contracts/BulkDisbersableNFTs.abi'
+
+const Markdown = chakra(ReactMarkdown)
 
 const View: NextPage = () => {
   const router = useRouter()
   const tokenId = router.query.nft_id
   const [metadata, setMetadata] = useState<Record<string, unknown>>()
   const [error, setError] = useState<string>()
 
-  let ethereum: Maybe<ethers.providers.ExternalProvider> = null
-  if (typeof window !== 'undefined') {
-    ({ ethereum } = window)
-  }
+  // let ethereum: Maybe<ethers.providers.ExternalProvider> = null
+  // if (typeof window !== 'undefined') {
+  //   ({ ethereum } = window)
+  // }
+  // const provider = useMemo(
+  //   () => (
+  //     ethereum ? new ethers.providers.Web3Provider(ethereum) : null
+  //   ),
+  //   [ethereum],
+  // )
   const provider = useMemo(
     () => (
-      ethereum ? new ethers.providers.Web3Provider(ethereum) : null
+      new ethers.providers.JsonRpcProvider(
+        process.env.NEXT_PUBLIC_TOKEN_RPC
+      )
     ),
-    [ethereum],
+    [],
   )
   const contract = useMemo(
     () => (provider ? (
-      new ethers.Contract(address, abi, provider.getSigner())
+      new ethers.Contract(address, abi, provider)
     ) : (
       null
     )),
@@ -70,16 +82,53 @@ const View: NextPage = () => {
     )
   }
 
+  if(!metadata) {
+    return (
+      <Flex align="center" justify="center" h="100vh">
+        <Spinner thickness="4px" speed="1s" mr={2}/>
+        <Text>Loading Metadata For Token #{tokenId}</Text>
+      </Flex>
+    )
+  }
+
+  const {
+    name, image, animation_url: animationURL,
+    description,
+  } = metadata
+
   return (
-    <Container>
+    <Container maxW="full" align="center">
       <Head>
-        <title>View NFT</title>
-        <meta name="description" content="MetaGame’s ’Chievemint NFTs" />
+        <title>View NFT #{tokenId}</title>
+        <meta
+          name="description"
+          content="MetaGame’s ’Chievemint NFTs"
+        />
       </Head>
-
-      <pre>
-        {JSON.stringify(metadata, null, 2)}
-      </pre>
+      {name && <Heading>{name}</Heading>}
+      {image && (
+        <Image
+          src={httpURL(image)}
+          alt={name}
+          maxW={64}
+          maxH={64}
+        />
+      )}
+      {description && (
+        <Markdown
+          sx={{ a: { textDecoration: 'underline' } }}
+        >
+          {description}
+        </Markdown>
+      )}
+      {animationURL && (
+        <chakra.video
+          maxW={60} maxH={60}
+          controls autoPlay loop muted
+        >
+          <chakra.source src={httpURL(animationURL)}/>
+        </chakra.video>
+      )}
     </Container>
   )
 }

diff --git a/packages/ui/pages/view/index.tsx b/packages/ui/pages/view/index.tsx
@@ -1,5 +1,9 @@
-import { useEffect, useMemo, useState } from 'react'
-import { Box, Button, Container, Input } from '@chakra-ui/react'
+import {
+  useEffect, useMemo, useState, ChangeEvent, FormEvent
+} from 'react'
+import {
+  chakra, Box, Button, Container, Input, Stack, Heading,
+} from '@chakra-ui/react'
 import { ethers } from 'ethers'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
@@ -14,19 +18,27 @@ const View: NextPage = () => {
   const [value, setValue] = useState<string | number>()
   const router = useRouter()
 
-  let ethereum: Maybe<ethers.providers.ExternalProvider> = null
-  if (typeof window !== 'undefined') {
-    ({ ethereum } = window)
-  }
+  // let ethereum: Maybe<ethers.providers.ExternalProvider> = null
+  // if (typeof window !== 'undefined') {
+  //   ({ ethereum } = window)
+  // }
+  // const provider = useMemo(
+  //   () => (
+  //     ethereum ? new ethers.providers.Web3Provider(ethereum) : null
+  //   ),
+  //   [ethereum],
+  // )
   const provider = useMemo(
     () => (
-      ethereum ? new ethers.providers.Web3Provider(ethereum) : null
+      new ethers.providers.JsonRpcProvider(
+        process.env.NEXT_PUBLIC_TOKEN_RPC
+      )
     ),
-    [ethereum],
+    [],
   )
   const contract = useMemo(
     () => (provider ? (
-      new ethers.Contract(address, abi, provider.getSigner())
+      new ethers.Contract(address, abi, provider)
     ) : (
       null
     )),
@@ -49,35 +61,42 @@ const View: NextPage = () => {
   return (
     <Container>
       <Head>
-        <title>View A NFT</title>
-        <meta
+        <chakra.title>View A NFT</chakra.title>
+        <chakra.meta
           name="description"
           content="Pick one of MetaGame’s ’Chievemint NFTs to view."
         />
       </Head>
 
-      <Box
+      <Stack
         as="form"
-        onSubmit={(evt: React.FormEvent) => {
+        align="center"
+        justify="center"
+        h="100vh"
+        onSubmit={(evt: FormEvent) => {
           evt.preventDefault()
           router.push(`/view/0x${Number(value).toString(16)}`)
         }}
       >
+        <Heading textAlign="center">
+          Enter the ID of a ’Chievemint NFT to view.
+        </Heading>
         <Input
           type="number"
           min={1}
           {...{ max, value }}
-          onChange={({ target: { value }}) => {
+          autoFocus
+          onChange={({ target: { value }}: ChangeEvent) => {
             setValue(isEmpty(value) ? value : Number(value))
           }}
         />
         <Button
           type="submit"
           isDisabled={[undefined, ''].includes(value as string)}
         >
-          View{!isEmpty(value) ? ` #0x${Number(value).toString(16)}` : ''}
+          View{(value && !isEmpty(value)) ? ` #0x${Number(value).toString(16)}` : ''}
         </Button>
-      </Box>
+      </Stack>
     </Container>
   )
 }

diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
@@ -6,6 +6,7 @@
       "dom.iterable",
       "esnext"
     ],
+    "types": ["node"],
     "allowJs": false,
     "skipLibCheck": true,
     "strict": true,

diff --git a/tsconfig.json b/tsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["node"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,