Merge pull request #122 from polkadot-cloud/rb-reset-args-at-depth

fix: Reset child input args from key

.eslintignore

@@ -19,4 +19,5 @@ public/lottie/player.js
 CHANGELOG.md
 .yarn
 .licenserc.json
-.env.yarn
+.env.yarn
+test/data/**/*

.github/workflows/gh-pages.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           ref: gh-deploy
-          
+
       - uses: actions/setup-node@v4
         with:
           node-version: 18

.prettierignore

@@ -11,4 +11,5 @@ public/lottie/player.js
 CHANGELOG.md
 .yarn
 .licenserc.json
-.env.yarn
+.env.yarn
+test/data/**/*

index.html

@@ -29,22 +29,19 @@
     <meta name="msapplication-TileColor" content="#552bbf" />
     <meta name="theme-color" content="#ffffff" />
 
-    <meta
-      name="title"
-      content="Polkadot Developer Console"
-    />
+    <meta name="title" content="Polkadot Developer Console" />
 
-    <meta name="description" content="Polkadot Developer Console is an application designed to
+    <meta
+      name="description"
+      content="Polkadot Developer Console is an application designed to
     provide Polkadot developers tools for interacting with Substrate based blockchains, allowing
-    them to build, test, deploy, and manage their projects." />
+    them to build, test, deploy, and manage their projects."
+    />
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://console.polkadot.cloud" />
-    <meta
-      property="og:title"
-      content="Polkadot Developer Console"
-    />
+    <meta property="og:title" content="Polkadot Developer Console" />
     <meta
       property="og:description"
       content="Polkadot Developer Console is an application designed to
@@ -56,13 +53,13 @@
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content="https://console.polkadot.cloud" />
+    <meta property="twitter:title" content="Polkadot Developer Console" />
     <meta
-      property="twitter:title"
-      content="Polkadot Developer Console"
-    />
-    <meta property="twitter:description" content="Polkadot Developer Console is an application
+      property="twitter:description"
+      content="Polkadot Developer Console is an application
     designed to provide Polkadot developers tools for interacting with Substrate based blockchains,
-    allowing them to build, test, deploy, and manage their projects." />
+    allowing them to build, test, deploy, and manage their projects."
+    />
     <meta property="twitter:image" content="/img/og-image.png" />
     <link
       rel="manifest"

src/contexts/ChainUi/defaults.ts

@@ -35,5 +35,6 @@ export const defaultChainContext: ChainUiContextInterface = {
   getInputArgs: (tabId, section) => null,
   getInputArgAtKey: (tabId, section, inputKey) => undefined,
   setInputArgAtKey: (tabId, section, keys, value) => {},
-  resetInputArgSection: (tabId, section) => {},
+  resetInputArgs: (tabId, section) => {},
+  resetInputArgsFromKey: (tabId, section, fromKey) => {},
 };

src/contexts/ChainUi/index.tsx

@@ -213,8 +213,8 @@ export const ChainUiProvider = ({ children }: { children: ReactNode }) => {
     setInputArgs(updatedInputArgs);
   };
 
-  // Reset input args at a given key for either a storage item or call.
-  const resetInputArgSection = (tabId: number, namespace: InputNamespace) => {
+  // Reset input args at a given key and namespace.
+  const resetInputArgs = (tabId: number, namespace: InputNamespace) => {
     if (!inputArgsRef.current[tabId]) {
       return;
     }
@@ -225,6 +225,33 @@ export const ChainUiProvider = ({ children }: { children: ReactNode }) => {
     setInputArgs(updatedInputArgs);
   };
 
+  // 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,
+    fromKey: string
+  ) => {
+    if (!inputArgsRef.current[tabId]) {
+      return;
+    }
+
+    // Duplicate arg state for manipulation.
+    const updatedInputArgs = { ...inputArgsRef.current };
+    const args = updatedInputArgs[tabId][namespace];
+
+    // 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;
+    setInputArgs(updatedInputArgs);
+  };
+
   // Reset state for a tab.
   const destroyTabChainUi = (tabId: number) => {
     const updatedChainUi = { ...chainUi };
@@ -259,7 +286,8 @@ export const ChainUiProvider = ({ children }: { children: ReactNode }) => {
         getInputArgs,
         getInputArgAtKey,
         setInputArgAtKey,
-        resetInputArgSection,
+        resetInputArgs,
+        resetInputArgsFromKey,
         destroyTabChainUi,
       }}
     >

src/contexts/ChainUi/types.ts

@@ -42,7 +42,12 @@ export interface ChainUiContextInterface {
     keys: InputArgTypeKeys,
     value: AnyJson
   ) => void;
-  resetInputArgSection: (tabId: number, section: InputNamespace) => void;
+  resetInputArgs: (tabId: number, section: InputNamespace) => void;
+  resetInputArgsFromKey: (
+    tabId: number,
+    section: InputNamespace,
+    fromKey: string
+  ) => void;
 }
 
 // Input arg type keys.

src/library/Overlay/index.scss

@@ -33,7 +33,7 @@
 
   ::-webkit-scrollbar-thumb {
     background-color: transparent; /* color of the scroll thumb */
-    border-radius: .6rem; /* roundness of the scroll thumb */
+    border-radius: 0.6rem; /* roundness of the scroll thumb */
     border: 0.1rem solid transparent; /* creates padding around scroll thumb */
   }
 }
@@ -362,7 +362,7 @@
   > .section {
     @include modal-scrollbar;
 
-    border-radius: .6rem;
+    border-radius: 0.6rem;
     display: flex;
     flex-direction: column;
     flex-basis: 33.33%;
@@ -381,7 +381,7 @@
   > .section {
     @include modal-scrollbar;
 
-    border-radius: .6rem;
+    border-radius: 0.6rem;
     display: flex;
     flex-direction: column;
     flex-basis: 50%;
@@ -435,7 +435,7 @@
 .modal-scroll {
   @include modal-scrollbar;
 
-  border-radius: .6rem;
+  border-radius: 0.6rem;
   position: relative;
   z-index: 99;
   max-height: 100%;
@@ -465,7 +465,7 @@
 
   ::-webkit-scrollbar-thumb {
     background-color: transparent; /* color of the scroll thumb */
-    border-radius: .6rem; /* roundness of the scroll thumb */
+    border-radius: 0.6rem; /* roundness of the scroll thumb */
     border: 0.1rem solid transparent; /* creates padding around scroll thumb */
   }
 }

src/routes/Chain/ChainState/ChainStateList.tsx

@@ -26,8 +26,7 @@ export const ChainStateList = ({
   inputNamespace,
 }: ChainStateListProps) => {
   const { tabId } = useActiveTab();
-  const { getChainUi, setChainUiNamespace, resetInputArgSection } =
-    useChainUi();
+  const { getChainUi, setChainUiNamespace, resetInputArgs } = useChainUi();
 
   const chainUi = getChainUi(tabId, chainUiSection);
 
@@ -52,7 +51,7 @@ export const ChainStateList = ({
 
     // If an input namespace is provided, reset input arg values.
     if (inputNamespace) {
-      resetInputArgSection(tabId, inputNamespace);
+      resetInputArgs(tabId, inputNamespace);
     }
 
     // Close item the dropdown if requested.

src/routes/Chain/ChainState/StorageItems.tsx

@@ -22,8 +22,7 @@ import type { InputNamespace } from 'contexts/ChainUi/types';
 export const StorageItems = () => {
   const { tabId } = useActiveTab();
   const { chainSpec, instanceId } = useChain();
-  const { getChainUi, setChainUiNamespace, resetInputArgSection } =
-    useChainUi();
+  const { getChainUi, setChainUiNamespace, resetInputArgs } = useChainUi();
 
   const chainUiSection = 'storage';
   const inputNamespace: InputNamespace = 'storage';
@@ -117,7 +116,7 @@ export const StorageItems = () => {
             setChainUiNamespace(tabId, chainUiSection, 'pallet', value);
 
             // Reset input args when selected pallet changes.
-            resetInputArgSection(tabId, inputNamespace);
+            resetInputArgs(tabId, inputNamespace);
           }}
         />
         <ChainStateList

src/routes/Chain/Extrinsics/CallList.tsx

@@ -16,8 +16,7 @@ import type { InputNamespace } from 'contexts/ChainUi/types';
 
 export const CallList = ({ items }: CallListProps) => {
   const { tabId } = useActiveTab();
-  const { getChainUi, setChainUiNamespace, resetInputArgSection } =
-    useChainUi();
+  const { getChainUi, setChainUiNamespace, resetInputArgs } = useChainUi();
 
   const chainUiSection = 'calls';
   const inputNamespace: InputNamespace = 'call';
@@ -39,7 +38,7 @@ export const CallList = ({ items }: CallListProps) => {
   // Handle call change.
   const handleCallChange = (name: string) => {
     setChainUiNamespace(tabId, chainUiSection, 'selected', name);
-    resetInputArgSection(tabId, inputNamespace);
+    resetInputArgs(tabId, inputNamespace);
     setCallsOpen(false);
   };
 

src/routes/Chain/Extrinsics/index.tsx

@@ -26,8 +26,7 @@ export const Extrinsics = () => {
   const { tabId, metaKey } = useActiveTab();
   const { getAccounts } = useImportedAccounts();
   const { getFromAddress, setFromAddress } = useChainState();
-  const { getChainUi, setChainUiNamespace, resetInputArgSection } =
-    useChainUi();
+  const { getChainUi, setChainUiNamespace, resetInputArgs } = useChainUi();
 
   const chainUiSection = 'calls';
   const inputNamespace: InputNamespace = 'call';
@@ -109,7 +108,7 @@ export const Extrinsics = () => {
               setChainUiNamespace(tabId, chainUiSection, 'pallet', value);
 
               // Reset input args when selected pallet changes.
-              resetInputArgSection(tabId, inputNamespace);
+              resetInputArgs(tabId, inputNamespace);
             }}
           />
           <CallList items={items} />

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);
                 }}
               />

test/metadata14/array.spec.ts

@@ -3,7 +3,7 @@
 
 import assert from 'assert';
 import type { AnyJson } from '@w3ux/types';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata array tests.
 

test/metadata14/bitSequence.spec.ts

@@ -3,7 +3,7 @@
 
 import assert from 'assert';
 import type { AnyJson } from '@w3ux/types';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata bitSequence tests.
 

test/metadata14/compact.spec.ts

@@ -3,7 +3,7 @@
 
 import assert from 'assert';
 import type { AnyJson } from '@w3ux/types';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata compact tests.
 

test/metadata14/composite.spec.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import assert from 'assert';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 import type { AnyJson } from '@w3ux/types';
 
 /* Metadata composite tests.

test/metadata14/lookup.spec.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import assert from 'assert';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata lookup tests.
 

test/metadata14/primitive.spec.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import assert from 'assert';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata primitive tests.
 

test/metadata14/sequence.spec.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import assert from 'assert';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 import type { AnyJson } from '@w3ux/types';
 
 /* Metadata sequence tests.

test/metadata14/tuple.spec.ts

@@ -3,7 +3,7 @@
 
 import assert from 'assert';
 import type { AnyJson } from '@w3ux/types';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 
 /* Metadata tuple tests.
 

test/metadata14/variants.spec.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import assert from 'assert';
-import * as metadataJson from './data/metadataV14.json';
+import * as metadataJson from '../data/metadataV14.json';
 import type { AnyJson } from '@w3ux/types';
 
 /* Metadata variants tests.