diff --git a/minter/src/App.js b/minter/src/App.js
index 6845de4..4b9a112 100644
--- a/minter/src/App.js
+++ b/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'
diff --git a/minter/src/components/avatar.js b/minter/src/components/avatar.js
index 186f3eb..0baeb18 100644
--- a/minter/src/components/avatar.js
+++ b/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' )
diff --git a/minter/src/components/metamask.js b/minter/src/components/metamask.js
index d19c855..6ab1a02 100644
--- a/minter/src/components/metamask.js
+++ b/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
// ///////////////////////////////
diff --git a/minter/src/components/minter.js b/minter/src/components/minter.js
index a93da93..18a2772 100644
--- a/minter/src/components/minter.js
+++ b/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() {
diff --git a/minter/src/components/portfolio.js b/minter/src/components/portfolio.js
index 46ffc92..b8496e6 100644
--- a/minter/src/components/portfolio.js
+++ b/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, callApi } from '../modules/api'
-import { useAddress, useChainId, useBalanceOf, useTokenIds, sign } from '../modules/web3'
-import { useNavigate } from 'react-router-dom'
+import { useRocketeerImages } from '../modules/api'
+import { useAddress } from '../modules/web3'
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
return 1 ? 'wide' : '' }>
Portfolio
diff --git a/minter/src/components/router.js b/minter/src/components/router.js
index 100b507..9849184 100644
--- a/minter/src/components/router.js
+++ b/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
diff --git a/minter/src/modules/web3.js b/minter/src/modules/web3.js
index 6deba63..16195a8 100644
--- a/minter/src/modules/web3.js
+++ b/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 )
} ), [ ] )