Crossmint Connect setup
Quickstart guides for setup on EVM chains and Solana
EVM: Ethereum, Polygon and Binance
While the CrossmintEVMWalletAdapter
is very similar to its Solana counterpart, it does have some differences. The most important being that it does not slot into another package, like CrossmintSolanaWalletAdapter
does with @solana/wallet-adapter
, it is meant to be used as a standalone package with no other dependencies.
What does this mean for you, as a developer
Currently, the @crossmint/connect
package does not come with utility react hooks or components, such as useWallet()
or EVMConnectButton
. This means that you will need to handle things like, creating buttons or passing around the user's public key in memory after they have connected. Crossmint does have plans to implement these kinds of utilities for you, however we do not have an ETA at this time.
Now lets get started!
Get a user's Crossmint public key, by chain
In order to get a user's public key, they must first approve your app's connection to their Crossmint wallet. We can do this by creating a button, which when clicked, will prompt the user to trust your app.
Create a new react component
First we will 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>
};
Import CrossmintEVMWalletAdapter
and BlockchainTypes
CrossmintEVMWalletAdapter
and BlockchainTypes
Next, we will import CrossmintEVMWalletAdapter
and BlockchainTypes
from @crossmint/connect
, and instance it inside the component.
import React from "react";
import { CrossmintEVMWalletAdapter, BlockchainTypes } from "@crossmint/connect";
export default function EVMConnectButton() {
const crossmintConnect = new CrossmintEVMWalletAdapter({
apiKey: "<YOUR_API_KEY>",
chain: BlockchainTypes.ETHEREUM, // BlockchainTypes.ETHEREUM || BlockchainTypes.POLYGON || BlockchainTypes.BSC
});
async function handleClick() {
// prompt user to trust your app
};
return <button onClick={handleClick}>Connect</button>
};
Here we set up the
CrossmintEVMWalletAdapter
to use the Ethereum blockchain, however if you would like to use Polygon instead, changeBlockchainTypes.ETHEREUM
toBlockchainTypes.POLYGON
orBlockchainTypes.BSC
for Binance
Prompt the user to trust your app
Finally, we can prompt the user to trust your app by calling await crossmintConnect.connect()
. If the user accepts, the return from await crossmintConnect.connect()
will be a string containing the user's public key. If the user rejects, the function will return undefined
.
import React from "react";
import { CrossmintEVMWalletAdapter, BlockchainTypes } from "@crossmint/connect";
export default function EVMConnectButton() {
const crossmintConnect = new CrossmintEVMWalletAdapter({
apiKey: "<YOUR_API_KEY>",
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>
};
That's all you need to connect to a user's Crossmint wallet and get their public key! At this point we will leave you as the developer to expand upon this code as you wish, however for inspiration, here's an example of putting the user's public key into react state, and displaying it once they have connected:
import React from "react";
import { CrossmintEVMWalletAdapter, BlockchainTypes } from "@crossmint/connect";
export default function EVMConnectButton() {
const [address, setAddress] = useState<string | undefined>(undefined);
const crossmintConnect = new CrossmintEVMWalletAdapter({
apiKey: "<YOUR_API_KEY>",
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>
};
Sign a message
In order 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. We will not detail every step of the process, as the code is very similar to the code used to get a user's public key, so please read those instructions if you are having trouble with the following code:
import React from "react";
import { CrossmintEVMWalletAdapter, BlockchainTypes } from "@crossmint/connect";
export default function EVMSignMessageButton() {
const crossmintConnect = new CrossmintEVMWalletAdapter({
apiKey: "<YOUR_API_KEY>",
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>
};
Solana Wallet Adapter
Thanks to our friends at Solana Labs for creating Solana Wallet Adapter, integrating with Crossmint is done in only 2 lines of code!
Find where WalletProvider
is initialized
WalletProvider
is initializedIn 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:
Once you have found the correct file, we need to make 2 alterations:
1. Import the Crossmint components
At the top of your file, simply import the CrossmintSolanaWalletAdapter
and networkToCrossmintEnvironment
from @crossmint/connect
import { CrossmintSolanaWalletAdapter, networkToCrossmintEnvironment } from "@crossmint/connect"
...
2. Update your list of wallet providers
Similar to adding other Solana wallet adapters (like Phantom or Glow) you can add the Crossmint wallet adapter.
The WalletProvider
component accepts an array of wallets, which are the wallets your users will be able to connect with. Typically this is done by creating an array like so:
const wallets = useMemo(
() => [
/**
* Select the wallets you wish to support, by instantiating wallet adapters here.
*
* Common adapters can be found in the npm package `@solana/wallet-adapter-wallets`.
* That package supports tree shaking and lazy loading -- only the wallets you import
* will be compiled into your application, and only the dependencies of wallets that
* your users connect to will be loaded.
*/
],
[]
);
To ensure correct integration, ensure your wallets
array initializes the CrossmintSolanaWalletAdapter
like so:
Create your API key if you haven't already
const wallets = useMemo(
() => [
// Add other wallets here...
new CrossmintSolanaWalletAdapter({
environment: networkToCrossmintEnvironment(network),
apiKey: "<YOUR_API_KEY>"
})
],
[]
);
You have now fully integrated Crossmint into Solana Wallet Adapter! Looking for usage examples? Checkout Solana's here
Updated about 1 month ago