Advanced Topics
Wallet UI Components
Advanced Topics
Wallet UI Components
Launch faster by using Crossmint’s pre-made react components
This guide will show you how to use Crossmint’s UI templates to save time on frontend development. To get started:
1. Add the Crossmint Client SDK to your project with the following command:
yarn add @crossmint/client-sdk-react-ui
React Only. Contact us if you would like to use a different framework
2. Render a grid with all the NFTs
Use the CrossmintNFTCollectionView component:
JavaScript
import { CrossmintNFTCollectionView } from "@crossmint/client-sdk-react-ui";
const wallets = [
{
chain: "solana",
publicKey: "<SOL_ADDRESS>",
},
{
chain: "ethereum",
publicKey: "<ETH_ADDRESS>",
},
];
export default function yourPage() {
return (
<div style={{ height: "100vh" }}>
<CrossmintNFTCollectionView wallets={wallets} />
</div>
);
}
| Prop | Description | Example |
|---|---|---|
| wallets | List of wallets whose NFTs you 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 here | production (default) or staging |
3. Check the NFT Detail Component
If you want to show a specific detail screen for an NFT, you can use the CrossmintNFTDetail component.
JavaScript
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",
contractAddress: "<CONTRACT_ADDRESS>",
tokenId: "<TOKEN_ID>",
};
export function yourPage() {
return (
<div style={{ height: "100vh" }}>
<CrossmintNFTDetail nft={nft} />
</div>
);
}
| Prop | Description | Example |
|---|---|---|
| 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 section below | { colors: { background: "#cccccc" } } |
| environment (optional) | In case you need to test in Staging, you can set this here | production (default) or staging |
Example of NFT detail component
4. Tweak the UI
Modify the UI using the uiConfig prop. The following is an example of a valid uiConfig and the result:
import { CrossmintNFTDetail } from "@crossmint/client-sdk-react-ui";
const nft = {
chain: "solana",
mintHash: "<MINT_HASH>",
};
export function yourPage() {
return (
<div style={{ height: "100vh" }}>
<CrossmintNFTDetail
nft={nft}
uiConfig={{
colors: {
background: "#000814",
backgroundSecondary: "#001D3D",
textPrimary: "#FFFFFF",
textSecondary: "#EEEEEE",
accent: "#FFC300",
border: "#FFFFFF",
},
}}
/>
</div>
);
}
Example of UI adjustment
All fields are optional, and will fallback to Crossmint’s existing theme.
iOS and Android libraries
Use the following libraries to launch faster: iOS SDK | Android SDK