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

Installation

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

yarn add @shopify/connect-wallet ethers wagmi

Documentation

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 {buildConnectors} 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, wagmiConnectors} = buildConnectors({
  chains,
});
const client = createClient({
  autoConnect: true,
  connectors: wagmiConnectors,
  provider,
  webSocketProvider,
});
export {chains, client, connectors};

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 '@shopify/connect-wallet/styles.css';
import {WagmiConfig} from 'wagmi';

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

export function Index() {
  return (
    <WagmiConfig client={client}>
      <ConnectWalletProvider chains={chains} connectors={connectors}>
        /* {...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>
  );
}

For further detailed documentation, visit shopify.dev.

For examples of component usage, see the examples folder.