trying add shop smart contract

src/App.tsx

@@ -33,7 +33,7 @@ import PriceConverter from "./components/PriceConverter";
 import CurrencySwitcher from "./components/CurrencySwitcher";
 import { useCurrency } from "./providers/useCurrency";
 // import WalletBalanceTon from "./components/WalletBalanceTon";
-// import WalletTxList from "./components/WalletTxList";
+import WalletTxList from "./components/WalletTxList";
 
 function App() {
   const { network } = useTonConnect();
@@ -150,6 +150,12 @@ function App() {
                 </div>
                 {/* {network && wallet && <WalletBalanceTon walletAddress={wallet} />} */}
                 {/* {network && wallet && <WalletTxList walletAddress={wallet} />} */}
+                <Button onClick={() => toggleDrawer(true)}>Orders</Button>
+                <OrdersDrawer
+                  orders={mockOrders}
+                  open={drawerOpen}
+                  onClose={toggleDrawer}
+                />
               </div>
             </div>
           </FlexBoxRowSpaceBetween>

src/components/OrderDrawer.tsx

@@ -17,7 +17,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { fas } from "@fortawesome/free-solid-svg-icons";
 import { useTonConnect } from "../hooks/useTonConnect";
-
+import WalletTxList from "./WalletTxList";
 interface OrdersDrawerProps {
   orders: OrderProps[];
   open: boolean;
@@ -62,7 +62,9 @@ const OrdersDrawer: React.FC<OrdersDrawerProps> = ({
       <Typography variant="h6" gutterBottom sx={{ mb: 2 }}>
         Your Orders
       </Typography>
-      <List sx={{ pt: 0 }}>
+      {/* <List sx={{ pt: 0 }}>
+
+        
         {orders.map((order, index) => (
           <ListItem key={index} button sx={{ py: 1, px: 2 }}>
             <FontAwesomeIcon
@@ -71,7 +73,8 @@ const OrdersDrawer: React.FC<OrdersDrawerProps> = ({
             <ListItemText primary={`Order ${index + 1}: ${order.status}`} />
           </ListItem>
         ))}
-      </List>
+      </List> */}
+      <WalletTxList walletAddress={wallet!} />
     </div>
   );
 

src/components/PayWithCrypto.tsx

@@ -1,4 +1,4 @@
-import { Address, toNano } from "ton";
+import { Address, Cell, toNano } from "ton";
 import { useTonConnect } from "../hooks/useTonConnect";
 import { CenterDiv, ButtonBuyTonStyled } from "./styled/styled";
 import { useCart } from "../providers/CartProvider";
@@ -30,6 +30,14 @@ export function BuyWithCrypto({
   const tonLogoUrl = "ton.svg";
   const usdtLogoUrl = "usdt.svg";
 
+  const cart = cartItems.map((item) => {
+    return {
+      id: item.id,
+      price: item.price,
+      quantity: item.quantity,
+    };
+  });
+
   return (
     <CenterDiv>
       <ButtonBuyTonStyled
@@ -54,17 +62,25 @@ export function BuyWithCrypto({
           onClick();
           if (currency === "TON") {
             /// TODO If ok then empty the cart and send the payment snackbar
-            sender.send({
-              to: Address.parse(tonRecipient),
-              value: toNano(amount),
-            });
+            try {
+              const amountNano = toNano(amount);
+              const message = await sender.send({
+                to: Address.parse(tonRecipient),
+                value: amountNano,
+              });
+              console.log("Transaction sent", message);
+            } catch (error) {
+              console.log("Transaction failed", error);
+            }
 
             // show snackbar
 
             // empty the cart
           } else if (currency === "USDT") {
             // Handle USDT payment
             // Add your logic for USDT payment here
+            // show snackbar
+            // empty the cart
           }
         }}
       >

src/contracts/Shop.ts

@@ -0,0 +1,42 @@
+import {
+    Contract,
+    ContractProvider,
+    Sender,
+    Address,
+    Cell,
+    contractAddress,
+    beginCell,
+    toNano,
+} from "ton-core";
+
+interface Order {
+    id: number;
+    details: string;
+    status: boolean;
+}
+
+export default class ShopContract implements Contract {
+    async sendMessage(
+        provider: ContractProvider,
+        via: Sender,
+        message: Cell
+    ) {
+        await provider.internal(via, {
+            value: toNano("0.05"),
+            body: message,
+        });
+    }
+
+    async getWalletAddress(provider: ContractProvider, forAddress: Address) {
+        const { stack } = await provider.get("get_wallet_address", [
+            { type: "slice", cell: beginCell().storeAddress(forAddress).endCell() },
+        ]);
+
+        return stack.readAddress().toString();
+    }
+
+    constructor(
+        readonly address: Address,
+        readonly init?: { code: Cell; data: Cell }
+    ) { }
+}

src/hooks/useShopCBDContract.ts

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import Counter from "../contracts/counter";
+import { useTonClient } from "./useTonClient";
+import { useAsyncInitialize } from "./useAsyncInitialize";
+import { useTonConnect } from "./useTonConnect";
+import { Address, OpenedContract } from "ton-core";
+import { useQuery } from "@tanstack/react-query";
+import { CHAIN } from "@tonconnect/protocol";
+
+export function useCBDShopContract() {
+    const { client } = useTonClient();
+    const { sender, network } = useTonConnect();
+
+    const counterContract = useAsyncInitialize(async () => {
+        if (!client) return;
+        const contract = new Counter(
+            Address.parse(
+                network === CHAIN.MAINNET
+                    ? "EQBPEDbGdwaLv1DKntg9r6SjFIVplSaSJoJ-TVLe_2rqBOmH"
+                    : "EQBYLTm4nsvoqJRvs_L-IGNKwWs5RKe19HBK_lFadf19FUfb"
+            ) // replace with your address from tutorial 2 step 8
+        );
+        return client.open(contract) as OpenedContract<Counter>;
+    }, [client]);
+
+    const { data, isFetching } = useQuery(
+        ["counter"],
+        async () => {
+            if (!counterContract) return null;
+            return (await counterContract!.getCounter()).toString();
+        },
+        { refetchInterval: 3000 }
+    );
+
+    return {
+        value: isFetching ? null : data,
+        address: counterContract?.address.toString(),
+        sendIncrement: () => {
+            return counterContract?.sendIncrement(sender);
+        },
+    };
+}

src/pages/CheckoutPage.tsx

@@ -59,7 +59,7 @@ function CheckoutPage({ open, onClose }: any) {
   ).toFixed(2);
 
   useEffect(() => {
-    setFees(totalPriceFixed * 0.02);
+    setFees(totalPriceFixed * 0.002);
   }, [totalPriceFixed]);
 
   return (