Publish your Wallet in Wallet Connect

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.

Wallet Connect flow for a ficticious Acme Inc wallet

​

Integration overview

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

​

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.

​

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.

On your newly picked page, add the CrossmintWalletConnect component:

"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:

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