Merge pull request #150 from poap-xyz/development

Admin corrections + mint fixes

functions/modules/validations.js

@@ -17,7 +17,8 @@ exports.sanitise_email = input => {
 
 }
 
-const eth_address_or_ens_regex = /(0x[a-f0-9]{40})|(.*\.eth)/i
+// TLDs may be 1-63 characters long, see https://www.rfc-editor.org/rfc/rfc1034
+const eth_address_or_ens_regex = /(0x[a-fA-F0-9]{40})|(.*\.[a-z]{2,63})/i
 exports.eth_address_or_ens_regex = eth_address_or_ens_regex
 exports.sanitise_address_or_ens = input => {
 
@@ -64,4 +65,4 @@ exports.sanitise_poap_drop_secret_code = input => {
 
 exports.sanitise_string = string => `${ string }`.toLocaleLowerCase().trim()
 
-exports.ens_address_regex = /(.*\.eth)/i
+exports.ens_address_regex = /(.*\..{1,63})/i

public/locales/en/translation.json

@@ -245,7 +245,7 @@
     "confirmDeleteDispenser": "Are you sure you want to delete your POAP Kiosk?\n\nThis cannot be undone, but you can always create a new POAP Kiosk following the same simple steps you used to make this one.",
     "succesDeleteDispenser": "Deletion success!\n\nYour POAP Kiosk has been deleted.",
     "deletionCancelled": "Deletion cancelled, your event still exists.",
-    "errorDeleteDispenser": "Error Deleting POAP Kiosk: {{ message }}",
+    "errorDeleteDispenser": "Error Deleting POAP Kiosk: {{ message }}.",
     "amountScannedMessage": "Your POAP Kiosk QR was scanned {{ scans }} times and {{ claimed }} out of {{ codes }} POAPs were claimed.",
     "editActions": {
       "editHeading": "Admin actions",
@@ -256,7 +256,7 @@
     "confirmRecalculate": "During the recalculation process, your POAP Kiosk will be unstable and might not work as expected.\n\nAre you sure you want to recalculate?",
     "recalculationCancelled": "Recalculation was cancelled, nothing changed",
     "recalculationSuccess": "Recalculation succeeded, your POAP Kiosk should be working as expected again.",
-    "recalculating": "Recalculating the amount of codes available for this Kiosk",
+    "recalculating": "Recalculating the amount of codes available for this Kiosk.",
     "hero": {
       "subheading": {
         "reviewed": "⚠️ Your event is being reviewed",

src/components/molecules/MethodCard.jsx

@@ -193,7 +193,7 @@ export const MethodCard = ( { event, eventLink, adminLink, onDelete, onRecalcula
     return <MethodContainer>
         <MethodLabel>
             <IconContainer>
-                <PoapIcon size={ isMobile ? '16px' : '20' } icon='QRCodeIcon' color='var(--warning-500)' />
+                <PoapIcon size={ isMobile ? '16' : '20' } icon='QRCodeIcon' color='var(--warning-500)' />
             </IconContainer>
         </MethodLabel>
         <MethodContent>

src/components/molecules/ModalSide.jsx

@@ -29,18 +29,18 @@ export const StyledModal = styled( ReactModal )`
     align-items: center;
     justify-content: flex-end;
     overflow: scroll;
-    /* padding: var(--spacing-3); */
 `
 
 const Modal = styled( Section )`
-    padding: 2rem 1rem;
+    padding: 5rem 2rem 1rem 2rem;
     display: flex;
     flex-direction: column;
     height: 100%;
     width: 100%;
     max-width: 450px;
     background: white;
     box-shadow: 0px 0 5px 2px rgba( 0, 0, 0, .1);
+    border-left: 1px solid var(--primary-700);
 `
 
 export default ( { children, open = true, showClose = false, setIsOpen, ...props } ) => {

src/components/pages/EventAdmin.jsx

@@ -47,7 +47,6 @@ const ModalButtonContainer = styled.div`
     flex-direction: row;
     justify-content: center;
     gap: 1rem;
-    margin-top: 1rem;
 `
 
 // ///////////////////////////////
@@ -249,7 +248,7 @@ export default function EventAdmin( ) {
                 <Text>Are you sure you want to refresh the mint link counter? Your POAP Kiosk will be unstable and might not work as expected.</Text>
             </ModalContainer>
 
-            <Divider plain style={ { color: 'var(--primary-200)', margin: 'auto 0 1rem 0' } } />
+            <Divider plain style={ { margin: 'auto 0 1rem 0', borderTop: '1px solid var(--primary-200)' } } />
 
             <ModalButtonContainer>
                 <Button variation='white' onClick={ handleCloseModalRecalculate }>Cancel</Button>
@@ -267,7 +266,7 @@ export default function EventAdmin( ) {
                 <Text>Are you sure you want to delete this kiosk? You can create a new kiosk for this POAP after deletion. </Text>
             </ModalContainer>
 
-            <Divider plain style={ { color: 'var(--primary-200)', margin: 'auto 0 1rem 0' } } />
+            <Divider plain style={ { margin: 'auto 0 .5rem 0', borderTop: '1px solid var(--primary-200)' } } />
 
             <ModalButtonContainer>
                 <Button variation='white' onClick={ handleCloseModalDestroy }>Cancel</Button>

src/components/pages/MintPOAP.jsx

@@ -8,7 +8,8 @@ import { log } from "../../modules/helpers"
 import Loading from "../molecules/Loading"
 import { mint_code_to_address } from "../../modules/firebase"
 import { useParams } from "react-router-dom"
-import { eth_address_or_ens_regex } from "../../modules/validations"
+import { eth_address_or_ens_regex, valid_email_regex } from "../../modules/validations"
+import { serveToast } from '../molecules/Toast'
 
 export default function MintPOAP() {
 
@@ -46,10 +47,11 @@ export default function MintPOAP() {
             log( `Minting POAP for ${ address_to_mint_to }` )
             set_loading( `Minting your POAP` )
 
-            // Validate address
-            if( !address_to_mint_to?.match( eth_address_or_ens_regex ) ) throw new Error( `Please input a valid address` )
+            // Validate address based on address or email
+            if( !address_to_mint_to?.match( eth_address_or_ens_regex ) && !address_to_mint_to?.match( valid_email_regex ) ) {
+                throw new Error( 'Please input a valid Ethereum address/ENS or email address.' )
+            }
 
-            // Mint POAP
             const { data: { error } } = await mint_code_to_address( { claim_code, address_to_mint_to, challenge_code } )
             if( error ) throw new Error( error )
 
@@ -59,7 +61,8 @@ export default function MintPOAP() {
         } catch ( e ) {
 
             log( `Error minting POAP for ${ address_to_mint_to }: `, e )
-            alert( `${ e.message }` )
+            serveToast( { message: `${ e.message }`, type: 'error' } )
+
 
         } finally {
             set_loading( false )
@@ -92,7 +95,7 @@ export default function MintPOAP() {
                 <Diamond />
                 <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 } />
+                <Input id="address-to-mint-to" label="Address to mint the POAP to:" placeholder='Enter your ETH address, ENS, or email' onChange={ ( { target } ) => set_address_to_mint_to( target.value ) } value={ address_to_mint_to } />
                 <Button id='mint-poap-submit' onClick={ handle_mint } leftIcon={ <HeroIcon icon='sparkles' /> }>Collect your POAP</Button>
 
             </CardContainer>

src/modules/validations.js

@@ -1 +1,5 @@
-export const eth_address_or_ens_regex = /(0x[a-f0-9]{40})|(.*\.eth)/i
+// TLDs may be 1-63 characters long, see https://www.rfc-editor.org/rfc/rfc1034
+export const eth_address_or_ens_regex = /(0x[a-fA-F0-9]{40})|(.*\.[a-z]{2,63})/i
+
+// Very naive regex validation for email addresses
+export const valid_email_regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i