APTOS Developer’s Guide | Your First Dapp | Typescript

Update src/App.tsx:

function App() {
  // ...

  // Check for the module; show publish instructions if not present.
  const [modules, setModules] = React.useState<Types.MoveModule[]>([]);
  React.useEffect(() => {
    if (!address) return;
    client.getAccountModules(address).then(setModules);
  }, [address]);

  const hasModule = modules.some((m) => m.abi?.name === 'Message');
  const publishInstructions = (
    <pre>
      Run this command to publish the module:
      <br />
      aptos move publish --package-dir /path/to/hello_blockchain/
      --named-addresses HelloBlockchain={address}
    </pre>
  );

  return (
    <div className="App">
      {!hasModule && publishInstructions}
    </div>
  );
}

New users will be able to use this command to create a page for their account.

Step 5: Write the message in the blockchain

Now that the module is published, we are ready to use it to write the message in the blockchain. To do this we will use the set_message function opened by the module.

The transaction calling the set_message function

The caption for set_message is as follows:

public(script) fun set_message(account: signer, message_bytes: vector<u8>)

To call this function, we have to use the window.aptos API provided by the wallet to send the transaction. Specifically, we will create a script_function_payload transaction that will look like this:

{
  type: "script_function_payload",
  function: "<address>::Message::set_message",
  arguments: ["<hex encoded utf-8 message>"],
  type_arguments: []
}

There is no need to specify the account: signer argument. Aptos provides it automatically.

However we have to specify the message_bytes argument: it is "<hex encoded utf-8 message>" in the transaction. We need a way to convert the JS string to this format. We can do this by using TextEncoder to convert to utf-8 bytes and then a one-line sentence to hexadecimal encode the bytes.

Add this function to src/App.tsx:

/** Convert string to hex-encoded utf-8 bytes. */
function stringToHex(text: string) {
  const encoder = new TextEncoder();
  const encoded = encoder.encode(text);
  return Array.from(encoded, (i) => i.toString(16).padStart(2, "0")).join("");
}

Using this function, our transaction payload becomes:

{
  type: "script_function_payload",
  function: "<address>::Message::set_message",
  arguments: [stringToHex(message)],
  type_arguments: []
}

Use the window.aptos API to send a set_message transaction

Now that we understand how to use a transaction to call the set_message function, we will call this function from our application using window.aptos.signAndSubmitTransaction().

We will add:

• Where <textarea> the user can enter a message, and

Update src/App.tsx:

function App() {
  // ...

  // Call set_message with the textarea value on submit.
  const ref = React.createRef<HTMLTextAreaElement>();
  const [isSaving, setIsSaving] = React.useState(false);
  const handleSubmit = async (e: any) => {
    e.preventDefault();
    if (!ref.current) return;

    const message = ref.current.value;
    const transaction = {
      type: "script_function_payload",
      function: `${address}::Message::set_message`,
      arguments: [stringToHex(message)],
      type_arguments: [],
    };

    try {
      setIsSaving(true);
      await window.aptos.signAndSubmitTransaction(transaction);
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="App">
      {hasModule ? (
        <form onSubmit={handleSubmit}>
          <textarea ref={ref} />
          <input disabled={isSaving} type="submit" />
        </form>
      ) : publishInstructions}
    </div>
  );
}

To test:

• Type something in <textarea> and submit the form.
• Find your account in Aptos Explorer and now you will see MessageHolder resource under Account Resources with the message you wrote.

If you don't see it, try using a shorter message. Long messages can cause the transaction to fail because long messages take more gas.

Step 6: Displaying the message in dapp

Now that the MessageHolder resource has been created, we can use the Aptos SDK to fetch it and display the message.

To get a message about the status of a wallet account

To get the message we will do the following:

• First, we'll use the AptosClient.getAccountResources() function to get the account resources and store them in state.
• Then we will look for the one typewhich MessageHolder. The full type is $address::Message::MessageHolder, since it is part of the $address::Message module.

0x5af503b5c379bd69f46184304975e1ef1fa57f422dd193cdad67dc139d532481::Message::MessageHolder

function App() {
  // ...

  // Get the message from account resources.
  const [resources, setResources] = React.useState<Types.AccountResource[]>([]);
  React.useEffect(() => {
    if (!address) return;
    client.getAccountResources(address).then(setResourdces);
  }, [address]);
  const resourceType = `${address}::Message::MessageHolder`;
  const resource = resources.find((r) => r.type === resourceType);
  const data = resource?.data as {message: string} | undefined;
  const message = data?.message;

  return (
    // ...
          <textarea ref={ref} defaultValue={message} />
    // ...
  );
}

function App() {
  // Retrieve aptos.account on initial render and store it.
  const urlAddress = window.location.pathname.slice(1);
  const isEditable = !urlAddress;
  const [address, setAddress] = React.useState<string | null>(null);
  React.useEffect(() => {
    if (urlAddress) {
      setAddress(urlAddress);
    } else {
      window.aptos.account().then((data : {address: string}) => setAddress(data.address));
    }
  }, [urlAddress]);

  // ...

  return (
    <div className="App">
      {hasModule ? (
        <form onSubmit={handleSubmit}>
          <textarea ref={ref} defaultValue={message} readOnly={!isEditable} />
          {isEditable && (<input disabled={isSaving} type="submit" />)}
          {isEditable && (<a href={address!}>Get public URL</a>)}
        </form>
      ) : publishInstructions}
    </div>
  );
}