@shopify/connect-wallet NPM

`@shopify/connect-wallet`

The @shopify/connect-wallet package provides a standard way of connecting wallets and signing messages on Shopify storefronts. For more in-depth information, read the complete documentation.

Get started

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

Installation

Install the shopify/connect-wallet package and its wagmi + ethers peer dependencies.

yarn add @shopify/connect-wallet ethers wagmi

Client configuration

We recommend creating a new file at the root of your app.

Create a file in your project titled connect-wallet-config.ts at the root of your app with the following code. For more information, refer to wagmi documentation.

import {getDefaultConnectors} from '@shopify/connect-wallet';
import {configureChains, createClient} from 'wagmi';
import {mainnet} from 'wagmi/chains';
/**
 * It is strongly recommended to make use of `alchemyProvider`
 * or `infuraProvider` to reduce the risk of your
 * storefront being rate limited.
 */
// import {alchemyProvider} from 'wagmi/providers/alchemy';
import {publicProvider} from 'wagmi/providers/public';

const {chains, provider, webSocketProvider} = configureChains(
  [mainnet],
  [
    // alchemyProvider({apiKey: 'INSERT API KEY HERE'}),
    publicProvider(),
  ],
);

const {connectors} = getDefaultConnectors({chains});

const client = createClient({
  autoConnect: true,
  connectors,
  provider,
  webSocketProvider,
});

export {chains, client};

App provider setup

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.

import {ConnectWalletProvider} from '@shopify/connect-wallet';
import {WagmiConfig} from 'wagmi';

import {chains, client} from './connect-wallet-config'

export function Index() {
  return (
    <WagmiConfig client={client}>
      <ConnectWalletProvider chains={chains}>
        /* {...your app content here} */
      </ConnectWalletProvider>
    </WagmiConfig>
  );
}

Adding the `ConnectButton` component to your app

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.

import {ConnectButton} from '@shopify/connect-wallet';

export const Header = () => {
  return (
    <MyHeaderMarkup>
      // {...existing header code}
      <Links>
        // {...existing links code}
        <ConnectButton />
      </Links>
    </MyHeaderMarkup>
  );
}

Additional setup

Additional setup might be required depending on the tooling of your project.

Polyfills

If you're using a bundler such as Vite which doesn't provide Node polyfills, you will need to polyfill global, Buffer, and process. Below is a list of plugins that you can use for polyfills: