This is the second part of a tutorial series for building a tokengated storefront. Read the [overview](/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront) and [Getting started tutorial](/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/start-building) before starting this tutorial.
## What you'll learn
In this tutorial, you'll learn how to do the following tasks:
- Add server-side wallet storage functionality.
- Add an `action` function to your `index` route for processing dispatched events.
- Update your `Layout` component to submit a payload to the `index` route's action when a wallet connects.
## Step 1: Create wallet cookie session storage
In this step, you'll add code to create a cookie-based session that stores connected wallet information in the cookie. This information will be used by your storefront's actions and loaders.
For more information on the technology used in this step, reference the links below.
- [`createCookieSessionStorage`](https://remix.run/docs/en/main/utils/sessions#createcookiesessionstorage).
- [`cookies`](https://remix.run/docs/en/main/utils/cookies)
- [cookie attributes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#attributes)
1. In your project's `/app/lib` folder, create a new file called `wallet.server.js`, or `wallet.server.ts` if you're using TypeScript.
1. Add the following code:
## Step 2: Handle wallet connection events
Next, you will make changes to your `($locale)._index` JSX or TSX file to add an `action` function which will run when the `onConnect` and `onDisconnect` callbacks from `@shopify/connect-wallet`.
1. Open your `($locale)._index` JSX or TSX file.
1. Copy the following import statements into your file:
1. Add the following `action` function:
## Step 3: Use the index action in connect-wallet callbacks
In this step, you'll modify your `Layout` component to send the connected wallet data to the `action` function that you created in the previous step.
One advantage to storing the wallet in a cookie is that your storefront can load and assess whether a gate is unlocked, or should be, before the client hydration. This means that your customer knows immediately if they meet the criteria for a product if their wallet is already connected.
1. In your `/app/components/Layout` JSX or TSX file, add the following import statements:
```javascript
import {useParams, Form, Await, useMatches, useFetcher} from '@remix-run/react';
import {useConnectWallet} from '@shopify/connect-wallet';
```
1. Add fetcher and connect-wallet callbacks.
In this step, you'll use the [`useFetcher`](https://remix.run/docs/en/main/hooks/use-fetcher) Remix hook to create a method of submitting data to your index route, and `useConnectWallet` to create the callbacks that run when a wallet is either connected or disconnected.
Copy the following code. Add it into your `/app/components/Layout` JSX or TSX file at the top of the `Layout` function:
```javascript
const fetcher = useFetcher();
useConnectWallet({
onConnect: (wallet) => {
fetcher.submit({wallet: JSON.stringify(wallet)}, {method: 'post'});
},
onDisconnect: () => {
fetcher.submit({wallet: ''}, {method: 'post'});
},
});
```
## Step 4: Read the context value in a loader
Next, you'll add additional functionality to your `loader` function in the `$productHandle` route to retrieve the stored wallet value.
1. Open your `/app/routes/($locale).products.$productHandle` JSX or TSX file
1. Copy the following import statements into your file:
```javascript
import {ConnectButton} from '@shopify/connect-wallet';
import {walletSession} from '~/lib/wallet.server';
```
1. Locate the `ProductForm` function and add the `` component anywhere in the return statement.
1. Copy the following code into the `loader` function:
```javascript
const {getWallet} = await walletSession(request);
const wallet = getWallet();
const message = wallet
? `Wallet connected with address: ${wallet.address}`
: 'No wallet present in the session.';
console.log(message);
```
1. Connect and disconnect your wallet to test out the session storage implementation.
When you connect and disconnect your wallet, you should see the following messages logged to your console.
## Next steps
- [Read and evaluate gates](/docs/apps/build/blockchain/tokengating/build-a-tokengated-storefront/read-and-evaluate-gates)