added the balance fetch

package.json

@@ -18,9 +18,13 @@
     "@mui/material": "^5.15.19",
     "@orbs-network/ton-access": "^2.2.2",
     "@tanstack/react-query": "^4.24.4",
+    "@ton/core": "^0.56.3",
+    "@ton/crypto": "^3.2.0",
+    "@ton/ton": "^13.11.2",
     "@tonconnect/ui-react": "^2.0.0-beta.2",
     "@twa-dev/sdk": "^6.4.2",
     "axios": "^1.7.2",
+    "buffer": "^6.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",

src/App.tsx

@@ -32,9 +32,11 @@ import OrdersDrawer from "./components/OrderDrawer";
 import PriceConverter from "./components/PriceConverter";
 import CurrencySwitcher from "./components/CurrencySwitcher";
 import { useCurrency } from "./providers/useCurrency";
+import WalletBalanceTon from "./components/WalletBalanceTon";
 
 function App() {
   const { network } = useTonConnect();
+  const { wallet } = useTonConnect();
   const { totalPrice } = useCart();
 
   const [openCheckout, setOpenCheckout] = useState(false);
@@ -115,6 +117,7 @@ function App() {
                 />
               </span>
             </Fab>
+
             <div
               style={{
                 display: "flex",
@@ -127,17 +130,24 @@ function App() {
                 selectedCurrency={selectedCurrency}
                 onCurrencyChange={handleCurrencyChange}
               />
-
-              <TonConnectButton />
-              <NetworkBadge
-                network={
-                  network === CHAIN.MAINNET
-                    ? "mainnet"
-                    : network === CHAIN.TESTNET
-                    ? "testnet"
-                    : ""
-                }
-              ></NetworkBadge>
+              <Button onClick={() => toggleDrawer(true)}>Orders</Button>
+            </div>
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <div
+                style={{ display: "flex", flexDirection: "row", gap: "10px" }}
+              >
+                <TonConnectButton />
+                <NetworkBadge
+                  network={
+                    network === CHAIN.MAINNET
+                      ? "mainnet"
+                      : network === CHAIN.TESTNET
+                      ? "testnet"
+                      : ""
+                  }
+                ></NetworkBadge>
+              </div>
+              {network && wallet && <WalletBalanceTon walletAddress={wallet} />}
             </div>
           </FlexBoxRowSpaceBetween>
           <WelcomeStore />

src/components/WalletBalanceTon.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from "react";
+import { TonClient } from "ton";
+import { Address } from "@ton/core";
+import { useTonConnect } from "../hooks/useTonConnect";
+import { CHAIN } from "@tonconnect/protocol";
+
+interface WalletBalanceTonProps {
+  walletAddress: string;
+}
+
+const WalletBalanceTon: React.FC<WalletBalanceTonProps> = ({
+  walletAddress,
+}) => {
+  const { network } = useTonConnect();
+  const [balance, setBalance] = useState<string>("Loading...");
+  console.log("walletAddress", walletAddress);
+
+  useEffect(() => {
+    const fetchBalance = async () => {
+      try {
+        const client = new TonClient({
+          endpoint:
+            network === CHAIN.MAINNET
+              ? "https://toncenter.com/api/v2/jsonRPC"
+              : "https://testnet.toncenter.com/api/v2/jsonRPC",
+        });
+
+        const address = Address.parse(walletAddress);
+        const balance = await client.getBalance(address);
+        const finalbalance = parseFloat(balance.toString()) / 1e9;
+        setBalance(`${finalbalance.toFixed(3)}`);
+      } catch (error) {
+        console.error("Failed to fetch balance:", error);
+        setBalance("Error fetching balance");
+      }
+    };
+
+    fetchBalance();
+  }, [walletAddress]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: "10px",
+        marginTop: "10px",
+      }}
+    >
+      <img
+        src="ton.svg"
+        alt="TON"
+        style={{ width: "20px", height: "20px", marginRight: "10px" }}
+      />
+      <p
+        style={{
+          margin: "0",
+        }}
+      >
+        {balance}
+      </p>
+    </div>
+  );
+};
+
+export default WalletBalanceTon;

src/components/styled/styled.tsx

@@ -231,6 +231,8 @@ export const StyledProductsList = styled.div`
 export const NetworkBadge = styled.span<{ network: string }>`
   display: inline-block;
   padding: 5px;
+  height: 1px;
+  width: 1px;
   background-color: ${(props) => {
     switch (props.network) {
       case "mainnet":