Staging ConsoleProduction Console

Wallet UI templates

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

Suggest Edits

Quick Setup

❗️

React only

Contact us if you'd like to use a different framework

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

You can retrieve your Crossmint wallet addresses using the fetch wallets endpoint and render a grid with all the NFTs with the following CrossmintNFTCollectionView call:

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>
    );
}
PropDescriptionExample
walletsList of wallets whose NFTsyou want to render[{ chain: "solana", publicKey: "<SOLANA_WALLET_ADDRESS>" }]
uiConfig (optional)See UI config section below{ colors: { background: "#cccccc" } }
environment (optional)In case you need to test in Staging, you can set this hereproduction (default) or staging

NFT Detail Component

NFT Detail Component

If you want to show a 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>
    );
}
PropDescriptionExample
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 section below{ colors: { background: "#cccccc" } }
environment (optional)In case you need to test in Staging, you can set this hereproduction (default) or staging

UI Config

You can tweak some aspects of the UI using the uiConfig prop. This is an example of a valid uiConfig and the result:

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

Customized page

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

iOS and Android libraries

Want to launch faster? Use the libraries below to get your MVP off the ground in no time:

Updated 27 days ago