Setup and Usage

Quickstart guides for setup on Solana, Ethereum, and Polygon

Suggest Edits

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

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:

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:

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

EVM: Ethereum and Polygon

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

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
    });
  
  async function handleClick() {
    // prompt user to trust your app
  };
  
    return <button onClick={handleClick}>Connect</button>
};

📘

Here we setup the CrossmintEVMWalletAdapter to use the Ethereum blockchain, however if you would like to use Polygon instead, change BlockchainTypes.ETHEREUM to BlockchainTypes.POLYGON

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. 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. 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. 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>
};

Updated 3 months ago