Entry Function Integration

Write into the block

frontend/
    ├───components
    │   └───ui
    ├───entry-functions
    ├───lib
    ├───utils
    ├───view-functions
    ├───App.tsx
    ├───index.tsx

First navigate to the entry-functions Directory and create a new TypeScript file in this directory. You might name it something like integrateContract.ts.

import { InputTransactionData } from "@aptos-labs/wallet-adapter-react";

// Function to create an entry with the new arguments
export type CreateArguments = {
  name: string;
  timestamp: string;
};

export const createEntry = (args: CreateArguments): InputTransactionData => {
  const { name, timestamp } = args;
  return {
    data: {
      function: "0xYourContractAddress::your_module::your_function_name", // Replace with your actual contract address and module::function name
      functionArguments: [name, timestamp],
    },
  };
};

Here Replace,

0xYourContractAddress with your contract address (module address)

your_module with your module name (contract name)

your_function_name with your function name you need to call.

Here's how you can set up main.tsx with QueryClientProvider and the necessary imports:

npm install @tanstack/react-query

import "./index.css";

import React from "react";
import ReactDOM from "react-dom/client";

import App from "@/App.tsx";
// Internal components
import { Toaster } from "@/components/ui/toaster.tsx";
import { WalletProvider } from "@/components/WalletProvider.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <WalletProvider>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
          <Toaster />
    </WalletProvider>
  </React.StrictMode>,
);

Then in App.tsx the function createEntry should be called like this

import { createEntry as createEntryFunction } from "@/entry-functions/integrateContract";

Import these modules to integrate successfully

import { useWallet } from "@aptos-labs/wallet-adapter-react";
// Internal Components
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Header } from "@/components/Header";
import { WalletDetails } from "@/components/WalletDetails";
import { NetworkInfo } from "@/components/NetworkInfo";
import { AccountInfo } from "@/components/AcoountInfo";
//These are imported for integration
import { createEntry as createEntryFunction } from "@/entry-functions/integrateContract";
import React, { FormEvent, useState } from "react";
import { aptosClient } from "./utils/aptosClient";
import { useQueryClient } from "@tanstack/react-query";

Initialize useQueryClient like this:

  const queryClient = useQueryClient();

This is the function to handle the transaction

const handleCreateEntry = async (e: FormEvent) => {
    e.preventDefault();
    if (!account) return;

    try {
      const transactionData = createEntryFunction({
        name,
        timestamp,
      });
      
      const response = await signAndSubmitTransaction(transactionData);
      await aptosClient().waitForTransaction(response.hash);
      queryClient.invalidateQueries();
      setName("");
      setTimestamp("");
      alert("Entry created successfully");
    } catch (error) {
      console.error("Error creating entry:", error);
    }
  };

Then just call the function in like you normally do

Example App.tsx

import { useWallet } from "@aptos-labs/wallet-adapter-react";
// Internal Components
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Header } from "@/components/Header";
import { WalletDetails } from "@/components/WalletDetails";
import { NetworkInfo } from "@/components/NetworkInfo";
import { AccountInfo } from "@/components/AcoountInfo";
// These are imported for integration
import { createEntry as createEntryFunction } from "@/entry-functions/integrateContract";
import React, { FormEvent, useState } from "react";
import { aptosClient } from "./utils/aptosClient";
import { useQueryClient } from "@tanstack/react-query";

const App: React.FC = () => {
  const { connected, account, signAndSubmitTransaction } = useWallet();

  const [name, setName] = useState("");
  const [timestamp, setTimestamp] = useState("");

  const queryClient = useQueryClient();

  const handleCreateEntry = async (e: FormEvent) => {
    e.preventDefault();
    if (!account) return;

    try {
      const transactionData = createEntryFunction({
        name,
        timestamp,
      });
      
      const response = await signAndSubmitTransaction(transactionData);
      await aptosClient().waitForTransaction(response.hash);
      queryClient.invalidateQueries();
      setName("");
      setTimestamp("");
      alert("Entry created successfully");
    } catch (error) {
      console.error("Error creating entry:", error);
    }
  };

  return (
    <>
      <Header />

      <div className="flex items-center justify-center min-h-screen bg-gray-100">
        {connected ? (
          <div className="w-full max-w-lg p-6 bg-white shadow-lg rounded-lg">
            <Card>
              <CardContent className="flex flex-col gap-10 pt-6">
                <WalletDetails />
                <NetworkInfo />
                <AccountInfo />
              </CardContent>
            </Card>

            <div className="mt-6">
              <form onSubmit={handleCreateEntry} className="space-y-4">
                <div className="flex flex-col">
                  <label className="text-gray-700 font-medium">Name:</label>
                  <input
                    type="text"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    required
                    className="mt-1 p-2 border border-gray-300 rounded-lg"
                  />
                </div>
                <div className="flex flex-col">
                  <label className="text-gray-700 font-medium">Timestamp:</label>
                  <input
                    type="datetime-local"
                    value={timestamp}
                    onChange={(e) => setTimestamp(e.target.value)}
                    required
                    className="mt-1 p-2 border border-gray-300 rounded-lg"
                  />
                </div>
                <button
                  type="submit"
                  className="w-full bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition"
                >
                  Create Entry
                </button>
              </form>
            </div>
          </div>
        ) : (
          <CardHeader>
            <CardTitle>To get started, connect a wallet</CardTitle>
          </CardHeader>
        )}
      </div>
    </>
  );
}

export default App;

Output

Now the move contract is successfully integrated