Add minor delay for metamask

minter/src/App.js

@@ -1,12 +1,5 @@
-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'
-import { useAddress, getAddress } from './modules/web3'
 import { HashRouter} from 'react-router-dom'
 import Router from './components/router'
 

minter/src/components/avatar.js

@@ -4,7 +4,7 @@ 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 { useAddress, useChainId, useBalanceOf, sign } from '../modules/web3'
 
 
 export default function Verifier() {
@@ -12,7 +12,6 @@ export default function Verifier() {
 	// ///////////////////////////////
 	// State management
 	// ///////////////////////////////
-	const balance = useBalanceOf()
 	const chainId = useChainId()
 	const address = useAddress()
 	const [ network, setNetwork ] = useState( 'mainnet' )

minter/src/components/metamask.js

@@ -3,7 +3,7 @@ import { Container, Loading } from './generic'
 import { useState, useEffect } from 'react'
 import { log } from '../modules/helpers'
 import { useAddress, getAddress } from '../modules/web3'
-import { useNavigate, Navigate, Link } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 
 
 // ///////////////////////////////
@@ -11,8 +11,6 @@ import { useNavigate, Navigate, Link } from 'react-router-dom'
 // ///////////////////////////////
 export default function ComponentName( ) {
 
-	const navigate = useNavigate()
-
 	// ///////////////////////////////
 	// States
 	// ///////////////////////////////

minter/src/components/minter.js

@@ -4,7 +4,7 @@ import '../App.css'
 
 import { useState, useEffect } from 'react'
 
-import { useAddress, useTotalSupply, useContract, useChainId, rocketeerUriOnOpensea } from '../modules/web3'
+import { useAddress, useTotalSupply, useContract, useChainId } from '../modules/web3'
 import { log, setListenerAndReturnUnlistener } from '../modules/helpers'
 
 export default function Minter() {

minter/src/components/portfolio.js

@@ -1,11 +1,9 @@
-import { Container, Loading } from './generic'
+import { Container } from './generic'
 import '../App.css'
 
 import { useState, useEffect } from 'react'
-import { log } from '../modules/helpers'
+import { useRocketeerImages } from '../modules/api'
-import { useRocketeerImages, callApi } from '../modules/api'
+import { useAddress } from '../modules/web3'
-import { useAddress, useChainId, useBalanceOf, useTokenIds, sign } from '../modules/web3'
-import { useNavigate } from 'react-router-dom'
 
 
 export default function Verifier() {
@@ -13,15 +11,10 @@ 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()
 
 
 	// ///////////////////////////////
@@ -34,7 +27,6 @@ export default function Verifier() {
 	// ///////////////////////////////
 	// Rendering
 	// ///////////////////////////////
-	if( loading ) return <Loading message={ loading } />
 	return <Container id="avatar" className={ rocketeers.length > 1 ? 'wide' : '' }>
 		
 		<h1>Portfolio</h1>

minter/src/components/router.js

@@ -3,10 +3,9 @@ import Metamask from './metamask'
 import Verifier from './verifier'
 import Avatar from './avatar'
 import Portfolio from './portfolio'
-import { Container } from './generic'
 import { useState, useEffect } from 'react'
 import { log } from '../modules/helpers'
-import { useAddress, getAddress } from '../modules/web3'
+import { useAddress } from '../modules/web3'
 import { Routes, Route, useNavigate } from 'react-router-dom'
 
 
@@ -17,13 +16,30 @@ function Router() {
 	// ///////////////////////////////
 	const address = useAddress()
 	const navigate = useNavigate()
+	const [ timer, setTimer ] = useState(  )
+
 	// ///////////////////////////////
 	// Lifecycle
 	// ///////////////////////////////
+
+	// Redirect if metamask not connected
 	useEffect( f => {
+
 		log( 'Address change' )
-		if( !address ) navigate( '/' )
+
-	}, [ address, navigate ] )
+		if( !address ) {
+			log( 'No address, setting timer for navigation' )
+			const timeoutNumber = setTimeout( f => {
+				log( 'Navigating away' )
+				navigate( '/' )
+			}, 1000 )
+			setTimer( timeoutNumber )
+		} else {
+			log( 'Address found, cancelling timer' )
+			if( timer ) clearTimeout( timer )
+		}
+
+	}, [ address, navigate, timer ] )
 
 	// ///////////////////////////////
 	// Rendering

minter/src/modules/web3.js

@@ -48,7 +48,7 @@ export async function getAddress() {
 export function useAddress() {
 
 	const [ address, setAddress ] = useState( undefined )
-	const [ interval, setInterval ] = useState( 1000 )
+	const [ interval, setIntervalSize ] = useState( 1000 )
 	const [ timesChecked, setTimesChecked ] = useState( 0 )
 
 	useInterval( () => {
@@ -57,11 +57,11 @@ export function useAddress() {
 		log( 'Checking for address' )
 		if( window.ethereum && window.ethereum.selectedAddress ) {
 			setAddress( window.ethereum.selectedAddress )
-			return setInterval( null )
+			return setIntervalSize( null )
 		}
 
 		// if checked five times and interval still running, slow it down
-		if( timesChecked > 5 && !!interval ) setInterval( 5000 )
+		if( timesChecked > 5 && !!interval ) setIntervalSize( 5000 )
 
 	}, interval )
 
@@ -70,7 +70,7 @@ export function useAddress() {
 		log( 'useAddress setting: ', window.ethereum && window.ethereum.selectedAddress, ` based on `, window.ethereum )
 		if( window.ethereum && window.ethereum.selectedAddress ) {
 			setAddress( window.ethereum.selectedAddress )
-			setInterval( null )
+			setIntervalSize( null )
 		}
 	}, [] )
 
@@ -84,7 +84,7 @@ export function useAddress() {
 
 			// New address? Set it to state and stop interval
 			setAddress( newAddress )
-			setInterval( null )
+			setIntervalSize( null )
 			
 	} ), [ ] )