diff --git a/packages/page-settings/src/Extensions.tsx b/packages/page-settings/src/Extensions.tsx
index cf88ae0b0d20..d816b87e53bf 100644
--- a/packages/page-settings/src/Extensions.tsx
+++ b/packages/page-settings/src/Extensions.tsx
@@ -3,17 +3,16 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React, { useCallback, useMemo, useState } from 'react';
-import { getChainTypes } from '@polkadot/apps-config/api';
-import { getSystemIcon } from '@polkadot/apps-config/ui';
 import { Button, Dropdown } from '@polkadot/react-components';
-import { useApi, useToggle } from '@polkadot/react-hooks';
+import { useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from './translate';
+import useChainInfo from './useChainInfo';
 import useExtensions from './useExtensions';
 
 function Extensions (): React.ReactElement {
-  const { api, systemChain, systemName } = useApi();
   const { t } = useTranslation();
+  const metaDef = useChainInfo();
   const { extensions } = useExtensions();
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [isBusy, toggleBusy] = useToggle();
@@ -23,26 +22,16 @@ function Extensions (): React.ReactElement {
   );
   const _updateMeta = useCallback(
     (): void => {
-      if (extensions && extensions[selectedIndex]) {
+      if (metaDef && extensions?.[selectedIndex]) {
         toggleBusy();
 
         extensions[selectedIndex]
-          .update({
-            chain: systemChain,
-            genesisHash: api.genesisHash.toHex(),
-            icon: getSystemIcon(systemName),
-            metaCalls: Buffer.from(api.runtimeMetadata.asCallsOnly.toU8a()).toString('base64'),
-            specVersion: api.runtimeVersion.specVersion.toNumber(),
-            ss58Format: api.registry.chainSS58 || 42,
-            tokenDecimals: api.registry.chainDecimals || 12,
-            tokenSymbol: api.registry.chainToken || 'Unit',
-            types: getChainTypes(api.runtimeVersion.specName.toString(), systemChain)
-          })
+          .update(metaDef)
           .catch(() => false)
           .then(() => toggleBusy());
       }
     },
-    [api, extensions, selectedIndex, systemChain, systemName]
+    [extensions, metaDef, selectedIndex]
   );
 
   if (!options.length) {
diff --git a/packages/page-settings/src/useChainInfo.ts b/packages/page-settings/src/useChainInfo.ts
new file mode 100644
index 000000000000..162cfde25b0f
--- /dev/null
+++ b/packages/page-settings/src/useChainInfo.ts
@@ -0,0 +1,34 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+// Copyright 2017-2020 @polkadot/app-settings authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { MetadataDef } from '@polkadot/extension-inject/types';
+
+import { useEffect, useState } from 'react';
+import { getChainTypes } from '@polkadot/apps-config/api';
+import { getSystemIcon } from '@polkadot/apps-config/ui';
+import { useApi } from '@polkadot/react-hooks';
+
+interface ChainInfo extends MetadataDef {}
+
+export default function useChainInfo (): ChainInfo | null {
+  const { api, isApiReady, systemChain, systemName } = useApi();
+  const [state, setState] = useState<MetadataDef | null>(null);
+
+  useEffect((): void => {
+    isApiReady && setState({
+      chain: systemChain,
+      genesisHash: api.genesisHash.toHex(),
+      icon: getSystemIcon(systemName),
+      metaCalls: Buffer.from(api.runtimeMetadata.asCallsOnly.toU8a()).toString('base64'),
+      specVersion: api.runtimeVersion.specVersion.toNumber(),
+      ss58Format: api.registry.chainSS58 || 42,
+      tokenDecimals: api.registry.chainDecimals || 12,
+      tokenSymbol: api.registry.chainToken || 'Unit',
+      types: getChainTypes(api.runtimeVersion.specName.toString(), systemChain)
+    });
+  }, [api, isApiReady, systemChain, systemName]);
+
+  return state;
+}