From beeba916deb690f2f7e7321eee4f76d31eeb18ce Mon Sep 17 00:00:00 2001
From: osmannyildiz <iamosmannyildiz@gmail.com>
Date: Sat, 23 Dec 2023 15:28:54 +0300
Subject: [PATCH] get coins

---
 src/App.tsx | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index eedd67c..ad090de 100644
--- a/src/App.tsx
+++ b/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 />
 		</>
 	);