✨ feat(core): Add progress bar to file downloads (#1038)

packages/core/package.json

@@ -36,6 +36,7 @@
     "fs-extra": "^11.1.1",
     "glob": "^10.3.10",
     "gradient-string": "^2.0.2",
+    "progress": "^2.0.3",
     "tsup": "^7.2.0",
     "unzipper": "^0.10.14",
     "zod": "^3.22.4"
@@ -45,6 +46,7 @@
     "@types/fs-extra": "^11.0.2",
     "@types/gradient-string": "^1.1.4",
     "@types/node": "^20.8.0",
+    "@types/progress": "^2.0.7",
     "@types/unzipper": "^0.10.7",
     "@vitest/coverage-v8": "1.0.0-beta.0",
     "archiver": "^6.0.1",

packages/core/src/downloadFile.ts

@@ -1,6 +1,7 @@
 import path from 'node:path'
 import axios from 'axios'
 import fs from 'fs-extra'
+import { onDownloadProgress } from './utils/onDownloadProgress'
 
 type DownloaderOptions = {
   url: string
@@ -34,7 +35,8 @@ export async function downloadFile(options: DownloaderOptions) {
 
     axios
       .get(url, {
-        responseType: 'stream'
+        responseType: 'stream',
+        onDownloadProgress: onDownloadProgress(url, fileName)
       })
       .then((response) => {
         const writer = fs.createWriteStream(filePath)

packages/core/src/utils/bytesToMegabytes.ts

@@ -0,0 +1,4 @@
+export function bytesToMegabytes(bytes: number) {
+  const megabytes = bytes / 1024 / 1024
+  return Math.round(megabytes * 10) / 10
+}

packages/core/src/utils/onDownloadProgress.ts

@@ -0,0 +1,40 @@
+import type { AxiosProgressEvent } from 'axios'
+import ProgressBar from 'progress'
+import { bytesToMegabytes } from './bytesToMegabytes'
+
+export function onDownloadProgress(url: string, fileName: string) {
+  let progressBar: ProgressBar
+  let lastDownloadedBytes = 0
+
+  return ({ loaded: downloadedBytes, total: totalDownloadBytes }: AxiosProgressEvent) => {
+    if (!totalDownloadBytes) {
+      throw new Error(
+        `[DownloadFile] Request returned total download bytes as 0. This should never happen, and it means that the target file is empty. URL: ${url}`
+      )
+    }
+
+    if (!progressBar) {
+      progressBar = getDownloadProgressBar(url, fileName, totalDownloadBytes)
+    } else {
+      const delta = downloadedBytes - lastDownloadedBytes
+      lastDownloadedBytes = downloadedBytes
+      progressBar.tick(delta)
+    }
+  }
+}
+
+function getDownloadProgressBar(url: string, fileName: string, totalBytes: number) {
+  // TODO: This header should be based on the wallet config.
+  const barHeader = url.startsWith('https://github.com/MetaMask/metamask-extension/releases/download/')
+    ? '🦊 MetaMask'
+    : fileName
+
+  const downloadSize = `${bytesToMegabytes(totalBytes)} MB`
+
+  return new ProgressBar(`${barHeader} (${downloadSize}) [:bar] :percent :etas`, {
+    width: 20,
+    complete: '=',
+    incomplete: ' ',
+    total: totalBytes
+  })
+}

packages/core/test/downloadFile.test.ts

@@ -14,7 +14,11 @@ const MOCK_URL = `https://example.com/${FILE_NAME}`
 
 const server = setupServer(
   http.get(MOCK_URL, () => {
-    return HttpResponse.text(FILE_CONTENT)
+    return HttpResponse.text(FILE_CONTENT, {
+      headers: {
+        'Content-Length': new Blob([FILE_CONTENT]).size.toString()
+      }
+    })
   })
 )
 
@@ -55,7 +59,8 @@ describe('downloadFile', () => {
 
     expect(axiosGetSpy).toHaveBeenCalledOnce()
     expect(axiosGetSpy).toHaveBeenCalledWith(MOCK_URL, {
-      responseType: 'stream'
+      responseType: 'stream',
+      onDownloadProgress: expect.any(Function)
     })
   })
 

packages/core/test/utils/bytesToMegabytes.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest'
+import { bytesToMegabytes } from '../../src/utils/bytesToMegabytes'
+
+describe('bytesToMegabytes', () => {
+  it('converts bytes to megabytes and rounds the result', async () => {
+    const result = bytesToMegabytes(21_260_893)
+
+    expect(result).to.equal(20.3)
+  })
+})