Add support for Gatekeeper Guard

.env.example

@@ -7,5 +7,6 @@ NEXT_PUBLIC_LUT=
 NEXT_PUBLIC_ENVIRONMENT=devnet
 NEXT_PUBLIC_RPC=https://api.devnet.solana.com
 NEXT_PUBLIC_BUYMARKBEER=true
+NEXT_GATEKEEPER_NETWORK=ignREusXmGrscGNUesoU9mxfds9AiYTezUKex2PsZV6
 #NEXT_PUBLIC_ENVIRONMENT=mainnet-beta
 #NEXT_PUBLIC_RPC=https://solana-mainnet.rpc.extrnode.com

components/gatekeeper.tsx

@@ -0,0 +1,31 @@
+import { GatewayProvider } from "@civic/solana-gateway-react";
+import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
+import { useConnection, useWallet } from "@solana/wallet-adapter-react";
+import { Connection, PublicKey, clusterApiUrl } from "@solana/web3.js";
+import React from "react";
+
+const Gatekeeper = ({ 
+  children,
+  network,
+}: { 
+  children: React.ReactNode;
+  network: WalletAdapterNetwork;
+}) => {
+  const wallet = useWallet();
+  const { connection } = useConnection();
+  const gatekeeperNetwork = process.env.NEXT_GATEKEEPER_NETWORK || "ignREusXmGrscGNUesoU9mxfds9AiYTezUKex2PsZV6";
+
+  return (
+    <GatewayProvider
+        wallet={wallet}
+        cluster={network}
+        connection={connection}
+        gatekeeperNetwork={new PublicKey(gatekeeperNetwork)}
+        options={{ autoShowModal: false }}
+      >
+        {children}
+    </GatewayProvider>
+  )
+};
+
+export default Gatekeeper;

components/mintButton.tsx

@@ -1,4 +1,4 @@
-import { CandyGuard, CandyMachine, mintV2 } from "@metaplex-foundation/mpl-candy-machine";
+import { CandyGuard, CandyMachine, Gatekeeper, mintV2 } from "@metaplex-foundation/mpl-candy-machine";
 import { GuardReturn } from "../utils/checkerHelper";
 import { AddressLookupTableInput, KeypairSigner, PublicKey, Transaction, TransactionBuilder, TransactionWithMeta, Umi, createBigInt, generateSigner, none, publicKey, signAllTransactions, sol, some, transactionBuilder } from "@metaplex-foundation/umi";
 import { DigitalAsset, DigitalAssetWithToken, JsonMetadata, fetchDigitalAsset, fetchJsonMetadata } from "@metaplex-foundation/mpl-token-metadata";
@@ -13,9 +13,11 @@ import {
     Divider,
 } from "@chakra-ui/react";
 import { fetchAddressLookupTable, setComputeUnitLimit, transferSol } from "@metaplex-foundation/mpl-toolbox";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { chooseGuardToUse, routeBuilder, mintArgsBuilder, combineTransactions, GuardButtonList } from "../utils/mintHelper";
 import { useSolanaTime } from "@/utils/SolanaTimeContext";
+import { useGateway } from "@civic/solana-gateway-react";
+import { SolanaGatewayToken } from "@civic/solana-gateway-react/dist/esm/types";
 
 const updateLoadingText = (loadingText: string | undefined, guardList: GuardReturn[], label: string, setGuardList: Dispatch<SetStateAction<GuardReturn[]>>,) => {
     const guardIndex = guardList.findIndex((g) => g.label === label);
@@ -71,7 +73,8 @@ const mintClick = async (
     guardList: GuardReturn[],
     setGuardList: Dispatch<SetStateAction<GuardReturn[]>>,
     onOpen: () => void,
-    setCheckEligibility: Dispatch<SetStateAction<boolean>>
+    setCheckEligibility: Dispatch<SetStateAction<boolean>>,
+    gatewayToken: SolanaGatewayToken | undefined,
 ) => {
     const guardToUse = chooseGuardToUse(guard, candyGuard);
     if (!guardToUse.guards) {
@@ -147,7 +150,8 @@ const mintClick = async (
                     mintArgs,
                     tokenStandard: candyMachine.tokenStandard
                 }))
-
+
+
 
             if (buyBeer) {
                 tx = tx.prepend(
@@ -187,7 +191,7 @@ const mintClick = async (
         let randSignature: Uint8Array;
         let amountSent = 0;
         const sendPromises = signedTransactions.map((tx, index) => {
-            return umi.rpc.sendTransaction(tx)
+            return umi.rpc.sendTransaction(tx, { preflightCommitment: "confirmed"  })
                 .then((signature) => {
                     console.log(`Transaction ${index + 1} resolved with signature: ${signature}`);
                     amountSent = amountSent + 1;
@@ -334,6 +338,62 @@ type Props = {
     setCheckEligibility: Dispatch<SetStateAction<boolean>>;
 };
 
+const Mint = ({
+    mintClick,
+    label,
+    key,
+    isLoading,
+    isDisabled,
+    loadingText,
+    gatekeeper,
+}: {
+    key: string
+    isLoading: boolean;
+    loadingText: string | undefined;
+    isDisabled: boolean;
+    label: string;
+    mintClick: (gatewayToken: SolanaGatewayToken | undefined) => void;
+    gatekeeper: Gatekeeper | undefined;
+}) => {
+    const [requestedGatewayToken, setRequestedGatewayToken] = useState(false);
+    const { requestGatewayToken, gatewayToken } = useGateway();
+
+    const onClick = async () => {
+        if (!gatekeeper) {
+            mintClick(undefined);
+            return;
+        }
+
+        // if the user has not requested a gateway token yet, request one
+        if (!requestedGatewayToken) {
+            setRequestedGatewayToken(true);
+            requestGatewayToken();
+            return;
+        }
+    };
+
+    useEffect(() => {
+        if (gatewayToken && gatekeeper && requestedGatewayToken) {
+            mintClick(gatewayToken);
+            setRequestedGatewayToken(false);
+        }
+    }, [gatewayToken, gatekeeper, mintClick, requestedGatewayToken]);
+
+    return (
+        <Button
+            onClick={onClick}
+            key={key}
+            size="sm"
+            backgroundColor="teal.100"
+            isDisabled={isDisabled}
+            isLoading={isLoading}
+            loadingText={loadingText}
+        >
+            {label}
+        </Button>
+    );
+};
+
 export function ButtonList({
     umi,
     guardList,
@@ -348,6 +408,7 @@ export function ButtonList({
     setCheckEligibility,
 }: Props): JSX.Element {
     const solanaTime = useSolanaTime();
+    const { requestGatewayToken, gatewayTokenTransaction } = useGateway();
     const [numberInputValues, setNumberInputValues] = useState<{ [label: string]: number }>({});
     if (!candyMachine || !candyGuard) {
         return <></>;
@@ -440,37 +501,43 @@ export function ButtonList({
                     }
 
                     <Tooltip label={buttonGuard.tooltip} aria-label="Mint button">
-                        <Button
-                            onClick={() =>
-                                mintClick(
-                                    umi,
-                                    buttonGuard,
-                                    candyMachine,
-                                    candyGuard,
-                                    ownedTokens,
-                                    numberInputValues[buttonGuard.label] || 1,
-                                    toast,
-                                    mintsCreated,
-                                    setMintsCreated,
-                                    guardList,
-                                    setGuardList,
-                                    onOpen,
-                                    setCheckEligibility
-                                )
-                            }
-                            key={buttonGuard.label}
-                            size="sm"
-                            backgroundColor="teal.100"
-                            isDisabled={!buttonGuard.allowed}
-                            isLoading={
-                                guardList.find((elem) => elem.label === buttonGuard.label)?.minting
-                            }
-                            loadingText={
-                                guardList.find((elem) => elem.label === buttonGuard.label)?.loadingText
-                            }
-                        >
-                            {buttonGuard.buttonLabel}
-                        </Button>
+
+                            <Mint
+                                mintClick={(gatewayToken: SolanaGatewayToken | undefined) => {
+                                        mintClick(
+                                            umi,
+                                            buttonGuard,
+                                            candyMachine,
+                                            candyGuard,
+                                            ownedTokens,
+                                            numberInputValues[buttonGuard.label] || 1,
+                                            toast,
+                                            mintsCreated,
+                                            setMintsCreated,
+                                            guardList,
+                                            setGuardList,
+                                            onOpen,
+                                            setCheckEligibility,
+                                            gatewayToken
+                                        )
+                                    }
+                                }
+                                key={buttonGuard.label}
+                                label={buttonGuard.buttonLabel}
+                                isDisabled={!buttonGuard.allowed}
+                                isLoading={
+                                    !!guardList.find((elem) => elem.label === buttonGuard.label)?.minting
+                                }
+                                loadingText={
+                                    guardList.find((elem) => elem.label === buttonGuard.label)?.loadingText
+                                }
+                                gatekeeper={
+                                    candyGuard.guards.gatekeeper.__option === "Some" 
+                                        ? candyGuard.guards.gatekeeper.value 
+                                        : undefined
+                                }
+                            />
+
                     </Tooltip>
                 </VStack>
             </SimpleGrid>

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@chakra-ui/next-js": "^2.1.4",
     "@chakra-ui/react": "^2.7.1",
+    "@civic/solana-gateway-react": "^0.16.7",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@metaplex-foundation/mpl-candy-machine": "6.0.0-alpha.16",

pages/_app.tsx

@@ -1,5 +1,5 @@
 import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
-import { WalletProvider } from "@solana/wallet-adapter-react";
+import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
 import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
 import type { AppProps } from "next/app";
 import Head from "next/head";
@@ -10,6 +10,7 @@ import "@solana/wallet-adapter-react-ui/styles.css";
 import { ChakraProvider } from '@chakra-ui/react'
 import { image, headerText } from 'settings'
 import { SolanaTimeProvider } from "@/utils/SolanaTimeContext";
+import Gatekeeper from "../components/gatekeeper";
 
 
 export default function App({ Component, pageProps }: AppProps) {
@@ -46,15 +47,19 @@ export default function App({ Component, pageProps }: AppProps) {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <ChakraProvider>
-        <WalletProvider wallets={wallets}>
-          <UmiProvider endpoint={endpoint}>
-            <WalletModalProvider>
-              <SolanaTimeProvider>
-                <Component {...pageProps} />
-              </SolanaTimeProvider>
-            </WalletModalProvider>
-          </UmiProvider>
-        </WalletProvider>
+        <ConnectionProvider endpoint={endpoint}>
+          <WalletProvider wallets={wallets}>
+            <UmiProvider endpoint={endpoint}>
+              <WalletModalProvider>
+                <SolanaTimeProvider>
+                  <Gatekeeper network={network}>
+                    <Component {...pageProps} />
+                  </Gatekeeper>
+                </SolanaTimeProvider>
+              </WalletModalProvider>
+            </UmiProvider>
+          </WalletProvider>
+        </ConnectionProvider>
       </ChakraProvider>
     </>
   );

pages/index.tsx

@@ -99,7 +99,7 @@ const useCandyMachine = (umi: Umi, candyMachineId: string, checkEligibility: boo
         setCheckEligibility(false)
       }
     })();
-  }, [umi, checkEligibility]);
+  }, [umi, checkEligibility, candyMachineId, setCheckEligibility, toast]);
 
   return { candyMachine, candyGuard };