import styled from "styled-components" ; import { CandyMachineAccount } from "../helpers/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 ) { console . log ( "Minting" ) ; onMint ( ) ; setClicked ( false ) ; } } , [ gatewayStatus , clicked , setClicked , onMint ] ) ; return ( < CTAButton disabled = { candyMachine ?. state . isSoldOut || isMinting } 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 ) ; } } } > { candyMachine ?. state . isSoldOut ? ( "SOLD OUT" ) : isMinting ? ( < CircularProgress />) : ("MINT")} < /CTAButton>); } ;