diff --git a/minter/src/components/atoms/Button.js b/minter/src/components/atoms/Button.js index dc54c3d..dfefb58 100644 --- a/minter/src/components/atoms/Button.js +++ b/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 { diff --git a/minter/src/components/organisms/Outfits.js b/minter/src/components/organisms/Outfits.js index 8472570..2c752ed 100644 --- a/minter/src/components/organisms/Outfits.js +++ b/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 ) - }, [ metamaskAddress, validatorAddress ] ) + if( !rocketeerId ) setRocketeer( undefined ) + }, [ rocketeerId ] ) + useEffect( f => { diff --git a/minter/src/modules/api.js b/minter/src/modules/api.js index 5986e9f..4ab19df 100644 --- a/minter/src/modules/api.js +++ b/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 ] )