Whitelist: {WHITELIST_ADDRESS}
Owner: {owner ?? '—'}
You: {address ?? 'Not connected'}
{isOwner ? 'You are the owner' : 'You are not the owner'}
);
}
```
You can see that we have imported the `useWhitelist` hook which we use to get the `owner` address, and a check `isOwner` to indicate if the connected account is the owner of the `Whitelist` contract.
We will leave you to read through the other hooks and components to see how we read from our contracts and send transactions. But, as quick example, here is the `useDeployProject` hook which is used to send a transaction executing the `deployProject()` function of our `RealEstateFactory` contract:
```typescript theme={null}
import { useCallback } from 'react';
import {
useWriteContract,
useWaitForTransactionReceipt,
} from 'wagmi';
import { decodeEventLog } from 'viem';
import { FACTORY_ADDRESS } from '../lib/addresses';
import { factoryAbi } from '../lib/abis/factory';
export function useDeployProject() {
const { writeContract, data: hash, isPending, error: writeError } = useWriteContract();
const { data: receipt, isLoading: confirming, isSuccess } =
useWaitForTransactionReceipt({ hash });
const deploy = useCallback((args: {
name: string; symbol: string;
propertyId: string; jurisdiction: string; metadataUri: string;
}) => {
writeContract({
address: FACTORY_ADDRESS,
abi: factoryAbi,
functionName: 'deployProject',
args: [
args.name,
args.symbol,
args.propertyId,
args.jurisdiction,
args.metadataUri,
],
});
}, [writeContract]);
// extract new project address if available
let newProject: `0x${string}` | undefined;
if (isSuccess && receipt?.logs?.length) {
for (const log of receipt.logs) {
try {
const parsed = decodeEventLog({
abi: factoryAbi,
data: log.data,
topics: log.topics,
});
if (parsed.eventName === 'ProjectCreated') {
newProject = parsed.args.projectAddress as `0x${string}`;
break;
}
} catch {}
}
}
return {
deploy,
txHash: hash,
newProject,
isPending,
confirming,
isSuccess,
writeError,
};
}
```
This hook is used in the `NewProjectForm` component to provide the user interface for deploying `RealEstateToken` contracts.
## The Completed dApp
With the configuration in place, and our dApp's components, and hooks etc in place, we can run the dApp locally with the development server.
In a terminal you can start the development server with:
```bash theme={null}
npm run dev
```
The dApp might take some time to compile but, when it is finished the dApp should be available to use on `https://localhost:3000`. You should see something like this:
### Whitelist administration
The dApp provides a whitelist administration interface where you can approve and revoke investor addresses.
### Create RealEstateToken projects
You can create new RealEstateToken projects through the dApp interface.
### Manage RealEstateToken projects
The dApp allows you to manage your RealEstateToken projects, view project details, and mint tokens for approved investors.
Of course, yours won't be immediately populated with data. You will have no whitelisted investor addresses, and no projects. The account that you used to deploy the contracts with Foundry will be the owner of the `Whitelist` and `RealEstateFactory` contracts. If you have that account selected in your MetaMask wallet (its address should be shown on the connection button badge in the top right), then you will be able to approve and revoke account addresses as investors.
Any of your accounts should be able to create a new RealEstateToken project. Just provide the required details and hit `Create Project`. From there, you can head over to the `Manage Projects` page and mint tokens for your approved investors. The `Manage Projects` page will display details of the project and the investors and their holdings.
# Introduction
Source: https://docs.mantrachain.io/developers/tutorials/zero-to-hero-dapp/introduction
Welcome to the MANTRA Zero to Hero dApp Development Guide
Welcome to the MANTRA Zero to Hero dApp Development Guide
This guide will walk you through building and deploying a complete decentralized application (dApp) on **MANTRA's EVM-compatible Dukong Testnet** from smart contract creation to frontend deployment.