Read and evaluate gates

In this tutorial, you'll learn how to do the following:

• Read gates bound to a product.
• Use wallet data stored server-side to evaluate gate eligibility.
• Update your ProductForm to include the Tokengate component, and display the customer's eligibility to receive the reaction defined in the gateConfiguration.

• You've followed the getting started and saving connected wallet to session storage steps of the tutorial series.
• You've created an Alchemy account and retrieved your Alchemy API key.

Add a new environment variable named ALCHEMY_API_KEY to your ENV file. Your ENV file should look similar to the one below:

To evaluate gates, you first need to retrieve the gates bound to your products. In this section, you'll make changes to your product query and your loader function to retrieve and parse the gates bound to the product.

1. Open your ($locale).products.$productHandle JSX or TSX file.

2. Near the end of the file, find the PRODUCT_QUERY constant.

3. In this query, paste the fields from the code sample below.

   You can paste them anywhere within the product query field. In the example repository the fields are between description and options.

   Make sure that you replace the placeholder headless_gating_example namespace with your own metafield namespace.

If you're using TypeScript, then you need to generate the types for the unstable Storefront API schema. Generating the unstable schema types allows you to assign the correct types to the gateConfiguration and product resources.

1. In a terminal, run the following command to install the packages needed to generate the schema types:

2. In your project's root folder, create a new file called codegen.js.

3. Add the following code:

4. Generate the unstable API schema.

   Run the following script by using your preferred package manager:

   After running the following command, you'll notice a new file added to your project located in /app/generated/storefront-api-types.ts.

on the $productHandle route to retrieve the stored wallet value.

If you're using TypeScript, then you need to update the loader function in your $productHandle route to reference the correct types from the Storefront API schema.

1. Open your /app/routes/($locale).products.$productHandle JSX or TSX file.

2. Add the following import statements:

3. Update the types for the GraphQL payload in the loader function by replacing the query with the following code:

In this step, you'll create a server-side function that requests data related to a user's wallet address from Alchemy. The data that you receive from Alchemy is used to evaluate whether a customer should receive the benefits defined in the gate's reaction.

If you're using TypeScript, then copy the following type definitions into the bottom of /app/lib/type.ts:

In this step, you'll create functions to do the following:

• Parse the provided gateConfiguration for a requirements definition.
• Fetch a collection of owned NFTs for a wallet address.

1. In your project's /app/lib folder, create a new file called evaluateGate.server.js, or evaluateGate.server.ts if you're using TypeScript.

2. Add the following code:

Using the product's gates from the PRODUCT_QUERY and the wallet stored in session from the previous step, you can now perform gate evaluation.

1. Open the /app/routes/($locale).products.$productHandle JSX or TSX file.

2. Add the following import statement:

3. In the same file, update the loader by adding the following code:

4. Update the return statement of the loader by adding gateConfiguration, unlockingTokens, and wallet to the return statement.

Now that the loader is returning gateConfiguration, unlockingTokens, and wallet, update your ProductForm to display your customer's eligibility, using the Tokengate component from @shopify/tokengate.

1. Open your ($locale).products.$productHandle JSX or TSX file.

2. Import the following components:

   The ConnectButton component from the @shopify/connect-wallet package.

   The Tokengate component from @shopify/tokengate package.

3. In the same file, locate the ProductForm component, and update the destructured data from the useLoaderData to match the following code:

4. Locate the constant named isOutOfStock within the ProductForm component.

   The Tokengate component uses a prop named isSoldOut, which won't allow ybcibbected wallets to connect when the product is sold out.

   Paste the following code directly below the isOutOfStock constant:

5. Locate the return statement for the ProductForm component.

   Directly above the return statement, paste the following code:

6. Add the Tokengate component to the ProductForm by copying the following code and pasting it into the first div element of the ProductForm return statement.

7. Directly below the code you pasted into the return statement from the last step, wrap the ProductOptions and remaining code with the following:

   To see a representation of what your code might look like, view the sample repository.

• Write gate context to cart attributes