tf-checkout-react 1.3.46 → 1.3.47-beta.2

package/src/components/billing-info-container/utils.ts

@@ -4,10 +4,12 @@ import _forEach from 'lodash/forEach'
 import _get from 'lodash/get'
 import _isArray from 'lodash/isArray'
 import _map from 'lodash/map'
+import _size from 'lodash/size'
 import { nanoid } from 'nanoid'
 import React from 'react'
 
 import { IGroupItem } from '../../types'
+import { IBillingCryptoData } from "../../types/billing-info-data"
 import { CONFIGS } from '../../utils'
 import { getQueryVariable } from '../../utils/getQueryVariable'
 import { combineValidators, requiredValidator } from '../../validators'
@@ -63,14 +65,23 @@ export const getInitialValues = (
 export const createRegisterFormData = (
   values: IValues = {},
   checkoutBody: { attributes: { [key: string]: any } },
-  flagFreeTicket = false
+  flagFreeTicket = false,
+  cryptoData: IBillingCryptoData
 ): FormData => {
   const bodyFormData = new FormData()
   bodyFormData.append('first_name', values.firstName)
   bodyFormData.append('last_name', values.lastName)
   bodyFormData.append('email', values.email)
-  bodyFormData.append('password', values.password)
-  bodyFormData.append('password_confirmation', values.confirmPassword)
+
+  if (cryptoData.cryptoAddress && cryptoData.blockchain && cryptoData.cryptoSignature) {
+    bodyFormData.append('crypto_address', cryptoData.cryptoAddress)
+    bodyFormData.append('crypto_signature', cryptoData.cryptoSignature)
+    bodyFormData.append('blockchain', cryptoData.blockchain)
+  } else {
+    bodyFormData.append('password', values.password)
+    bodyFormData.append('password_confirmation', values.confirmPassword)
+  }
+
   bodyFormData.append(
     'client_id',
     CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
@@ -115,6 +126,7 @@ interface IUserData {
   zip?: string;
   zipCode?: string;
   stateId?: string;
+  linkedCryptoWallets?: string[];
 }
 
 interface IticketHolder {
@@ -136,6 +148,7 @@ export const setLoggedUserData = (data: IUserData) => ({
   street_address: data?.streetAddress || '',
   state: data?.stateId || '',
   zip: data?.zip || data?.zipCode || '',
+  linkedCryptoWallets: data?.linkedCryptoWallets || []
 })
 
 export const createCheckoutDataBody = (
@@ -153,7 +166,7 @@ export const createCheckoutDataBody = (
     ...restValues
   } = values
 
-  const holders = []
+  const holders: any[] = []
   let ticket_holders: IticketHolder[] = []
 
   for (let i = 0; i <= ticketsQuantity; i++) {
@@ -271,6 +284,86 @@ export const assingUniqueIds = (data: any): any => {
   })
 }
 
+export const signSubmit = async ({
+  hasAccount,
+  ethNonce,
+  permittedBlockchains,
+  cryptoWrapper,
+  selectedBlockchain
+}: {
+  hasAccount: string;
+  ethNonce: string;
+  permittedBlockchains: any;
+  cryptoWrapper: any;
+  selectedBlockchain: string;
+}): Promise<{ usedAddress?: string, signature?: string, override_crypto_address?: boolean }> => {
+  try {
+    let cryptoAddress = permittedBlockchains[selectedBlockchain].session_address
+    const isFromSession = cryptoAddress !== null && cryptoAddress !== undefined
+    cryptoAddress = (isFromSession) ? cryptoAddress : permittedBlockchains[selectedBlockchain].linked_address
+    if(cryptoAddress === '' || (hasAccount && isFromSession)) {
+      window.alert('You need to link a wallet first.')
+      return {}
+    }
+    let overrideCryptoAddress = false
+    let usedAddress = undefined
+    let signature = ''
+    await cryptoWrapper.enable()
+    const address = await cryptoWrapper.getAddress()
+    if (isFromSession && address !== cryptoAddress) {
+      const message = 'Welcome to The Ticket Fairy! Nonce: '
+      try {
+        usedAddress = address
+        overrideCryptoAddress = true
+        await cryptoWrapper.getNonceFromAddress(address)
+        window.alert(
+          'This wallet is already connected to an existing account.' +
+          ' Please log out of this account and log back in using this wallet.'
+        )
+        // eslint-disable-next-line no-throw-literal
+        throw { errorCode: cryptoWrapper.ERRORS.CONNECTION_REJECTED }
+      } catch(e) {
+        const error: any = e
+        if(error.errorCode === cryptoWrapper.ERRORS.ACCOUNT_NOT_FOUND){
+          signature = await cryptoWrapper.getSignature(address, ethNonce, message)
+        }
+        // eslint-disable-next-line no-throw-literal
+        throw error
+      }
+    } else {
+      const message = 'Confirm you are the owner of '+ cryptoAddress + '. Nonce: '
+      signature = await cryptoWrapper.getSignature(address, ethNonce, message)
+    }
+    if (overrideCryptoAddress) {
+      return { usedAddress, signature, override_crypto_address: true }
+    }
+    return { signature }
+  } catch(e) {
+    const error: any = e
+    if (
+      error.errorCode !== cryptoWrapper.ERRORS.CONNECTION_REJECTED &&
+      error.errorCode !== cryptoWrapper.ERRORS.SIGNATURE_REJECTED
+    ) {
+      window.alert('Something went wrong, Try again later or contact our support team.')
+    }
+    return {}
+  }
+}
+
+export const returnSelectedBlockchain = (permittedBlockchains: any, detectedWallets: string[]) => {
+  if (_size(permittedBlockchains || {}) === 1) {
+    for (const detectedWallet of detectedWallets) {
+      if (permittedBlockchains[detectedWallet]) {
+        return {
+          selectedBlockchain: detectedWallet,
+          linkedAddress: permittedBlockchains[detectedWallet].linked_address as string,
+          sessionAddress: permittedBlockchains[detectedWallet].session_address as string
+        }
+      }
+    }
+  }
+  return { selectedBlockchain: '', linkedAddress: '', sessionAddress: '' }
+}
 export const isRequiredField = (element: IGroupItem) => {
   const flagRequirePhone = getQueryVariable('phone_required') === 'true'
   const collectMandatoryWalletAddress =
@@ -311,4 +404,4 @@ export const getFieldComponent = (element: IGroupItem) => {
 
   const fieldComponent = _get(fieldComponentConfigs, type, CustomField)
   return fieldComponent
-}
+}

package/src/components/loginModal/index.tsx

@@ -7,14 +7,18 @@ import axios, { AxiosError } from 'axios'
 import { Field, Form, Formik } from 'formik'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
-import React, { FC, useState } from 'react'
+import _map from "lodash/map"
+import React, { FC, useEffect, useState } from 'react'
 
 import {
   authorize,
   getProfileData,
 } from '../../api'
+import { getWalletName } from "../../utils/getWalletName"
+import { loadProfile } from "../../utils/loadProfile"
 import { requiredValidator } from '../../validators'
 import { PoweredBy } from '../common/PoweredBy'
+import { CryptoIntegration } from "../ticketsContainer/crypto"
 
 interface Props {
   onClose: () => void;
@@ -90,6 +94,62 @@ export const LoginModal: FC<Props> = ({
   showPoweredByImage = false,
 }) => {
   const [error, setError] = useState('')
+  const [cryptoWrapper, setCryptoWrapper] = useState<any>(undefined)
+  const [detectedWallets, setDetectedWallets] = useState<string[]>([])
+  useEffect(() => {
+    setCryptoWrapper(CryptoIntegration())
+    const wallets: string[] = []
+    const registerDetectedWallet = (event: any) => {
+      const identifier = event?.detail?.identifier
+      const registered = wallets.find(wallet => wallet === identifier)
+      if (identifier && !registered) {
+        wallets.push(identifier)
+        setDetectedWallets(detectedWallets => [...detectedWallets, identifier])
+      }
+    }
+    window.addEventListener('ttf.crypto.new-wallet', registerDetectedWallet)
+    return () => window.removeEventListener('ttf.crypto.new-wallet', registerDetectedWallet)
+  }, [])
+
+  const walletLogin = async (blockchain: string) => {
+    cryptoWrapper.setBlockchain(blockchain)
+    setError('')
+
+    try {
+      await cryptoWrapper.enable()
+      const cryptoAddress = await cryptoWrapper.getAddress()
+      const nonce = await cryptoWrapper.getNonceFromAddress(cryptoAddress)
+      const signature = await cryptoWrapper.getSignature(cryptoAddress, nonce, 'Welcome back, we missed you! Nonce: ')
+      await cryptoWrapper.authAddress(cryptoAddress, signature)
+
+    } catch (e) {
+      const error: any = e
+      if (error.source === 'backend' && error.errorCode === cryptoWrapper.ERRORS.ACCOUNT_NOT_FOUND) {
+        setError('We could not find an account with your wallet address')
+      } else if (error.errorCode === cryptoWrapper.ERRORS.SIGNATURE_MISMATCHED) {
+        setError(error.message)
+      } else if (error.errorCode !== cryptoWrapper.ERRORS.SIGNATURE_REJECTED &&
+        error.errorCode !== cryptoWrapper.ERRORS.CONNECTION_REJECTED) {
+        setError("Something went wrong, try again or contact out support team.")
+      }
+      return
+    }
+
+    try {
+      const profileData = await loadProfile()
+      onGetProfileDataSuccess(profileData)
+      if (typeof window !== 'undefined') {
+        const event = new window.CustomEvent('tf-login')
+        window.document.dispatchEvent(event)
+      }
+      onLogin()
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        onGetProfileDataError(e)
+      }
+    }
+  }
+
   return (
     <Modal
       open={true}
@@ -106,10 +166,10 @@ export const LoginModal: FC<Props> = ({
               try {
                 const body = { email, password }
                 await authorize(body)
-                let profileResponse = null
+                let profileResponse: any = null
                 try {
                   profileResponse = await getProfileData()
-                  onGetProfileDataSuccess(profileResponse.data)
+                  onGetProfileDataSuccess(profileResponse?.data)
                 } catch (e) {
                   if (axios.isAxiosError(e)) {
                     onGetProfileDataError(e)
@@ -124,8 +184,6 @@ export const LoginModal: FC<Props> = ({
                     'user_data',
                     JSON.stringify(profileDataObj)
                   )
-                  const event = new window.CustomEvent('tf-login')
-                  window.document.dispatchEvent(event)
                 }
                 onLogin()
               } catch (e) {
@@ -192,6 +250,13 @@ export const LoginModal: FC<Props> = ({
                   <div className="login-action-button">
                     <button type="submit">Login</button>
                   </div>
+                  {_map(detectedWallets, wallet => (
+                      <div className="login-wallet-button" key={wallet}>
+                        <button type="button" onClick={() => {
+                          walletLogin(wallet)
+                        }}>{'Login with ' + getWalletName(wallet)}</button>
+                      </div>
+                    ))}
                   {showForgotPasswordButton && (
                     <div className="forgot-password">
                       <span aria-hidden="true" onClick={onForgotPassword}>Forgot password?</span>

package/src/components/loginModal/style.css

@@ -27,7 +27,7 @@
   margin-bottom: 20px;
 }
 
-.login-action-button button {
+.login-action-button button, .login-wallet-button button {
   padding: 10px;
   width: 100%;
   margin: 10px 0;
@@ -42,7 +42,7 @@
   outline: none;
   background-color: #212529;
 }
-.login-action-button button:hover {
+.login-action-button button:hover, .login-wallet-button button:hover {
   background-color: #505050;
   border-color: #505050;
 }

package/src/components/ticketsContainer/TicketRow.tsx

@@ -1,12 +1,13 @@
-import React from 'react'
 import './style.css'
-import _has from 'lodash/has'
-import _get from 'lodash/get'
+
 import Box from '@mui/material/Box'
 import FormControl from '@mui/material/FormControl'
 import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
+import _get from 'lodash/get'
+import React from 'react'
 
+import { temporalNonce } from '../../api'
 import { getTicketSelectOptions } from './utils'
 
 interface ITicketRowProps {
@@ -14,6 +15,11 @@ interface ITicketRowProps {
   prevTicketTier: any;
   selectedTickets: any;
   handleTicketSelect: any;
+  walletNotVerified: boolean;
+  noWalletConnected: boolean;
+  cryptoIdentifier: any;
+  cryptoButtonDisabled: boolean;
+  walletConnect: (cryptoEventIdentifier: any, ethNonce: any) => void;
 }
 
 export const TicketRow = ({
@@ -21,6 +27,11 @@ export const TicketRow = ({
   prevTicketTier,
   selectedTickets,
   handleTicketSelect,
+  noWalletConnected,
+  walletNotVerified,
+  cryptoIdentifier,
+  cryptoButtonDisabled,
+  walletConnect
 }: ITicketRowProps) => {
   const soldOutMessage = ticketTier.soldOutMessage
     ? `${ticketTier.soldOutMessage}`.toUpperCase()
@@ -31,7 +42,16 @@ export const TicketRow = ({
     ticketTier.minQuantity,
     ticketTier.multiplier
   )
-  const ticketsClosedMessage = !ticketTier.salesStarted ?  'Sales not started' : 'Sales Ended'
+  const ticketsClosedMessage = !ticketTier.salesStarted ? 'Sales not started' : 'Sales Ended'
+
+  const isCryptoTicket = ticketTier?.isCryptoTicket
+  const cryptoEventIdentifier = (
+    ticketTier?.cryptoEventIdentifiers &&
+    ticketTier.cryptoEventIdentifiers?.length &&
+    ticketTier.cryptoEventIdentifiers[0]
+  )
+  const isSolanaEvent = cryptoEventIdentifier === 'solana'
+  const isEthereumEvent = cryptoEventIdentifier === 'ethereum'
 
   const onSaleContent = (
     <div className="get-tickets">
@@ -67,6 +87,34 @@ export const TicketRow = ({
     </div>
   )
 
+  const cryptoLogIn = cryptoIdentifier.length > 0
+    ? (
+      <div className='nft-container-connect'>
+        {isSolanaEvent && !cryptoIdentifier.includes('solana') ? (
+          <strong className='phatom enable-wallet'>Phantom-enabled browser required.</strong>
+        ) : isEthereumEvent && !cryptoIdentifier.includes('ethereum') ? (
+          <strong className='metamask enable-wallet'>Metamask-enabled browser required.</strong>
+        ) : (
+          (isSolanaEvent && cryptoIdentifier.includes('solana')) ||
+          (isEthereumEvent && cryptoIdentifier.includes('ethereum'))
+        ) ? (
+          <button
+            disabled={cryptoButtonDisabled}
+            className='ntf-button-connect'
+            type='button'
+            onClick={async () => {
+              const response = await temporalNonce()
+              const ethNonce = _get(response, 'data.data.attributes.ethNonce')
+              walletConnect(cryptoEventIdentifier, ethNonce)
+            }}
+          >
+            Connect to {isSolanaEvent ? 'Phantom' : 'MetaMask'}
+          </button>
+        ) : null}
+      </div>
+    )
+    : <strong>Crypto-enabled browser required.</strong>
+
   let returnValue: any = ''
   // ticketTier.soldOut === false --> means that ticket is in the stock
   const isSoldOut =
@@ -75,7 +123,9 @@ export const TicketRow = ({
     ticketTier.soldOut ||
     ticketTier.soldOut === false
 
-  if (isSoldOut) {
+  if (isCryptoTicket && (noWalletConnected || walletNotVerified)) {
+    returnValue = cryptoLogIn
+  } else if (isSoldOut) {
     returnValue = soldOutMessage
   } else if (isSalesClosed) {
     returnValue = ticketsClosedMessage

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -12,10 +12,14 @@ interface ITicketsSectionProps {
   handleTicketSelect: any;
   sortBySoldOut: boolean;
   hideTicketsHeader: boolean;
-
   ticketsHeaderComponent?: ReactNode;
   showGroupNameBlock?: boolean;
   currencySybmol?: string;
+  cryptoIdentifier: any;
+  cryptoButtonDisabled: boolean;
+  walletConnect: (cryptoEventIdentifier: any, ethNonce: any) => void;
+  walletNotVerified: boolean;
+  noWalletConnected: boolean;
 }
 
 export const TicketsSection = ({
@@ -28,6 +32,11 @@ export const TicketsSection = ({
   hideTicketsHeader,
   showGroupNameBlock,
   currencySybmol,
+  cryptoIdentifier,
+  cryptoButtonDisabled,
+  walletConnect,
+  noWalletConnected,
+  walletNotVerified,
 }: ITicketsSectionProps) => {
   const {
     currency: { symbol },
@@ -101,6 +110,11 @@ export const TicketsSection = ({
                     prevTicketTier={arr[i - 1]}
                     selectedTickets={selectedTickets}
                     handleTicketSelect={ticketSelect}
+                    walletNotVerified={walletNotVerified}
+                    noWalletConnected={noWalletConnected}
+                    cryptoIdentifier={cryptoIdentifier}
+                    cryptoButtonDisabled={cryptoButtonDisabled}
+                    walletConnect={walletConnect}
                   />
                 </div>
               </div>