get coins

src/App.tsx

@@ -1,4 +1,9 @@
-import { CoinBalance, getFullnodeUrl, SuiClient } from "@mysten/sui.js/client";
+import {
+	CoinBalance,
+	CoinStruct,
+	getFullnodeUrl,
+	SuiClient,
+} from "@mysten/sui.js/client";
 import { MIST_PER_SUI } from "@mysten/sui.js/utils";
 import { useEffect, useState } from "react";
 import GetSuiFromFaucetForm from "./components/GetSuiFromFaucetForm";
@@ -6,26 +11,47 @@ import { MY_ADDRESS } from "./constants";
 
 const suiClient = new SuiClient({ url: getFullnodeUrl("devnet") });
 
-const mistToSui = (amountInMist: CoinBalance) => {
-	return Number.parseInt(amountInMist.totalBalance) / Number(MIST_PER_SUI);
+const balanceToSui = (balance: CoinBalance) => {
+	return Number.parseInt(balance.totalBalance) / Number(MIST_PER_SUI);
+};
+
+const mistToSui = (amountInMist: string) => {
+	return Number.parseInt(amountInMist) / Number(MIST_PER_SUI);
 };
 
 export default function App() {
 	const [balance, setBalance] = useState("(loading...)");
+	const [coins, setCoins] = useState<CoinStruct[]>([]);
 
 	useEffect(() => {
 		(async () => {
 			const balance = await suiClient.getBalance({
 				owner: MY_ADDRESS,
 			});
-			setBalance(`Balance: ${mistToSui(balance)} SUI`);
+			setBalance(`Balance: ${balanceToSui(balance)} SUI`);
+
+			const coins = await suiClient.getCoins({
+				owner: MY_ADDRESS,
+			});
+			setCoins(coins.data);
 		})();
 	}, []);
 
 	return (
 		<>
 			<h1>hello world</h1>
+
 			{balance}
+
+			<div>Coins:</div>
+			<ul>
+				{coins.map((coin) => (
+					<li>
+						{coin.coinType} - {mistToSui(coin.balance)} SUI
+					</li>
+				))}
+			</ul>
+
 			<GetSuiFromFaucetForm />
 		</>
 	);