Example: adding a duplicate module with front end examples - Chainfaces :⚆.^|

client/src/App/AppView.js

@@ -1,13 +1,17 @@
 import { useEffect, useState } from 'react'
 import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom'
 import io from 'socket.io-client'
+import Chainface from 'components/Chainface'
 import Chatroom from 'components/Chatroom'
 import LoginC2A from 'components/LoginC2A'
-import Welcome from 'components/Welcome'
+import Nfts from 'components/Nfts'
+import Profile from 'components/Profile'
+import Wtf from 'components/Wtf'
 import { END_POINT } from 'utils'
 import * as Styled from 'style'
 
 const AppView = ({ handleSignIn, handleSignOut, loggedIn }) => {
+
     const [socket, setSocket] = useState(false)
 
     useEffect(() => {
@@ -31,24 +35,39 @@ const AppView = ({ handleSignIn, handleSignOut, loggedIn }) => {
         }
     }, [socket])
 
+
+
     return (
         <Router>
             <ScrollToTop />
             <LoginC2A {...{ handleSignIn, handleSignOut, loggedIn }} />
+
             <Styled.Main>
                 {socket && <Chatroom account={loggedIn} {...{ socket }} />}
                 <Routes>
-                    <Route path={'/'} element={<Welcome {...{ loggedIn, handleSignIn, socket }} />} />
+                    <Route path={'/'} element={<Nfts />} />
+                    <Route path={'/chainface/:id'} element={<Chainface />} />
+                    <Route path={'/profile/:_profile'} element={<Profile {...{ loggedIn }} />} />
+                    <Route path={'/wtf'} element={<Wtf />} />
                 </Routes>
             </Styled.Main>
         </Router>
     )
 }
 
+
+
 const ScrollToTop = () => {
     const { pathname } = useLocation()
     useEffect(() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }, [pathname])
-    return null
+    const isHomepage = pathname === '/'
+    const isWtf = pathname === '/wtf'
+    return (
+        <>
+            {!isHomepage && <Styled.C2A to={'/'} className={'left'} />}
+            {!isWtf && <Styled.C2A to={'/wtf'} className={'right'}>wtf</Styled.C2A>}
+        </>
+    )
 }
 
 export default AppView

client/src/components/Chainface/Chainface.js

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import axios from 'axios'
+import faces from 'components/Nfts/faces'
+import * as Styled from './Chainface.style'
+import { END_POINT, formatDate } from 'utils'
+
+const Chainface = () => {
+    const { id } = useParams()
+    const [face, setFace] = useState(undefined)
+    const [meta, setMeta] = useState(undefined)
+    useEffect(() => {
+        const getFace = async () => {
+            const _face = await axios.get(`${END_POINT}/nfts?tokenId=${id}`)
+            if (_face.data && _face.data.length === 1) {
+                setMeta(_face.data[0])
+            }
+
+        }
+        if (id <= faces.length) {
+            getFace()
+            setFace(faces[id])
+        }
+    }, [id])
+
+    return (
+        <Styled.Div>
+            {Number(id) > 0 && <Styled.Left><Link to={`/chainface/${Number(id) - 1}`}>←</Link></Styled.Left>}
+            {face && <h1>{face}</h1>}
+            {meta && (
+                <>
+                    <p>#{meta.tokenId}</p>
+                    <p>minted: {formatDate(meta.timestamp * 1000)} (UTC) - block: {meta.blockNumber}</p>
+                    <p>logIndex: {meta.logIndex} - txIndex: {meta.transactionIndex}</p>
+                    <p>symmetry: {meta.faceSymmetry} - golf score: {meta.golfScore} - percentBear: {meta.percentBear}</p>
+                    <p>owner: <Link to={`/profile/${meta.owner}`}>{meta.owner}</Link> - owners: {meta.owners.length}</p>
+                </>
+            )}
+            {Number(id) < faces.length - 1 && <Styled.Right><Link to={`/chainface/${Number(id) + 1}`}>→</Link></Styled.Right>}
+        </Styled.Div>
+    )
+}
+
+export default Chainface

client/src/components/Chainface/Chainface.style.js

@@ -0,0 +1,48 @@
+import styled from 'styled-components'
+
+export const Div = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    > h1 {
+        font-size: 16vw;
+        line-height: 32vw;
+        font-family: Times;
+    }
+    > p {
+        &:first-of-type {
+            font-weight: bold;
+       }
+    }
+`
+
+export const Left = styled.div`
+    left: 24px;
+    top: 50%;
+    position: fixed;
+    font-size: 2vw;
+    > a {
+        text-decoration: none;
+        color: #666;
+        &:hover {
+            color: #333;
+        }
+    }
+`
+
+export const Right = styled.div`
+    right: 24px;
+    top: 50%;
+    position: fixed;
+    font-size: 2vw;
+    > a {
+        text-decoration: none;
+        color: #666;
+        &:hover {
+            color: #333;
+        }
+    }
+`

client/src/components/Chainface/index.js

@@ -0,0 +1 @@
+export { default } from './Chainface'

client/src/components/CurrentOwners/CurrentOwners.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import axios from 'axios'
+import { END_POINT } from 'utils'
+
+const CurrentOwners = () => {
+    const [owners, setOwners] = useState(undefined)
+
+    useEffect(() => {
+        if (owners === undefined) {
+            const getOwners = async () => {
+                try {
+                    const { data } = await axios.get(`${END_POINT}/owners`)
+                    setOwners(data.length)
+                } catch (e) {
+                    console.log(e) // TODO - handle errors
+                }
+            }
+            getOwners()
+        }
+
+    }, [owners])
+
+    return (
+        <p>Current Owners: {owners === undefined ? '...' : owners}</p>
+    )
+}
+
+export default CurrentOwners

client/src/components/CurrentOwners/index.js

@@ -0,0 +1 @@
+export { default } from './CurrentOwners'

client/src/components/Nfts/Nfts.js

@@ -0,0 +1,22 @@
+import { Fragment } from 'react'
+import { Link } from 'react-router-dom'
+import * as Styled from './Nfts.style'
+import faces from './faces'
+
+const Nfts = () => {
+    return (
+        <Styled.Grid>
+            {faces.map((face, i) => {
+                return (
+                    <Fragment key={i}>
+                        <div key={i}><Link to={`/chainface/${i}`}>{face}</Link></div>
+                        {i === 420 && <h1>Chainfaces</h1>}
+                        {i === 690 && <h2>by natealex</h2>}
+                    </Fragment>
+                )
+            })}
+        </Styled.Grid>
+    )
+}
+
+export default Nfts

client/src/components/Nfts/Nfts.style.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+import * as Styled from 'style'
+
+export const Grid = styled(Styled.Grid)`
+    min-height: 100%;
+    h1 {
+        font-family: "Press Start 2P";
+    }
+    h2 {
+        font-family: "Press Start 2P";
+    }
+`