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:
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
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.
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>;
}
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
.
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>;
}
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:
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>
);
}
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:
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>;
}
apiKey
parameter has been deprecated. Please set the value as empty quotes.