In the fifth chapter of the tutorial on building an end-to-end dapp on Aptos, you will be submitting data to the chain.

So now we have an Add new list button that appears if the connected account hasn’t created a list yet. We still don't have a way for an account to create a list, so let’s add that functionality.

1. First, our wallet adapter provider has a signAndSubmitTransaction function; let’s extract it by updating the following:

   const { account, signAndSubmitTransaction } = useWallet();

2. Add an onClick event to the new list button:

   <Button onClick={addNewList} block type="primary" style={{ height: "40px", backgroundColor: "#3f67ff" }}> Add new list

3. Update the import statement from @aptos-labs/wallet-adapter-react to also import the InputTransactionData type and

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

4. Add the addNewList function:

   const addNewList = async () => { if (!account) return []; const transaction:InputTransactionData = { data: { function:${moduleAddress}::todolist::create_list, functionArguments:[] } } try { // sign and submit transaction to chain const response = await signAndSubmitTransaction(transaction); // wait for transaction await aptos.waitForTransaction({transactionHash:response.hash}); setAccountHasList(true); } catch (error: any) { setAccountHasList(false); }};

5. Since our new function also uses moduleAddress, let’s get it out of the fetchList function scope to the global scope so it can be used globally.

In our fetchList function, find the line:

// replace with your own addressconst moduleAddress =  "0xcbddf398841353776903dbab2fdaefc54f181d07e114ae818b1a67af28d1b018";

And move it to outside of the main App function, right beneath our const provider declarations.

export const aptos = new Aptos();// change this to be your module account addressexport const moduleAddress =  "0xcbddf398841353776903dbab2fdaefc54f181d07e114ae818b1a67af28d1b018";

Let’s go over the addNewList function code.

First, we use the account property from our wallet provider to make sure there is an account connected to our app.

Then we build our transaction data to be submitted to chain:

const transaction:InputTransactionData = {      data: {        function:`${moduleAddress}::todolist::create_list`,        functionArguments:[]      }    }

• function- is built from the module address, module name and the function name.
• functionArguments - the arguments the function expects, in our case it doesn’t expect any arguments.

Next, we submit the transaction payload and wait for its response. The response returned from the signAndSubmitTransaction function holds the transaction hash. Since it can take a bit for the transaction to be fully executed on chain and we also want to make sure it is executed successfully, we waitForTransaction. And only then we can set our local accountHasList state to true.

1. Before testing our app, let’s tweak our UI a bit and add a Spinner component to show up while we are waiting for the transaction. Add a local state to keep track whether a transaction is in progress:

   const [transactionInProgress, setTransactionInProgress] = useState(false);