use current account

src/App.tsx

@@ -1,14 +1,13 @@
-import { ConnectButton } from "@mysten/dapp-kit";
+import { ConnectButton, useCurrentAccount } from "@mysten/dapp-kit";
 import {
 	CoinBalance,
 	CoinStruct,
-	getFullnodeUrl,
 	SuiClient,
+	getFullnodeUrl,
 } 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") });
 
@@ -21,22 +20,25 @@ const mistToSui = (amountInMist: string) => {
 };
 
 export default function App() {
+	const currentAccount = useCurrentAccount();
 	const [balance, setBalance] = useState("(loading...)");
 	const [coins, setCoins] = useState<CoinStruct[]>([]);
 
 	useEffect(() => {
 		(async () => {
+			if (currentAccount) {
 				const balance = await suiClient.getBalance({
-				owner: MY_ADDRESS,
+					owner: currentAccount.address,
 				});
 				setBalance(`Balance: ${balanceToSui(balance)} SUI`);
 
 				const coins = await suiClient.getCoins({
-				owner: MY_ADDRESS,
+					owner: currentAccount.address,
 				});
 				setCoins(coins.data);
+			}
 		})();
-	}, []);
+	}, [currentAccount]);
 
 	return (
 		<>
@@ -47,7 +49,7 @@ export default function App() {
 			<div>Coins:</div>
 			<ul>
 				{coins.map((coin) => (
-					<li>
+					<li key={coin.coinObjectId}>
 						{coin.coinType} - {mistToSui(coin.balance)} SUI
 					</li>
 				))}

src/constants.ts

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