get balance

src/App.tsx

@@ -1,9 +1,31 @@
+import { CoinBalance, 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";
+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);
+};
 
 export default function App() {
+	const [balance, setBalance] = useState("(loading...)");
+
+	useEffect(() => {
+		(async () => {
+			const balance = await suiClient.getBalance({
+				owner: MY_ADDRESS,
+			});
+			setBalance(`Balance: ${mistToSui(balance)} SUI`);
+		})();
+	}, []);
+
 	return (
 		<>
 			<h1>hello world</h1>
+			{balance}
 			<GetSuiFromFaucetForm />
 		</>
 	);

src/constants.ts

@@ -0,0 +1,2 @@
+export const MY_ADDRESS =
+	"0xac6407fcf8e009a2b67474fff85c6b0555a03bbe3575ceaa940cbb9fc7683fc8";