By default your users can connect Crossmint-backed wallets with dApps using Wallet Connect, by selecting the option named “Crossmint”. This feature works out of the box with no configuration, and is explaied in more detail in Connecting the Wallet.

However, sometimes you may wish to have your wallet appear as its own entry, with your custom brand. This guide explains how to do so.

Branded Wallet Connect requires an Enterprise contract. Contact us to learn more.

Wallet Connect flow for a ficticious Acme Inc wallet

Integration overview

It takes the following steps to expose your wallet as your own provider:

1

Create a Wallet Connect page

Using the Crossmint wallet-connect-provider SDK

2

Customize the UI

Change the look and feel to match your brand

3

Test the connection

Using a sample dApp
4

Publish in production

And optionally deploy it to the Wallet Connect Explorer

Limitations:

This guide currently only works if the following conditions are true:

  • You are using wallets for an EVM chain. Solana support is coming soon.
  • Yor app runs in a browser, and uses React
  • You are using the “Smart Contract” variant of Crossmint’s wallets as a service.

If some of these conditions aren’t met, your Customer Success Engineer from Crossmint may still be able to help you integrate.

Integration Guide

Prerequisites

  1. You must have a working implementation of Smart Wallets in your webapp.
  2. You must have a user authentication system and a way to gate pages for authorized users only.
  3. Install the Crossmint Wallet Connect Provider SDK from npm: @crossmint/client-sdk-walletconnect
  4. Create an account in Wallet Connect Cloud, and copy the project ID.

1. Create a Wallet Connect Landing Page

For the first step, you must create a page in your app that will render the wallet connect UI: the instructions to connect, permission prompts, etc.

It is typical for this page to be mydomain.com/wc or mydomain.com/walletconnect, but the name doesn’t matter.

Using a subdomain (e.g. connect.mydomain.com) could be problematic, as we’ll need to be able to check if your user is signed in to your webapp, which typically does not work across subdomains.

On your newly picked page, add the CrossmintWalletConnect component:

src/app/wc.tsx
"use client";

import {
  CrossmintWalletConnect,
  WalletConnectEVMAAWallet,
} from "@crossmint/client-sdk-walletconnect";
import "@crossmint/client-sdk-walletconnect/index.css";

export default function WalletConnectPage() {
  const userAAWallet: EVMAAWallet; // This should contain a reference to the user's Smart Wallet

  return (
    <div>
      <CrossmintWalletConnect
        wcProjectId="<WALLET_CONNECT_CLOUD_PROJECT_ID>"
        uiConfig={{
          metadata: {
            name: "Acme Inc",
            description: "Acme Web3 Wallets",
            url: "https://www.acme.com",
            icon: "https://fastly.picsum.photos/id/477/200/200.jpg?hmac=pGA68LBET23UPGB7L8xL1pA7PYT_x7JazGX__CnlliU",
          },
        }}
        wallets={[new WalletConnectEVMAAWallet(userAAWallet)]}
      />
    </div>
  );
}

Now, apply the following modifications in the code:

  1. Replace <WALLET_CONNECT_CLOUD_PROJECT_ID> with the value obtained in the pre-requisites section.
  2. Ensure this page is gated for authenticated users only. If a user is not authenticated and they open this URL, you must show your log-in screen and then take them back to this page.
  3. Replace the userAAWallet reference with a reference to your user’s smart wallet.

With this code, you already have a fully working Wallet Connect implementation. Run your app and you will see something like the following:

Wallet Connect Landing Page

2. Customize the UI

Now, let’s customize the look and feel of your page.

On the same file, add the following uiConfig prop to the CrossmintWalletConnect component:

src/app/wc.tsx
// ...
        uiConfig={{
          colors: {
            textPrimary: "#00150d",
            textSecondary: "#67797f",
            background: "#f2f3f7",
            backgroundSecondary: "#ffffff",
            border: "#d0d5dd",
            accent: "#04aa6d",
          },
        }}
      />
    </div>
// ...

This changes the colors in the page:

Wallet Connect Landing Page, Custom Branding

3. Test the connection

We have a working version of Wallet Connect. Let’s test it on a sample dApp to confirm it works.

With your app deployed in one tab, open a new tab and navigate to https://react-app.walletconnect.com/ . This is an example dApp that permits connecting a wallet to it using Wallet Connect.

Sample dApp for Wallet Connect

Here, pick the chain supported by your wallet, and click Connect. In the dialog that appears, copy the link by clicking on the copy icon in the top right.

Now, go back to the tab with your Wallet Connect Landing page, and enter the URL you just copied:

Accept the prompts, and you’ll be now logged in to the sample dApp:

4. Publish in production

We have a full end to end version of Wallet Connect. Now, the UI to test it is clunky, as it requires users to copy and paste a URL, which is not intuitive.

To make this easier, you’ll want to register your wallet in the Wallet Connect Explorer.

To do so, follow the steps officially documented by Wallet Connect here:

https://docs.walletconnect.com/cloud/explorer-submission

Once approved, your wallet will now appear as a wallet that users can search for, from any Wallet Connect dialog.