stronk/RandomChad
1
0
Fork 0
mirror of https://github.com/stronk-dev/RandomChad.git synced 2025-07-05 10:35:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Listen better to metamask

Browse Source
This commit is contained in:
Mentor Palokaj 2021-10-20 13:07:47 +02:00
parent 82d2b6da08
commit eca5b85e80
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
minter/src/App.js
View File

@ -62,13 +62,13 @@ function App() {
// Check for action on load // Check for action on load
useEffect( f => { useEffect( f => {
checkAction() checkAction()
window.addEventListener( 'popstate', checkAction ) return window.addEventListener( 'popstate', checkAction )
}, [] ) }, [ address, loading ] )
// /////////////////////////////// // ///////////////////////////////
// Rendering // Rendering
// /////////////////////////////// // ///////////////////////////////
log( action, error, loading, address ) log( 'Rendering with ', action, error, loading, address )
// Initialisation interface // Initialisation interface
if( error || loading || !address ) return <Container> if( error || loading || !address ) return <Container>
{ error && <p>{ error }</p> } { error && <p>{ error }</p> }
@ -80,9 +80,9 @@ function App() {
</div> } </div> }
{ !address && ( !error && !loading ) && <> { !address && ( !error && !loading ) && <>
<h1>Rocketeer { action == 'mint' ? 'Minter' : 'Verifier' }</h1> <h1>Rocketeer { action === 'mint' ? 'Minter' : 'Verifier' }</h1>
{ action == 'mint' && <p>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.</p> } { action === 'mint' && <p>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.</p> }
{ action == 'verify' && <p>This interface is used to veriy that you are the owner of a Rocketeer</p> } { action === 'verify' && <p>This interface is used to veriy that you are the owner of a Rocketeer</p> }
<a className="button" href="/#" onClick={ metamasklogin }> <a className="button" href="/#" onClick={ metamasklogin }>
<img alt="metamask fox" src={ Fox } /> <img alt="metamask fox" src={ Fox } />
Connect wallet Connect wallet

17
minter/src/components/verifier.js
View File

@ -1,8 +1,8 @@
import { Container } from './generic' import { Container } from './generic'
import '../App.css' import '../App.css'
import { useState, useEffect, useReducer } from 'react' import { useState, useEffect } from 'react'
import { log, setListenerAndReturnUnlistener } from '../modules/helpers' import { log } from '../modules/helpers'
import { useAddress, useChainId, useBalanceOf } from '../modules/web3' import { useAddress, useChainId, useBalanceOf } from '../modules/web3'
export default function Verifier() { export default function Verifier() {
@ -36,10 +36,14 @@ export default function Verifier() {
function verifyIfNeeded() { function verifyIfNeeded() {
log( 'Check the need to verify' )
if( !window.location.href.includes( 'message' ) ) return if( !window.location.href.includes( 'message' ) ) return
try { try {
log( 'Verification started' )
const { search } = window.location const { search } = window.location
const query = new URLSearchParams( search ) const query = new URLSearchParams( search )
const message = query.get( 'message' ) const message = query.get( 'message' )
@ -47,6 +51,8 @@ export default function Verifier() {
log( 'Received message: ', verification ) log( 'Received message: ', verification )
const json = JSON.parse( verification ) const json = JSON.parse( verification )
log( 'Showing status for ', json )
return setMessage( json ) return setMessage( json )
} catch( e ) { } catch( e ) {
@ -61,16 +67,17 @@ export default function Verifier() {
// Lifecycle // Lifecycle
// /////////////////////////////// // ///////////////////////////////
useEffect( f => { useEffect( f => {
log( 'Triggering verification check and popstate listener' )
verifyIfNeeded() verifyIfNeeded()
window.addEventListener( 'popstate', verifyIfNeeded ) return window.addEventListener( 'popstate', verifyIfNeeded )
}, [] ) }, [] )
// /////////////////////////////// // ///////////////////////////////
// Rendering // Rendering
// /////////////////////////////// // ///////////////////////////////
log('Rendering with ', message, verifyUrl )
if( message ) return <Container> if( message ) return <Container>
{ message.balance > 0 && <p>✅ { message.username } has { message.balance } Rocketeers</p> } { message.balance > 0 && <p>✅ { message.username } has { message.balance } Rocketeers on chain ${ chainId }</p> }
{ message.balance < 1 && <p>🛑 Computer says no</p> } { message.balance < 1 && <p>🛑 Computer says no</p> }
</Container> </Container>