update explorer link (MystenLabs#2882)

lykhangky · Jul 1, 2022 · bf930c0 · bf930c0
1 parent 20139ed
commit bf930c0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/wallet/src/ui/app/components/explorer-link/Explorer.ts b/wallet/src/ui/app/components/explorer-link/Explorer.ts
@@ -11,31 +11,31 @@ const API_ENV_TO_EXPLORER_URL: Record<API_ENV, string | undefined> = {
     [API_ENV.staging]: process.env.EXPLORER_URL_STAGING,
 };
 
-function getDefaultUrl() {
-    const url = API_ENV_TO_EXPLORER_URL[DEFAULT_API_ENV];
+// TODO: rewrite this
+function getDefaultUrl(apiEnv?: API_ENV) {
+    const url = API_ENV_TO_EXPLORER_URL[apiEnv || DEFAULT_API_ENV];
     if (!url) {
         throw new Error(`Url for API_ENV ${DEFAULT_API_ENV} is not defined`);
     }
     return url;
 }
 
-const DEFAULT_EXPLORER_URL = getDefaultUrl();
-
 export class Explorer {
-    private static _url = DEFAULT_EXPLORER_URL;
-
-    public static getObjectUrl(objectID: ObjectId) {
-        return new URL(`/objects/${objectID}`, Explorer._url).href;
+    public static getObjectUrl(objectID: ObjectId, apiEnv: API_ENV) {
+        return new URL(`/objects/${objectID}`, getDefaultUrl(apiEnv)).href;
     }
 
-    public static getTransactionUrl(txDigest: TransactionDigest) {
+    public static getTransactionUrl(
+        txDigest: TransactionDigest,
+        apiEnv: API_ENV
+    ) {
         return new URL(
             `/transactions/${encodeURIComponent(txDigest)}`,
-            Explorer._url
+            getDefaultUrl(apiEnv)
         ).href;
     }
 
-    public static getAddressUrl(address: SuiAddress) {
-        return new URL(`/addresses/${address}`, Explorer._url).href;
+    public static getAddressUrl(address: SuiAddress, apiEnv: API_ENV) {
+        return new URL(`/addresses/${address}`, getDefaultUrl(apiEnv)).href;
     }
 }
diff --git a/wallet/src/ui/app/components/explorer-link/index.tsx b/wallet/src/ui/app/components/explorer-link/index.tsx
@@ -38,21 +38,27 @@ function useAddress(props: ExplorerLinkProps) {
 function ExplorerLink(props: ExplorerLinkProps) {
     const { type, children, className, title } = props;
     const address = useAddress(props);
+    const selectedApiEnv = useAppSelector(({ app }) => app.apiEnv);
     const objectID = type === ExplorerLinkType.object ? props.objectID : null;
     const transactionID =
         type === ExplorerLinkType.transaction ? props.transactionID : null;
     const explorerHref = useMemo(() => {
         switch (type) {
             case ExplorerLinkType.address:
-                return address && Explorer.getAddressUrl(address);
+                return (
+                    address && Explorer.getAddressUrl(address, selectedApiEnv)
+                );
             case ExplorerLinkType.object:
-                return objectID && Explorer.getObjectUrl(objectID);
+                return (
+                    objectID && Explorer.getObjectUrl(objectID, selectedApiEnv)
+                );
             case ExplorerLinkType.transaction:
                 return (
-                    transactionID && Explorer.getTransactionUrl(transactionID)
+                    transactionID &&
+                    Explorer.getTransactionUrl(transactionID, selectedApiEnv)
                 );
         }
-    }, [type, address, objectID, transactionID]);
+    }, [type, address, objectID, transactionID, selectedApiEnv]);
     if (!explorerHref) {
         return null;
     }