mirror of
https://github.com/stronk-dev/RandomChad.git
synced 2025-07-05 10:35:08 +02:00
100 lines
2.7 KiB
JavaScript
100 lines
2.7 KiB
JavaScript
// Icons
|
|
import Fox from '../../assets/metamask-fox.svg'
|
|
import Discord from '../../assets/discord-logo-black.svg'
|
|
import Mint from '../../assets/rocket-fill.svg'
|
|
import Avatar from '../../assets/account-circle-fill.svg'
|
|
import Outfits from '../../assets/door-closed-fill.svg'
|
|
import Portfolio from '../../assets/pie-chart-fill.svg'
|
|
|
|
// Functionality
|
|
import { useState, useEffect } from 'react'
|
|
import { log } from '../../modules/helpers'
|
|
import { useAddress, getAddress } from '../../modules/web3'
|
|
|
|
// Visual
|
|
import Container from '../atoms/Container'
|
|
import { H1 } from '../atoms/Text'
|
|
import Button from '../atoms/Button'
|
|
import Section from '../atoms/Section'
|
|
|
|
|
|
import Loading from '../molecules/Loading'
|
|
|
|
|
|
// ///////////////////////////////
|
|
// 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 || error ) return <Loading message={ loading || error } />
|
|
|
|
// Actions menu
|
|
if( address ) return <Container>
|
|
|
|
<H1>Rocketeer NFT Tools</H1>
|
|
|
|
<Section direction="row">
|
|
{ /* <Button direction="column" icon={ Mint } to='/mint'>Mint Rocketeer</Button> */ }
|
|
<Button direction="column" icon={ Portfolio } to='/portfolio'>Rocketeer Portfolio</Button>
|
|
<Button direction="column" icon={ Outfits } to='/outfits'>Changing Room</Button>
|
|
<Button direction="column" icon={ Discord } to='/verify'>Discord verify</Button>
|
|
<Button direction="column" icon={ Avatar } to='/avatar'>Set node avatar</Button>
|
|
</Section>
|
|
|
|
|
|
</Container>
|
|
|
|
// Login interface
|
|
return <Container>
|
|
|
|
<H1>Rocketeer Interface</H1>
|
|
<Button icon={ Fox } onClick={ metamasklogin }>
|
|
Connect wallet
|
|
</Button>
|
|
|
|
</Container>
|
|
|
|
} |