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
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:
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
- iOS SDK: https://github.com/Crossmint/iOS-SDK
- Android SDK: https://github.com/Crossmint/AndroidSDK
Updated about 1 month ago