# Entry Function Integration

<pre class="language-vbnet"><code class="lang-vbnet"><strong>frontend/
</strong>    ├───components
    │   └───ui
    ├───entry-functions
    ├───lib
    ├───utils
    ├───view-functions
    ├───App.tsx
    ├───index.tsx
</code></pre>

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

```typescript
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)&#x20;

`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`

```typescriptreact
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

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

Import these modules to integrate successfully

```typescriptreact
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:

```typescriptreact
  const queryClient = useQueryClient();
```

This is the function to handle the transaction

```typescriptreact
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`

```typescriptreact
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;
```

<figure><img src="https://3979647796-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJzLxQxEnt9g4poaVesgv%2Fuploads%2Fn08k1g7pv1DvnkRvObuI%2Fimage.png?alt=media&#x26;token=09a30b51-dd30-4f8c-b9d6-2fb5cb96fbd3" alt=""><figcaption><p>Output</p></figcaption></figure>

Now the move contract is successfully integrated