feat: improved UX when opening IPFS URIs

assets/locales/en.json

@@ -33,6 +33,7 @@
   "yes": "Yes",
   "no": "No",
   "close": "Close",
+  "continue": "Continue",
   "ok": "OK",
   "cancel": "Cancel",
   "enable": "Enable",
@@ -173,6 +174,7 @@
     "appPreferences": "App Preferences",
     "launchOnStartup": "Launch at Login",
     "openWebUIAtLaunch": "Open Web UI at Launch",
+    "askWhenOpeningIpfsURIs": "Ask How to Open IPFS Address",
     "pubsub": "Enable PubSub",
     "namesysPubsub": "Enable IPNS over PubSub",
     "automaticGC": "Automatic Garbage Collection",
@@ -220,6 +222,17 @@
     "title": "Private Network IPFS Repository",
     "message": "The repository at “{ path }” is part of a private network, which is not supported by IPFS Desktop."
   },
+  "migrationFailedDialog": {
+    "title": "IPFS Desktop Migration Has Failed",
+    "message": "IPFS has encountered an error and migration could not be completed:"
+  },
+  "protocolHandlerDialog": {
+    "title": "Opening IPFS address",
+    "message": "How would you like IPFS Desktop to open ipfs:// and ipns:// addresses?",
+    "openInBrowser": "Open in my default browser",
+    "openInIpfsDesktop": "Open in IPFS Desktop",
+    "rememberThisChoice": "Remember this choice for all IPFS addresses"
+  },
   "invalidRepositoryDialog": {
     "title": "Invalid IPFS Repository or Configuration File",
     "message": "The repository at “{ path }” or its configuration is invalid. The “config” file must be a valid JSON.\n\nBefore starting IPFS Desktop again, please fix the configuration file or rename the old repository to “.ipfs.backup”. Please note that by renaming the old repository, IPFS Desktop will generate a new repository"

package.json

@@ -87,6 +87,8 @@
     "it-last": "^1.0.6",
     "multiaddr": "10.0.1",
     "multiaddr-to-uri": "8.0.0",
+    "multiformats": "^9.6.4",
+    "node-fetch": "^2.6.7",
     "portfinder": "^1.0.28",
     "untildify": "^4.0.0",
     "v8-compile-cache": "^2.3.0",

src/common/config-keys.js

@@ -10,7 +10,8 @@ const CONFIG_KEYS = {
   OPEN_WEBUI_LAUNCH: 'openWebUIAtLaunch',
   MONOCHROME_TRAY_ICON: 'monochromeTrayIcon',
   EXPERIMENT_PUBSUB: 'experiments.pubsub',
-  EXPERIMENT_PUBSUB_NAMESYS: 'experiments.pubsubNamesys'
+  EXPERIMENT_PUBSUB_NAMESYS: 'experiments.pubsubNamesys',
+  ASK_OPENING_IPFS_URIS: 'askWhenOpeningIpfsURIs'
 }
 
 module.exports = CONFIG_KEYS

src/common/consts.js

@@ -1,4 +1,6 @@
 const os = require('os')
+const path = require('path')
+const fs = require('fs-extra')
 const packageJson = require('../../package.json')
 
 module.exports = Object.freeze({
@@ -10,5 +12,6 @@ module.exports = Object.freeze({
   GO_IPFS_VERSION: packageJson.dependencies['go-ipfs'],
   COUNTLY_KEY: process.env.NODE_ENV === 'development'
     ? '6b00e04fa5370b1ce361d2f24a09c74254eee382'
-    : '47fbb3db3426d2ae32b3b65fe40c564063d8b55d'
+    : '47fbb3db3426d2ae32b3b65fe40c564063d8b55d',
+  IPFS_LOGO_URI: 'data:image/svg+xml;base64,' + fs.readFileSync(path.join(__dirname, '../../assets/icons/ipfs.svg')).toString('base64')
 })

src/dialogs/prompt/html.js

@@ -0,0 +1,122 @@
+const { IS_MAC, IPFS_LOGO_URI } = require('../../common/consts')
+const { styles } = require('./styles')
+
+/**
+ * Generates an HTML string with the given button labels.
+ * The order of the buttons is inverted on macOS to match the behavior
+ * of the OS.
+ *
+ * @param {string[]} labels
+ * @returns {string}
+ */
+function getButtonComponentsHtml (labels) {
+  const buttons = labels.map((txt, i) => `<button ${i === 0 ? 'class="default"' : ''} id="${i}">${txt}</button>`)
+
+  if (IS_MAC) {
+    buttons.reverse()
+  }
+
+  return buttons.join('\n')
+}
+
+/**
+ * @typedef InputConfiguration
+ * @type {object}
+ * @property {string} type
+ * @property {string} name
+ * @property {string} defaultValue
+ * @property {string | null} label
+ * @property {string[] | null} labels
+ */
+
+/**
+ * Generates an HTML string with the given configurations.
+ *
+ * @param {InputConfiguration[]} inputs
+ * @returns {string}
+ */
+function getInputComponentsHtml (inputs) {
+  return inputs.map(({ type, name, label, defaultValue, labels = {} }) => {
+    let str = '<div>'
+
+    switch (type) {
+      case 'checkbox':
+        str += '<div class="inline">'
+        str += `<input type="checkbox" name="${name}" id="${name}" ${defaultValue} />`
+        str += `<label for="${name}">${label}</label>`
+        str += '</div>'
+        break
+      case 'radio':
+        str += '<div class="group">'
+        for (const key in labels) {
+          str += '<div class="inline">'
+          str += `<input type="radio" name="${name}" id="${key}" value="${key}" ${defaultValue === key ? 'checked' : ''} />`
+          str += `<label for="${key}">${labels[key]}</label>`
+          str += '</div>'
+        }
+        str += '</div>'
+
+        break
+      case 'text':
+        str += `<input type="text" name="${name}" id="${name}" value="${defaultValue}" />`
+    }
+
+    str += '</div>'
+    return str
+  }).join('\n')
+}
+
+/**
+ * Generates a base64 encoded URI with the HTML content of a prompt window.
+ *
+ * @param {PromptConfiguration} config
+ * @param {string} id
+ * @returns {string}
+ */
+function getPromptEncodedHtml (config, id) {
+  const buttons = getButtonComponentsHtml(config.buttons)
+  const inputs = getInputComponentsHtml(config.inputs)
+
+  const html = `<!DOCTYPE html>
+  <html>
+    <head>
+      <meta charset="utf-8" />
+    </head>
+    <body>
+      <img src="${IPFS_LOGO_URI}" id="logo">
+      <p>${config.message}</p>
+      <form>
+        ${inputs}
+        <div id="buttons">${buttons}</div>
+      </form>
+    </body>
+    <style>
+    ${styles}
+    </style>
+    <script>
+      const { ipcRenderer } = require('electron')
+
+      for (const button of document.querySelectorAll('button')) {
+        button.addEventListener('click', event => {
+          ipcRenderer.send('${id}', {
+            input: Object.fromEntries(new FormData(document.querySelector('form')).entries()),
+            button: Number(button.id)
+          })
+        })
+      }
+
+      document.querySelector('input').addEventListener('keypress', (event) => {
+        if (event.code === 'Enter') {
+          event.preventDefault()
+          document.querySelector('button.default').click()
+        }
+      })
+    </script>
+  </html>`
+
+  return `data:text/html;base64,${Buffer.from(html, 'utf8').toString('base64')}`
+}
+
+module.exports = {
+  getPromptEncodedHtml
+}

src/dialogs/prompt/index.js

@@ -1,32 +1,38 @@
 const { BrowserWindow, ipcMain } = require('electron')
 const crypto = require('crypto')
-const { IS_MAC } = require('../../common/consts')
+
 const dock = require('../../utils/dock')
-const makePage = require('./template')
 const { getBackgroundColor } = require('./styles')
+const { getPromptEncodedHtml } = require('./html')
 
-function generatePage ({ message, defaultValue = '', buttons }, id) {
-  buttons = buttons.map((txt, i) => `<button ${i === 0 ? 'class="default"' : ''} id="${i}">${txt}</button>`)
-
-  if (IS_MAC) {
-    buttons.reverse()
-  }
-
-  const page = makePage({ message, defaultValue, buttons, id })
-  return `data:text/html;base64,${Buffer.from(page, 'utf8').toString('base64')}`
-}
+/**
+ * @typedef PromptConfiguration
+ * @type {object}
+ * @property {string} title
+ * @property {string} message
+ * @property {InputConfiguration[]} inputs
+ * @property {string[]} buttons
+ * @property {object} window
+ */
 
-module.exports = async function showPrompt (options) {
-  options = Object.assign({}, {
+/**
+ * Displays a prompt to the user according to the given configuration.
+ *
+ * @param {PromptConfiguration} config
+ * @returns
+ */
+module.exports = async function showPrompt (config) {
+  config = Object.assign({}, {
     window: {},
     showDock: true
-  }, options)
+  }, config)
 
   const window = new BrowserWindow({
-    title: options.title,
+    title: config.title,
     show: false,
     width: 350,
     height: 330,
+    useContentSize: true,
     resizable: false,
     autoHideMenuBar: true,
     fullscreenable: false,
@@ -35,7 +41,7 @@ module.exports = async function showPrompt (options) {
       nodeIntegration: true,
       contextIsolation: false
     },
-    ...options.window
+    ...config.window
   })
 
   // Generate random id
@@ -44,20 +50,20 @@ module.exports = async function showPrompt (options) {
   return new Promise(resolve => {
     ipcMain.once(id, (_, data) => {
       window.destroy()
-      if (options.showDock) dock.hide()
+      if (config.showDock) dock.hide()
       resolve(data)
     })
 
     window.on('close', () => {
-      if (options.showDock) dock.hide()
+      if (config.showDock) dock.hide()
       resolve({ input: '', button: null })
     })
 
     window.once('ready-to-show', () => {
-      if (options.showDock) dock.show()
+      if (config.showDock) dock.show()
       window.show()
     })
 
-    window.loadURL(generatePage(options, id))
+    window.loadURL(getPromptEncodedHtml(config, id))
   })
 }

src/dialogs/prompt/styles.js

@@ -60,9 +60,27 @@ input {
   padding: 0.15rem;
   outline: 0;
 }
+div.group {
+  margin: 0.5rem 0;
+}
+div.inline input,
+div.inline label {
+  display: inline-block;
+  width: auto;
+  vertical-align: middle;
+}
+input[type=radio],
+input[type=checkbox] {
+  margin-right: 0.25rem;
+}
 #buttons {
   text-align: right;
 }
+#logo {
+  width: 4rem;
+  margin: 0 auto .5rem;
+  display: block;
+}
 button {
   margin-left: 0.5rem;
   padding: 0.25rem 0.5rem;