Update VSC core and additional extensions (#84)

Author: krzkaczor

.github/workflows/ci.yml

@@ -10,13 +10,13 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
-          version: 7.1.0
-      - uses: actions/setup-node@v2
+          version: 8.6.0
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: "pnpm"
 
       - run: pnpm install

.github/workflows/deploy.yml

@@ -10,51 +10,104 @@ jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
         with:
-          version: 7.1.0
-      - uses: actions/setup-node@v2
+          version: 8.6.0
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: "pnpm"
+      - name: Setup Build Environment
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libxkbfile-dev pkg-config libsecret-1-dev libkrb5-dev libxss1 dbus libgtk-3-0 libgbm1
+      - run: yarn global add node-gyp
+      - run: pnpm add -g [email protected]
 
       - run: pnpm install
-      - run: pnpm build
+
+      - name: Build
+        run: |
+          if [[ "${{ github.ref }}" == "refs/heads/main" ]]; then
+            export DETH_IFRAME_URL="https://code.deth.net"
+          else
+            export DETH_IFRAME_URL="https://dethcode.vercel.app"
+          fi
+
+          yarn build
 
       - run: pnpm prepare-deploy
 
-      # deployment per branch
-      - uses: superactions/deploy-branch-action@action
-        if: ${{ github.ref != 'refs/heads/main' }}
+      # --- preview deployments
+      - name: Deploy host to Vercel - STAGING
+        uses: nick-fields/retry@v2
+        with:
+          command: |
+            cd packages/vscode-host/dist
+            vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+            vercel build --token=${{ secrets.VERCEL_TOKEN }} # creates vercel output directory
+
+            cp -R ./node_modules ./.vercel/output/static/ # force add node_modules to output directory
+
+            vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+          max_attempts: 3
+          timeout_minutes: 10
+        env:
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_HOST_PREVIEW_HOST_PROJECT_ID }}
+
+      - name: Deploy entrypoint to Vercel - STAGING
+        uses: nick-fields/retry@v2
         with:
-          directory: packages/vscode-host/dist
+          command: |
+            cd packages/entrypoint/dist
+            vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+            vercel build --token=${{ secrets.VERCEL_TOKEN }} # creates vercel output directory
+
+            cp -R ./node_modules ./.vercel/output/static/ # force add node_modules to output directory
+
+            vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+          max_attempts: 3
+          timeout_minutes: 10
+        env:
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID:
+            ${{ secrets.VERCEL_ENTRYPOINT_PREVIEW_HOST_PROJECT_ID }}
 
       # --- production deployments (only on main)
-      # deploy app
-      - uses: ngduc/vercel-deploy-action@master
+      - name: Deploy host to Vercel - PRODUCTION
         if: ${{ github.ref == 'refs/heads/main' }}
+        uses: nick-fields/retry@v2
         with:
-          vercel-cli: vercel
-          vercel-project-id: ${{ secrets.VERCEL_APP_PROJECT_ID}}
-          vercel-org-id: ${{ secrets.VERCEL_ORG_ID}}
-          vercel-token: ${{ secrets.VERCEL_TOKEN }}
-          scope: ${{ secrets.VERCEL_ORG_ID }}
-          working-directory: packages/vscode-host/dist
-          vercel-args: "--prod"
+          command: |
+            cd packages/vscode-host/dist
+            vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+            vercel build --token=${{ secrets.VERCEL_TOKEN }} # creates vercel output directory
+
+            cp -R ./node_modules ./.vercel/output/static/ # force add node_modules to output directory
+
+            vercel deploy --prebuilt --production --token=${{ secrets.VERCEL_TOKEN }}
+          max_attempts: 3
+          timeout_minutes: 10
         env:
-          ACTIONS_ALLOW_UNSECURE_COMMANDS: true
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_APP_PROJECT_ID }}
 
-      # deploy entrypoint (no preview)
-      - uses: ngduc/vercel-deploy-action@master
+      - name: Deploy entrypoint to Vercel - PRODUCTION
         if: ${{ github.ref == 'refs/heads/main' }}
+        uses: nick-fields/retry@v2
         with:
-          vercel-cli: vercel
-          vercel-project-id: ${{ secrets.VERCEL_ENTRYPOINT_PROJECT_ID}}
-          vercel-org-id: ${{ secrets.VERCEL_ORG_ID}}
-          vercel-token: ${{ secrets.VERCEL_TOKEN }}
-          scope: ${{ secrets.VERCEL_ORG_ID }}
-          working-directory: packages/entrypoint/dist
-          vercel-args: "--prod"
+          command: |
+            cd packages/entrypoint/dist
+            vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+            vercel build --token=${{ secrets.VERCEL_TOKEN }} # creates vercel output directory
+
+            cp -R ./node_modules ./.vercel/output/static/ # force add node_modules to output directory
+
+            vercel deploy --prebuilt --production --token=${{ secrets.VERCEL_TOKEN }}
+          max_attempts: 3
+          timeout_minutes: 10
         env:
-          ACTIONS_ALLOW_UNSECURE_COMMANDS: true
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_ENTRYPOINT_PROJECT_ID }}

.gitignore

@@ -8,3 +8,4 @@ node_modules
 out
 
 .vercel
+packages/vscode-host/vscode-web

.mocharc.js

@@ -7,4 +7,5 @@ module.exports = {
     "packages/vscode-host/src/**/*.test.ts",
     "packages/bookmarklet/*.test.ts",
   ],
+  exclude: ["packages/vscode-host/src/src/vs/editor/test/node/classification/typescript.test.ts"]
 };

.npmrc

@@ -0,0 +1 @@
+18

.nvmrc

@@ -0,0 +1 @@
+packages/vscode-host/src

.prettierignore

@@ -4,50 +4,57 @@ We welcome all kinds of contributions :)
 
 ### Repository structure and package managers
 
-The repository contains two packages, `ethereum-viewer` extension and the VSCode
-compilation meant for hosting it online.
+The repository contains few packages:
 
-All packages (currently one) except of `@dethcrypto/ethereum-viewer-vscode-host`
-located in `packages/vscode-host` are managed by `pnpm`. As VSCode depends on
-Yarn, our `vscode-host` also needs Yarn.
+- `ethereum-viewer` - VSCode extension, this is where most of the business logic
+  resides,
+- `vscode-host` - tweaked VSCode instance. Default settings were changed and
+  some features hidden. Note: since some time, vscode officially supports web
+  builds which greatly simplified this package,
+- `entrypoint` - Simple website that cointains an iframe to vscode host. It's
+  done so multiple instances of DethCode for different chains, can share the
+  same settings (because they all use a single instance under the hood).
 
-### Step by step instructions
+All packages except of `@dethcrypto/vscode-host` located in
+`packages/vscode-host` are managed by `pnpm`. As VSCode depends on Yarn, our
+`vscode-host` also needs Yarn.
 
-```sh
-# You need to create dummy certs using mkcert - https://github.com/FiloSottile/mkcert
-cd ./certs
-mkcert localhost
-mkcert -install
-cd ..
+## Development
 
-# install deps
+```
 pnpm install
 
-pnpm build # this builds whole vscode and can take A LOT of time. If you are having issues, read below
-pnpm serve
-```
+cd packages/ethereum-viewer # build for the first time
+pnpm build
+
+cd packages/vscode-host
+node scripts/prepareVSCode.js # clones vscode into ./vscode dir
+node scripts/compileVSCode.js
+node scripts/prepareAdditionalExtensions.js # extensions like solidity and vyper support
+node scripts/copyExtensions.js
 
-### Scripts
+cd ./vscode
+node ./scripts/code-web-deth.js # loads extensions from ./packages/vscode-host/dist/extensions
+yarn watch # in a new tab
+yarn watch-web # in a new tab
+```
 
-- **`pnpm install`** - Installs dependencies for the workspace,
-  `ethereum-viewer` extension, and triggers `yarn install` for `vscode-host`
-  through the `postinstall` script.
+Changes to vscode will be automatically applied. To make them permanent copy
+them to `./packages/vscode-host/src/`.
 
-- **`pnpm build`** - Builds all packages.
+After introducing changes to `packages/ethereum-viewer` run
+`pnpm run build:dev`.
 
-  If you are having issues with MacOS and Python try the following:
-  ```
-  $ brew install sqlite
-  $ npm config set sqlite /opt/homebrew/opt/sqlite
-  $ npm config set python python3
-  ```
+Btw. this will be improved soon ;)
 
-- **`pnpm watch`** - Starts webpack for `ethereum-extension` in watch mode.
+## Production build
 
-- **`pnpm serve`** - Starts HTTP server with `vscode-host`.
+Note: full, production build of VSCode host is painfully slow and takes ~0.5h
+even on M1 Mac.
 
-- **`pnpm dev`** - Copies `ethereum-extension` and serves `vscode-host`. Run
-  alongside `pnpm watch`.
+```
+pnpm build
+```
 
 ### Resources
 
@@ -59,3 +66,13 @@ terms.
 - https://code.visualstudio.com/api/extension-guides/web-extensions
 - https://code.visualstudio.com/api/references/vscode-api#FileSystemProvider
 - https://github.com/microsoft/vscode-extension-samples/blob/main/fsprovider-sample/README.md
+
+### Troubleshooting
+
+If you are having issues with MacOS and Python try the following:
+
+```
+$ brew install sqlite
+$ npm config set sqlite /opt/homebrew/opt/sqlite
+$ npm config set python python3
+```

CONTRIBUTING.md

@@ -5,13 +5,9 @@
   <h2 align="center">DethCode</h2>
   <p align="center">
     <a href="https://github.com/dethcrypto/ethereum-code-viewer/actions"><img alt="Build Status" src="https://github.com/dethcrypto/ethereum-code-viewer/actions/workflows/ci.yml/badge.svg"></a>
-    <a href="https://discord.gg/wQDkeDgzgv"><img alt="Join our Discord!" src="https://img.shields.io/discord/895381864922091630.svg?color=7289da&label=deth&logo=discord&style=flat-square"></a>
   </p>
   <p align="center"><strong>View source of deployed Ethereum smart contracts in VS Code</strong></p>
   <p align="center">While on Etherscan, change <code>.io</code> to <code>.deth.net</code> and browse contracts comfortably in ephemeral VS Code instance</p>
-  <p align="center">
-    <em>💸 Enjoy using DethCode? Consider funding development via <a href="https://gitcoin.co/grants/4038/deth-typechain">GitCoin</a> 💸</em>
-  </p>
 </p>
 
 ## Usage
@@ -38,7 +34,7 @@ javascript: location.href = location.href.replace(/\.\w+(\/)/, ".deth.net/")
   supported chains][supported_explorers])
 
 [supported_explorers]:
-  https://github.com/dethcrypto/ethereum-code-viewer/blob/main/docs/supported-explorers.md
+  https://github.com/dethcrypto/dethcode/blob/main/packages/ethereum-viewer/src/explorer/networks.ts#L38
 
 ## Motivation
 
@@ -52,8 +48,25 @@ DethCode was born out of frustration, and it's here to fix all of these issues.
 In addition, it improves the experience by automatically following the
 implementation of proxies and so on.
 
+### Is it still relevant since Etherscan implements something similar?
+
+Etherscan decided that they like the idea of browsing smart contracts in
+ephemeral VSCode instances so much that they decided to make it part of the
+their offering. We don't hold a grudge against them, however this is precisely
+why DethCode needs to live on!
+
+DethCode is a fully open-source, public good that is available for anyone and is
+developed by a community. Other blockchain explorers can use it/self-host it
+instead of developing the same thing again. Furthermore, we are preparing to
+launch, new advanced features that will make DethCode the best way to browse
+ethereum's smart contracts.
+
 ## Examples
 
+- Optimism L1CrossDomainMessenger:
+  [dethcode](https://etherscan.deth.net/address/0x25ace71c97b33cc4729cf772ae268934f7ab5fa1)
+  |
+  [etherscan](https://etherscan.io/address/0x25ace71c97b33cc4729cf772ae268934f7ab5fa1#code)
 - Arbitrum ERC20 Gateway on mainnet:
   [dethcode](https://etherscan.deth.net/address/0xa3a7b6f88361f48403514059f1f16c8e78d60eec)
   |
@@ -62,19 +75,15 @@ implementation of proxies and so on.
   [dethcode](https://arbiscan.deth.net/address/0x09e9222e96e7b4ae2a407b98d48e330053351eee)
   |
   [arbiscan](https://arbiscan.io/address/0x09e9222e96e7b4ae2a407b98d48e330053351eee#code)
-- Optimism L1CrossDomainMessenger:
-  [dethcode](https://etherscan.deth.net/address/0x25ace71c97b33cc4729cf772ae268934f7ab5fa1)
-  |
-  [etherscan](https://etherscan.io/address/0x25ace71c97b33cc4729cf772ae268934f7ab5fa1#code)
 - Dai Stablecoin:
   [dethcode](https://etherscan.deth.net/address/0x6b175474e89094c44da98b954eedeac495271d0f)
   |
   [etherscan](https://etherscan.io/address/0x6b175474e89094c44da98b954eedeac495271d0f#code)
 
-## Contributing
+## Contributing and development
 
-Check out our [contributing guidelines](./CONTRIBUTING.md)
+Check out our [contributing guide](./CONTRIBUTING.md).
 
 ## Social
 
-Follow us on [Twitter](https://twitter.com/dethcrypto)!
+Follow me on [Twitter](https://twitter.com/krzkaczor).