Display secure finality data

packages/apps/public/locales/en/app-explorer.json

@@ -37,6 +37,7 @@
   "extrinsic count": "extrinsic count",
   "extrinsics": "extrinsics",
   "extrinsics (last {{n}} blocks)": "extrinsics (last {{n}} blocks)",
+  "fast finality": "fast finality",
   "finalized": "finalized",
   "forks": "forks",
   "hash": "hash",
@@ -66,6 +67,7 @@
   "refresh in": "refresh in",
   "requests": "requests",
   "requests made": "requests made",
+  "secure finality": "secure finality",
   "sent": "sent",
   "session": "session",
   "state": "state",

packages/apps/public/locales/en/translation.json

@@ -1432,6 +1432,7 @@
   "extrinsic hash": "",
   "extrinsics": "",
   "extrinsics (last {{n}} blocks)": "",
+  "fast finality": "",
   "file cid": "",
   "file content error": "",
   "file error": "",
@@ -1742,6 +1743,7 @@
   "seats": "",
   "secret": "",
   "secret derivation path": "",
+  "secure finality": "",
   "seed (hex or string)": "",
   "select curator": "",
   "selected constant query": "",

packages/page-explorer/src/Summary.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { CardSummary, SummaryBox } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
-import { BestFinalized, BestNumber, BlockToTime, TimeNow, TotalInactive, TotalIssuance } from '@polkadot/react-query';
+import { BestFinalized, BestNumber, BlockToTime, SecureFinalized, TimeNow, TotalInactive, TotalIssuance } from '@polkadot/react-query';
 import { BN_ONE, formatNumber } from '@polkadot/util';
 
 import SummarySession from './SummarySession.js';
@@ -64,8 +64,13 @@ function Summary ({ eventCount }: Props): React.ReactElement {
         >
           {formatNumber(eventCount)}
         </CardSummary>
+        {api.query.spinAnchoring && (
+          <CardSummary label={t('secure finality')}>
+            <SecureFinalized />
+          </CardSummary>
+        )}
         {api.query.grandpa && (
-          <CardSummary label={t('finalized')}>
+          <CardSummary label={t('fast finality')}>
             <BestFinalized />
           </CardSummary>
         )}

packages/react-query/src/SecureFinalized.tsx

@@ -0,0 +1,32 @@
+// Copyright 2017-2025 @polkadot/react-query authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Modified for QF Network
+
+import type { u32 } from '@polkadot/types';
+
+import React from 'react';
+
+import { useApi, useCall } from '@polkadot/react-hooks';
+import { formatNumber } from '@polkadot/util';
+
+interface Props {
+  children?: React.ReactNode;
+  className?: string;
+  label?: React.ReactNode;
+}
+
+function SecureFinalized ({ children, className = '', label }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const secureUpTo = useCall<u32>(api.query.spinAnchoring?.secureUpTo);
+
+  return (
+    <div className={`${className} ${secureUpTo ? '' : '--tmp'}`}>
+      {label || ''}{
+        <span className='--digits'>{formatNumber(secureUpTo || 0)}</span>
+      }{children}
+    </div>
+  );
+}
+
+export default React.memo(SecureFinalized);

packages/react-query/src/index.ts

@@ -16,6 +16,7 @@ export { default as NodeName } from './NodeName.js';
 export { default as NodeVersion } from './NodeVersion.js';
 export { default as Nonce } from './Nonce.js';
 export { default as PoolSize } from './PoolSize.js';
+export { default as SecureFinalized } from './SecureFinalized.js';
 export { default as SessionToTime } from './SessionToTime.js';
 export { default as TimeNow } from './TimeNow.js';
 export { default as TotalInactive } from './TotalInactive.js';