chore: update frontend-guide example to latest freighter-api (#1678)

* chore: updating example

* feat

Author: Sixela33

docs/build/guides/dapps/frontend-guide.mdx

@@ -111,7 +111,7 @@ Let's start by creating a button component that we'll use throughout our applica
 import React from "react";
 
 interface ButtonProps {
-  onClick: () => void;
+  onClick?: () => void;
   children: React.ReactNode;
   disabled?: boolean;
   className?: string;
@@ -418,7 +418,7 @@ import { rpc as StellarRpc } from "@stellar/stellar-sdk";
 import {
   isConnected,
   setAllowed,
-  getPublicKey,
+  getAddress,
   signTransaction,
 } from "@stellar/freighter-api";
 
@@ -430,8 +430,8 @@ export default function Home() {
       try {
         const connected = await isConnected();
         if (connected) {
-          const pubKey = await getPublicKey();
-          setPublicKey(pubKey);
+          const pubKey = await getAddress();
+          setPublicKey(pubKey.address);
         }
       } catch (error) {
         console.error("Error checking Freighter connection:", error);
@@ -444,8 +444,8 @@ export default function Home() {
   const handleConnectWallet = async () => {
     try {
       await setAllowed();
-      const pubKey = await getPublicKey();
-      setPublicKey(pubKey);
+      const pubKey = await getAddress();
+      setPublicKey(pubKey.address);
     } catch (error) {
       console.error("Error connecting to Freighter:", error);
     }
@@ -482,7 +482,7 @@ export default function Home() {
 
       const transactionResult = await server.sendTransaction(
         StellarSdk.TransactionBuilder.fromXDR(
-          signedTransaction,
+          signedTransaction.signedTxXdr,
           StellarSdk.Networks.TESTNET,
         ),
       );
@@ -520,7 +520,7 @@ In the updated `app/page` component, we added a `useEffect` hook to check if the
 
 The `handleSendPayment` function now interacts with the Stellar network to send a payment. It retrieves the source account details, creates a payment transaction, signs the transaction using the Freighter wallet, and sends the transaction to the Stellar network. If the transaction is successful, it displays an alert to the user.
 
-Notice how we imported the `isConnected`, `setAllowed`, `getPublicKey`, and `signTransaction` functions from the `@stellar/freighter-api` library. These functions are used to interact with the Freighter wallet extension and sign transactions securely.
+Notice how we imported the `isConnected`, `setAllowed`, `getAddress`, and `signTransaction` functions from the `@stellar/freighter-api` library. These functions are used to interact with the Freighter wallet extension and sign transactions securely.
 
 :::tip
 
@@ -550,15 +550,15 @@ import {
 } from "@stellar/stellar-sdk";
 import React, { useEffect, useState } from "react";
 import {
-  getPublicKey,
+  getAddress,
   isConnected,
   signTransaction,
 } from "@stellar/freighter-api";
 
 import { ConnectButton } from "@/components/ConnectButton";
 
 // Replace with your actual contract ID and network details
-const CONTRACT_ID = "CC6MWZMG2JPQEENRL7XVICAY5RNMHJ2OORMUHXKRDID6MNGXSSOJZLLF";
+const CONTRACT_ID = "CBWNXQRGC7WFYGDXUANDAZSRF2E5NPPA3NP6UZSPHYBVU3K46PSNWQOO";
 const NETWORK_PASSPHRASE = Networks.TESTNET;
 const SOROBAN_URL = "https://soroban-testnet.stellar.org:443";
 
@@ -567,12 +567,14 @@ export default function CounterPage() {
   const [count, setCount] = useState<number | null>(null);
   const [loading, setLoading] = useState(false);
 
+  const server = new StellarRpc.Server(SOROBAN_URL);
+
   useEffect(() => {
     const checkWallet = async () => {
       const connected = await isConnected();
       if (connected) {
-        const pubKey = await getPublicKey();
-        setPublicKey(pubKey);
+        const pubKey = await getAddress();
+        setPublicKey(pubKey.address);
       }
     };
 
@@ -588,7 +590,6 @@ export default function CounterPage() {
     setLoading(true);
 
     try {
-      const server = new StellarRpc.Server(SOROBAN_URL);
       const account = await server.getAccount(publicKey);
 
       const contract = new Contract(CONTRACT_ID);
@@ -642,7 +643,7 @@ export default function CounterPage() {
 
       // Extract the new count from the transaction result
       const returnValue = getResponse.resultMetaXdr
-        .v3()
+        .v4()
         .sorobanMeta()
         ?.returnValue();
       if (returnValue) {
@@ -660,7 +661,7 @@ export default function CounterPage() {
   };
 
   return (
-    <div className="max-w-md mx-auto mt-10">
+    <div className="max-w-md mx-auto mt-10 text-black">
       <h1 className="text-2xl font-bold mb-4">
         Stellar Smart Contract Counter
       </h1>
@@ -752,8 +753,8 @@ useEffect(() => {
   const checkWallet = async () => {
     const connected = await isConnected();
     if (connected) {
-      const pubKey = await getPublicKey();
-      setPublicKey(pubKey);
+      const pubKey = await getAddress();
+      setPublicKey(pubKey.address);
     }
   };
   checkWallet();
@@ -764,6 +765,7 @@ const getInitialCount = async () => {
   try {
     const topic1 = xdr.ScVal.scvSymbol("COUNTER").toXDR("base64");
     const topic2 = xdr.ScVal.scvSymbol("increment").toXDR("base64");
+
     const latestLedger = await server.getLatestLedger();
     const events = await server.getEvents({
       startLedger: latestLedger.sequence - 2000,