Add Sui binary version to NetworkSelect

apps/core/src/hooks/useGetBinaryVersion.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useRpcClient } from '../api/RpcClientContext';
+import { useQuery } from '@tanstack/react-query';
+
+// Current API version is the same as the binary version
+export function useGetBinaryVersion() {
+    const rpc = useRpcClient();
+    return useQuery({
+        queryKey: ['binary-version'],
+        queryFn: () => rpc.getRpcApiVersion(),
+    });
+}

apps/core/src/index.ts

@@ -36,3 +36,4 @@ export * from './hooks/useGetCoinBalance';
 export * from './utils/hasDisplayData';
 export * from './hooks/useMultiGetObjects';
 export * from './utils/persistableStorage';
+export * from './hooks/useGetBinaryVersion';

apps/explorer/src/components/network/Network.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useGetSystemState } from '@mysten/core';
+import { useGetSystemState, useGetBinaryVersion } from '@mysten/core';
 import { useContext } from 'react';
 
 import { NetworkContext } from '../../context';
@@ -12,6 +12,7 @@ import { NetworkSelect, type NetworkOption } from '~/ui/header/NetworkSelect';
 export default function WrappedNetworkSelect() {
     const [network, setNetwork] = useContext(NetworkContext);
     const { data } = useGetSystemState();
+    const { data: binaryVersion } = useGetBinaryVersion();
 
     const networks = [
         { id: Network.MAINNET, label: 'Mainnet' },
@@ -26,6 +27,7 @@ export default function WrappedNetworkSelect() {
             onChange={setNetwork}
             networks={networks}
             version={data?.protocolVersion}
+            binaryVersion={binaryVersion}
         />
     );
 }

apps/explorer/src/ui/header/NetworkSelect.tsx

@@ -41,6 +41,7 @@ export interface NetworkSelectProps {
     networks: NetworkOption[];
     value: string;
     version?: number | string;
+    binaryVersion?: string;
     onChange(networkId: string): void;
 }
 
@@ -141,17 +142,19 @@ function CustomRPCInput({
 function NetworkVersion({
     label,
     version,
+    binaryVersion,
 }: {
     label: string;
     version: number | string;
+    binaryVersion: string;
 }) {
     return (
-        <div className="flex justify-between px-4 py-2">
+        <div className="flex flex-col justify-between px-4 py-2">
             <Text variant="subtitle/normal" color="steel">
                 Sui {label}
             </Text>
             <Text variant="subtitle/normal" color="steel">
-                v{version}
+                v{binaryVersion} (Protocol {version})
             </Text>
         </div>
     );
@@ -224,6 +227,7 @@ export function NetworkSelect({
     networks,
     value,
     version,
+    binaryVersion,
     onChange,
 }: NetworkSelectProps) {
     const { x, y, reference, floating, strategy } = useFloating({
@@ -282,13 +286,14 @@ export function NetworkSelect({
                                             close();
                                         }}
                                     />
-                                    {!!value && version ? (
+                                    {!!value && version && binaryVersion ? (
                                         <div className="-mx-3 -mb-4 mt-2 rounded-b-lg bg-gray-40">
                                             <NetworkVersion
                                                 label={
                                                     selected?.label ??
                                                     'Custom RPC'
                                                 }
+                                                binaryVersion={binaryVersion}
                                                 version={version}
                                             />
                                         </div>