Frontend selector without signing

minter/src/components/metamask.js

@@ -64,11 +64,12 @@ export default function ComponentName( ) {
 	// Actions menu
 	if( address ) return <Container>
 
-		<h1>Rocketeer Interface</h1>
+		<h1>Rocketeer Tools</h1>
 		
 		<div>
 			<Link className='button' to='/mint'>Mint Rocketeer</Link>
 			<Link className='button' to='/portfolio'>View Rocketeer Portfolio</Link>
+			<Link className='button' to='/outfits'>Use Changing Room</Link>
 			<Link className='button' to='/verify'>Discord verify</Link>
 			<Link className='button' to='/avatar'>Set address avatar</Link>
 		</div>

minter/src/components/outfits.js

@@ -0,0 +1,90 @@
+import { Container, Loading } from './generic'
+import '../App.css'
+
+import { useState, useEffect } from 'react'
+import { useRocketeers } from '../modules/api'
+import { log } from '../modules/helpers'
+import { useAddress } from '../modules/web3'
+
+
+export default function Verifier() {
+
+	// ///////////////////////////////
+	// State management
+	// ///////////////////////////////
+	const address = useAddress()
+	const metamaskAddress = useAddress()
+	const [ validatorAddress, setValidatorAddress ] = useState(  )
+	const rocketeers = useRocketeers()
+	const [ selectedId, setSelectedId ] = useState(  )
+	const [ rocketeer, setRocketeer ] = useState(  )
+
+
+	// ///////////////////////////////
+	// Lifecycle
+	// ///////////////////////////////
+	useEffect( f => {
+		if( !validatorAddress && metamaskAddress ) setValidatorAddress( metamaskAddress )
+	}, [ metamaskAddress, validatorAddress ] )
+
+	useEffect( f => {
+
+		const selected = rocketeers.find( ( { id } ) => id === selectedId )
+		
+		if( selected ) {
+			const { value: outfits } = selected.attributes.find( ( { trait_type } ) => trait_type === 'available outfits' ) || 0
+			selected.outfits = outfits
+		}
+
+		log( "Selecting rocketeer ", selected )
+
+		if( selected ) setRocketeer( selected )
+
+	}, [ selectedId, rocketeers ] )
+
+	// ///////////////////////////////
+	// Rendering
+	// ///////////////////////////////
+
+	if( !rocketeers.length ) return <Loading message="Loading Rocketeers, please make sure you selected the right wallet" />
+
+	// Rocketeer selector
+	if(!rocketeer ) return <Container id="avatar" className={ rocketeers.length > 1 ? 'wide' : '' }>
+		
+		<h1>Rocketeers</h1>
+		<p>Click on a Rocketeer to manage it's outfits</p>
+		<div className="row">
+			
+			{ rocketeers.map( ( { id, image } ) => {
+
+				return <img id={ `rocketeer=${ id }` } onClick={ f => setSelectedId( id ) } key={ id } className='rocketeer' src={ image } alt={ `Rocketeer number ${ id }` } />
+
+			} ) }
+
+			<p className="row">Rocketeers owned by: { address }.</p>
+
+
+		</div>
+
+	</Container>
+
+	// Changing room
+	if( rocketeer ) return <Container id="avatar" className={ rocketeers.length > 1 ? 'wide' : '' }>
+		
+		<h1>Changing room for Rocketeer { selectedId }</h1>
+		<img onClick={ f => window.location.href =`https://viewer.rocketeer.fans/?rocketeer=${ rocketeer.id }` } key={ rocketeer.id } className='rocketeer' src={ rocketeer.image } alt={ `Rocketeer number ${ rocketeer.id }` } />
+		<p>This Rocketeer has { rocketeer.outfits } alternative outfits. { rocketeer.outfits > 0 && 'Click any outfit to select it as primary.' }</p>
+
+		<div className="row">
+			
+			{ Array.from( Array( rocketeer.outfits ) ).map( ( val, i ) => {
+				return <img onClick={ f => f } key={ rocketeer.id } className='rocketeer' src={ rocketeer.image.replace( '.jpg', `-${ i + 1 }.jpg` ) } alt={ `Rocketeer number ${ rocketeer.id }` } />
+			} ) }
+
+		</div>
+
+		<p className="row">Rocketeers owned by: { address }.</p>
+
+	</Container>
+
+}

minter/src/components/router.js

@@ -3,6 +3,7 @@ import Metamask from './metamask'
 import Verifier from './verifier'
 import Avatar from './avatar'
 import Portfolio from './portfolio'
+import Outfits from './outfits'
 import { useState, useEffect } from 'react'
 import { log } from '../modules/helpers'
 import { useAddress } from '../modules/web3'
@@ -25,8 +26,6 @@ function Router() {
 	// Redirect if metamask not connected
 	useEffect( f => {
 
-		log( 'Address change' )
-
 		if( timer ) {
 			log( `cancelling old timer ${ timer }, address: ${ !!address }` )
 			clearTimeout( timer )
@@ -40,7 +39,7 @@ function Router() {
 			setTimer( timeoutNumber )
 		}
 
-	}, [ address, navigate, timer ] )
+	}, [ address, navigate ] ) // Not adding timer on purpose, causes loop
 
 	// ///////////////////////////////
 	// Rendering
@@ -54,6 +53,7 @@ function Router() {
 		</Route>
 		<Route exact path='/avatar' element={ <Avatar /> } />
 		<Route exact path='/portfolio' element={ <Portfolio /> } />
+		<Route exact path='/outfits' element={ <Outfits /> } />
 
 	</Routes>
 

minter/src/modules/api.js

@@ -45,7 +45,10 @@ export function useRocketeers() {
 
         ( async function() {
 
-            const rocketeerMetas = await Promise.all( ids.map( id => callApi( `/rocketeer/${ id }` ) ) )
+            const rocketeerMetas = await Promise.all( ids.map( async id => ( {
+                ...await callApi( `/rocketeer/${ id }` ),
+                id: id
+            } ) ) )
             log( 'Received rocketeers: ', rocketeerMetas )
             setRocketeers( rocketeerMetas )