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 ) } ), [ ] )