Getting Started with Integration

Here’s how the folder structure for the frontend directory would look with App.tsx included:

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

The App.tsx file is a crucial component of your Aptos DApp, handling the main application logic and rendering based on the wallet connection status

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";

function App() {
  const { connected } = useWallet();

  return (
    <>
      <Header />

      <div className="flex items-center justify-center flex-col">
        {connected ? (
          <Card>
            <CardContent className="flex flex-col gap-10 pt-6">
              <WalletDetails />
              <NetworkInfo />
              <AccountInfo />
            </CardContent>
          </Card>
        ) : (
          <CardHeader>
            <CardTitle>To get started Connect a wallet</CardTitle>
          </CardHeader>
        )}
      </div>
    </>
  );
}

export default App;

To select the network for your application, you should configure the .env file in the root folder. Set the VITE_APP_NETWORK variable to either testnet, devnet, or mainnet, depending on where your contract is deployed.

.env

PROJECT_NAME=my-aptos-dapp
VITE_APP_NETWORK=testnet

By default, it is set to testnet.