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",
@@ -207,6 +209,17 @@
     "title": "IPFS Desktop Startup Has Failed",
     "message": "IPFS node has encountered an error and startup could not be completed:"
   },
+  "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 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 }” 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”."

package.json

@@ -86,6 +86,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",
     "sudo-prompt": "^9.2.1",
     "untildify": "^4.0.0",

src/dialogs/prompt/index.js

@@ -5,14 +5,52 @@ const dock = require('../../utils/dock')
 const makePage = require('./template')
 const { getBackgroundColor } = require('./styles')
 
-function generatePage ({ message, defaultValue = '', buttons }, id) {
+function makeButtons (buttons) {
   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 buttons.join('\n')
+}
+
+function makeInputs (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')
+}
+
+function generatePage ({ message, inputs, defaultValue = '', buttons }, id) {
+  buttons = makeButtons(buttons)
+  inputs = makeInputs(inputs)
+
+  const page = makePage({ message, inputs, defaultValue, buttons, id })
   return `data:text/html;base64,${Buffer.from(page, 'utf8').toString('base64')}`
 }
 
@@ -27,6 +65,7 @@ module.exports = async function showPrompt (options) {
     show: false,
     width: 350,
     height: 330,
+    useContentSize: true,
     resizable: false,
     autoHideMenuBar: true,
     fullscreenable: false,

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;

src/dialogs/prompt/template.js

@@ -1,14 +1,23 @@
 const { styles } = require('./styles')
 
-module.exports = ({ message, defaultValue, buttons, id }) => (`<!DOCTYPE html>
+const fs = require('fs-extra')
+const path = require('path')
+
+const ipfsLogoPath = path.join(__dirname, '../../../assets/icons/ipfs.svg')
+const ipfsLogo = 'data:image/svg+xml;base64,' + fs.readFileSync(ipfsLogoPath).toString('base64')
+
+module.exports = ({ message, inputs, buttons, id }) => (`<!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8" /> 
+    <meta charset="utf-8" />
   </head>
   <body>
+    <img src="${ipfsLogo}" id="logo">
     <p>${message}</p>
-    <input type="text" value="${defaultValue}" />
-    <div id="buttons">${buttons.join('\n')}</div>
+    <form>
+      ${inputs}
+      <div id="buttons">${buttons}</div>
+    </form>
   </body>
   <style>
   ${styles}
@@ -19,7 +28,7 @@ module.exports = ({ message, defaultValue, buttons, id }) => (`<!DOCTYPE html>
     for (const button of document.querySelectorAll('button')) {
       button.addEventListener('click', event => {
         ipcRenderer.send('${id}', {
-          input: document.querySelector('input').value,
+          input: Object.fromEntries(new FormData(document.querySelector('form')).entries()),
           button: Number(button.id)
         })
       })

src/i18n.js

@@ -5,7 +5,7 @@ const ICU = require('i18next-icu')
 const Backend = require('i18next-fs-backend')
 const store = require('./common/store')
 
-module.exports = async function () {
+const setupI18n = async () => {
   await i18n
     .use(ICU)
     .use(Backend)
@@ -33,3 +33,5 @@ module.exports = async function () {
     ipcMain.emit('languageUpdated', lang)
   })
 }
+
+module.exports = setupI18n()

src/index.js

@@ -11,8 +11,8 @@ if (process.env.NODE_ENV === 'test') {
 const fixPath = require('fix-path')
 const { criticalErrorDialog } = require('./dialogs')
 const logger = require('./common/logger')
+const i18nReady = require('./i18n')
 const setupProtocolHandlers = require('./protocol-handlers')
-const setupI18n = require('./i18n')
 const setupNpmOnIpfs = require('./npm-on-ipfs')
 const setupDaemon = require('./daemon')
 const setupWebUI = require('./webui')
@@ -45,8 +45,10 @@ if (!app.requestSingleInstanceLock()) {
 
 const ctx = {}
 
-app.on('will-finish-launching', () => {
-  setupProtocolHandlers(ctx)
+app.on('will-finish-launching', async () => {
+  await app.whenReady()
+  await i18nReady // Ensure i18n is ready for the dialog.
+  await setupProtocolHandlers(ctx)
 })
 
 function handleError (err) {
@@ -72,8 +74,8 @@ async function run () {
   }
 
   try {
+    await i18nReady
     await setupAnalytics(ctx) // ctx.countlyDeviceId
-    await setupI18n(ctx)
     await setupAppMenu(ctx)
 
     await setupWebUI(ctx) // ctx.webui, launchWebUI