diff --git a/src/routes/Chain/ChainState/StorageItems.tsx b/src/routes/Chain/ChainState/StorageItems.tsx
index c49cb139..4259c93a 100644
--- a/src/routes/Chain/ChainState/StorageItems.tsx
+++ b/src/routes/Chain/ChainState/StorageItems.tsx
@@ -46,46 +46,47 @@ export const StorageItems = () => {
       nameA < nameB ? -1 : nameA > nameB ? 1 : 0
     );
 
-    const result: PalletData = {
+    // Formatted storage and pallet data.
+    const storageData: PalletData = {
       pallets,
       activePallet,
       items,
     };
 
-    return { storageData: result, scraper };
+    return { storageData, scraper };
   }, [chainUi.pallet, Metadata?.metadata]);
 
   const { storageData, scraper: listScraper } = scrapedStorageList;
   const { pallets, activePallet, items } = storageData;
 
-  // If no storage item selected, select the first one from the list or fall back to null.
+  // Get the active storage item. If no storage item selected, select the first one from the list or
+  // fall back to null.
   const activeItem = chainUi.selected || items?.[0]?.name || null;
 
-  // Get the whole active storage item record from metadata for input formatting.
+  // Get the whole active storage item record from metadata for input arg formatting.
   const scraperResult = useMemo(() => {
     if (!activePallet || !activeItem) {
-      return null;
+      return { scrapedItem: null, scraper: null };
     }
 
     const scraper = new PalletScraper(Metadata, { maxDepth: '*' });
-    const result = scraper.getStorageItem(activePallet, activeItem);
+    const scrapedItem = scraper.getStorageItem(activePallet, activeItem);
 
-    return { scrapedItem: result, scraper };
-  }, [items, activeItem, activePallet]);
+    return { scrapedItem, scraper };
+  }, [activeItem, activePallet]);
 
-  // Get scrape result.
-  const scrapedItem = scraperResult?.scrapedItem || null;
-  const itemScraper = scraperResult?.scraper || null;
+  const { scrapedItem, scraper: itemScraper } = scraperResult;
 
-  // Handle storage item query submission.
+  // Handle storage item query submission. This function is called after input arg formatting is
+  // completed. No further formatting is required by this function. Exits early if active items or
+  // value are not set.
   const onSubmit = (args: AnyJson) => {
-    const value = chainUi.selected;
-    if (!activePallet || !activeItem || !value || !value.length) {
+    if (!activePallet || !activeItem) {
       return;
     }
 
     const chainState = ChainStateController.instances[instanceId];
-    chainState.subscribe(`${value}`, {
+    chainState.subscribe(`${activeItem}`, {
       type: 'storage',
       namespace: camelize(activePallet),
       method: camelize(activeItem),
diff --git a/src/routes/Chain/Extrinsics/index.tsx b/src/routes/Chain/Extrinsics/index.tsx
index 29b73aee..abc82454 100644
--- a/src/routes/Chain/Extrinsics/index.tsx
+++ b/src/routes/Chain/Extrinsics/index.tsx
@@ -27,6 +27,11 @@ export const Extrinsics = () => {
   const { getChainUi, setChainUiNamespace } = useChainUi();
   const { getFromAddress, setFromAddress } = useChainState();
 
+  const chainUiSection = 'calls';
+  const chainUi = getChainUi(tabId, chainUiSection);
+  const Metadata = chainSpec.metadata;
+
+  // Get accounts for sender address input.
   const accounts = chainSpec
     ? getAccounts(chainSpec.version.specName, chainSpec.ss58Prefix)
     : [];
@@ -34,15 +39,9 @@ export const Extrinsics = () => {
   // Get the sender address.
   const fromAddress = getFromAddress(tabId) || '';
 
-  const chainUiSection = 'calls';
-  const chainUi = getChainUi(tabId, chainUiSection);
-  const Metadata = chainSpec.metadata;
-
   // Fetch storage data when metadata or the selected pallet changes.
   const callData = useMemo((): PalletData => {
-    const scraper = new PalletScraper(Metadata, {
-      maxDepth: 7,
-    });
+    const scraper = new PalletScraper(Metadata, { maxDepth: 7 });
     const pallets = scraper.getPalletList(['calls']);
 
     // If no pallet selected, get first one from scraper or fall back to null.
@@ -56,14 +55,13 @@ export const Extrinsics = () => {
       nameA < nameB ? -1 : nameA > nameB ? 1 : 0
     );
 
-    const result: PalletData = {
+    // Return formatted call and pallet data.
+    return {
       pallets,
       activePallet,
       items,
     };
-
-    return result;
-  }, [chainUi.pallet, chainUi.selected, Metadata?.metadata]);
+  }, [chainUi.pallet, Metadata?.metadata]);
 
   const { pallets, activePallet, items } = callData;
 
@@ -75,11 +73,11 @@ export const Extrinsics = () => {
     if (!activePallet || !activeItem) {
       return null;
     }
-    // NOTE: Currently limiting scraper to 7 recursive levels to improve performance.
-    const scraper = new PalletScraper(Metadata, { maxDepth: 7 });
-    const result = scraper.getCallItem(activePallet, activeItem);
 
-    return { scrapedItem: result, scraper };
+    const scraper = new PalletScraper(Metadata, { maxDepth: '*' });
+    const scrapedItem = scraper.getCallItem(activePallet, activeItem);
+
+    return { scrapedItem, scraper };
   }, [items, activeItem, activePallet]);
 
   // Get scrape result.