From db45a032edca71a56d5857a151d5f955ca232b4d Mon Sep 17 00:00:00 2001
From: bee344 <alberto.penayo@parity.io>
Date: Tue, 13 Aug 2024 18:23:00 -0300
Subject: [PATCH 1/3] changed extension metadata update to work on
 initialization

---
 packages/apps/src/Content/index.tsx           |  27 ++++-
 .../page-settings/src/Metadata/Extensions.tsx | 114 ------------------
 packages/page-settings/src/Metadata/index.tsx |  12 --
 packages/page-settings/src/index.tsx          |   4 +-
 4 files changed, 27 insertions(+), 130 deletions(-)
 delete mode 100644 packages/page-settings/src/Metadata/Extensions.tsx

diff --git a/packages/apps/src/Content/index.tsx b/packages/apps/src/Content/index.tsx
index e0cfbfea8822..8bc761ae1075 100644
--- a/packages/apps/src/Content/index.tsx
+++ b/packages/apps/src/Content/index.tsx
@@ -2,15 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Route } from '@polkadot/apps-routing/types';
+import type { MetadataDef } from '@polkadot/extension-inject/types';
 
-import React, { Suspense, useMemo } from 'react';
+import React, { Suspense, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import createRoutes from '@polkadot/apps-routing';
 import { ErrorBoundary, Spinner, styled } from '@polkadot/react-components';
 import { useApi, useQueue } from '@polkadot/react-hooks';
 import { TabsCtx } from '@polkadot/react-hooks/ctx/Tabs';
+import { objectSpread } from '@polkadot/util';
 
+import useChainInfo from '../../../page-settings/src/useChainInfo.js';
+import useExtensions from '../../../page-settings/src/useExtensions.js';
+import useRawMetadata from '../../../page-settings/src/useRawMetadata.js';
 import { findMissingApis } from '../endpoint.js';
 import { useTranslation } from '../translate.js';
 import NotFound from './NotFound.js';
@@ -35,6 +40,12 @@ function Content ({ className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api, isApiConnected, isApiReady, isDevelopment } = useApi();
   const { queueAction } = useQueue();
+  const rawMetadata = useRawMetadata();
+  const chainInfo = useChainInfo();
+  const isMetadataReady = rawMetadata !== null;
+  const [updating, setUpdating] = useState(false);
+
+  const { extensions } = useExtensions();
 
   const { Component, display: { needsApi, needsApiCheck, needsApiInstances }, icon, name, text } = useMemo(
     (): Route => {
@@ -58,6 +69,20 @@ function Content ({ className }: Props): React.ReactElement<Props> {
     [api, isApiConnected, isApiReady, needsApi, needsApiCheck, needsApiInstances]
   );
 
+  useEffect((): void => {
+    if (chainInfo && isMetadataReady && !isDevelopment && !updating) {
+      const rawDef: MetadataDef = objectSpread<MetadataDef>({}, { ...chainInfo, rawMetadata });
+
+      extensions.forEach((extension) => {
+        extension.update(rawDef)
+          .catch(console.error);
+      });
+      setUpdating(true);
+    }
+  },
+  [chainInfo, isDevelopment, isMetadataReady, extensions, rawMetadata, updating]
+  );
+
   return (
     <StyledDiv className={className}>
       {!missingApis
diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
deleted file mode 100644
index d96b474bdc08..000000000000
--- a/packages/page-settings/src/Metadata/Extensions.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-// Copyright 2017-2024 @polkadot/app-settings authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { MetadataDef } from '@polkadot/extension-inject/types';
-import type { HexString } from '@polkadot/util/types';
-import type { ChainInfo } from '../types.js';
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { knownExtensions } from '@polkadot/apps-config';
-import { externalEmptySVG } from '@polkadot/apps-config/ui/logos/external';
-import { Button, Dropdown, Spinner, styled, Table } from '@polkadot/react-components';
-import { useToggle } from '@polkadot/react-hooks';
-import { objectSpread } from '@polkadot/util';
-
-import { useTranslation } from '../translate.js';
-import useExtensions from '../useExtensions.js';
-import iconOption from './iconOption.js';
-
-interface Props {
-  chainInfo: ChainInfo | null;
-  className?: string;
-  rawMetadata: HexString | null;
-}
-
-function Extensions ({ chainInfo, className, rawMetadata }: Props): React.ReactElement<Props> {
-  const isMetadataReady = rawMetadata !== null;
-
-  const { t } = useTranslation();
-  const { extensions } = useExtensions();
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [isBusy, toggleBusy] = useToggle(true);
-
-  useEffect((): void => {
-    if (isMetadataReady) {
-      toggleBusy();
-    }
-  }, [isMetadataReady, toggleBusy]);
-
-  const options = useMemo(
-    () => (extensions || []).map(({ extension: { name, version } }, value) =>
-      iconOption(`${name} ${version}`, value, knownExtensions[name]?.ui.logo || externalEmptySVG)
-    ),
-    [extensions]
-  );
-
-  const _updateMeta = useCallback(
-    (): void => {
-      if (chainInfo && extensions?.[selectedIndex]) {
-        toggleBusy();
-
-        const rawDef: MetadataDef = objectSpread<MetadataDef>({}, { ...chainInfo, rawMetadata });
-
-        extensions[selectedIndex]
-          .update(rawDef)
-          .catch(() => false)
-          .then(() => toggleBusy())
-          .catch(console.error);
-      }
-    },
-    [chainInfo, extensions, rawMetadata, selectedIndex, toggleBusy]
-  );
-
-  const headerRef = useRef<[React.ReactNode?, string?, number?][]>([
-    [t('Extensions'), 'start']
-  ]);
-
-  return (
-    <StyledTable
-      className={className}
-      empty={t('No Upgradable extensions')}
-      header={headerRef.current}
-    >
-      {extensions
-        ? options.length !== 0 && (
-          <>
-            <tr className='isExpanded isFirst'>
-              <td>
-                <Dropdown
-                  label={t('upgradable extensions')}
-                  onChange={setSelectedIndex}
-                  options={options}
-                  value={selectedIndex}
-                />
-              </td>
-            </tr>
-            <tr className='isExpanded isLast'>
-              <td>
-                <Button.Group>
-                  <Button
-                    icon='upload'
-                    isDisabled={isBusy}
-                    label={t('Update metadata')}
-                    onClick={_updateMeta}
-                  />
-                </Button.Group>
-              </td>
-            </tr>
-          </>
-        )
-        : <Spinner />
-      }
-    </StyledTable>
-  );
-}
-
-const StyledTable = styled(Table)`
-  table {
-    overflow: visible;
-    z-index: 2;
-  }
-`;
-
-export default React.memo(Extensions);
diff --git a/packages/page-settings/src/Metadata/index.tsx b/packages/page-settings/src/Metadata/index.tsx
index db7602dfbea0..8cfea823822b 100644
--- a/packages/page-settings/src/Metadata/index.tsx
+++ b/packages/page-settings/src/Metadata/index.tsx
@@ -3,26 +3,14 @@
 
 import React from 'react';
 
-import { useApi } from '@polkadot/react-hooks';
-
 import useChainInfo from '../useChainInfo.js';
-import useRawMetadata from '../useRawMetadata.js';
-import Extensions from './Extensions.js';
 import NetworkSpecs from './NetworkSpecs.js';
 
 export default function Metadata (): React.ReactElement {
-  const { isDevelopment } = useApi();
-  const rawMetadata = useRawMetadata();
   const chainInfo = useChainInfo();
 
   return (
     <>
-      {!isDevelopment && (
-        <Extensions
-          chainInfo={chainInfo}
-          rawMetadata={rawMetadata}
-        />
-      )}
       <NetworkSpecs chainInfo={chainInfo} />
     </>
   );
diff --git a/packages/page-settings/src/index.tsx b/packages/page-settings/src/index.tsx
index dfbb9a8787df..d2abbfca7473 100644
--- a/packages/page-settings/src/index.tsx
+++ b/packages/page-settings/src/index.tsx
@@ -21,7 +21,6 @@ export { useCounter };
 function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api, isApiConnected, isApiReady, isDevelopment } = useApi();
-  const numExtensions = useCounter();
 
   const items = useMemo(() => [
     {
@@ -30,7 +29,6 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
       text: t('General')
     },
     {
-      count: numExtensions,
       name: 'metadata',
       text: t('Metadata')
     },
@@ -42,7 +40,7 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
       name: 'i18n',
       text: t('Translate')
     }
-  ], [numExtensions, t]);
+  ], [t]);
 
   const hidden = useMemo(
     () => (isApiConnected && isApiReady)

From 4cca30e328a1c1800170b4369940c35e2b9aa65b Mon Sep 17 00:00:00 2001
From: bee344 <alberto.penayo@parity.io>
Date: Mon, 26 Aug 2024 09:37:33 -0300
Subject: [PATCH 2/3] restored metadata field in settings page

---
 .../page-settings/src/Metadata/Extensions.tsx | 114 ++++++++++++++++++
 packages/page-settings/src/Metadata/index.tsx |  12 ++
 2 files changed, 126 insertions(+)
 create mode 100644 packages/page-settings/src/Metadata/Extensions.tsx

diff --git a/packages/page-settings/src/Metadata/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
new file mode 100644
index 000000000000..d96b474bdc08
--- /dev/null
+++ b/packages/page-settings/src/Metadata/Extensions.tsx
@@ -0,0 +1,114 @@
+// Copyright 2017-2024 @polkadot/app-settings authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { MetadataDef } from '@polkadot/extension-inject/types';
+import type { HexString } from '@polkadot/util/types';
+import type { ChainInfo } from '../types.js';
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { knownExtensions } from '@polkadot/apps-config';
+import { externalEmptySVG } from '@polkadot/apps-config/ui/logos/external';
+import { Button, Dropdown, Spinner, styled, Table } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
+import { objectSpread } from '@polkadot/util';
+
+import { useTranslation } from '../translate.js';
+import useExtensions from '../useExtensions.js';
+import iconOption from './iconOption.js';
+
+interface Props {
+  chainInfo: ChainInfo | null;
+  className?: string;
+  rawMetadata: HexString | null;
+}
+
+function Extensions ({ chainInfo, className, rawMetadata }: Props): React.ReactElement<Props> {
+  const isMetadataReady = rawMetadata !== null;
+
+  const { t } = useTranslation();
+  const { extensions } = useExtensions();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isBusy, toggleBusy] = useToggle(true);
+
+  useEffect((): void => {
+    if (isMetadataReady) {
+      toggleBusy();
+    }
+  }, [isMetadataReady, toggleBusy]);
+
+  const options = useMemo(
+    () => (extensions || []).map(({ extension: { name, version } }, value) =>
+      iconOption(`${name} ${version}`, value, knownExtensions[name]?.ui.logo || externalEmptySVG)
+    ),
+    [extensions]
+  );
+
+  const _updateMeta = useCallback(
+    (): void => {
+      if (chainInfo && extensions?.[selectedIndex]) {
+        toggleBusy();
+
+        const rawDef: MetadataDef = objectSpread<MetadataDef>({}, { ...chainInfo, rawMetadata });
+
+        extensions[selectedIndex]
+          .update(rawDef)
+          .catch(() => false)
+          .then(() => toggleBusy())
+          .catch(console.error);
+      }
+    },
+    [chainInfo, extensions, rawMetadata, selectedIndex, toggleBusy]
+  );
+
+  const headerRef = useRef<[React.ReactNode?, string?, number?][]>([
+    [t('Extensions'), 'start']
+  ]);
+
+  return (
+    <StyledTable
+      className={className}
+      empty={t('No Upgradable extensions')}
+      header={headerRef.current}
+    >
+      {extensions
+        ? options.length !== 0 && (
+          <>
+            <tr className='isExpanded isFirst'>
+              <td>
+                <Dropdown
+                  label={t('upgradable extensions')}
+                  onChange={setSelectedIndex}
+                  options={options}
+                  value={selectedIndex}
+                />
+              </td>
+            </tr>
+            <tr className='isExpanded isLast'>
+              <td>
+                <Button.Group>
+                  <Button
+                    icon='upload'
+                    isDisabled={isBusy}
+                    label={t('Update metadata')}
+                    onClick={_updateMeta}
+                  />
+                </Button.Group>
+              </td>
+            </tr>
+          </>
+        )
+        : <Spinner />
+      }
+    </StyledTable>
+  );
+}
+
+const StyledTable = styled(Table)`
+  table {
+    overflow: visible;
+    z-index: 2;
+  }
+`;
+
+export default React.memo(Extensions);
diff --git a/packages/page-settings/src/Metadata/index.tsx b/packages/page-settings/src/Metadata/index.tsx
index 8cfea823822b..f6fee1378647 100644
--- a/packages/page-settings/src/Metadata/index.tsx
+++ b/packages/page-settings/src/Metadata/index.tsx
@@ -3,14 +3,26 @@
 
 import React from 'react';
 
+import { useApi } from '@polkadot/react-hooks';
+
 import useChainInfo from '../useChainInfo.js';
+import useRawMetadata from '../useRawMetadata.js';
+import Extensions from './Extensions.js';
 import NetworkSpecs from './NetworkSpecs.js';
 
 export default function Metadata (): React.ReactElement {
   const chainInfo = useChainInfo();
+  const { isDevelopment } = useApi();
+  const rawMetadata = useRawMetadata();
 
   return (
     <>
+      {!isDevelopment && (
+        <Extensions
+          chainInfo={chainInfo}
+          rawMetadata={rawMetadata}
+        />
+      )}
       <NetworkSpecs chainInfo={chainInfo} />
     </>
   );

From 916be28a90ef0bab979abae4e1603bac6a7b6a03 Mon Sep 17 00:00:00 2001
From: bee344 <alberto.penayo@parity.io>
Date: Mon, 26 Aug 2024 12:50:07 -0300
Subject: [PATCH 3/3] readded extension counter

---
 packages/page-settings/src/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/page-settings/src/index.tsx b/packages/page-settings/src/index.tsx
index d2abbfca7473..dfbb9a8787df 100644
--- a/packages/page-settings/src/index.tsx
+++ b/packages/page-settings/src/index.tsx
@@ -21,6 +21,7 @@ export { useCounter };
 function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api, isApiConnected, isApiReady, isDevelopment } = useApi();
+  const numExtensions = useCounter();
 
   const items = useMemo(() => [
     {
@@ -29,6 +30,7 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
       text: t('General')
     },
     {
+      count: numExtensions,
       name: 'metadata',
       text: t('Metadata')
     },
@@ -40,7 +42,7 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
       name: 'i18n',
       text: t('Translate')
     }
-  ], [t]);
+  ], [numExtensions, t]);
 
   const hidden = useMemo(
     () => (isApiConnected && isApiReady)