feat: enable uploading rawMetadata to the extension (#10780)

* first commit

* test commit

* removed old logging

* more cleanup

* disabled update metadata button until metadata is available

* removed logs

* dedupe

* updated metadata warning

* allow rawMetadata to be falsy on _updateMeta

packages/page-accounts/src/Accounts/BannerExtension.tsx

@@ -42,8 +42,8 @@ function BannerExtension (): React.ReactElement | null {
         <Banner type='warning'>
           <p>
             {upgradableCount === 1
-              ? t('You have 1 extension that needs to be updated with the latest chain properties in order to display the correct information for the chain you are connected to.')
-              : t('You have {{upgradableCount}} extensions that need to be updated with the latest chain properties in order to display the correct information for the chain you are connected to.', { replace: { upgradableCount } })
+              ? t('You have 1 extension that needs to be updated with the latest chain properties in order to display the correct information for the chain you are connected to and to use a Ledger device.')
+              : t('You have {{upgradableCount}} extensions that need to be updated with the latest chain properties in order to display the correct information for the chain you are connected to and to use a Ledger device.', { replace: { upgradableCount } })
             }
             {t(' This update includes chain metadata and chain properties.')}
           </p>

packages/page-settings/src/Metadata/Extensions.tsx

@@ -1,14 +1,17 @@
 // 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, useMemo, useRef, useState } from 'react';
+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';
@@ -17,13 +20,22 @@ import iconOption from './iconOption.js';
 interface Props {
   chainInfo: ChainInfo | null;
   className?: string;
+  rawMetadata: HexString | null;
 }
 
-function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props> {
+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();
+  const [isBusy, toggleBusy] = useToggle(true);
+
+  useEffect((): void => {
+    if (isMetadataReady) {
+      toggleBusy();
+    }
+  }, [isMetadataReady, toggleBusy]);
 
   const options = useMemo(
     () => (extensions || []).map(({ extension: { name, version } }, value) =>
@@ -37,14 +49,16 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
       if (chainInfo && extensions?.[selectedIndex]) {
         toggleBusy();
 
+        const rawDef: MetadataDef = objectSpread<MetadataDef>({}, { ...chainInfo, rawMetadata });
+
         extensions[selectedIndex]
-          .update(chainInfo)
+          .update(rawDef)
           .catch(() => false)
           .then(() => toggleBusy())
           .catch(console.error);
       }
     },
-    [chainInfo, extensions, selectedIndex, toggleBusy]
+    [chainInfo, extensions, rawMetadata, selectedIndex, toggleBusy]
   );
 
   const headerRef = useRef<[React.ReactNode?, string?, number?][]>([

packages/page-settings/src/Metadata/index.tsx

@@ -6,17 +6,22 @@ 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} />
+        <Extensions
+          chainInfo={chainInfo}
+          rawMetadata={rawMetadata}
+        />
       )}
       <NetworkSpecs chainInfo={chainInfo} />
     </>

packages/page-settings/src/useRawMetadata.ts

@@ -0,0 +1,30 @@
+// Copyright 2017-2024 @polkadot/app-settings authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// import type { RawMetadataDef } from '@polkadot/extension-inject/types';
+import type { HexString } from '@polkadot/util/types';
+
+import { useEffect, useState } from 'react';
+
+import { createNamedHook, useApi } from '@polkadot/react-hooks';
+
+function useRawMetadataImpl (): HexString | null {
+  const { api, isApiReady } = useApi();
+  const [state, setState] = useState<HexString | null>(null);
+
+  useEffect(
+    (): void => {
+      isApiReady &&
+        api.call.metadata.metadataAtVersion(15).then((opaque) => {
+          const raw = opaque.toHex();
+
+          setState(raw);
+        }).catch(console.error);
+    },
+    [api, isApiReady]
+  );
+
+  return state;
+}
+
+export default createNamedHook('useRawMetadata', useRawMetadataImpl);