(wip) last state

src/App.tsx

@@ -1,26 +1,29 @@
 import {
 	ConnectButton,
 	useCurrentAccount,
+	useSignAndExecuteTransactionBlock,
 	useSuiClient,
 } from "@mysten/dapp-kit";
-import { CoinBalance, CoinStruct } from "@mysten/sui.js/client";
+import { CoinBalance } 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 Votes from "./components/Votes";
 
 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);
-};
+// const mistToSui = (amountInMist: string) => {
+// 	return Number.parseInt(amountInMist) / Number(MIST_PER_SUI);
+// };
 
 export default function App() {
 	const suiClient = useSuiClient();
 	const currentAccount = useCurrentAccount();
+	const { mutate: signAndExecuteTransactionBlock } =
+		useSignAndExecuteTransactionBlock();
+
 	const [balance, setBalance] = useState("(loading...)");
-	const [coins, setCoins] = useState<CoinStruct[]>([]);
 
 	useEffect(() => {
 		(async () => {
@@ -29,33 +32,69 @@ export default function App() {
 					owner: currentAccount.address,
 				});
 				setBalance(`Balance: ${balanceToSui(balance)} SUI`);
-
-				const coins = await suiClient.getCoins({
-					owner: currentAccount.address,
-				});
-				setCoins(coins.data);
 			}
 		})();
 	}, [suiClient, currentAccount]);
 
 	return (
 		<>
-			<h1>hello world</h1>
+			<h1>Afet Destek</h1>
 
-			{balance}
-
-			<div>Coins:</div>
-			<ul>
-				{coins.map((coin) => (
-					<li key={coin.coinObjectId}>
-						{coin.coinType} - {mistToSui(coin.balance)} SUI
-					</li>
-				))}
-			</ul>
-
-			<GetSuiFromFaucetForm />
+			<div>{balance}</div>
 
 			<ConnectButton />
+
+			<button
+				onClick={async () => {
+					console.log(
+						await suiClient.getObject({
+							id: "0x900ad4444942b20a9c2ac1f3949afbd4cfa89e3d19e6286a21be7b48fd5d2323",
+							options: {
+								showContent: true,
+								showType: true,
+							},
+						})
+					);
+				}}
+			>
+				try getting object
+			</button>
+
+			{/* {currentAccount && (
+				<>
+					<div>
+						<button
+							onClick={() => {
+								const txb = new TransactionBlock();
+
+								txb.moveCall({
+									target: "0x079072d66290a6f50781126e05528c531757cc63a9ddcc90a602c9488969c478::hackathon::fund::vote",
+								});
+
+								signAndExecuteTransactionBlock(
+									{
+										transactionBlock: new TransactionBlock(),
+										chain: "sui:testnet",
+									},
+									{
+										onSuccess: (result) => {
+											console.log("executed transaction block", result);
+											console.log(result.digest);
+										},
+										onError: (error) => {
+											console.log("error", error);
+										},
+									}
+								);
+							}}
+						>
+							Sign and execute transaction block
+						</button>
+					</div>
+				</>
+			)} */}
+
+			<Votes />
 		</>
 	);
 }

src/components/GetSuiFromFaucetForm.tsx

@@ -9,7 +9,7 @@ export default function GetSuiFromFaucetForm() {
 
 		try {
 			await requestSuiFromFaucetV0({
-				host: getFaucetHost("devnet"),
+				host: getFaucetHost("testnet"),
 				recipient: targetAddress,
 			});
 			alert("success");
@@ -21,7 +21,7 @@ export default function GetSuiFromFaucetForm() {
 
 	return (
 		<div>
-			<h2>Get Devnet SUI from Faucet</h2>
+			<h2>Get Testnet SUI from Faucet</h2>
 			<form onSubmit={onSubmit}>
 				<input
 					type="text"

src/components/Votes.tsx

@@ -0,0 +1,29 @@
+export default function Votes() {
+	return (
+		<div className="votes">
+			<div className="vote">
+				<div className="title">
+					Vote id: 00387bed-07bc-41ae-97f1-3d7d73dd1809
+				</div>
+				<div className="details">
+					<div className="section">
+						<div className="title">Yes</div>
+						<div className="content">55</div>
+					</div>
+					<div className="section">
+						<div className="title">No</div>
+						<div className="content">44</div>
+					</div>
+					<div className="section">
+						<div className="title">Abstain</div>
+						<div className="content">33</div>
+					</div>
+					<div className="section">
+						<div className="title">No with Veto</div>
+						<div className="content">22</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/main.css

@@ -1,3 +1,30 @@
 * {
 	font-family: sans-serif;
 }
+
+.vote {
+	background-color: #eee;
+	border-radius: 1rem;
+	padding: 1rem;
+	margin-bottom: 0.5rem;
+}
+
+.vote > .details {
+	display: flex;
+}
+
+.vote > .details > .section {
+	background-color: #ddd;
+	border-radius: 1rem;
+	padding: 1rem;
+	min-width: 6rem;
+	margin-left: 0.5rem;
+}
+
+.vote > .details > .section > .title {
+	/* font-weight: bold; */
+}
+
+.vote > .details > .section > .content {
+	font-size: 2rem;
+}

src/main.tsx

@@ -12,7 +12,7 @@ import App from "./App.tsx";
 import "./main.css";
 
 const { networkConfig } = createNetworkConfig({
-	devnet: { url: getFullnodeUrl("devnet") },
+	testnet: { url: getFullnodeUrl("testnet") },
 });
 
 const queryClient = new QueryClient();
@@ -20,7 +20,7 @@ const queryClient = new QueryClient();
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
 		<QueryClientProvider client={queryClient}>
-			<SuiClientProvider networks={networkConfig} defaultNetwork="devnet">
+			<SuiClientProvider networks={networkConfig} defaultNetwork="testnet">
 				<WalletProvider>
 					<App />
 				</WalletProvider>