adde wllet tx and exchange rate tonapi

package.json

@@ -25,12 +25,10 @@
     "@tonconnect/ui-react": "^2.0.0-beta.2",
     "@twa-dev/sdk": "^6.4.2",
     "axios": "^1.7.2",
-    "binance": "^2.11.2",
     "buffer": "^6.0.3",
     "mapbox-gl": "^3.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.23.1",
     "react-toastify": "^10.0.5",
     "styled-components": "^5.3.6",

src/App.tsx

@@ -32,7 +32,8 @@ 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";
+// import WalletBalanceTon from "./components/WalletBalanceTon";
+// import WalletTxList from "./components/WalletTxList";
 
 function App() {
   const { network } = useTonConnect();
@@ -148,6 +149,7 @@ function App() {
                   ></NetworkBadge>
                 </div>
                 {/* {network && wallet && <WalletBalanceTon walletAddress={wallet} />} */}
+                {/* {network && wallet && <WalletTxList walletAddress={wallet} />} */}
               </div>
             </div>
           </FlexBoxRowSpaceBetween>

src/components/OrderDrawer.tsx

@@ -16,6 +16,7 @@ import {
   faCircleXmark,
 } from "@fortawesome/free-solid-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
+import { useTonConnect } from "../hooks/useTonConnect";
 
 interface OrdersDrawerProps {
   orders: OrderProps[];
@@ -28,6 +29,9 @@ const OrdersDrawer: React.FC<OrdersDrawerProps> = ({
   open,
   onClose,
 }) => {
+  const { connected } = useTonConnect();
+  const { wallet } = useTonConnect();
+
   const toggleDrawer = (open: boolean) => (event: React.KeyboardEvent) => {
     if (event.key !== "Tab" && event.key !== "Shift") {
       onClose(!open);

src/components/WalletTxList.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from "react";
+import { TonClient, Transaction } from "ton";
+import { Address } from "@ton/core";
+import { useTonConnect } from "../hooks/useTonConnect";
+import { CHAIN } from "@tonconnect/protocol";
+
+interface WalletTxListProps {
+  walletAddress: string;
+}
+
+const WalletTxList: React.FC<WalletTxListProps> = ({ walletAddress }) => {
+  const { network } = useTonConnect();
+  const [transactions, setTransactions] = useState<any[]>([]);
+
+  useEffect(() => {
+    const fetchTxList = async () => {
+      try {
+        const client = new TonClient({
+          endpoint:
+            network === CHAIN.MAINNET
+              ? "https://toncenter.com/api/v2/jsonRPC"
+              : "https://testnet.toncenter.com/api/v2/jsonRPC",
+        });
+        const url = network === CHAIN.MAINNET ? "" : "testnet";
+        //testnet.tonapi.io/v2/blockchain/accounts/0%3A85105e63637de52c526e809985b882d841cc20ede907bbc2d5b01a55ec96c84f/transactions?limit=100&sort_order=desc
+
+        const address = Address.parse(walletAddress);
+        const myPrivateWallet =
+          "0:85105e63637de52c526e809985b882d841cc20ede907bbc2d5b01a55ec96c84f";
+        const queryToGetTransactions = `https://${url}.tonapi.io/v2/blockchain/accounts/${address.toString()}/transactions?limit=100&sort_order=desc`;
+        const response = await fetch(queryToGetTransactions);
+        const { transactions } = await response.json();
+
+        console.log("transactions", transactions);
+        setTransactions(transactions);
+      } catch (error) {
+        console.error("Failed to fetch transactions:", error);
+        setTransactions([]);
+      }
+    };
+
+    fetchTxList();
+  }, [walletAddress, network]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "10px",
+        marginTop: "10px",
+      }}
+    >
+      {transactions.map((tx, index) => {
+        return (
+          <div key={index}>
+            <ul
+              style={{
+                color: tx.success === true ? "green" : "red",
+              }}
+            >
+              <li>Hash: {tx.hash}</li>
+              <li>Success: {tx.success ? "Yes" : "No"}</li>
+              <li>Destination: {tx.in_msg.destination.address.toString()}</li>
+            </ul>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default WalletTxList;

src/services/exchangeRateService.ts

@@ -1,7 +1,6 @@
 // services/exchangeRateService.js
 
 import axios from 'axios';
-import { useEffect, useState } from 'react'; // Import useState for local state management
 
 interface TonApiResponse {
     rates: {