diff --git a/community/gratitude-poap.afdesign b/community/gratitude-poap.afdesign index e727c2e..43d30f1 100644 Binary files a/community/gratitude-poap.afdesign and b/community/gratitude-poap.afdesign differ diff --git a/community/signer-launch.png b/community/signer-launch.png new file mode 100644 index 0000000..649b13f Binary files /dev/null and b/community/signer-launch.png differ diff --git a/minter/src/components/organisms/Merch.js b/minter/src/components/organisms/Merch.js new file mode 100644 index 0000000..1fb9b35 --- /dev/null +++ b/minter/src/components/organisms/Merch.js @@ -0,0 +1,167 @@ +import Container from '../atoms/Container' +import Section from '../atoms/Section' +import { H1, H2, Text } from '../atoms/Text' +import Avatar from '../molecules/Avatar' +import Loading from '../molecules/Loading' +import Button from '../atoms/Button' +import Input from '../molecules/Input' +import Hero from '../molecules/Hero' + +import { useState, useEffect } from 'react' +import { log } from '../../modules/helpers' +import { useRocketeers, make_merch_order } from '../../modules/api' +import { useAddress } from '../../modules/web3' +import { useParams, useNavigate } from 'react-router-dom' +import lookup from 'country-code-lookup' + +export default function Verifier() { + + // /////////////////////////////// + // State management + // /////////////////////////////// + const address = useAddress() + const [ rocketeer, setRocketeer ] = useState( ) + const [ order, setOrder ] = useState( { } ) + const [ payment, setPayment ] = useState( ) + const { rocketeer_id } = useParams() + const navigate = useNavigate() + const rocketeers = useRocketeers( rocketeer_id ) + const [ loading, setLoading ] = useState( ) + + const updateOrder = ( key, value ) => setOrder( prev => ( { ...prev, [key]: value } ) ) + + // /////////////////////////////// + // Lifecycle + // /////////////////////////////// + + useEffect( f => { + if( !rocketeer_id ) setRocketeer( undefined ) + }, [ rocketeer_id ] ) + + + useEffect( f => { + + // Find the data for the clicked Rocketeer + const selected = rocketeers.find( ( { id } ) => id === rocketeer_id ) + + log( "Selecting rocketeer ", selected ) + + // Set the selected rocketeer to state + if( selected ) setRocketeer( selected ) + + }, [ address, rocketeer_id, rocketeers.length ] ) + + /* /////////////////////////////// + // Functions + // /////////////////////////////*/ + async function makeOrder() { + + try { + + const { email, ...address } = order + + // Validations + if( !email.includes( '@' ) ) throw new Error( `Please input a valid email` ) + if( !address.name ) throw new Error( `Input your name` ) + if( !address.city ) throw new Error( `Input your city` ) + if( !address.line1 ) throw new Error( `Input your address` ) + if( !address.postCode ) throw new Error( `Input your postal code` ) + if( !address.city ) throw new Error( `Input your city` ) + if( !address.country ) throw new Error( `Input your country` ) + + // Validate country in particular + const country = lookup.byCountry( address.country ) + log( `Found country: `, country ) + if( !country ) throw new Error( `Country not recognised, did you make a typo?` ) + address.country = country.iso2 + + setLoading( 'Preparing order...' ) + const { error, ...pending_order } = await make_merch_order( { + email, + address, + image_url: rocketeer.image, + product_id: 'kurk_20x20' + } ) + + if( error ) throw new Error( error ) + + log( `Order created: `, pending_order ) + setPayment( pending_order ) + + } catch( e ) { + + log( `Order error: `, e ) + alert( e.message ) + + } finally { + + setLoading( false ) + + } + + } + + // /////////////////////////////// + // Rendering + // /////////////////////////////// + + if( loading ) return + + if( payment ) return + +

Payment link generated

+ The below button will send you to an external website called printapi.nl. This is the Dutch printing and logistics company that is handeling the Rocketeer merch production. + + +
+ + // Loading rocketeers + if( !address && !rocketeers.length ) return + + // Rocketeer selected + if( rocketeer ) return + + +

Merch for { rocketeer.name.split( ' ' )[0] }

+

Current outfit: { rocketeer.current_outfit ? `#${rocketeer.current_outfit}` : 'Genesis' }

+
+ +
+ + This functionality is currently in super-mega-beta. If anything goes wrong, you will not get your money back. Maybe you'll get a POAP to ease your suffering though. + There is currently only one merch option: A 20cm x 20cm print on cork. + +

Shipping details

+ These are not saved anywhere, only the printing and logistics partner saves these. + updateOrder( 'name', target.value ) } label='Your name' /> + updateOrder( 'email', target.value ) } label='Your email' /> + updateOrder( 'line1', target.value ) } label='Address (street + number)' /> + updateOrder( 'postCode', target.value ) } label='Your postal code' /> + updateOrder( 'city', target.value ) } label='Your city' /> + updateOrder( 'country', target.value ) } label='Your country' /> + + + +
+ + +
+ return + +

Merch

+ Select the Rocketeer you want merch for. +
+ + { rocketeers.map( ( { id, image } ) => { + + return navigate( `/merch/${ id }` ) } key={ id } src={ image } alt={ `Rocketeer number ${ id }` } /> + + } ) } + + +
+ + Rocketeers owned by: { address }. + +
+} \ No newline at end of file