support wallet extensions

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

@@ -5,8 +5,9 @@ import type { NetworkSpecsStruct } from '@polkadot/ui-settings/types';
 import type { ChainInfo, ChainType } from '../types.js';
 
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import store from 'store';
 
-import { ChainImg, Input, QrNetworkSpecs, Spinner, styled, Table } from '@polkadot/react-components';
+import { Button, ChainImg, Input, QrNetworkSpecs, Spinner, styled, Table } from '@polkadot/react-components';
 import { useApi, useDebounce } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate.js';
@@ -18,7 +19,7 @@ interface Props {
 }
 
 // TODO-MOONBEAM: update NetworkSpecsStruct in @polkadot/ui-settings/types
-interface NetworkSpecsStructWithType extends NetworkSpecsStruct{
+interface NetworkSpecsStructWithType extends NetworkSpecsStruct {
   chainType: ChainType
 }
 
@@ -61,17 +62,21 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
   };
 
   const [networkSpecs, setNetworkSpecs] = useReducer(reducer, initialState);
+  const [userExtensions, setUserExtensions] = useState<string[] | undefined>();
 
   useEffect((): void => {
-    chainInfo && setNetworkSpecs({
-      chainType: chainInfo.chainType,
-      color: chainInfo.color || getRandomColor(),
-      decimals: chainInfo.tokenDecimals,
-      genesisHash: chainInfo.genesisHash,
-      prefix: chainInfo.ss58Format,
-      title: systemChain,
-      unit: chainInfo.tokenSymbol
-    });
+    if (chainInfo) {
+      setNetworkSpecs({
+        chainType: chainInfo.chainType,
+        color: chainInfo.color || getRandomColor(),
+        decimals: chainInfo.tokenDecimals,
+        genesisHash: chainInfo.genesisHash,
+        prefix: chainInfo.ss58Format,
+        title: systemChain,
+        unit: chainInfo.tokenSymbol
+      });
+      setUserExtensions(chainInfo.userExtensions ? Object.keys(chainInfo.userExtensions) : undefined);
+    }
   }, [chainInfo, systemChain]);
 
   const _onChangeColor = useCallback(
@@ -93,6 +98,14 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
     [networkSpecs]
   );
 
+  const _onClearStore = useCallback(
+    (): void => {
+      store.clearAll();
+      console.log('Store cleared');
+    },
+    []
+  );
+
   const headerRef = useRef<[React.ReactNode?, string?, number?][]>([
     [t<string>('chain specifications'), 'start', 2]
   ]);
@@ -120,7 +133,7 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
             <ChainImg className='settings--networkSpecs-logo' />
           </div>
         </td>
-        <td rowSpan={7}>
+        <td rowSpan={9}>
           {qrData.genesisHash && (
             <QrNetworkSpecs
               className='settings--networkSpecs-qr'
@@ -205,6 +218,27 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
           />
         </td>
       </tr>
+      <tr>
+        <td>
+          <Input
+            className='full'
+            isDisabled
+            label={t<string>('User extensions')}
+            value={userExtensions && userExtensions.length > 0 ? userExtensions.join(', ') : 'No signed / user extensions found'}
+          />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <Button.Group>
+            <Button
+              icon='trash'
+              label={t<string>('Reset extensions store')}
+              onClick={_onClearStore}
+            />
+          </Button.Group>
+        </td>
+      </tr>
     </StyledTable>
   );
 }

packages/page-settings/src/useChainInfo.ts

@@ -8,7 +8,7 @@ import { useMemo } from 'react';
 import { getSystemIcon } from '@polkadot/apps-config';
 import { DEFAULT_DECIMALS, DEFAULT_SS58 } from '@polkadot/react-api';
 import { createNamedHook, useApi } from '@polkadot/react-hooks';
-import { getSpecTypes } from '@polkadot/types-known';
+import { getSpecExtensions, getSpecTypes } from '@polkadot/types-known';
 import { formatBalance, isNumber } from '@polkadot/util';
 import { base64Encode } from '@polkadot/util-crypto';
 
@@ -32,7 +32,8 @@ function useChainInfoImpl (): ChainInfo | null {
           : DEFAULT_SS58.toNumber(),
         tokenDecimals: (api.registry.chainDecimals || [DEFAULT_DECIMALS.toNumber()])[0],
         tokenSymbol: (api.registry.chainTokens || formatBalance.getDefaults().unit)[0],
-        types: getSpecTypes(api.registry, systemChain, api.runtimeVersion.specName, api.runtimeVersion.specVersion) as unknown as Record<string, string>
+        types: getSpecTypes(api.registry, systemChain, api.runtimeVersion.specName, api.runtimeVersion.specVersion) as unknown as Record<string, string>,
+        userExtensions: getSpecExtensions(api.registry, systemChain, api.runtimeVersion.specName)
       }
       : null,
     [api, apiEndpoint, isApiReady, specName, systemChain, systemName, isEthereum]

packages/page-settings/src/useExtensions.ts

@@ -29,6 +29,7 @@ interface ExtensionProperties {
   tokenDecimals: number;
   tokenSymbol: string;
   ss58Format?: number;
+  userExtensionsLoaded?: boolean
 }
 
 interface SavedProperties {
@@ -45,15 +46,16 @@ function triggerAll (): void {
 }
 
 // save the properties for a specific extension
-function saveProperties (api: ApiPromise, { name, version }: InjectedExtension): void {
+function saveProperties (api: ApiPromise, { name, version }: InjectedExtension, hasLoadedUserExtensions: boolean): void {
   const storeKey = `properties:${api.genesisHash.toHex()}`;
   const allProperties = store.get(storeKey, {}) as SavedProperties;
 
   allProperties[name] = {
     extensionVersion: version,
     ss58Format: api.registry.chainSS58,
     tokenDecimals: api.registry.chainDecimals[0],
-    tokenSymbol: api.registry.chainTokens[0]
+    tokenSymbol: api.registry.chainTokens[0],
+    userExtensionsLoaded: hasLoadedUserExtensions
   };
 
   store.set(storeKey, allProperties);
@@ -65,16 +67,17 @@ function hasCurrentProperties (api: ApiPromise, { extension }: ExtensionKnown):
 
   // when we don't have properties yet, assume nothing has changed and store
   if (!allProperties[extension.name]) {
-    saveProperties(api, extension);
+    saveProperties(api, extension, false);
 
     return true;
   }
 
-  const { ss58Format, tokenDecimals, tokenSymbol } = allProperties[extension.name];
+  const { ss58Format, tokenDecimals, tokenSymbol, userExtensionsLoaded } = allProperties[extension.name];
 
   return ss58Format === api.registry.chainSS58 &&
     tokenDecimals === api.registry.chainDecimals[0] &&
-    tokenSymbol === api.registry.chainTokens[0];
+    tokenSymbol === api.registry.chainTokens[0] &&
+    (tokenSymbol !== 'AVL' || Boolean(userExtensionsLoaded));
 }
 
 // filter extensions based on the properties we have available
@@ -113,9 +116,10 @@ async function getExtensionInfo (api: ApiPromise, extension: InjectedExtension):
 
         try {
           isOk = await metadata.provide(def);
+          const hasLoadedUserExtensions = !!def.userExtensions;
 
           if (isOk) {
-            saveProperties(api, extension);
+            saveProperties(api, extension, hasLoadedUserExtensions);
             triggerAll();
           }
         } catch {