From 5bcc900791c051effc7cd18dc44b0118203b9386 Mon Sep 17 00:00:00 2001 From: Martin Stefcek <35243812+Cifko@users.noreply.github.com> Date: Mon, 8 Jan 2024 09:27:29 +0100 Subject: [PATCH] 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 --- .../src/api/hooks/useKeys.tsx | 2 +- .../AssetVault/Components/ClaimBurn.tsx | 76 +++++++++++++++---- .../src/utils/json_rpc.tsx | 5 +- 3 files changed, 65 insertions(+), 18 deletions(-) diff --git a/applications/tari_dan_wallet_web_ui/src/api/hooks/useKeys.tsx b/applications/tari_dan_wallet_web_ui/src/api/hooks/useKeys.tsx index 56f69aad6..f40dd837c 100644 --- a/applications/tari_dan_wallet_web_ui/src/api/hooks/useKeys.tsx +++ b/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; }, diff --git a/applications/tari_dan_wallet_web_ui/src/routes/AssetVault/Components/ClaimBurn.tsx b/applications/tari_dan_wallet_web_ui/src/routes/AssetVault/Components/ClaimBurn.tsx index 8b7d7bbcb..e2c2e1867 100644 --- a/applications/tari_dan_wallet_web_ui/src/routes/AssetVault/Components/ClaimBurn.tsx +++ b/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) => { + const onClaimBurnKeyChange = (e: SelectChangeEvent) => { + 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) => { + setClaimBurnFormState({ + ...claimBurnFormState, + [e.target.name]: e.target.value, + filled: claimBurnFormState.key !== "" && claimBurnFormState.is_valid_json && e.target.value !== "", + }); + } + const onClaimBurnFeeChange = (e: React.ChangeEvent) => { 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
{key[0]} {key[1]}
+ } + return
{key[0]} {key[1]}

Account {account.account.name}
+ } + return (