fix: add proper tx.signAndSend

eslint.config.js

@@ -12,6 +12,7 @@ export default tseslint.config(
   globalIgnores([
     "dist",
     "packages",
+    "target/packages",
     "src/contracts/*",
     "!src/contracts/util.ts",
   ]),

src/components/FundAccountButton.tsx

@@ -3,12 +3,10 @@ import { useNotification } from "../hooks/useNotification.ts";
 import { useWallet } from "../hooks/useWallet.ts";
 import { Button, Tooltip } from "@stellar/design-system";
 import { getFriendbotUrl } from "../util/friendbot";
-import { useWalletBalance } from "../hooks/useWalletBalance.ts";
 
 const FundAccountButton: React.FC = () => {
   const { addNotification } = useNotification();
   const [isPending, startTransition] = useTransition();
-  const { isFunded, isLoading } = useWalletBalance();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   const { address } = useWallet();
 
@@ -52,7 +50,7 @@ const FundAccountButton: React.FC = () => {
         placement="bottom"
         triggerEl={
           <Button
-            disabled={isPending || isLoading || isFunded}
+            disabled={isPending}
             onClick={handleFundAccount}
             variant="primary"
             size="md"
@@ -61,11 +59,7 @@ const FundAccountButton: React.FC = () => {
           </Button>
         }
       >
-        <div style={{ width: "13em" }}>
-          {isFunded
-            ? "Account is already funded"
-            : "Fund your account using the Stellar Friendbot"}
-        </div>
+        <div style={{ width: "13em" }}>Account is already funded</div>
       </Tooltip>
     </div>
   );

src/components/GuessTheNumber.tsx

@@ -7,7 +7,7 @@ import { Box } from "../components/layout/Box";
 export const GuessTheNumber = () => {
   const [guessedIt, setGuessedIt] = useState<boolean>();
   const [theGuess, setTheGuess] = useState<number>();
-  const { address } = useWallet();
+  const { address, updateBalances, signTransaction } = useWallet();
 
   if (!address) {
     return (
@@ -19,14 +19,17 @@ export const GuessTheNumber = () => {
 
   const submitGuess = async () => {
     if (!theGuess || !address) return;
-    const { result } = await game.guess({
-      a_number: BigInt(theGuess),
-      guesser: address,
-    });
+    const tx = await game.guess(
+      { a_number: BigInt(theGuess), guesser: address },
+      // @ts-expect-error js-stellar-sdk has bad typings; publicKey is, in fact, allowed
+      { publicKey: address },
+    );
+    const { result } = await tx.signAndSend({ signTransaction });
     if (result.isErr()) {
       console.error(result.unwrapErr());
     } else {
       setGuessedIt(result.unwrap());
+      await updateBalances();
     }
   };
 

src/components/WalletButton.tsx

@@ -1,13 +1,11 @@
 import { useState } from "react";
 import { Button, Text, Modal, Profile } from "@stellar/design-system";
 import { useWallet } from "../hooks/useWallet";
-import { useWalletBalance } from "../hooks/useWalletBalance";
 import { connectWallet, disconnectWallet } from "../util/wallet";
 
 export const WalletButton = () => {
   const [showDisconnectModal, setShowDisconnectModal] = useState(false);
-  const { address, isPending } = useWallet();
-  const { xlm, ...balance } = useWalletBalance();
+  const { address, isPending, balances } = useWallet();
   const buttonLabel = isPending ? "Loading..." : "Connect";
 
   if (!address) {
@@ -25,11 +23,11 @@ export const WalletButton = () => {
         flexDirection: "row",
         alignItems: "center",
         gap: "5px",
-        opacity: balance.isLoading ? 0.6 : 1,
+        opacity: isPending ? 0.6 : 1,
       }}
     >
       <Text as="div" size="sm">
-        Wallet Balance: {xlm} XLM
+        Wallet Balance: {balances?.xlm?.balance ?? "-"} XLM
       </Text>
 
       <div id="modalContainer">

src/contracts/guess_the_number.ts

@@ -1,23 +1,32 @@
 // This is a stub file for the GuessTheNumber contract client.
 // The actual contract client is generated at runtime by the Scaffold Stellar CLI.
 // This stub allows the build to succeed when the contract hasn't been generated yet.
+import {
+  AssembledTransaction,
+  AssembledTransactionOptions,
+  Client as ContractClient,
+  Result,
+  Spec as ContractSpec,
+} from '@stellar/stellar-sdk/contract';
+import type { u64, i128, Option } from '@stellar/stellar-sdk/contract';
+import { rpcUrl, networkPassphrase } from './util';
 
-type Result<T, E> = {
-  isOk: () => boolean;
-  isErr: () => boolean;
-  unwrap: () => T;
-  unwrapErr: () => E;
-};
+interface Client {
+  reset: (options?: AssembledTransactionOptions<null>) => Promise<AssembledTransaction<null>>
+  guess: ({a_number, guesser}: {a_number: u64, guesser: string}, options?: AssembledTransactionOptions<boolean>) => Promise<AssembledTransaction<Result<boolean>>>
+  add_funds: ({amount}: {amount: i128}, options?: AssembledTransactionOptions<null>) => Promise<AssembledTransaction<null>>
+  upgrade: ({new_wasm_hash}: {new_wasm_hash: Buffer}, options?: AssembledTransactionOptions<null>) => Promise<AssembledTransaction<null>>
+  admin: (options?: AssembledTransactionOptions<string>) => Promise<AssembledTransaction<Option<string>>>
+  set_admin: ({admin}: {admin: string}, options?: AssembledTransactionOptions<null>) => Promise<AssembledTransaction<null>>
+}
 
-const game = {
-  guess: async (_args: {
-    a_number: bigint;
-    guesser: string;
-  }): Promise<{ result: Result<boolean, unknown> }> => {
-    throw new Error(
-      "Contract client not initialized. Run 'stellar scaffold watch --build-clients' to generate contract clients.",
-    );
-  },
-};
+class Client extends ContractClient {
+  constructor() {
+    super(
+      new ContractSpec(["AAAAAAAAABFHZXQgY3VycmVudCBhZG1pbgAAAAAAAAVhZG1pbgAAAAAAAAAAAAABAAAD6AAAABM="]),
+      { contractId: "STUB", networkPassphrase, rpcUrl, allowHttp: true, publicKey: undefined }
+    )
+  }
+}
 
-export default game;
+export default new Client();