Add bookmarklet to the readme (#35)

* Add Etherscan link to status bar

* Add tests for bookmarklet

Yes, I know, it should be trivial, but I managed to have a bug in it.

* Describe bookmarklet in the readme

Author: hasparus

.mocharc.js

@@ -3,5 +3,8 @@ module.exports = {
   extension: ["ts"],
   watchExtensions: ["ts"],
   // Extension tests run inside of VSCode instance, so we don't include them here
-  spec: ["packages/vscode-host/src/**/*.test.ts"],
+  spec: [
+    "packages/vscode-host/src/**/*.test.ts",
+    "packages/bookmarklet/*.test.ts",
+  ],
 };

README.md

@@ -20,11 +20,19 @@ While browsing smart contract code on [Etherscan](https://etherscan.io/) just ch
 
 ![ecv](https://user-images.githubusercontent.com/1814312/146108385-6fa50ae7-14a5-45b2-be3d-201d22409cf7.gif)
 
+Or save the following code snippet as a bookmarklet to quickly go from any [supported chain explorer][supported_explorers] to Ethereum Code Viewer.
+
+```
+javascript: location.href = location.href.replace(/\.\w+(\/)/, ".deth.net/")
+```
+
 ## Features ⚡
 
 - frictionless - just tweak URL while browsing etherscan `.io` -> `deth.net`
 - proxy support - automatically follows proxies and displays implementation source code
-- multichain - supports different etherscan instances: testnets, L2s, L1s ([all supported chains](https://github.com/dethcrypto/ethereum-code-viewer/blob/main/packages/ethereum-viewer/src/explorer/networks.ts))
+- multichain - supports different etherscan instances: testnets, L2s, L1s ([all supported chains][supported_explorers])
+
+[supported_explorers]: https://github.com/dethcrypto/ethereum-code-viewer/blob/main/docs/supported-explorers.md
 
 ## Motivation
 

docs/supported-explorers.md

@@ -0,0 +1,23 @@
+Ethereum Code Viewer supports the following blockchain explorers:
+
+<!-- Run `yarn supported-explorers` in packages/ethereum-viewer to generate this list. -->
+
+- [etherscan.io](https://etherscan.io)
+- [ropsten.etherscan.io](https://ropsten.etherscan.io)
+- [rinkeby.etherscan.io](https://rinkeby.etherscan.io)
+- [goerli.etherscan.io](https://goerli.etherscan.io)
+- [kovan.etherscan.io](https://kovan.etherscan.io)
+- [bscscan.com](https://bscscan.com)
+- [testnet.bscscan.com](https://testnet.bscscan.com)
+- [hecoinfo.com](https://hecoinfo.com)
+- [testnet.hecoinfo.com](https://testnet.hecoinfo.com)
+- [ftmscan.com](https://ftmscan.com)
+- [testnet.ftmscan.com](https://testnet.ftmscan.com)
+- [optimistic.etherscan.io](https://optimistic.etherscan.io)
+- [kovan-optimistic.etherscan.io](https://kovan-optimistic.etherscan.io)
+- [polygonscan.com](https://polygonscan.com)
+- [testnet.polygonscan.com](https://testnet.polygonscan.com)
+- [arbiscan.io](https://arbiscan.io)
+- [testnet.arbiscan.io](https://testnet.arbiscan.io)
+- [snowtrace.io](https://snowtrace.io)
+- [testnet.snowtrace.io](https://testnet.snowtrace.io)

packages/bookmarklet/bookmarklet.test.ts

@@ -0,0 +1,51 @@
+import { expect } from "earljs";
+
+import { explorerApiUrls } from "../ethereum-viewer/src/explorer/networks";
+import { apiUrlToWebsite } from "../ethereum-viewer/src/explorer/apiUrlToWebsite";
+import { ethViewerCommands } from "../vscode-host/src/deth/commands/ethViewerCommands";
+import { givenUrl } from "../vscode-host/src/test/test-utils";
+import { toDethNet } from "./bookmarklet";
+
+describe(`bookmarklet: ${toDethNet.name}`, () => {
+  const websiteUrls = Object.values(explorerApiUrls).map(
+    (url) =>
+      apiUrlToWebsite(url) +
+      "/address/0x0000000000000000000000000000000000000000"
+  );
+
+  it("returns hostname ending with deth.net", () => {
+    const urls = websiteUrls.map(toDethNet);
+    for (const actual of urls) {
+      expect(actual).toEqual(expect.stringMatching(/\.deth\.net\//));
+    }
+  });
+
+  it("preserves contract address", () => {
+    const urls = websiteUrls.map(toDethNet);
+    for (const actual of urls) {
+      expect(actual).toEqual(expect.stringMatching(/address\/0x[0-9a-f]{40}/));
+    }
+
+    const address = `0x${Math.floor(
+      Math.random() * 10 ** Math.floor(Math.log10(Number.MAX_SAFE_INTEGER))
+    )}`.padEnd(42, "0");
+
+    expect(toDethNet(`https://etherscan.io/address/${address}`)).toEqual(
+      `https://etherscan.deth.net/address/${address}`
+    );
+  });
+
+  it("preserves explorer api name for all explorers", () => {
+    for (const apiName of Object.keys(explorerApiUrls)) {
+      const websiteUrl =
+        apiUrlToWebsite(
+          explorerApiUrls[apiName as keyof typeof explorerApiUrls]
+        ) + "/address/0x0000000000000000000000000000000000000000";
+
+      const ecvUrl = toDethNet(websiteUrl);
+
+      givenUrl(ecvUrl);
+      expect(ethViewerCommands.getApiName()).toEqual(apiName);
+    }
+  });
+});

packages/bookmarklet/bookmarklet.ts

@@ -0,0 +1,9 @@
+/**
+ * How to turn this into a bookmarklet:
+ * - Replace `return href.` in function body with `location.href = location.href.`
+ * - Prefix with `javascript: `
+ * - Paste it into the readme or test it in your browser
+ */
+export function toDethNet(href: string): string {
+  return href.replace(/\.\w+(\/)/, ".deth.net/");
+}

packages/bookmarklet/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "checkJs": true,
+    "noEmit": true,
+    "module": "CommonJS"
+  },
+  "include": [
+    "*.ts",
+    "../ethereum-viewer/src/explorer/**/*.ts",
+    "../vscode-host/src/deth/**/*.ts",
+    "../vscode-host/src/test/**/*.ts"
+  ]
+}

packages/ethereum-viewer/package.json

@@ -10,7 +10,8 @@
     "watch": "webpack --watch",
     "pretest": "yarn run build",
     "lint": "eslint src --ext ts",
-    "serve": "serve --cors -l 5000 --ssl-cert ../../certs/localhost.pem --ssl-key ../../certs/localhost-key.pem"
+    "serve": "serve --cors -l 5000 --ssl-cert ../../certs/localhost.pem --ssl-key ../../certs/localhost-key.pem",
+    "supported-explorers": "ts-node ./scripts/supported-explorers"
   },
   "dependencies": {
     "fast-json-stable-stringify": "^2.1.0",

packages/ethereum-viewer/scripts/supported-explorers.ts

@@ -0,0 +1,18 @@
+import { apiUrlToWebsite } from "../src/explorer/apiUrlToWebsite";
+import { explorerApiUrls } from "../src/explorer/networks";
+
+function printSupportedExplorers() {
+  console.log(
+    "\n" +
+      Object.values(explorerApiUrls)
+        .map((url) => {
+          const websiteUrl = apiUrlToWebsite(url);
+          const label = websiteUrl.replace(/^https?:\/\//, "");
+          return `- [${label}](${websiteUrl})`;
+        })
+        .join("\n") +
+      "\n"
+  );
+}
+
+if (require.main === module) printSupportedExplorers();