chore: don't use ref

src/routes/Chain/InputForm/defaults.ts

@@ -6,6 +6,6 @@ import type { InputFormContextInterface } from './types';
 
 export const defaultInputFormContext: InputFormContextInterface = {
   namespace: 'storage',
-  inputMetaRef: { current: {} },
+  inputMeta: {},
   handleSubmit: () => ({}),
 };

src/routes/Chain/InputForm/index.tsx

@@ -19,7 +19,7 @@ export const InputForm = ({
   onSubmit,
 }: InputFormInnerProps) => {
   const { readInput } = useInput();
-  const { namespace, inputMetaRef, handleSubmit } = useInputForm();
+  const { namespace, inputMeta, handleSubmit } = useInputForm();
 
   // Ensure argTypes is an array.
   if (!Array.isArray(argTypes)) {
@@ -38,7 +38,7 @@ export const InputForm = ({
               scraper,
               inputKey: `${index}`,
               namespace,
-              inputMetaRef,
+              inputMeta,
             })}
           </Fragment>
         ))}

src/routes/Chain/InputForm/provider.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 @polkadot-cloud/polkadot-developer-console authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import { createContext, useContext, useRef } from 'react';
+import { createContext, useContext } from 'react';
 import { defaultInputFormContext } from './defaults';
 import type {
   InputFormContextInterface,
@@ -12,7 +12,6 @@ import { useActiveTab } from 'contexts/ActiveTab';
 import { useChainUi } from 'contexts/ChainUi';
 import type { AnyJson } from '@w3ux/types';
 import { ArgBuilder } from 'model/Scraper/ArgBuilder';
-import type { InputMeta } from '../Inputs/types';
 
 export const InputForm = createContext<InputFormContextInterface>(
   defaultInputFormContext
@@ -29,7 +28,7 @@ export const InputFormProvider = ({
   const { getInputArgs } = useChainUi();
 
   // A reference to accumulate input keys for an input form.
-  const inputMetaRef = useRef<InputMeta>({});
+  const inputMeta = {};
 
   // Handle query submission. Accumulates input values and passes them into the provided `onSubmit`
   // function.
@@ -46,11 +45,7 @@ export const InputFormProvider = ({
     const formattedInputs: Record<string, AnyJson> =
       inputArgs === null
         ? {}
-        : new ArgBuilder(
-            inputArgs,
-            { ...inputMetaRef.current },
-            scraper
-          ).build();
+        : new ArgBuilder(inputArgs, { ...inputMeta }, scraper).build();
 
     // Determine whether inputs are empty.
     const isEmpty = Object.values(formattedInputs).length === 0;
@@ -80,7 +75,7 @@ export const InputFormProvider = ({
     <InputForm.Provider
       value={{
         namespace,
-        inputMetaRef,
+        inputMeta,
         handleSubmit,
       }}
     >

src/routes/Chain/InputForm/types.ts

@@ -4,12 +4,12 @@
 import type { AnyJson } from '@w3ux/types';
 import type { InputNamespace } from 'contexts/ChainUi/types';
 import type { PalletScraper } from 'model/Scraper/Pallet';
-import type { MutableRefObject, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { InputMeta } from '../Inputs/types';
 
 export interface InputFormContextInterface {
   namespace: InputNamespace;
-  inputMetaRef: MutableRefObject<InputMeta>;
+  inputMeta: InputMeta;
   handleSubmit: (onSubmit?: (inputArgs: AnyJson) => void) => AnyJson;
 }
 

src/routes/Chain/Inputs/Sequence.tsx

@@ -16,12 +16,12 @@ export const Sequence = ({
   maxLength,
 }: SequenceProps) => {
   const { readInput } = useInput();
-  const { inputKey, inputMetaRef } = config;
+  const { inputKey, inputMeta } = config;
 
   const INPUT_TYPE = 'sequence';
 
   // Accumulate input key.
-  inputMetaRef.current[inputKey] = { inputType: INPUT_TYPE, indexKey };
+  inputMeta[inputKey] = { inputType: INPUT_TYPE, indexKey };
 
   // The number of inputs being rendererd.
   const [inputs, setInputs] = useState<number[]>([0]);
@@ -47,7 +47,7 @@ export const Sequence = ({
         const childKey = `${inputKey}_${index}`;
 
         // Accumulate input key.
-        inputMetaRef.current[childKey] = {
+        inputMeta[childKey] = {
           inputType: `${INPUT_TYPE}Item`,
           indexKey: childKey,
         };

src/routes/Chain/Inputs/types.ts

@@ -5,7 +5,6 @@ import type { AnyJson } from '@w3ux/types';
 import type { InputNamespace } from 'contexts/ChainUi/types';
 import type { InputCallbackProps } from 'library/Inputs/types';
 import type { PalletScraper } from 'model/Scraper/Pallet';
-import type { MutableRefObject } from 'react';
 
 // All supported input types.
 export type InputType =
@@ -46,7 +45,7 @@ export interface InputArgConfig {
   activeItem: string | null;
   scraper: PalletScraper;
   namespace: InputNamespace;
-  inputMetaRef: MutableRefObject<InputMeta>;
+  inputMeta: InputMeta;
   inputKey: string;
 }
 

src/routes/Chain/Inputs/useInput.tsx

@@ -1,7 +1,6 @@
 // Copyright 2024 @polkadot-cloud/polkadot-developer-console authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import type { MutableRefObject } from 'react';
 import { Fragment } from 'react';
 import { Select } from 'library/Inputs/Select';
 import { Section } from './Section';
@@ -89,10 +88,10 @@ export const useInput = () => {
   // Renders a tuple input component.
   const renderTuple = (arg: ScrapedItem, config: InputArgConfig) => {
     const { tuple, indexKey } = arg;
-    const { inputKey, inputMetaRef } = config;
+    const { inputKey, inputMeta } = config;
 
     // Record this input type.
-    addInputTypeAtKey(inputMetaRef, inputKey, indexKey, 'tuple');
+    addInputTypeAtKey(inputMeta, inputKey, indexKey, 'tuple');
 
     // Render tuple inputs.
     return (
@@ -171,10 +170,10 @@ export const useInput = () => {
   // Renders a compact input component.
   const renderCompact = (arg: ScrapedItem, config: InputArgConfig) => {
     const { compact, indexKey } = arg;
-    const { inputKey, inputMetaRef } = config;
+    const { inputKey, inputMeta } = config;
 
     // Record this input type.
-    addInputTypeAtKey(inputMetaRef, inputKey, indexKey, 'compact');
+    addInputTypeAtKey(inputMeta, inputKey, indexKey, 'compact');
 
     // Render compact input.
     return (
@@ -190,7 +189,7 @@ export const useInput = () => {
     const typeClass = config.scraper.getClass(indexKey) as CompositeType;
     const label = typeClass.label();
     const input = typeClass.input();
-    const { inputKey, inputMetaRef } = config;
+    const { inputKey, inputMeta } = config;
 
     // If this composite is a custom input, render it and stop the recursive input loop.
     if (input !== 'indent') {
@@ -203,7 +202,7 @@ export const useInput = () => {
     }
 
     // Record this input type.
-    addInputTypeAtKey(inputMetaRef, inputKey, indexKey, 'composite');
+    addInputTypeAtKey(inputMeta, inputKey, indexKey, 'composite');
 
     // Render the composite fields.
     return (
@@ -285,7 +284,7 @@ export const useInput = () => {
     } = options || {};
 
     const {
-      inputMetaRef,
+      inputMeta,
       scraper,
       inputKey,
       namespace,
@@ -313,7 +312,7 @@ export const useInput = () => {
 
     // General `onRender` callback that registers input type with key.
     const onRender = (inputType: InputType) => {
-      inputMetaRef.current[inputKey] = { inputType, indexKey };
+      inputMeta[inputKey] = { inputType, indexKey };
     };
 
     // A unique identifier for the input component. Currently only used for account address inputs.
@@ -439,12 +438,12 @@ export const useInput = () => {
 
   // Record an input type to an input key.
   const addInputTypeAtKey = (
-    inputMetaRef: MutableRefObject<InputMeta>,
+    inputMeta: InputMeta,
     inputKey: string,
     indexKey: string,
     inputType: InputType
   ) => {
-    inputMetaRef.current[inputKey] = { inputType, indexKey };
+    inputMeta[inputKey] = { inputType, indexKey };
   };
 
   return {