✨ better rocketeer caching and bbutton prettifier

minter/src/components/atoms/Button.js

@@ -10,7 +10,8 @@ const PrettyButton = styled( DynamicButton )`
 	flex-direction: ${ ( { direction='row' } ) => direction };
 	align-items: center;
 	justify-content: center;
-	border: 1px solid ${ ( { theme } ) => theme.colors.text };
+	border: 2px solid ${ ( { theme } ) => theme.colors.text };
+	background: none;
 	color: ${ ( { theme } ) => theme.colors.text };
 	text-decoration: none;
 	font-size: 1.5rem;
@@ -18,7 +19,8 @@ const PrettyButton = styled( DynamicButton )`
 	margin:  1rem .5rem;
 
 	&:hover {
-		box-shadow: 0 0 20px 2px rgb(0 0 0 / 20%);
+		opacity: .5;
+		cursor: pointer;
 	}
 
 	& img {

minter/src/components/organisms/Outfits.js

@@ -24,7 +24,6 @@ export default function Verifier() {
 	// ///////////////////////////////
 	const address = useAddress()
 	const metamaskAddress = useAddress()
-	const [ validatorAddress, setValidatorAddress ] = useState(  )
 	const rocketeers = useRocketeers( rocketeerId )
 	const chainId = useChainId()
 	const [ rocketeer, setRocketeer ] = useState(  )
@@ -169,8 +168,9 @@ export default function Verifier() {
 	// Lifecycle
 	// ///////////////////////////////
 	useEffect( f => {
-		if( !validatorAddress && metamaskAddress ) setValidatorAddress( metamaskAddress )
+		if( !rocketeerId ) setRocketeer( undefined )
-	}, [ metamaskAddress, validatorAddress ] )
+	}, [ rocketeerId ] )
+
 
 	useEffect( f => {
 

minter/src/modules/api.js

@@ -1,6 +1,6 @@
 import { log } from './helpers'
 import { useChainId, useTokenIds } from './web3'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 
 export async function callApi( path, options={} ) {
 
@@ -42,28 +42,54 @@ export function useRocketeers( onlyGrabThisId ) {
     const ids = onlyGrabThisId ? [ onlyGrabThisId ] : tokenIds
     const [ rocketeers, setRocketeers ] = useState( [] )
 
+    // Track whether a request is already going
+    const loading = useRef()
+
     useEffect( (  ) => {
 
+        if( loading.current ) {
+            log( 'Already loading Rocketeers, doing nothing' )
+            return
+        }
+
         let cancelled = false;
 
         ( async () => {
 
             try {
 
+                // Set loading status to throttle dupes
+                loading.current = true
+
+                // if onlyGrabThisId changed but rocketeer is already present, do not continue
+                if( onlyGrabThisId && rocketeers.find( ( { id } ) => id == onlyGrabThisId ) ) {
+                    return log( 'Rocketeer already in cache, not refreshing' )
+                }
+
+                // If not onlyGrabThisId and tokenIds are equal length to cache, exit
+                if( !onlyGrabThisId && rocketeers.length === tokenIds.length ) {
+                    return log( 'Requested token length same as cache, not doing a request' )
+                }
+
                 if( !ids.length || cancelled ) return
                 const rocketeerMetas = await callApi( `/rocketeers/?ids=${ ids.join( ',' ) }` )
                 log( 'Received rocketeers: ', rocketeerMetas )
                 if( !cancelled ) setRocketeers( rocketeerMetas )
 
             } catch( e ) {
-
+                log( 'Error getting Rocketeers: ', e )
             } finally {
 
+                // Set loading status to let newer requests continue
+                loading.current = false
             }
 
         } )( )
 
-        return () => cancelled = true
+        return () => {
+            cancelled = true
+            loading.current = false
+        }
 
     }, [ tokenIds, onlyGrabThisId ] )