Customize your wallet

Save time by using Crossmint's pre-made react components

Quick Setup

❗️

React only

This library is only for React! If you have another medium you would like to use, please contact Crossmint support.

First, add the Crossmint Client SDK to your project with the following command:

yarn add @crossmint/client-sdk-react-ui

Wallet Collection Component

Wallet Collection Component

If you want to render a grid with all the nfts based on a list of wallets you send, you can use CrossmintNFTCollectionView component.

Retrieve your Crossmint wallet addresses using our Fetch wallets endpoint

import { CrossmintNFTCollectionView } from "@crossmint/client-sdk-react-ui";

const wallets = [
    {
        chain: "solana",
        publicKey: "<SOL_ADDRESS>",
    },
    {
        chain: "ethereum",
        publicKey: "<ETH_ADDRESS>",
    }
];

export function yourPage() {
    return (
        <div style={{ height: "100vh" }}>
            <CrossmintNFTCollectionView wallets={wallets}/>
        </div>
    );
}
PropDescriptionExampleDefault
walletsSend the wallets that contain the NFTs that you want to render[{ chain: "solana", publicKey: "<SOLANA_WALLET_ADDRESS>" }]
uiConfig (optional)See UI Config below{ colors: { background: "#cccccc" } }
environment (optional)In case you need to test in Staging, you can set this herestagingproduction

NFT Detail Component

NFT Detail Component

If you want to show an specific detail screen for an NFT, you can use the CrossmintNFTDetails component.

import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";

/* Alternative locator
 * locator - <ethereum|polygon|bsc>:<contract_address>:<token_id>
 * const nft = "ethereum:0x123456789:1";
 */

const nft = {
    chain: "ethereum", // ethereum | polygon | bsc 
    contractAddress: "<CONTRACT_ADDRESS>",
    tokenId: "<TOKEN_ID>"
};

export function yourPage() {
    return (
        <div style={{ height: "100vh" }}>
            <CrossmintNFTDetail nft={nft} />
        </div>
    );
}
import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";

/* Alternative locator
 * locator - solana:<mint_hash>
 * const nft = "solana:123456789";
 */

const nft = {
    chain: "solana", 
    mintHash: "<MINT_HASH>"
};

export function yourPage() {
    return (
        <div>
            <CrossmintNFTDetail nft={nft} />
        </div>
    );
}
import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";

/* Alternative locator
 * locator - cardano:<asset_id>
 * const nft = "cardano:dac123456789";
 */

const nft = {
    chain: "cardano",
    assetId: "<ASSET_ID>"
};

export function yourPage() {
    return (
        <div>
            <CrossmintNFTDetail nft={nft} />
        </div>
    );
}
PropDescriptionExampleDefault
nftInformation about the NFT to be displayed{ chain: "ethereum", contractAddress: "<CONTRACT_ADDRESS>", tokenId: "<TOKEN_ID>" } The table above has examples for all variations and different chains.
uiConfig (optional)See UI Config below{ colors: { background: "#cccccc" } }
environment (optional)In case you need to test in Staging, you can set this herestagingproduction

UI Config

You can customize the experience you show to your users by tweaking some aspects of the UI using the uiConfig prop. This is an example of a valid uiConfig:

import { CrossmintNFTDetails } from "@crossmint/client-sdk-react-ui";

const nft = [
    {
        chain: "solana",
        mintHash: "<MINT_HASH>",
    },
];

export function yourPage() {
    return (
        <div style={{ height: "100vh" }}>
            <CrossmintNFTDetails
                nft={nft}
                uiConfig={{
                    colors: {
                        background: "#000814",
                        backgroundSecondary: "#001D3D",
                        textPrimary: "#FFFFFF",
                        textSecondary: "#EEEEEE",
                        accent: "#FFC300",
                        border: "#FFFFFF",
                    },
                }}
            />
        </div>
    );
}

This will result into:

Customized page

Notice that all fields are optional, and will fallback to our existing theme.

Customize your wallet

For our partial and full white label solutions, you have the flexibility to build and design your own UX around our wallet infrastructure. Need some help getting started? Use our libraries below to help get your MVP off the ground