This is the first part of a tutorial series for building a tokengated storefront. Read the [overview](/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront) section before starting this tutorial.
## What you'll learn
In this tutorial, you'll learn how to do the following:
- Create gates using GraphQL Storefront API. These gates define which segments of customers receive exclusive discounts.
- Enable wallet connection on your custom storefront using [connect wallet](/docs/api/blockchain/components/connect-wallet) components.
## Requirements
- You've completed the [Hydrogen getting started tutorial](/docs/storefronts/headless/hydrogen/getting-started) with a Demo Store example project.
- You've enabled the `unauthenticated_read_gates` access scope for your storefront. [Learn how to manage permission scopes for Hydrogen](/docs/storefronts/headless/hydrogen/environments#rotate-your-private-storefront-api-token).
- You've completed the [Create gates](/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/create-gates-admin) and [Create gated discount function](/docs/apps/build/blockchain/tokengating/build-a-tokengating-app/create-gated-discount-function) tutorials from the [Build a tokengating app](/docs/apps/build/blockchain/tokengating/build-a-tokengating-app) tutorial series.
## Step 1: Install blockchain packages
> Note:
> To install the `wagmi` package, you might need to bump your version of TypeScript.
In a terminal, run the following command to install additional packages. These packages help to create a uniform experience between Shopify, your custom storefront, and the blockchain.
## Step 2: Configuration
Additional configuration is required to begin using the `@shopify/connect-wallet` functionality. To learn more about `@shopify/connect-wallet`, refer to the [Blockchain component reference](/docs/api/blockchain/components/connect-wallet).
### Configure the connect-wallet package
In this step, you'll create a config file that defines which Remote Procedure Call (RPC) providers you want to use to query against the blockchain, as well as the chains that you want to use.
1. Retrieve the `projectId` for your [WalletConnect](https://walletconnect.com) app by opening the WalletConnect [dashboard](https://cloud.walletconnect.com/sign-in) and navigating to your project.
1. In your project's root folder, create a new file called `connect-wallet-config.js`.
1. Add the following code:
```javascript?filename: '/app/connect-wallet-config.js'
import {buildConnectors} from '@shopify/connect-wallet';
import {configureChains, createConfig, mainnet} from 'wagmi';
// import {alchemyProvider} from 'wagmi/providers/alchemy';
import {publicProvider} from 'wagmi/providers/public';
const {chains, publicClient, webSocketPublicClient} = configureChains(
[mainnet],
[
/**
* We recommend using `alchemyProvider or `infuraProvider`
* to reduce the risk of your application being rate limited.
*/
// alchemyProvider({apiKey: 'INSERT API KEY HERE'}),
publicProvider(),
],
);
const {connectors, wagmiConnectors} = buildConnectors({
chains,
projectId: 'YOUR_WALLET_CONNECT_PROJECT_ID',
});
const config = createConfig({
autoConnect: true,
connectors: wagmiConnectors,
publicClient,
webSocketPublicClient,
});
export {chains, config, connectors};
```
### Root route updates
1. Open your `/app/root` JSX or TSX file.
1. Add the following import statements:
```javascript?filename: '/app/root.jsx'
import {ConnectWalletProvider} from '@shopify/connect-wallet';
import connectWalletStylesheet from '@shopify/connect-wallet/styles.css';
import tokengateStylesheet from '@shopify/tokengate/styles.css';
import {WagmiConfig} from 'wagmi';
import {chains, config, connectors} from './connect-wallet-config';
```
1. Add the `connectWalletStylesheet` and `tokengateStylesheet` stylesheets to your `links` function.
1. Wrap the `Layout` component with `WagmiConfig` and `ConnectWalletProvider` components.
The `WagmiConfig` component manages configuration for all hooks used by the `@shopify/connect-wallet` package. [Read more about WagmiConfig](https://wagmi.sh/react/WagmiConfig).
The `ConnectWalletProvider` component is a [React Context](https://react.dev/learn/passing-data-deeply-with-context) provider for managing your configured [wagmi connectors](https://wagmi.sh/react/connectors/injected), connected wallet state, [Ethereum Name Service (ENS)](https://ens.domains/), and wallet connection interactions.
## Step 3: Create a gate and attach it to a product
Create a gate and attach it to a product by using the tokengating app you built by following the [Build a tokengating app](/docs/apps/build/blockchain/tokengating/build-a-tokengating-app) tutorial series.
> Note:
> If you are using the app you built in the [Build a tokengating app](/docs/apps/build/blockchain/tokengating/build-a-tokengating-app) tutorial series, you will still need to complete Step 3.3 to [allow the Storefront API to read gate metafields](#expose-metafields-in-the-storefront-api).
Optionally, you can use the Shopify GraphiQL app to create a gate and attach it to a product using the Admin API [gateConfigurationCreate](/docs/api/admin-graphql/unstable/mutations/gateConfigurationCreate) mutation. The following steps detail the mutations needed to create a gate and attach it to a product.
### Create the gate configuration
For this tutorial, create a gate with two different metafields: `reaction` and `requirements`.
- `reaction`: Determines the effect unlocking the gate has on the customer's shopping experience. Valid values are `discount` or `exclusive_access`. These values are defined [in the `@shopify/tokengate` package](/docs/api/blockchain/components/tokengate#reaction).
- `requirements`: Defines what the customer needs to have to unlock the gate. The syntax for requirements is defined in the [`@shopify/tokengate`](/docs/api/blockchain/components/tokengate#requirements) package. Reference the following example for a valid configuration:
The `value` in the `createGateConfiguration` metafields is a stringified JSON value. You can use an online tool to stringify your JSON input before running your mutation.
### Attach the gate to a product
After you've created the gate, you can attach it to your product using the product's GID.
### Expose metafields in the Storefront API
Run the Admin API [`metafieldStorefrontVisibilityCreate`](/docs/api/admin-graphql/unstable/mutations/metafieldStorefrontVisibilityCreate) mutation to expose your new metafields to the Storefront API. Until you run the mutation, the values defined in your metafields can't be read.
Ensure that you use the `unstable` version of the Admin API as `GATE_CONFIGURATION` isn't a valid `MetafieldOwnerType` as of [2023-07](/docs/api/admin-graphql/2023-07/enums/MetafieldOwnerType).
You'll need to run the mutation twice, once for `reaction`, and once for `requirements`.
Make sure to replace the `namespace` value with your own namespace.
## Next steps
- [Save a connected wallet to session storage](/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/save-wallet-to-session)