Update minter to use portfolio

minter/src/App.css

@@ -43,6 +43,9 @@ div.container.wide {
   flex-wrap: wrap;
   align-items: center;
 }
+p.row {
+  max-width:  100%!important;
+}
 
 /*Login button*/
 a.button {

minter/src/App.js

@@ -2,6 +2,7 @@ import Minter from './components/minter'
 import Metamask from './components/metamask'
 import Verifier from './components/verifier'
 import Avatar from './components/avatar'
+import Portfolio from './components/portfolio'
 import { Container } from './components/generic'
 import { useState, useEffect } from 'react'
 import { log } from './modules/helpers'
@@ -41,6 +42,7 @@ function App() {
 				<Route path='/verify/:verificationCode' element={ <Verifier /> } />
 			</Route>
 			<Route exact path='/avatar' element={ <Avatar /> } />
+			<Route exact path='/portfolio' element={ <Portfolio /> } />
 
 		</Routes>
 

minter/src/components/metamask.js

@@ -70,6 +70,7 @@ export default function ComponentName( ) {
 		
 		<div>
 			<Link className='button' to='/mint'>Mint Rocketeer</Link>
+			<Link className='button' to='/portfolio'>View Rocketeer Portfolio</Link>
 			<Link className='button' to='/verify'>Discord verify</Link>
 			<Link className='button' to='/avatar'>Set address avatar</Link>
 		</div>

minter/src/components/minter.js

@@ -92,7 +92,7 @@ export default function Minter() {
 	if( mintedTokenId ) return <Container>
 
 			<h1>Minting Successful!</h1>
-			<a className="button" rel="noreferrer" target="_blank" alt="Link to opensea details of Rocketeer" href={ rocketeerUriOnOpensea( chainId, mintedTokenId ) }>View on Opensea</a>
+			<a className="button" rel="noreferrer" target="_blank" alt="Link to opensea details of Rocketeer" href='/#/portfolio'>View your Rocketeers</a>
 
 	</Container>
 

minter/src/components/portfolio.js

@@ -0,0 +1,56 @@
+import { Container, Loading } from './generic'
+import '../App.css'
+
+import { useState, useEffect } from 'react'
+import { log } from '../modules/helpers'
+import { useRocketeerImages, callApi } from '../modules/api'
+import { useAddress, useChainId, useBalanceOf, useTokenIds, sign } from '../modules/web3'
+import { useNavigate } from 'react-router-dom'
+
+
+export default function Verifier() {
+
+	// ///////////////////////////////
+	// State management
+	// ///////////////////////////////
+	const balance = useBalanceOf()
+	const chainId = useChainId()
+	const address = useAddress()
+	const [ network, setNetwork ] = useState( 'mainnet' )
+	const [ loading, setLoading ] = useState(  )
+	const metamaskAddress = useAddress()
+	const [ validatorAddress, setValidatorAddress ] = useState(  )
+	const rocketeers = useRocketeerImages()
+	const navigate = useNavigate()
+
+
+	// ///////////////////////////////
+	// Lifecycle
+	// ///////////////////////////////
+	useEffect( f => {
+		if( !validatorAddress && metamaskAddress ) setValidatorAddress( metamaskAddress )
+	}, [ metamaskAddress, validatorAddress ] )
+
+	// ///////////////////////////////
+	// Rendering
+	// ///////////////////////////////
+	if( loading ) return <Loading message={ loading } />
+	return <Container id="avatar" className={ rocketeers.length > 1 ? 'wide' : '' }>
+		
+		<h1>Portfolio</h1>
+		<p>Click a Rocketeer to view it's details.</p>
+		<div className="row">
+			
+			{ rocketeers.map( ( { id, src } ) => {
+
+				return <img onClick={ f => window.location.href =`https://viewer.rocketeer.fans/?rocketeer=${ id }` } key={ id } className='rocketeer' src={ src } alt={ `Rocketeer number ${ id }` } />
+
+			} ) }
+
+			<p className="row">Rocketeers owned by: { address }.</p>
+
+
+		</div>
+
+	</Container>
+}

minter/src/modules/api.js

@@ -1,5 +1,5 @@
 import { log } from './helpers'
-import { useTokenIds } from './web3'
+import { useChainId, useTokenIds } from './web3'
 import { useState, useEffect } from 'react'
 
 export async function callApi( path, options={} ) {
@@ -19,13 +19,15 @@ export async function callApi( path, options={} ) {
 
 }
 
-export function getImage( id, ext='jpg' ) {
+export function getImage( id, ext='jpg', network ) {
 
     const api = {
       mainnet: 'https://storage.googleapis.com/rocketeer-nft.appspot.com/mainnetRocketeers',
       testnet: 'https://storage.googleapis.com/rocketeer-nft.appspot.com/rinkebyRocketeers'
     }
 
+    if( network ) return api[ network ] + `/${ id }.${ext}`
+
     const querySaysTestnet = window.location.href.includes( 'testnet' )
     const isLocal = window.location.hostname === 'localhost'
     const chain = ( isLocal || querySaysTestnet ) ? 'testnet' : 'mainnet'
@@ -58,16 +60,17 @@ export function useRocketeers() {
 export function useRocketeerImages() {
 
     const ids = useTokenIds()
+    const chainId = useChainId()
     const [ images, setImages ] = useState( [] )
 
     useEffect( f => {
 
         setImages( ids.map( id => ( {
             id,
-            src: getImage( id )
+            src: getImage( id, 'jpg', chainId === '0x1' ? 'mainnet' : 'testnet' )
         } ) ) )
 
-    }, [ ids ] )
+    }, [ ids, chainId ] )
 
     return images