Connect wallet

To get started with using @shopify/connect-wallet you need to follow these steps:

1. Installation
2. Client configuration
3. App provider setup
4. Adding the <ConnectButton /> component to your app
5. Custom connect button

1. Retrieve the projectId for your WalletConnect app by opening the WalletConnect dashboard and navigating to your project.

2. In your project's root folder, create a new file called connect-wallet-config.js.

3. Add the following code:

Let's begin using the configured client and chains. In your app's entry point, (either index.tsx, _app.tsx, or your framework's entry point), wrap the rendered component with both <WagmiConfig /> and the <ConnectWalletProvider /> as follows.

This example shows a pseudo code version of including the component in your navigation header, but you're welcome to place the component where you prefer.

Don't like our connect button? All good! You can replace our button with your own and use the openModal function returned from the useConnectionModal hook.

Connectors allow users to connect to their preferred wallet app.

We also support adding custom connectors and editing the list of supported wallets for users to connect with. In the connect-wallet-config.ts file you created during initial configuration, you can pass additional values to the buildConnectors function to do so.

The following is an example of adding a custom WalletConnectConnector and removing rainbow from the list:

You can use any of the supported chains from wagmi for @shopify/connect-wallet. In the connect-wallet-config.ts file you created during initial configuration, change the value provided to configureChains like this:

For more information about configuring providers, refer to wagmi documentation.

When initializing the package, we strongly recommended including an Alchemy or Infura provider to reduce the risk of rate limiting. If your app is rate limited your customers can't connect their wallets.

For more information, refer to wagmi's configuring chains documentation.

There are three components exported from the package for your use:

• ConnectButton
• ConnectorIcon
• ConnectWalletProvider

An out of the box component that controls the connection and disconnection flow for wallet connection.

A component that displays the icon for a given connector ID. This component is useful for developing a custom connect button.

The core component for ensuring your connect wallet integration works as expected. This component must wrap your app and be placed within a WagmiConfig.

The enableDelegateCash property dictates whether your app supports delegate wallets registered with the delegate.cash service. The service enables users to link cold wallets with hot wallets, and then the hot wallet can act on behalf of the cold wallet to connect and sign messages.

Supporting delegate.cash empowers users with valuable assets to confidently interact with your app knowing their assests are secured. Learn more by reading the delegate.cash documentation.

The orderAttributionMode property dictates how automatic order attribution functions after successful wallet connection.

Order attribution is a feature provided for Shopify Online Storefronts. When enabled, a request dispatches to Shopify, adding the buyer's wallet address to a completed order with the name "Wallet Address". This allows users to associate an order with a particular wallet address.

The statementGenerator prop allows you to customize the statement displayed in a Sign-In with Ethereum message. The function receives the address of the wallet that has connected, allowing you to expand and customize your message statements to better suit your brand.

Below is a sample which fetches a custom message from an endpoint with the wallet address as a parameter. The example endpoint then returns JSON data with message as a value in the body. This isn't a guideline for how this must be used, but rather an example of what's possible.

There are two hooks exported from the package for your use:

• useConnectionModal
• useConnectWallet

The useConnectionModal hook returns two functions which control the interaction state of the modal.

A hook that returns information related to the active connected wallet, connection status, and more.

We export the types used by the package to ensure that you can type your callback functions, custom connectors, and have a better understanding of how all of the exports tie together.