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