feat: show keys in claim burn (#879)

Description
---
Show keys in the claim burn in wallet ui.
If the key is associated with an account you will see the account name.
The account name is editable only when you select key without an
associated account.
Fix adding keys in the wallet ui.

Motivation and Context
---

How Has This Been Tested?
---
Burning funds into new account.

What process can a PR reviewer use to test or verify this change?
---
Same as above. Create a burn for a new key and then claim it for a new
account for this key.


Breaking Changes
---

- [x] None
- [ ] Requires data directory to be deleted
- [ ] Other - Please specify

Author: Cifko

applications/tari_dan_wallet_web_ui/src/api/hooks/useKeys.tsx

@@ -38,7 +38,7 @@ export const useKeysList = () => {
 };
 
 export const useKeysCreate = () => {
-  return useMutation(() => jsonRpc('keys.create', []), {
+  return useMutation(() => jsonRpc('keys.create', {}), {
     onError: (error: apiError) => {
       error;
     },

applications/tari_dan_wallet_web_ui/src/routes/AssetVault/Components/ClaimBurn.tsx

@@ -36,25 +36,45 @@ import { useAccountsList, useAccountsClaimBurn } from "../../../api/hooks/useAcc
 import { useTheme } from "@mui/material/styles";
 import { accountsClaimBurn } from "../../../utils/json_rpc";
 import useAccountStore from "../../../store/accountStore";
+import { useKeysList } from "../../../api/hooks/useKeys";
 
 export default function ClaimBurn() {
   const [open, setOpen] = useState(false);
   const [claimBurnFormState, setClaimBurnFormState] = useState({
     account: "",
+    key: "",
     claimProof: "",
     fee: "",
     is_valid_json: false,
+    newAccount: false,
     filled: false,
     disabled: false,
   });
 
   const { data: dataAccountsList } = useAccountsList(0, 10);
+  const { data: dataKeysList } = useKeysList();
   const { setPopup } = useAccountStore();
 
-  const onClaimBurnAccountChange = (e: SelectChangeEvent<string>) => {
+  const onClaimBurnKeyChange = (e: SelectChangeEvent<string>) => {
+    let key = e.target.value;
+    let key_index = dataKeysList.keys.indexOf(key);
+    let account = claimBurnFormState.account;
+    let selected_account = dataAccountsList.accounts.find((account: any) => account.account.key_index === key_index);
+    let new_account_name;
+    if (selected_account !== undefined) {
+      account = selected_account.account.name;
+      new_account_name = false;
+    } else {
+      if (claimBurnFormState.newAccount === false) {
+        account = "";
+      }
+      new_account_name = true;
+    }
     setClaimBurnFormState({
       ...claimBurnFormState,
-      [e.target.name]: e.target.value,
+      "key": key,
+      "account": account,
+      "newAccount": new_account_name,
       filled: claimBurnFormState.is_valid_json && claimBurnFormState.fee !== "" && e.target.value !== "",
     });
   };
@@ -69,7 +89,7 @@ export default function ClaimBurn() {
         ...claimBurnFormState,
         [e.target.name]: e.target.value,
         is_valid_json: true,
-        filled: claimBurnFormState.account !== "" && claimBurnFormState.fee !== "" && e.target.value !== "",
+        filled: claimBurnFormState.key !== "" && claimBurnFormState.fee !== "" && e.target.value !== "",
       });
     } catch {
       setClaimBurnFormState({
@@ -81,21 +101,32 @@ export default function ClaimBurn() {
     }
   };
 
+  const onClaimBurnAccountNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setClaimBurnFormState({
+      ...claimBurnFormState,
+      [e.target.name]: e.target.value,
+      filled: claimBurnFormState.key !== "" && claimBurnFormState.is_valid_json && e.target.value !== "",
+    });
+  }
+
   const onClaimBurnFeeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setClaimBurnFormState({
       ...claimBurnFormState,
       [e.target.name]: e.target.value,
-      filled: claimBurnFormState.account !== "" && claimBurnFormState.is_valid_json && e.target.value !== "",
+      filled: claimBurnFormState.key !== "" && claimBurnFormState.is_valid_json && e.target.value !== "",
     });
   }
 
   const onClaimBurn = async () => {
     try {
       setClaimBurnFormState({ ...claimBurnFormState, disabled: true });
-      await accountsClaimBurn(claimBurnFormState.account, JSON.parse(claimBurnFormState.claimProof), +claimBurnFormState.fee);
+      await accountsClaimBurn(claimBurnFormState.account, JSON.parse(claimBurnFormState.claimProof), +claimBurnFormState.fee, +claimBurnFormState.key[0]);
       setOpen(false);
       setPopup({ title: "Claimed", error: false });
-      setClaimBurnFormState({ account: "", claimProof: "", fee: "", is_valid_json: false, filled: false, disabled: false });
+      setClaimBurnFormState({
+        key: "", account: "", claimProof: "", fee: "", is_valid_json: false, filled: false, disabled: false,
+        newAccount: false,
+      });
     } catch (e: any) {
       setClaimBurnFormState({ ...claimBurnFormState, disabled: false });
       setPopup({ title: "Claim burn failed: " + e.message, error: true });
@@ -111,6 +142,14 @@ export default function ClaimBurn() {
     setOpen(false);
   };
 
+  const formattedKey = (key: any[]) => {
+    let account = dataAccountsList.accounts.find((account: any) => account.account.key_index === +key[0])
+    if (account === undefined) {
+      return <div><b>{key[0]}</b> {key[1]}</div>
+    }
+    return <div><b>{key[0]}</b> {key[1]}<br></br>Account <i>{account.account.name}</i></div>
+  }
+
   return (
     <div>
       <Button variant="outlined" onClick={handleClickOpen}>
@@ -121,23 +160,30 @@ export default function ClaimBurn() {
         <DialogContent className="dialog-content">
           <Form onSubmit={onClaimBurn} className="flex-container-vertical" style={{ paddingTop: theme.spacing(1) }}>
             <FormControl>
-              <InputLabel id="account">Account</InputLabel>
+              <InputLabel id="key">Key</InputLabel>
               <Select
-                labelId="account"
-                name="account"
-                label="Account"
-                value={claimBurnFormState.account}
-                onChange={onClaimBurnAccountChange}
+                labelId="key"
+                name="key"
+                label="Key"
+                value={claimBurnFormState.key}
+                onChange={onClaimBurnKeyChange}
                 style={{ flexGrow: 1, minWidth: "200px" }}
                 disabled={claimBurnFormState.disabled}
               >
-                {dataAccountsList?.accounts.map((account: any) => (
-                  <MenuItem key={account.account.address.Component} value={account.account.address.Component}>
-                    {account.account.name}
+                {dataKeysList?.keys?.map((key: any) => (
+                  <MenuItem key={key} value={key}>
+                    {formattedKey(key)}
                   </MenuItem>
                 ))}
               </Select>
             </FormControl>
+            <TextField name="account"
+              label="Account Name"
+              value={claimBurnFormState.account}
+              onChange={onClaimBurnAccountNameChange}
+              style={{ flexGrow: 1 }}
+              disabled={claimBurnFormState.disabled || !claimBurnFormState.newAccount}>
+            </TextField>
             <TextField
               name="claimProof"
               label="Claim Proof"

applications/tari_dan_wallet_web_ui/src/utils/json_rpc.tsx

@@ -128,12 +128,13 @@ export const transactionsWaitResult = (hash: string, timeoutSecs: number | null)
   jsonRpc("transactions.wait_result", [hash, timeoutSecs]);
 
 // accounts
-export const accountsClaimBurn = (account: string, claimProof: any, fee: number) =>
+export const accountsClaimBurn = (account: string, claimProof: any, fee: number, key_id: number) =>
   // Fees are passed as strings because Amount is tagged
   jsonRpc("accounts.claim_burn", {
     account,
     claim_proof: claimProof,
-    fee: fee,
+    fee,
+    key_id,
   });
 export const accountsCreate = (
   accountName: string | undefined,