mirror of
https://github.com/stronk-dev/RandomChad.git
synced 2025-07-05 18:35:10 +02:00
91 lines
2.2 KiB
JavaScript
91 lines
2.2 KiB
JavaScript
import Fox from '../assets/metamask-fox.svg'
|
|
import { Container, Loading } from './generic'
|
|
import { useState, useEffect } from 'react'
|
|
import { log } from '../modules/helpers'
|
|
import { useAddress, getAddress } from '../modules/web3'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
|
|
// ///////////////////////////////
|
|
// Render component
|
|
// ///////////////////////////////
|
|
export default function ComponentName( ) {
|
|
|
|
// ///////////////////////////////
|
|
// States
|
|
// ///////////////////////////////
|
|
const [ loading, setLoading ] = useState( 'Detecting metamask...' )
|
|
const [ error, setError ] = useState( undefined )
|
|
const address = useAddress()
|
|
|
|
|
|
// ///////////////////////////////
|
|
// Functions
|
|
// ///////////////////////////////
|
|
|
|
// Handle user login interaction
|
|
async function metamasklogin( e ) {
|
|
|
|
e.preventDefault()
|
|
|
|
try {
|
|
|
|
setLoading( 'Connecting to Metamask' )
|
|
const address = await getAddress()
|
|
log( 'Received: ', address )
|
|
|
|
} catch( e ) {
|
|
setError( `Metamask error: ${ e.message || JSON.stringify( e ) }. Please reload the page.` )
|
|
} finally {
|
|
setLoading( false )
|
|
}
|
|
|
|
}
|
|
|
|
// ///////////////////////////////
|
|
// Lifecycle
|
|
// ///////////////////////////////
|
|
|
|
// Check for metamask on load
|
|
useEffect( f => window.ethereum ? setLoading( false ) : setError( 'No web3 provider detected, please install metamask' ), [] )
|
|
|
|
// ///////////////////////////////
|
|
// Render component
|
|
// ///////////////////////////////
|
|
|
|
// Loading component
|
|
if( loading ) return <Loading message={ loading } />
|
|
|
|
// Error interface
|
|
if( error ) return <Container>
|
|
<p>{ error }</p>
|
|
</Container>
|
|
|
|
// Actions menu
|
|
if( address ) return <Container>
|
|
|
|
<h1>Rocketeer Tools</h1>
|
|
|
|
<div>
|
|
<Link className='button' to='/mint'>Mint Rocketeer</Link>
|
|
<Link className='button' to='/portfolio'>View Rocketeer Portfolio</Link>
|
|
<Link className='button' to='/outfits'>Use Changing Room</Link>
|
|
<Link className='button' to='/verify'>Discord verify</Link>
|
|
<Link className='button' to='/avatar'>Set address avatar</Link>
|
|
</div>
|
|
|
|
|
|
</Container>
|
|
|
|
// Login interface
|
|
return <Container>
|
|
|
|
<h1>Rocketeer Interface</h1>
|
|
<a className="button" href="/#" onClick={ metamasklogin }>
|
|
<img alt="metamask fox" src={ Fox } />
|
|
Connect wallet
|
|
</a>
|
|
|
|
</Container>
|
|
|
|
} |