diff --git a/minter/src/App.css b/minter/src/App.css index 2f249b8..061752b 100644 --- a/minter/src/App.css +++ b/minter/src/App.css @@ -43,6 +43,9 @@ div.container.wide { flex-wrap: wrap; align-items: center; } +p.row { + max-width: 100%!important; +} /*Login button*/ a.button { diff --git a/minter/src/App.js b/minter/src/App.js index 64f8084..f25ed14 100644 --- a/minter/src/App.js +++ b/minter/src/App.js @@ -2,6 +2,7 @@ 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' @@ -41,6 +42,7 @@ function App() { } /> } /> + } /> diff --git a/minter/src/components/metamask.js b/minter/src/components/metamask.js index dda9c1b..d19c855 100644 --- a/minter/src/components/metamask.js +++ b/minter/src/components/metamask.js @@ -70,6 +70,7 @@ export default function ComponentName( ) {
Mint Rocketeer + View Rocketeer Portfolio Discord verify Set address avatar
diff --git a/minter/src/components/minter.js b/minter/src/components/minter.js index 7fa337e..a93da93 100644 --- a/minter/src/components/minter.js +++ b/minter/src/components/minter.js @@ -92,7 +92,7 @@ export default function Minter() { if( mintedTokenId ) return

Minting Successful!

- View on Opensea + View your Rocketeers
diff --git a/minter/src/components/portfolio.js b/minter/src/components/portfolio.js new file mode 100644 index 0000000..46ffc92 --- /dev/null +++ b/minter/src/components/portfolio.js @@ -0,0 +1,56 @@ +import { Container, Loading } 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' + + +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() + + + // /////////////////////////////// + // Lifecycle + // /////////////////////////////// + useEffect( f => { + if( !validatorAddress && metamaskAddress ) setValidatorAddress( metamaskAddress ) + }, [ metamaskAddress, validatorAddress ] ) + + // /////////////////////////////// + // Rendering + // /////////////////////////////// + if( loading ) return + return 1 ? 'wide' : '' }> + +

Portfolio

+

Click a Rocketeer to view it's details.

+
+ + { rocketeers.map( ( { id, src } ) => { + + return window.location.href =`https://viewer.rocketeer.fans/?rocketeer=${ id }` } key={ id } className='rocketeer' src={ src } alt={ `Rocketeer number ${ id }` } /> + + } ) } + +

Rocketeers owned by: { address }.

+ + +
+ +
+} \ No newline at end of file diff --git a/minter/src/modules/api.js b/minter/src/modules/api.js index bea03e5..06f8fce 100644 --- a/minter/src/modules/api.js +++ b/minter/src/modules/api.js @@ -1,5 +1,5 @@ import { log } from './helpers' -import { useTokenIds } from './web3' +import { useChainId, useTokenIds } from './web3' import { useState, useEffect } from 'react' export async function callApi( path, options={} ) { @@ -19,13 +19,15 @@ export async function callApi( path, options={} ) { } -export function getImage( id, ext='jpg' ) { +export function getImage( id, ext='jpg', network ) { const api = { mainnet: 'https://storage.googleapis.com/rocketeer-nft.appspot.com/mainnetRocketeers', testnet: 'https://storage.googleapis.com/rocketeer-nft.appspot.com/rinkebyRocketeers' } + if( network ) return api[ network ] + `/${ id }.${ext}` + const querySaysTestnet = window.location.href.includes( 'testnet' ) const isLocal = window.location.hostname === 'localhost' const chain = ( isLocal || querySaysTestnet ) ? 'testnet' : 'mainnet' @@ -58,16 +60,17 @@ export function useRocketeers() { export function useRocketeerImages() { const ids = useTokenIds() + const chainId = useChainId() const [ images, setImages ] = useState( [] ) useEffect( f => { setImages( ids.map( id => ( { id, - src: getImage( id ) + src: getImage( id, 'jpg', chainId === '0x1' ? 'mainnet' : 'testnet' ) } ) ) ) - }, [ ids ] ) + }, [ ids, chainId ] ) return images