Customize your wallet

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

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

Prop	Description	Example	Default
wallets	Send 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 here	`staging`	`production`

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

Prop	Description	Example	Default
nft	Information 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 here	`staging`	`production`

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.