Enable explorer link on custom RPC (MystenLabs#7617)

Author: Jibz1

apps/wallet/src/ui/app/components/explorer-link/Explorer.ts

@@ -12,30 +12,47 @@ const API_ENV_TO_EXPLORER_ENV: Record<API_ENV, string | undefined> = {
     [API_ENV.customRPC]: '',
 };
 
-function getExplorerUrl(path: string, apiEnv: API_ENV = DEFAULT_API_ENV) {
+//TODO - this is a temporary solution, we should have a better way to get the explorer url
+function getExplorerUrl(
+    path: string,
+    apiEnv: API_ENV = DEFAULT_API_ENV,
+    customRPC: string
+) {
     const base =
         apiEnv === API_ENV.local
             ? 'http://localhost:3000/'
             : 'https://explorer.sui.io/';
 
-    return new URL(`${path}/?network=${API_ENV_TO_EXPLORER_ENV[apiEnv]}`, base)
-        .href;
+    const explorerEnv =
+        apiEnv === 'customRPC' ? customRPC : API_ENV_TO_EXPLORER_ENV[apiEnv];
+
+    return new URL(`${path}/?network=${explorerEnv}`, base).href;
 }
 
-export function getObjectUrl(objectID: ObjectId, apiEnv: API_ENV) {
-    return getExplorerUrl(`/object/${objectID}`, apiEnv);
+export function getObjectUrl(
+    objectID: ObjectId,
+    apiEnv: API_ENV,
+    customRPC: string
+) {
+    return getExplorerUrl(`/object/${objectID}`, apiEnv, customRPC);
 }
 
 export function getTransactionUrl(
     txDigest: TransactionDigest,
-    apiEnv: API_ENV
+    apiEnv: API_ENV,
+    customRPC: string
 ) {
     return getExplorerUrl(
         `/transaction/${encodeURIComponent(txDigest)}`,
-        apiEnv
+        apiEnv,
+        customRPC
     );
 }
 
-export function getAddressUrl(address: SuiAddress, apiEnv: API_ENV) {
-    return getExplorerUrl(`/address/${address}`, apiEnv);
+export function getAddressUrl(
+    address: SuiAddress,
+    apiEnv: API_ENV,
+    customRPC: string
+) {
+    return getExplorerUrl(`/address/${address}`, apiEnv, customRPC);
 }

apps/wallet/src/ui/app/components/explorer-link/index.tsx

@@ -5,7 +5,6 @@ import { memo, useCallback, useMemo } from 'react';
 
 import { getObjectUrl, getAddressUrl, getTransactionUrl } from './Explorer';
 import { ExplorerLinkType } from './ExplorerLinkType';
-import { API_ENV } from '_app/ApiProvider';
 import ExternalLink from '_components/external-link';
 import Icon, { SuiIcons } from '_components/icon';
 import { useAppSelector } from '_hooks';
@@ -48,34 +47,40 @@ function useAddress(props: ExplorerLinkProps) {
 function ExplorerLink(props: ExplorerLinkProps) {
     const { type, children, className, title, showIcon = true } = props;
     const address = useAddress(props);
-    const selectedApiEnv = useAppSelector(({ app }) => app.apiEnv);
-    const notCustomRPC = selectedApiEnv !== API_ENV.customRPC;
+    const [selectedApiEnv, customRPC] = useAppSelector(({ app }) => [
+        app.apiEnv,
+        app.customRPC,
+    ]);
 
     const objectID = type === ExplorerLinkType.object ? props.objectID : null;
     const transactionID =
         type === ExplorerLinkType.transaction ? props.transactionID : null;
+
+    // fallback to localhost if customRPC is not set
+    const customRPCUrl = customRPC || 'http://localhost:3000/';
     const explorerHref = useMemo(() => {
         switch (type) {
             case ExplorerLinkType.address:
                 return (
                     address &&
-                    notCustomRPC &&
-                    getAddressUrl(address, selectedApiEnv)
+                    getAddressUrl(address, selectedApiEnv, customRPCUrl)
                 );
             case ExplorerLinkType.object:
                 return (
                     objectID &&
-                    notCustomRPC &&
-                    getObjectUrl(objectID, selectedApiEnv)
+                    getObjectUrl(objectID, selectedApiEnv, customRPCUrl)
                 );
             case ExplorerLinkType.transaction:
                 return (
                     transactionID &&
-                    notCustomRPC &&
-                    getTransactionUrl(transactionID, selectedApiEnv)
+                    getTransactionUrl(
+                        transactionID,
+                        selectedApiEnv,
+                        customRPCUrl
+                    )
                 );
         }
-    }, [type, address, notCustomRPC, selectedApiEnv, objectID, transactionID]);
+    }, [type, address, selectedApiEnv, objectID, transactionID, customRPCUrl]);
 
     const handleclick = useCallback(() => {
         if (props.track) {
@@ -86,9 +91,7 @@ function ExplorerLink(props: ExplorerLinkProps) {
     if (!explorerHref) {
         return null;
     }
-    if (selectedApiEnv === API_ENV.customRPC) {
-        return null;
-    }
+
     return (
         <ExternalLink
             href={explorerHref}