Connecting the Wallet

Allow users to connect to any website and physical location

Crossmint’s wallets are interoperable. This means you can allow users to connect their wallets to any website and offer benefits based on the NFTs they hold or their wallet activity.

Choose the Connector

Crossmint’s wallets can be connected in two different ways:

Crossmint Connect

Best UX

Wallet Connect

More ubiquitous

You may test both options here. Note that returning users will remained logged in.

Once a user has connected their wallet and you have their public address, you can use Crossmint’s APIs to read the content of their wallets and decide whether any action is required, like unlocking exclusive content or offering them rewards.

Connectivity will generally not work if wallets are created using userID instead of email addresses. Whitelabel connectors and userID connectivity available only for large enterprises.

Deep-dive on Crossmint Connect

Crossmint Connect provides a more seamless experience to connect a Crossmint wallet than Wallet Connect. The implementation varies slightly by chain:

• EVM
• Solana

Crossmint Connect - EVM chains

On this guide, you will allow users to connect their Crossmint wallet to your site, obtain their public key, store it, and allow them to sign a message. To get started:

1. Create a new react component

First, you must create a new react component called EVMConnectButton.tsx, with an onClick handler

EVMConnectButton.tsx

import React from "react";

export default function EVMConnectButton() {
    async function handleClick() {
        // prompt user to trust your app
    }

    return <button onClick={handleClick}>Connect</button>;
}

2. Import CrossmintEVMWalletAdapter and BlockchainTypes

Next, we will import CrossmintEVMWalletAdapter and BlockchainTypes from @crossmint/connect, and instance it inside the component.

EVMConnectButton.tsx

import { BlockchainTypes, CrossmintEVMWalletAdapter } from "@crossmint/connect";
import React from "react";

export default function EVMConnectButton() {
    const crossmintConnect = new CrossmintEVMWalletAdapter({
        apiKey: "",
        chain: BlockchainTypes.ETHEREUM, // BlockchainTypes.ETHEREUM || BlockchainTypes.POLYGON || BlockchainTypes.BSC
    });

    async function handleClick() {
        // prompt user to trust your app
    }

    return <button onClick={handleClick}>Connect</button>;
}

The apiKey parameter has been deprecated. Please set the value as empty quotes.

Here we set up CrossmintEVMWalletAdapter for Ethereum. If you’d like to use another chain, swap BlockchainTypes.ETHEREUM for BlockchainTypes.POLYGON or the relevant chain.

3. Prompt the user to trust your app

Finally, you must prompt the user to trust your app by calling await crossmintConnect.connect(). If the user accepts, it will return a string containing the user’s public key. If the user rejects, the function will return undefined.

EVMConnectButton.tsx

import { BlockchainTypes, CrossmintEVMWalletAdapter } from "@crossmint/connect";
import React from "react";

export default function EVMConnectButton() {
    const crossmintConnect = new CrossmintEVMWalletAdapter({
        apiKey: "",
        chain: BlockchainTypes.ETHEREUM, // BlockchainTypes.ETHEREUM || BlockchainTypes.POLYGON || BlockchainTypes.BSC. For solana use BlockchainTypes.SOLANA
    });

    async function handleClick() {
        // prompt user to trust your app
        const _address = await crossmintConnect.connect();

        if (_address != null) {
            // user accepted. _address is the user's publickey
        } else {
            // user rejected. _address is undefined
        }
    }

    return <button onClick={handleClick}>Connect</button>;
}

The apiKey parameter has been deprecated. Please set the value as empty quotes.

4. Put the public key into a React state

That’s all you need to connect to a user’s Crossmint wallet and get their public key! To put the user’s public key into react state, and displaying it once they have connected:

EVMConnectButton.tsx

import { BlockchainTypes, CrossmintEVMWalletAdapter } from "@crossmint/connect";
import React from "react";

export default function EVMConnectButton() {
    const [address, setAddress] = useState<string | undefined>(undefined);

    const crossmintConnect = new CrossmintEVMWalletAdapter({
        apiKey: "",
        chain: BlockchainTypes.ETHEREUM, // BlockchainTypes.ETHEREUM || BlockchainTypes.POLYGON || BlockchainTypes.BSC. For solana use BlockchainTypes.SOLANA
    });

    async function handleClick() {
        // prompt user to trust your app
        const _address = await crossmintConnect.connect();

        // store the result in react state
        setAddress(_address);
    }

    const connected = address != null;

    // If connected, displays their address, else displays "Connect"
    return (
        <button onClick={handleClick} disabled={connected}>
            {connected ? `${address.slice(0, 6)}...` : "Connect"}
        </button>
    );
}

The apiKey parameter has been deprecated. Please set the value as empty quotes.

5. Sign a message

To ask a user to sign a message, you must instance a new CrossmintEVMWalletAdapter, and call the .signMessage(message) function, where message is a string. Find the high-level code below. Not all steps are described as the code is very similar to the one used to get a user’s public key:

EVMSignMessageButton.tsx

import { BlockchainTypes, CrossmintEVMWalletAdapter } from "@crossmint/connect";
import React from "react";

export default function EVMSignMessageButton() {
    const crossmintConnect = new CrossmintEVMWalletAdapter({
        apiKey: "",
        chain: BlockchainTypes.ETHEREUM, // BlockchainTypes.ETHEREUM || BlockchainTypes.POLYGON || BlockchainTypes.BSC. For solana use BlockchainTypes.SOLANA
    });

    const plainMessage = "This is a test message";

    async function handleClick() {
        // prompt user to trust your app
        const _signature = await crossmintConnect.signMessage(plainMessage);

        if (_signature != null) {
            // user signed plainMessage.
            // You should now validate _signature, using your choice method, such as ethers.utils.recoverAddress()
        } else {
            // user rejected.
        }
    }

    return <button onClick={handleClick}>Sign Message</button>;
}

The apiKey parameter has been deprecated. Please set the value as empty quotes.

Troubleshooting

If you encounter issues, please ensure that: - Your project credentials are set correctly. - The user is correctly authenticated. - You have adequate error handling in your code to manage issues with API requests.