Murphy

The TokenCard component is a card that shows a token's metatda, price, and price history.

Token Input

Open in

$WIFEKpQ...zcjm

$0.592

+$0.0000926

Installation

Install Murphy TokenIcon

pnpm dlx shadcn@canary add https://onchainkit.murphyai.dev//r/token-icon.json

Install Murphy Sparkline

pnpm dlx shadcn@canary add https://onchainkit.murphyai.dev//r/sparkline.json

Install Murphy TokenCard

pnpm dlx shadcn@canary add https://onchainkit.murphyai.dev//r/token-card.json

Basic Usage

import { TokenCard } from "@/components/ui/murphy/token-card";

import { PublicKey } from "@solana/web3.js";

const asset = {
    mint: new PublicKey("EKpQGSJtjMFqKZ9KQanSqYXRcF8fBopzLHYxdM65zcjm"),
    name: "dogwifhat",
    symbol: "$WIF",
    image: "https://bafkreibk3covs5ltyqxa272uodhculbr6kea6betidfwy3ajsav2vjzyum.ipfs.nftstorage.link",
    price: 0.5922658399116827,
    decimals: 6,
};

const chartData = [
{
    timestamp: 1729497600,
    price: 0.0859761699383211,
},
{
    timestamp: 1729501200,
    price: 0.08605958846019263,
},
{
    timestamp: 1729504800,
    price: 0.08700024496006961,
},
{
    timestamp: 1729508400,
    price: 0.08606881239339946,
},
];

<TokenCard
asset={asset}
chartData={chartData}
/>

Props

Name	Type	Default
assets	`SolAsset[]`	`[]`
trigger	`React.ReactNode`
showBalances	`boolean`	`true`
onSelect	`(token: SolAsset) => void`
onSearch	`({ query: string, owner?: PublicKey }) => Promise<SolAsset[]>`

Token Card

Token Input

Installation

Basic Usage

Props

On this page