import styled from 'styled-components' ; import Button from '@material-ui/core/Button' ; import { CandyMachineAccount } from './candy-machine' ; import { CircularProgress } from '@material-ui/core' ; import { GatewayStatus , useGateway } from '@civic/solana-gateway-react' ; import { useEffect , useState } from 'react' ; export const CTAButton = styled ( Button ) `
  width: 100%;
  height: 60px;
  margin-top: 10px;
  margin-bottom: 5px;
  background: linear-gradient(180deg, #604ae5 0%, #813eee 100%);
  color: white;
  font-size: 16px;
  font-weight: bold;
` ; export const MintButton = ( { onMint , candyMachine , isMinting , } ) => { const { requestGatewayToken , gatewayStatus } = useGateway ( ) ; const [ clicked , setClicked ] = useState ( false ) ; useEffect ( ( ) => { if ( gatewayStatus === GatewayStatus . ACTIVE && clicked ) { onMint ( ) ; setClicked ( false ) ; } } , [ gatewayStatus , clicked , setClicked , onMint ] ) ; const getMintButtonContent = ( ) => { if ( candyMachine ?. state . isSoldOut ) { return 'SOLD OUT' ; } else if ( isMinting ) { return < CircularProgress />; } else if ( candyMachine ?. state . isPresale ) { return 'PRESALE MINT' ; } return 'MINT' ; } ; return ( < CTAButton disabled = { candyMachine ?. state . isSoldOut || isMinting || ! candyMachine ?. state . isActive } onClick = { async ( ) => { setClicked ( true ) ; if ( candyMachine ?. state . isActive && candyMachine ?. state . gatekeeper ) { if ( gatewayStatus === GatewayStatus . ACTIVE ) { setClicked ( true ) ; } else { await requestGatewayToken ( ) ; } } else { await onMint ( ) ; setClicked ( false ) ; } } } variant = "contained" > { getMintButtonContent ( ) } < /CTAButton>); } ;