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.
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.
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:
First, you must create a new react component called EVMConnectButton.tsx, with an onClick handler
EVMConnectButton.tsx
Copy
Ask AI
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
Copy
Ask AI
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.
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
Copy
Ask AI
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.
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
Copy
Ask AI
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.
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
Copy
Ask AI
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.
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:
First, you must create a new react component called EVMConnectButton.tsx, with an onClick handler
EVMConnectButton.tsx
Copy
Ask AI
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
Copy
Ask AI
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.
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
Copy
Ask AI
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.
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
Copy
Ask AI
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.
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
Copy
Ask AI
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.
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:
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:
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.
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.