Surface Error Messages for End Users

src/components/balance.js

@@ -1,5 +1,5 @@
 import { lit as html } from '../helpers/lit.js'
-import { fixedDash, envoy, } from '../helpers/utils.js'
+import { envoy, formatDash, } from '../helpers/utils.js'
 import { updateAllFunds, } from '../helpers/wallet.js'
 
 const initialState = {
@@ -14,6 +14,7 @@ const initialState = {
   addr: null,
   maxlen: 10,
   fract: 8,
+  sigsplit: 3,
   render(
     renderState = {},
     position = 'afterbegin',
@@ -23,41 +24,19 @@ const initialState = {
     <figcaption>${state.name} ${state.id}</figcaption>
   `,
   content: state => {
-    let funds = 0
-    let balance = `${funds}`
-
-    if (state.walletFunds.balance) {
-      funds += state.walletFunds.balance
-      balance = fixedDash(funds, state.fract)
-      // TODO FIX: does not support large balances
-
-      // console.log('balance fixedDash', balance, balance.length)
-
-      let [fundsInt,fundsFract] = balance.split('.')
-      state.maxlen -= fundsInt.length
-
-      let fundsFraction = fundsFract?.substring(
-        0, Math.min(Math.max(0, state.maxlen), 3)
-      )
-
-      let fundsRemainder = fundsFract?.substring(
-        fundsFraction.length,
-        Math.max(0, state.maxlen)
-      )
-
-      balance = html`${
-        fundsInt
-      }<sub><span>.${
-        fundsFraction
-      }</span>${
-        fundsRemainder
-      }</sub>`
-    }
+    let balance = formatDash(
+      state.walletFunds.balance,
+      {
+        fract: state.fract,
+        maxlen: state.maxlen,
+        sigsplit: state.sigsplit,
+      }
+    )
 
     return html`
       ${state.header(state)}
 
-      <div title="${funds}">
+      <div title="${state.walletFunds.balance}">
         <svg width="32" height="33" viewBox="0 0 32 33">
           <use xlink:href="#icon-dash-mark"></use>
         </svg>

src/components/dialog.js

@@ -267,7 +267,7 @@ const initialState = {
         // )
         state.elements.dialog.close('cancel')
       }
-    }
+    },
   },
 }
 

src/helpers/utils.js

@@ -270,6 +270,50 @@ export function toDuff(dash) {
   return Math.round(parseFloat(dash) * DUFFS);
 }
 
+export function formatDash(
+  unformattedBalance,
+  options = {},
+) {
+  let opts = {
+    maxlen: 10,
+    fract: 8,
+    sigsplit: 3,
+    ...options,
+  }
+  let funds = 0
+  let balance = `${funds}`
+
+  if (unformattedBalance) {
+    funds += unformattedBalance
+    balance = fixedDash(funds, opts.fract)
+    // TODO FIX: does not support large balances
+
+    // console.log('balance fixedDash', balance, balance.length)
+
+    let [fundsInt,fundsFract] = balance.split('.')
+    opts.maxlen -= fundsInt.length
+
+    let fundsFraction = fundsFract?.substring(
+      0, Math.min(Math.max(0, opts.maxlen), opts.sigsplit)
+    )
+
+    let fundsRemainder = fundsFract?.substring(
+      fundsFraction.length,
+      Math.max(0, opts.maxlen)
+    )
+
+    balance = `${
+      fundsInt
+    }<sub><span>.${
+      fundsFraction
+    }</span>${
+      fundsRemainder
+    }</sub>`
+  }
+
+  return balance
+}
+
 export function formDataEntries(event) {
   let fd = new FormData(
     event.target,
@@ -984,20 +1028,90 @@ export async function getAvatar(c) {
   return `${avStr}">${initials}</div>`
 }
 
-export function readFile(file, callback) {
+export function fileIsSubType(file, type) {
+  const fileType = file?.type?.split('/')?.[1]
+
+  if (!fileType) {
+    return false
+  }
+
+  return fileType === type
+}
+
+// fileInTypes({type:'application/json'}, ['image/png'])
+export function fileInMIMETypes(file, types = []) {
+  const fileType = file?.type
+
+  if (!fileType) {
+    return false
+  }
+
+  return types.includes(fileType)
+}
+
+export function fileTypeInTypes(file, types = []) {
+  const fileType = file?.type?.split('/')?.[0]
+
+  if (!fileType) {
+    return false
+  }
+
+  return types.includes(fileType)
+}
+
+export function fileTypeInSubtype(file, subtypes = []) {
+  const fileSubType = file?.type?.split('/')?.[1]
+
+  if (!fileSubType) {
+    return false
+  }
+
+  return subtypes.includes(fileSubType)
+}
+
+export function readFile(file, options) {
+  let opts = {
+    expectedFileType: 'json',
+    denyFileTypes: ['audio','video','image','font','model'],
+    denyFileSubTypes: ['msword','xml'],
+    callback: () => {},
+    errorCallback: () => {},
+    ...options,
+  }
   let reader = new FileReader();
   let result
 
   reader.addEventListener('load', () => {
+    if (
+      fileTypeInTypes(
+        file,
+        opts.denyFileTypes,
+      ) || fileTypeInSubtype(
+        file,
+        opts.denyFileSubTypes,
+      )
+    ) {
+      return opts.errorCallback?.({
+        err: `Wrong file type: ${file.type}. Expected: ${opts.expectedFileType}.`,
+        file,
+      })
+    }
+
     try {
       // @ts-ignore
       result = JSON.parse(reader?.result || '{}');
 
-      console.log('parse loaded json', result);
-      callback?.(result)
+      // console.log('parse loaded json', result);
+
+      opts.callback?.(result, file)
 
       // state[key] = result
     } catch(err) {
+      opts.errorCallback?.({
+        err,
+        file,
+      })
+
       throw new Error(`failed to parse JSON data from ${file.name}`)
     }
   });
@@ -1054,11 +1168,26 @@ export function getPartialHDPath(wallet) {
   ].join('/')
 }
 
-export function getAddressIndexFromUsage(wallet, account, usage) {
-  let usageIndex = usage ?? wallet.usageIndex
+export function getAddressIndexFromUsage(wallet, account, usageIdx) {
+  let usageIndex = usageIdx ?? wallet?.usageIndex ?? 0
+  let addressIndex = account.usage?.[usageIndex] ?? account.addressIndex ?? 0
+  let usage = account.usage ?? [
+    account.addressIndex ?? 0,
+    0
+  ]
+
+  // console.log(
+  //   'getAddressIndexFromUsage',
+  //   usageIndex,
+  //   addressIndex,
+  //   account,
+  //   usage,
+  // )
+
   return {
     ...account,
+    usage,
     usageIndex,
-    addressIndex: account.usage[usageIndex],
+    addressIndex,
   }
 }

src/index.css

@@ -72,6 +72,7 @@ main header figure figcaption + div svg {
 main header figure figcaption + div sub {
   align-self: self-end;
   font-size: 2.75rem;
+  font-size: 74%;
 }
 main footer {
   text-align: center;