From b945f7646ae768f41130a24198a4b632f40ddc13 Mon Sep 17 00:00:00 2001
From: Ross Bulat <ross@jkrb.io>
Date: Sun, 23 Jun 2024 12:54:03 +0700
Subject: [PATCH] implement resetInputArgsFromKey

---
 src/contexts/ChainUi/index.tsx       | 11 ++++++++---
 src/routes/Chain/Inputs/useInput.tsx | 10 +++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/contexts/ChainUi/index.tsx b/src/contexts/ChainUi/index.tsx
index 18023500..067b832d 100644
--- a/src/contexts/ChainUi/index.tsx
+++ b/src/contexts/ChainUi/index.tsx
@@ -225,7 +225,8 @@ export const ChainUiProvider = ({ children }: { children: ReactNode }) => {
     setInputArgs(updatedInputArgs);
   };
 
-  // Reset input args from an input key and namespace.
+  // Reset input args from an input key and namespace. Removes input args from any child input of
+  // the provided key. Should be used on select input changes, that allow variant selection.
   const resetInputArgsFromKey = (
     tabId: number,
     namespace: InputNamespace,
@@ -239,8 +240,12 @@ export const ChainUiProvider = ({ children }: { children: ReactNode }) => {
     const updatedInputArgs = { ...inputArgsRef.current };
     const args = updatedInputArgs[tabId][namespace];
 
-    // TODO: Iterate through keys state and remove keys that start with `fromKey`.
-    console.debug('delete from', fromKey);
+    // Iterate through keys state and remove keys that start with `fromKey`.
+    for (const key in args) {
+      if (key.startsWith(fromKey) && key !== fromKey) {
+        delete args[key];
+      }
+    }
 
     // Update state.
     updatedInputArgs[tabId][namespace] = args;
diff --git a/src/routes/Chain/Inputs/useInput.tsx b/src/routes/Chain/Inputs/useInput.tsx
index 2cd2fdaa..2637199c 100644
--- a/src/routes/Chain/Inputs/useInput.tsx
+++ b/src/routes/Chain/Inputs/useInput.tsx
@@ -30,7 +30,8 @@ export const useInput = () => {
   const { getAccounts } = useAccounts();
   const { tabId, metaKey } = useActiveTab();
   const { removeInputMetaValue } = useInputMeta();
-  const { setInputArgAtKey, getInputArgAtKey } = useChainUi();
+  const { setInputArgAtKey, getInputArgAtKey, resetInputArgsFromKey } =
+    useChainUi();
 
   const accounts = getAccounts(chainSpec);
 
@@ -370,6 +371,13 @@ export const useInput = () => {
                 onMount={onMount}
                 onRender={onRender}
                 onChange={(val) => {
+                  // Child inputs changed - remove args.
+                  resetInputArgsFromKey(
+                    tabId,
+                    inputArgConfig.namespace,
+                    inputArgConfig.inputKey
+                  );
+                  // Commit new input arg value.
                   setInputArgAtKey(tabId, inputArgConfig.namespace, keys, val);
                 }}
               />