Repository: ProvableHQ/sdk (language: rust)

Issue:
[Feature] Several UI Changes for aleo.tools Develop Tab
## 🚀 Feature

Several changes to improve the user interface and developer experience of aleo.tools:

1. Rename the "Demo" button to "Insert Demo Program" or something similar to make its function more clear.
2. Add an info tooltip that appears on hover to specify that the program field should contain Aleo Instructions code.
3. Add an info tooltip that clarifies the "Fee Record" must be in plaintext format and provide an example record plaintext. Mention that this plaintext can be obtained by decrypting an unspent record.

## Motivation

These changes aim to make aleo.tools more dev-friendly and intuitive, particularly for newcomers who may not be familiar with the terminology or functionality.

## Implementation

1. **Demo Button Renaming**: Update the Demo button text from "Demo" to "Insert Demo Program". This is likely a small change but will have a significant impact on clarity.

2. **Info Tooltip for Program Field**: A tooltip can be added to the program field to display additional information on hover. This tooltip should specify that Aleo Instructions code is expected in this field. For example:
```diff
  <Form.Item
      label="Program"
      name="program"
+     tooltip={"This must be an Aleo Instructions program."}
      rules={[
          {
              required: true,
              message: "Please input or load an Aleo program",
          },
      ]}
  >
      <CodeEditor onChange={onProgramChange} />
  </Form.Item>
```

4. **Info Tooltip for Fee Record**: Similar to the program field, an info tooltip can be added to the "Fee Record" field. This tooltip should provide an example and mention that the fee record must be in plaintext format, and can be found in the latest transition outputs and decrypted in the Record tab. For example:
```diff
<Form.Item
    label="Fee Record"
    colon={false}
+  tooltip={`This is the record you will use to pay your tx fee and must be in plaintext format. Record plaintext can be obtained by decrypting an unspent record.
+        Ie: {
+        owner: aleo1j7...,
+        microcredits: 15000...,
+        _nonce: 30774...
+        }`}
    validateStatus={status}
>

```

**Components Affected**: Primarily the UI components responsible for the "Demo" button, program field, and "Fee Record" field.

**Are you willing to open a pull request?**
Maybe


Discussion / hints:

Fix patch:
diff --git a/website/src/tabs/develop/Deploy.jsx b/website/src/tabs/develop/Deploy.jsx
index a7f7ea0db..c64cfd8fd 100644
--- a/website/src/tabs/develop/Deploy.jsx
+++ b/website/src/tabs/develop/Deploy.jsx
@@ -220,7 +220,7 @@ export const Deploy = () => {
                     size="middle"
                     onClick={demo}
                 >
-                    Demo
+                    Insert Demo Program
                 </Button>
             }
         >
@@ -231,6 +231,7 @@ export const Deploy = () => {
                     <Form.Item
                         label="Program"
                         name="program"
+                        tooltip={"This must be an Aleo Instructions program."}
                         rules={[
                             {
                                 required: true,
@@ -282,6 +283,9 @@ export const Deploy = () => {
                 <Form.Item
                     label="Fee Record"
                     colon={false}
+                    tooltip={`Use this plaintext record to pay your tx fee,
+                     e.g., { owner: aleo1j7..., microcredits: 15000..., _nonce: 30774... }.
+                      Obtain it by decrypting an unspent record in the 'Record' tab.`}
                     validateStatus={status}
                 >
                     <Input.TextArea


Test patch: