How to Connect Users to your Wallet

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:

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.

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

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

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.

Solana Wallet Adapter

On this guide, you will allow users to connect their Crossmint wallet to a site with 2 lines of code, using Solana Wallet Adapter. To get started:

1. Find the file where you are initializing `WalletProvider`

In your project’s code, find the file where you are initializing the WalletProvider component. If you are following Solana’s example projects, the correct files are listed here:

React App | NextJs | React UI | Material UI

Once you have found the correct file, we need to make 2 alterations:

2. Import the Crossmint components

At the top of your file, import the CrossmintSolanaWalletAdapter and networkToCrossmintEnvironment from @crossmint/connect:

import { CrossmintSolanaWalletAdapter, networkToCrossmintEnvironment } from "@crossmint/connect"
...

3. Add Crossmint to the list of wallet providers

The WalletProvider component accepts an array of wallets, which are the wallets your users will be able to connect with. You must add CrossmintSolanaWalletAdapter to the wallets array, together with any other wallets you may want to incorporate:

const wallets = useMemo(
    () => [
        // Add other wallets here...
        new CrossmintSolanaWalletAdapter({
            environment: networkToCrossmintEnvironment(network),
            apiKey: "",
        }),
    ],
    []
);

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

Congrats! You can now allow users to connect their Crossmint wallets to your site using Crossmint Connect! Refer to the Solana Adapter repo for inspiration and questions.

Troubleshooting

On this page

Choose the Connector
Deep-dive on Crossmint Connect

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.

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:

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

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

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.

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

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

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.

Solana Wallet Adapter

On this guide, you will allow users to connect their Crossmint wallet to a site with 2 lines of code, using Solana Wallet Adapter. To get started:

1. Find the file where you are initializing `WalletProvider`

In your project’s code, find the file where you are initializing the WalletProvider component. If you are following Solana’s example projects, the correct files are listed here:

React App | NextJs | React UI | Material UI

Once you have found the correct file, we need to make 2 alterations:

2. Import the Crossmint components

At the top of your file, import the CrossmintSolanaWalletAdapter and networkToCrossmintEnvironment from @crossmint/connect:

import { CrossmintSolanaWalletAdapter, networkToCrossmintEnvironment } from "@crossmint/connect"
...

3. Add Crossmint to the list of wallet providers

const wallets = useMemo(
    () => [
        // Add other wallets here...
        new CrossmintSolanaWalletAdapter({
            environment: networkToCrossmintEnvironment(network),
            apiKey: "",
        }),
    ],
    []
);

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

Congrats! You can now allow users to connect their Crossmint wallets to your site using Crossmint Connect! Refer to the Solana Adapter repo for inspiration and questions.

Troubleshooting

On this page

Choose the Connector
Deep-dive on Crossmint Connect

​Choose the Connector

Crossmint Connect

Wallet Connect

​Deep-dive on Crossmint Connect

​Crossmint Connect - EVM chains

​1. Create a new react component

​2. Import CrossmintEVMWalletAdapter and BlockchainTypes

​3. Prompt the user to trust your app

​4. Put the public key into a React state

​5. Sign a message

​Crossmint Connect - EVM chains

​1. Create a new react component

​2. Import CrossmintEVMWalletAdapter and BlockchainTypes

​3. Prompt the user to trust your app

​4. Put the public key into a React state

​5. Sign a message

​Solana Wallet Adapter

​1. Find the file where you are initializing WalletProvider

​2. Import the Crossmint components

​3. Add Crossmint to the list of wallet providers

Changelog

​Choose the Connector

Crossmint Connect

Wallet Connect

​Deep-dive on Crossmint Connect

​Crossmint Connect - EVM chains

​1. Create a new react component

​2. Import CrossmintEVMWalletAdapter and BlockchainTypes

​3. Prompt the user to trust your app

​4. Put the public key into a React state

​5. Sign a message

​Crossmint Connect - EVM chains

​1. Create a new react component

​2. Import CrossmintEVMWalletAdapter and BlockchainTypes

​3. Prompt the user to trust your app

​4. Put the public key into a React state

​5. Sign a message

​Solana Wallet Adapter

​1. Find the file where you are initializing WalletProvider

​2. Import the Crossmint components

​3. Add Crossmint to the list of wallet providers

Choose the Connector

Deep-dive on Crossmint Connect

Crossmint Connect - EVM chains

1. Create a new react component

2. Import `CrossmintEVMWalletAdapter` and `BlockchainTypes`

3. Prompt the user to trust your app

4. Put the public key into a React state

5. Sign a message

Crossmint Connect - EVM chains

1. Create a new react component

2. Import `CrossmintEVMWalletAdapter` and `BlockchainTypes`

3. Prompt the user to trust your app

4. Put the public key into a React state

5. Sign a message

Solana Wallet Adapter

1. Find the file where you are initializing `WalletProvider`

2. Import the Crossmint components

3. Add Crossmint to the list of wallet providers

Choose the Connector

Deep-dive on Crossmint Connect

Crossmint Connect - EVM chains

1. Create a new react component

2. Import `CrossmintEVMWalletAdapter` and `BlockchainTypes`

3. Prompt the user to trust your app

4. Put the public key into a React state

5. Sign a message

Crossmint Connect - EVM chains

1. Create a new react component

2. Import `CrossmintEVMWalletAdapter` and `BlockchainTypes`

3. Prompt the user to trust your app

4. Put the public key into a React state

5. Sign a message

Solana Wallet Adapter

1. Find the file where you are initializing `WalletProvider`

2. Import the Crossmint components

3. Add Crossmint to the list of wallet providers