Skip to content

Commit

Permalink
🎨 CardDashboard + Cypress minting command
Browse files Browse the repository at this point in the history
  • Loading branch information
Ruben committed Oct 11, 2023
1 parent b3735a4 commit 555e3b3
Show file tree
Hide file tree
Showing 8 changed files with 92 additions and 22 deletions.
6 changes: 3 additions & 3 deletions cypress/e2e/user-claimer/2-stress-test-claim.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ context( 'Claimer can view valid events', () => {
it( 'Successfully claims 3 challenge links', function( ) {

// Scan in rapid succession
cy.claim_challenge( this.challenge_one, `challenge_one`, start )
cy.claim_challenge( this.challenge_two, `challenge_two`, start )
cy.claim_challenge( this.challenge_three, `challenge_three`, start )
cy.mint_poap_from_challenge( this.challenge_one, `challenge_one`, start )
cy.mint_poap_from_challenge( this.challenge_two, `challenge_two`, start )
cy.mint_poap_from_challenge( this.challenge_three, `challenge_three`, start )


} )
Expand Down
12 changes: 9 additions & 3 deletions cypress/e2e/user-claimer/2-view-and-claim-w-game.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
// /////////////////////////////*/

const admin = require( '../../fixtures/admin-user' )
const { ens_address } = require( "../../fixtures/mock-data" )
const { get_claim_function_url } = require( '../../support/e2e' )
const oneCode = require( `../../fixtures/one-correct-code${ Cypress.env( 'LOCAL' ) ? '' : '-ci' }` )
const isLocal = Cypress.env( 'LOCAL' )

const request_options = {

headers: {
Expand Down Expand Up @@ -62,6 +63,9 @@ context( 'Claimer can view valid events with game', () => {
} )

it( 'Event 1: Successfully redirects to challenge link and play game', function( ) {

// Store current
const start = Date.now()

// Visit the public link with games
const slow = 1000
Expand Down Expand Up @@ -116,13 +120,15 @@ context( 'Claimer can view valid events with game', () => {
cy.contains( 'a', 'Collect your' ).click()

// Expect to be redirected to the claim page
cy.url().includes( `${ Cypress.env( 'VITE_publicUrl' ) }/#/mint/` )
cy.url().should( 'include', `${ Cypress.env( 'VITE_publicUrl' ) }/#/mint/` )

// Check if POAP link supplies one of the test codes
cy.url().should( 'include', oneCode )

// Claim POAP
cy.mint_poap( ens_address, 'mint_w_game_one', start )

} )


} )

Expand Down
45 changes: 45 additions & 0 deletions cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -182,4 +182,49 @@ Cypress.Commands.add( 'get_challenge_from_qr_public_auth', ( public_auth_string,
.then( extract_challenge_from_url )
.then( challenge => cy.wrap( challenge ).as( alias ) )

} )

// mint a POAP
Cypress.Commands.add( 'mint_poap', ( address, alias, start ) => {

start = start || Date.now()

cy.url().then( ( url ) => {

cy.log( `[ ${ elapsed( start ) }s ] Minting POAP for: ${ alias } with link: ${ url }` )

// POAP minting screen
cy.contains( 'Ready to mint' )

// Input claim ENS
cy.get( '#address-to-mint-to' ).clear()
cy.get( '#address-to-mint-to' ).type( address )

// Successfully minting
cy.get( '#mint-poap-submit' ).click()

// Check that backend redirected us to the claim page
cy.contains( 'The minting process has started' )

cy.log( `[ ${ elapsed( start ) }s ] Succesfully minted POAP for: ${ alias } with: ${ address } at: ${ url }` )
} )
} )

// Scan a QR and mint the challenge
Cypress.Commands.add( 'mint_poap_from_challenge', ( challenge_string, alias, start ) => {

start = start || Date.now()

cy.log( `[ ${ elapsed( start ) }s ] Event challenge: ${ challenge_string } for: ${ alias }` )

// Visit the challenge link
cy.visit( `/` )
cy.visit( `/claim/${ challenge_string }` )

// Check that backend redirected us to the claim page
cy.url().should( 'include', '/#/mint' )

// Claim POAP with ENS
cy.mint_poap( 'poap.eth', alias, start )

} )
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"private": true,
"dependencies": {
"@heroicons/react": "^2.0.18",
"@poap/poap-components": "^0.1.12",
"@poap/poap-components": "^0.1.14",
"@rive-app/react-canvas": "^4.3.0",
"@vitejs/plugin-react": "^4.0.4",
"cypress": "^11.2.0",
Expand Down
31 changes: 25 additions & 6 deletions src/components/pages/EventCreate.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import Layout from '../molecules/Layout'
import FormFooter from '../molecules/FormFooter'
import { UploadButton } from '../molecules/UploadButton'

import { Button, CardContainer, Container, H3, Input, Dropdown } from '@poap/poap-components'
import { Button, CardContainer, Container, H3, Input, Dropdown, CardDashboard, useViewport } from '@poap/poap-components'

// ///////////////////////////////
// Render component
Expand All @@ -29,13 +29,17 @@ export default function Admin( ) {
// i18next hook
const { t } = useTranslation()

// Responsive helpers
const { isMobile } = useViewport()

// ///////////////////////////////
// State handling
// ///////////////////////////////

const [ email, setEmail ] = useState( dev ? '[email protected]' : '' )
const [ date, setDate ] = useState( '' )
const [ name, setName ] = useState( '' )
const [ currentEvent, setEvent ] = useState( '' )
const [ dropId, setDropId ] = useState( '' )
const [ csv, setCsv ] = useState( )
const [ css, setCss ] = useState( )
Expand Down Expand Up @@ -168,6 +172,7 @@ export default function Admin( ) {
log( `Computed event`, event )
setName( event.name )
setDropId( event.id )
setEvent( event )
if( event.expiry_date ) {

const [ day, monthName, year ] = event.expiry_date.split( '-' )
Expand All @@ -185,6 +190,8 @@ export default function Admin( ) {
if( !cancelled ) setCodes( undefined )
if( !cancelled ) setLoading( false )
if( !cancelled ) setCsv( undefined )
if( !cancelled ) setEvent( '' )

return alert( e.message )

}
Expand Down Expand Up @@ -277,6 +284,7 @@ export default function Admin( ) {
const clearEvent = () => {
setCodes( undefined )
setCsv( undefined )
setEvent( '' )
}

// ///////////////////////////////
Expand Down Expand Up @@ -312,16 +320,27 @@ export default function Admin( ) {
<Container width='750px'>
<br/>
<H3 align='center' size=''>{ t( 'eventCreate.title' ) }</H3>

<Grid margin={ developer_mode ? '0 auto var(--spacing-12) auto' : '0 auto var(--spacing-12) auto' }>
<Row margin='0 0 var(--spacing-4) 0'>
<Col>
<CardDashboard codes={ codes.length } event={ currentEvent } />
</Col>

</Row>

<Grid margin={ developer_mode ? '0 auto var(--spacing-12) auto' : '' }>
<Row>
<Col size={ 1 }>
<Input disabled label={ t( 'eventCreate.form.fileName.label' ) } value={ filename } />
<Row gap='1rem'>
<Col size={ 8 }>
<Input disabled label={ t( 'eventCreate.form.fileName.label' ) } value={ filename } margin='0 0 var(--spacing-3) 0'/>
</Col>
{ isMobile ? '' : <Col size={ 1 } justify='flex-end'>
<Button size='small' onClick={ clearEvent } variation='white' tabIndex='0' margin='0 0 var(--spacing-4) 0'>Switch</Button>
</Col> }

</Row>
<Row>
<Col size={ 1 }>
<Input disabled label={ t( 'eventCreate.form.codesAmount.label' ) } value={ codes.length } width='66px'/>
<Input disabled label={ t( 'eventCreate.form.codesAmount.label' ) } value={ codes.length } margin='0 0 var(--spacing-6) 0' width='66px'/>
</Col>
</Row>
<Input id="event-create-name" onChange={ ( { target } ) => setName( target.value ) } placeholder={ t( 'eventCreate.form.dropName.placeholder' ) } label={ t( 'eventCreate.form.dropName.label' ) } toolTip={ t( 'eventCreate.form.dropName.info' ) } value={ name } optional />
Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/EventView.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ export default function ViewQR( ) {
</CustomCssWrapper>

// // No code qr error
if( iframeMode && !event?.public_auth?.expires ) return <CustomCssWrapper>
if( iframeMode && !event?.public_auth?.expires ) return <CustomCssWrapper>
<ExpiredQR status='noCodes'/>
</CustomCssWrapper>

Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/MintPOAP.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default function MintPOAP() {
<H1 align='center' size='var(--fs-lg)' margin='var(--spacing-5) 0 var(--spacing-1) 0'>Ready to mint your POAP</H1>
<Divider outline margin='0 0 var(--spacing-6) 0' />
<Input id="address-to-mint-to" label="Address to mint the POAP to:" placeholder='Enter your POAP code' onChange={ ( { target } ) => set_address_to_mint_to( target.value ) } value={ address_to_mint_to } />
<Button onClick={ handle_mint } leftIcon={ <HeroIcon icon='sparkles' /> }>Collect your POAP</Button>
<Button id='mint-poap-submit' onClick={ handle_mint } leftIcon={ <HeroIcon icon='sparkles' /> }>Collect your POAP</Button>

</CardContainer>
</Container>
Expand Down

0 comments on commit 555e3b3

Please sign in to comment.