- React
- Browser SDK
- React Native
import { useSolana, useAccounts } from "@phantom/react-sdk";
import { Connection, PublicKey } from "@solana/web3.js";
import { TOKEN_PROGRAM_ID } from "@solana/spl-token";
import { useEffect, useState } from "react";
interface TokenAccount {
mint: string;
balance: string;
decimals: number;
}
function TokenAccounts() {
const { solana } = useSolana();
const addresses = useAccounts();
const [tokens, setTokens] = useState<TokenAccount[]>([]);
const [loading, setLoading] = useState(false);
const fetchTokenAccounts = async () => {
if (!addresses?.[0]) return;
setLoading(true);
try {
const connection = new Connection("https://api.mainnet-beta.solana.com");
const publicKey = new PublicKey(addresses[0].address);
// Get all token accounts using connection method
const response = await connection.getParsedTokenAccountsByOwner(
publicKey,
{ programId: TOKEN_PROGRAM_ID }
);
const tokenList: TokenAccount[] = response.value.map((item) => {
const info = item.account.data.parsed.info;
return {
mint: info.mint,
balance: info.tokenAmount.uiAmountString || "0",
decimals: info.tokenAmount.decimals,
};
});
setTokens(tokenList);
} catch (error) {
console.error("Failed to fetch token accounts:", error);
} finally {
setLoading(false);
}
};
useEffect(() => {
if (addresses?.[0]) {
fetchTokenAccounts();
}
}, [addresses]);
if (!addresses?.[0]) {
return <div>Please connect your wallet</div>;
}
return (
<div>
<h2>Token Accounts</h2>
<button onClick={fetchTokenAccounts} disabled={loading}>
{loading ? "Loading..." : "Refresh Tokens"}
</button>
{tokens.length === 0 ? (
<p>No token accounts found</p>
) : (
<ul>
{tokens.map((token) => (
<li key={token.mint}>
<strong>Mint:</strong> {token.mint}
<br />
<strong>Balance:</strong> {token.balance}
</li>
))}
</ul>
)}
</div>
);
}
import { BrowserSDK, AddressType } from "@phantom/browser-sdk";
import { Connection, PublicKey } from "@solana/web3.js";
import { TOKEN_PROGRAM_ID } from "@solana/spl-token";
const sdk = new BrowserSDK({
providers: ["google", "apple", "injected"],
appId: "your-app-id",
addressTypes: [AddressType.solana],
});
interface TokenAccount {
mint: string;
balance: string;
decimals: number;
}
async function getAllTokenAccounts(): Promise<TokenAccount[]> {
if (!sdk.solana.isConnected()) {
await sdk.connect({ provider: "google" });
}
const connection = new Connection("https://api.mainnet-beta.solana.com");
const publicKey = new PublicKey(await sdk.solana.getPublicKey());
// Get all token accounts using connection method
const response = await connection.getParsedTokenAccountsByOwner(
publicKey,
{ programId: TOKEN_PROGRAM_ID }
);
const tokenList: TokenAccount[] = response.value.map((item) => {
const info = item.account.data.parsed.info;
return {
mint: info.mint,
balance: info.tokenAmount.uiAmountString || "0",
decimals: info.tokenAmount.decimals,
};
});
return tokenList;
}
// Usage
const tokens = await getAllTokenAccounts();
tokens.forEach((token) => {
console.log(`${token.mint}: ${token.balance}`);
});
import { useSolana, useAccounts } from "@phantom/react-native-sdk";
import { Connection, PublicKey } from "@solana/web3.js";
import { TOKEN_PROGRAM_ID } from "@solana/spl-token";
import { View, Text, Button, FlatList, StyleSheet, ActivityIndicator } from "react-native";
import { useEffect, useState } from "react";
interface TokenAccount {
mint: string;
balance: string;
decimals: number;
}
function TokenAccounts() {
const { solana } = useSolana();
const addresses = useAccounts();
const [tokens, setTokens] = useState<TokenAccount[]>([]);
const [loading, setLoading] = useState(false);
const fetchTokenAccounts = async () => {
if (!addresses?.[0]) return;
setLoading(true);
try {
const connection = new Connection("https://api.mainnet-beta.solana.com");
const publicKey = new PublicKey(addresses[0].address);
const response = await connection.getParsedTokenAccountsByOwner(
publicKey,
{ programId: TOKEN_PROGRAM_ID }
);
const tokenList: TokenAccount[] = response.value.map((item) => {
const info = item.account.data.parsed.info;
return {
mint: info.mint,
balance: info.tokenAmount.uiAmountString || "0",
decimals: info.tokenAmount.decimals,
};
});
setTokens(tokenList);
} catch (error) {
console.error("Failed to fetch token accounts:", error);
} finally {
setLoading(false);
}
};
useEffect(() => {
if (addresses?.[0]) {
fetchTokenAccounts();
}
}, [addresses]);
if (!addresses?.[0]) {
return (
<View style={styles.container}>
<Text>Please connect your wallet</Text>
</View>
);
}
return (
<View style={styles.container}>
<Text style={styles.title}>Token Accounts</Text>
<Button
title={loading ? "Loading..." : "Refresh Tokens"}
onPress={fetchTokenAccounts}
disabled={loading}
/>
{loading ? (
<ActivityIndicator size="large" style={styles.loader} />
) : tokens.length === 0 ? (
<Text style={styles.empty}>No token accounts found</Text>
) : (
<FlatList
data={tokens}
keyExtractor={(item) => item.mint}
renderItem={({ item }) => (
<View style={styles.tokenItem}>
<Text style={styles.mint}>{item.mint}</Text>
<Text style={styles.balance}>Balance: {item.balance}</Text>
</View>
)}
/>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
title: {
fontSize: 24,
fontWeight: "bold",
marginBottom: 20,
},
loader: {
marginVertical: 20,
},
empty: {
textAlign: "center",
marginTop: 20,
color: "#666",
},
tokenItem: {
padding: 15,
borderBottomWidth: 1,
borderBottomColor: "#eee",
},
mint: {
fontSize: 12,
color: "#666",
marginBottom: 5,
},
balance: {
fontSize: 16,
fontWeight: "600",
},
});
Filter by specific token
Get the token account for a specific mint:import { Connection, PublicKey } from "@solana/web3.js";
import { getAssociatedTokenAddress, getAccount } from "@solana/spl-token";
async function getTokenAccountForMint(
connection: Connection,
owner: PublicKey,
mint: PublicKey
) {
try {
const tokenAccount = await getAssociatedTokenAddress(mint, owner);
const accountInfo = await getAccount(connection, tokenAccount);
return accountInfo;
} catch {
return null; // Token account doesn't exist
}
}