Add Etherscan link to status bar (#34)

Author: hasparus

packages/ethereum-viewer/src/contributedCommands.ts

@@ -3,6 +3,7 @@ import { commands, ExtensionContext, QuickPickItem, window } from "vscode";
 import { ApiName, explorerApiUrls, networkNames } from "./explorer";
 import { FileSystem } from "./fs";
 import { openContractSource } from "./openContractSource";
+import { renderStatusBarItems } from "./statusBar";
 import { unsafeEntries } from "./util/unsafeEntries";
 
 export function registerContributedCommands(
@@ -49,7 +50,13 @@ export function registerContributedCommands(
 
       const { apiName } = picked;
 
-      await openContractSource(context, { fs, address, apiName });
+      const info = await openContractSource(context, { fs, address, apiName });
+
+      renderStatusBarItems({
+        contractAddress: address,
+        contractName: info.ContractName || "contract",
+        apiName,
+      });
     },
   };
 

packages/ethereum-viewer/src/explorer/apiUrlToWebsite.ts

@@ -0,0 +1,7 @@
+export function apiUrlToWebsite(url: string) {
+  // This is a bit of a hack, but they all have the same URL scheme.
+  return url
+    .replace("//api.", "//")
+    .replace("//api-", "//")
+    .replace(/\/api$/, "");
+}

packages/ethereum-viewer/src/explorer/fetchFiles.ts

@@ -4,6 +4,7 @@ import { assert, StrictOmit } from "ts-essentials";
 import { fetch as _fetch } from "../util/fetch";
 import { prettyStringify } from "../util/stringify";
 import * as types from "./api-types";
+import { apiUrlToWebsite } from "./apiUrlToWebsite";
 import { fileExtension } from "./fileExtension";
 import { ApiName, explorerApiKeys, explorerApiUrls } from "./networks";
 
@@ -118,7 +119,11 @@ function prefixFiles(files: FileContents, prefix: string): FileContents {
 
 export interface FetchFilesResult {
   files: FileContents;
-  info: ContractInfo & { implementation?: ContractInfo };
+  info: ContractInfoWithImplementation;
+}
+
+export interface ContractInfoWithImplementation extends ContractInfo {
+  implementation?: ContractInfo;
 }
 
 export interface ContractInfo
@@ -141,11 +146,3 @@ Oops! It seems this contract source code is not verified on ${websiteUrl}.
 Take a look at ${websiteUrl}/address/${contractAddress}.
 `;
 }
-
-function apiUrlToWebsite(url: string) {
-  // This is a bit of a hack, but they all have the same URL scheme.
-  return url
-    .replace("//api.", "//")
-    .replace("//api-", "//")
-    .replace(/\/api$/, "");
-}

packages/ethereum-viewer/src/extension.ts

@@ -6,6 +6,7 @@ import * as explorer from "./explorer";
 import { explorerApiUrls, networkNames } from "./explorer";
 import { FileSystem } from "./fs";
 import { openContractSource } from "./openContractSource";
+import { renderStatusBarItems } from "./statusBar";
 
 let initialized = false;
 const fs = FileSystem();
@@ -42,7 +43,23 @@ async function main(context: vscode.ExtensionContext) {
     return;
   }
 
-  await openContractSource(context, { fs, apiName, address });
+  renderStatusBarItems({
+    contractAddress: address,
+    contractName: "contract",
+    apiName,
+  });
+
+  const info = await openContractSource(context, {
+    fs,
+    apiName,
+    address,
+  });
+
+  renderStatusBarItems({
+    contractAddress: address,
+    contractName: info.ContractName || "contract",
+    apiName,
+  });
 }
 
 async function detectExplorerApiName(): Promise<explorer.ApiName> {

packages/ethereum-viewer/src/openContractSource.ts

@@ -49,16 +49,9 @@ export async function openContractSource(
   );
   context.subscriptions.push(textSearchProviderDisposable);
 
-  // We're trying to open the file even if it doesn't exist yet.
   await showTextDocument(mainFile);
-  // Because the following seems to be very slow:
-  // // onFileChangeOnce(
-  // //   context,
-  // //   fs,
-  // //   mainFile,
-  // //   (e) => void showTextDocument(e.uri.path)
-  // // );
-  // It's causing some errors in the console, but in the end it provides better UX.
+
+  return info;
 }
 
 async function saveContractFilesToFs({
@@ -106,6 +99,15 @@ function getMainContractFile(
 }
 
 async function showTextDocument(path: string) {
+  // We're trying to open the file even if it doesn't exist yet.
+  // Because the following seems to be very slow:
+  // // onFileChangeOnce(
+  // //   context,
+  // //   fs,
+  // //   mainFile,
+  // //   (e) => void showTextDocument(e.uri.path)
+  // // );
+  // It's causing some errors in the console, but in the end it provides better UX.
   await window.showTextDocument(
     Uri.from({ scheme: "memfs", path: "/" + path })
   );

packages/ethereum-viewer/src/statusBar.ts

@@ -0,0 +1,65 @@
+import { StatusBarAlignment, StatusBarItem, Uri, window } from "vscode";
+
+import { apiUrlToWebsite } from "./explorer/apiUrlToWebsite";
+import { ApiName, explorerApiUrls } from "./explorer/networks";
+
+export function renderStatusBarItems(
+  args:
+    | {
+        contractAddress: string;
+        contractName: string;
+        apiName: ApiName;
+      }
+    | {}
+) {
+  if ("contractAddress" in args) {
+    const { apiName, contractAddress, contractName } = args;
+    const website = apiUrlToWebsite(explorerApiUrls[apiName]);
+    const link = `${website}/address/${contractAddress}`;
+
+    const where = apiName.endsWith("etherscan")
+      ? "on Etherscan"
+      : "in the explorer";
+
+    const tooltip = `Open ${link}`;
+    renderStatusBarItem({
+      key: "ethereum-viewer.etherscan-link",
+      text: `$(eye) See ${contractName} ${where} (${contractAddress})`,
+      tooltip,
+      command: {
+        title: "Open on Etherscan",
+        command: "vscode.open",
+        arguments: [Uri.parse(link)],
+      },
+      priority: 0,
+    });
+  }
+}
+
+const _renderedItems = new Map<string, StatusBarItem>();
+
+interface RenderStatusBarItemArgs
+  extends Pick<StatusBarItem, "text" | "tooltip" | "command">,
+    Pick<window.StatusBarItemOptions, "alignment" | "priority"> {
+  priority?: number;
+  key: string;
+}
+
+function renderStatusBarItem(args: RenderStatusBarItemArgs) {
+  let item = _renderedItems.get(args.key)!;
+
+  item ||= window.createStatusBarItem(
+    args.alignment || StatusBarAlignment.Left,
+    args.priority
+  );
+
+  item.tooltip = args.tooltip;
+  item.text = args.text;
+  item.command = args.command;
+
+  item.show();
+
+  _renderedItems.set(args.key, item);
+
+  return item;
+}

packages/ethereum-viewer/webpack.config.ts

@@ -51,7 +51,7 @@ const webExtensionConfig: webpack.Configuration = {
   performance: {
     hints: false,
   },
-  devtool: "nosources-source-map",
+  devtool: "eval-cheap-module-source-map",
   infrastructureLogging: {
     level: "log",
   },

packages/vscode-host/src/code/browser/workbench/workbench.ts

@@ -53,10 +53,10 @@ async function main() {
     config = { ...config, workspaceProvider };
   }
 
-  const contractAddress = ethViewerCommands.getContractAddress();
-
   setTimeout(() => renderNotification(), 500);
 
+  const apiName = ethViewerCommands.getApiName() || "etherscan";
+
   create(document.body, {
     ...config,
     commands: getCommands(),
@@ -65,10 +65,7 @@ async function main() {
     },
     windowIndicator: {
       onDidChange: Event.None,
-      label: localize(
-        "playgroundLabel",
-        `$(remote) deth.net` + (contractAddress ? `: ${contractAddress}` : "")
-      ),
+      label: localize("playgroundLabel", `$(remote) ${apiName}.deth.net`),
       tooltip: localize(
         "playgroundTooltip",
         "See Ethereum Code Viewer on GitHub"