Save a connected wallet to session storage

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.

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.
• cookies
• 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.

2. Add the following code:

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.

2. Copy the following import statements into your file:

3. Add the following action function:

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:

2. Add fetcher and connect-wallet callbacks.

   In this step, you'll use the useFetcher 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:

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

2. Copy the following import statements into your file:

3. Locate the ProductForm function and add the <ConnectButton /> component anywhere in the return statement.

4. Copy the following code into the loader function:

5. 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.

• Read and evaluate gates