diff --git a/minter/src/App.js b/minter/src/App.js index 938cf15..1b09dc8 100644 --- a/minter/src/App.js +++ b/minter/src/App.js @@ -1,3 +1,6 @@ +import Fox from './assets/metamask-fox.svg' +// import LaunchBackground from './assets/undraw_To_the_stars_qhyy.svg' +import LaunchBackground from './assets/undraw_relaunch_day_902d-fixed.svg' import './App.css' import { useState, useEffect } from 'react' @@ -67,21 +70,47 @@ function App() { // /////////////////////////////// // Rendering // /////////////////////////////// - log( error, loading, address ) + // Initialisation interface if( error || loading || !address ) return
{ error &&

{ error }

} { loading &&

{ loading }

} - { !address && } + { !address && ( !error && !loading ) &&
+ +

Rocketeer Minter

+

This interface is used to mint new Rocketeer NFTs. Minting is free, except for the gas fees. After minting you can view your new Rocketeer and its attributes on Opensea.

+ + + metamask fox + Connect wallet + + +
}
// Render main interface return (
-

Logged in as { address }

-

Total minted: { totalSupply }

- { contract && } +
+ + +

Rocketeer Minter

+

We are ready to mint! There are currently { totalSupply } minted Rocketeers.

+ + + + { contract && + metamask fox + Mint new Rocketeer + } + + + + +
+ + Launching rocket
); diff --git a/minter/src/assets/metamask-fox.svg b/minter/src/assets/metamask-fox.svg new file mode 100644 index 0000000..6cb41ba --- /dev/null +++ b/minter/src/assets/metamask-fox.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/minter/src/assets/undraw_To_the_stars_qhyy.svg b/minter/src/assets/undraw_To_the_stars_qhyy.svg new file mode 100644 index 0000000..2c71ae0 --- /dev/null +++ b/minter/src/assets/undraw_To_the_stars_qhyy.svg @@ -0,0 +1 @@ +To the stars \ No newline at end of file diff --git a/minter/src/assets/undraw_relaunch_day_902d-fixed.svg b/minter/src/assets/undraw_relaunch_day_902d-fixed.svg new file mode 100644 index 0000000..03819cf --- /dev/null +++ b/minter/src/assets/undraw_relaunch_day_902d-fixed.svg @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/minter/src/assets/undraw_relaunch_day_902d.svg b/minter/src/assets/undraw_relaunch_day_902d.svg new file mode 100644 index 0000000..330d0f4 --- /dev/null +++ b/minter/src/assets/undraw_relaunch_day_902d.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/minter/src/index.css b/minter/src/index.css index ec2585e..50f130d 100644 --- a/minter/src/index.css +++ b/minter/src/index.css @@ -1,3 +1,6 @@ +/* // ////////////////////////////// +// Globals +// ////////////////////////////// */ body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', @@ -11,3 +14,53 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +div.container { + max-width: 400px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; +} + +/*Login button*/ +a.button { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + border: 1px solid rgba( 0, 0, 0, .3 ); + color: rgba( 0, 0, 0, .8 ); + text-decoration: none; + font-size: 1.5rem; + padding: .5rem 1.1rem .5rem 1rem; + margin-top: 1rem; +} + +a img { + height: 50px; + width: 50px; + padding-right: 20px; +} + +input#address { + padding: .2rem .5rem; + margin-top: 1rem; + text-align: center; + width: 100%; +} + +.stretchBackground { + position: absolute; + opacity: 1; + z-index: -1; +} + +h1, p, label, .button { + background: rgba( 255, 255, 255, .8 ); +} + +h1, p, label { + padding: .2rem .5rem; +} \ No newline at end of file diff --git a/minter/src/logo.svg b/minter/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/minter/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/minter/src/modules/helpers.js b/minter/src/modules/helpers.js index 766dafd..fda794b 100644 --- a/minter/src/modules/helpers.js +++ b/minter/src/modules/helpers.js @@ -5,3 +5,21 @@ export const dev = process.env.NODE_ENV === 'development' || ( typeof location ! export const log = ( ...messages ) => { if( dev ) console.log( ...messages ) } + +export function setListenerAndReturnUnlistener( parent, event, callback ) { + + log( `${ event } listener requested on `, parent ) + + if( !parent ) return + + // Set listener + parent.on( event, callback ) + log( `Created ${ event } listener on `, parent ) + + // Return unsubscriber + return () => { + log( `Unregistering ${ event } on `, parent, ' with ', callback ) + parent.removeListener( event, callback ) + } + +} \ No newline at end of file diff --git a/minter/src/modules/web3.js b/minter/src/modules/web3.js index 1547703..89b7eab 100644 --- a/minter/src/modules/web3.js +++ b/minter/src/modules/web3.js @@ -1,5 +1,5 @@ import { useState, useEffect } from "react" -import { log } from './helpers' +import { log, setListenerAndReturnUnlistener } from './helpers' // Ethers and web3 sdk import { ethers } from "ethers" @@ -38,21 +38,11 @@ export function useAddress() { }, [] ) // Create listener to accounts change - useEffect( f => { - - if( !ethereum ) return - - log( 'Starting account listener with ', ethereum ) - - const listener = ethereum.on( 'accountsChanged', addresses => { + useEffect( f => setListenerAndReturnUnlistener( ethereum, 'accountsChanged', addresses => { log( 'Addresses changed to ', addresses ) setAddress( addresses[0] ) - } ) + } ), [] ) - return () => ethereum.removeListener( 'accountsChanged', listener ) - - - }, [] ) return address @@ -87,7 +77,7 @@ export function useTotalSupply() { } )( ) // Listen to token transfers andor mints - const listener = contract.on( 'Transfer', async ( from, to, amount, event ) => { + return setListenerAndReturnUnlistener( contract, 'Transfer', async ( from, to, amount, event ) => { try { @@ -102,8 +92,6 @@ export function useTotalSupply() { } ) - return () => contract.removeListener( 'Transfer', listener ) - }, [ contract ] ) @@ -117,18 +105,10 @@ export function useChainId() { const [ chain, setChain ] = useState( undefined ) // Create listener to chain change - useEffect( f => { - - if( !ethereum ) return - - const listener = ethereum.on('chainChanged', chainId => { - log( 'Chain changed to ', chainId ) - setChain( chainId ) - } ) - - return ( ) => ethereum.removeListener( 'chainChanged', listener ) - - }, [] ) + useEffect( f => setListenerAndReturnUnlistener( ethereum, 'chainChanged', chainId => { + log( 'Chain changed to ', chainId ) + setChain( chainId ) + } ), [] ) // Initial chain detection useEffect( f => { @@ -216,6 +196,7 @@ export function useContract() { const chainId = useChainId() const [ contract, setContract ] = useState( undefined ) + const address = useAddress() useEffect( f => { @@ -238,7 +219,7 @@ export function useContract() { setContract( undefined ) } - }, [ chainId ] ) + }, [ chainId, address ] ) return contract