`@shopify/connect-wallet`

The @shopify/connect-wallet package provides an opinionated and delightful way of connecting wallets and signing messages. The provided package and functionality is suitable for use on and off of Shopify.

For more in-depth information and API references, read the complete documentation.

Installation

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

yarn add @shopify/connect-wallet viem wagmi

Documentation

Client configuration

To get started, you'll need to retrieve a Project ID from WalletConnect. Find your Project ID here.
Begin by creating a new file at the root of your app named connect-wallet-config.ts.

Paste the following code into your newly created file:

import {buildConnectors} from '@shopify/connect-wallet';
import {configureChains, createConfig, mainnet} from 'wagmi';
// import {alchemyProvider} from 'wagmi/providers/alchemy';
import {publicProvider} from 'wagmi/providers/public';

const {chains, publicClient, webSocketPublicClient} = configureChains(
  [mainnet],
  [
    /**
     * We recommend using `alchemyProvider or `infuraProvider`
    * to reduce the risk of your application being rate limited.
    */
    // alchemyProvider({apiKey: 'INSERT API KEY HERE'}),
    publicProvider(),
  ],
);

const {connectors, wagmiConnectors} = buildConnectors({
  chains,
  projectId: 'YOUR_WALLET_CONNECT_PROJECT_ID',
});

const config = createConfig({
  autoConnect: true,
  connectors: wagmiConnectors,
  publicClient,
  webSocketPublicClient,
});

export {chains, config, 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, config, connectors} from './wagmi';

export function Index() {
  return (
    <WagmiConfig config={config}>
      <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>
  );
}

Examples

For examples of component usage in various frameworks, see the examples folder.

Contributing

Pull requests are welcome. See the contribution guidelines for more information.