Show 'wallets unavailable' if device does not support IndexedDB

Author: ekzyis

pages/wallets/index.js

@@ -54,16 +54,24 @@ export default function Wallet () {
     )
   }
 
-  if (status === Status.NO_WALLETS && !showWallets) {
+  if ([Status.NO_WALLETS, Status.WALLETS_UNAVAILABLE].includes(status) && !showWallets) {
     return (
       <WalletLayout>
         <div className='py-5 text-center d-flex flex-column align-items-center justify-content-center flex-grow-1'>
           <Button
             onClick={() => setShowWallets(true)}
+            disabled={status === Status.WALLETS_UNAVAILABLE}
             size='md' variant='secondary'
           >attach wallet
           </Button>
-          <small className='d-block mt-3 text-muted'>attach a wallet to send and receive sats</small>
+          {status === Status.WALLETS_UNAVAILABLE
+            ? (
+              <small className='d-block mt-3 text-muted'>
+                wallets unavailable<br />
+                this device does not support storage of cryptographic keys
+              </small>
+              )
+            : <small className='d-block mt-3 text-muted'>attach a wallet to send and receive sats</small>}
         </div>
       </WalletLayout>
     )

wallets/client/context/hooks.js

@@ -9,7 +9,7 @@ import {
   useWalletMigrationMutation, CryptoKeyRequiredError, useIsWrongKey
 } from '@/wallets/client/hooks'
 import { WalletConfigurationError } from '@/wallets/client/errors'
-import { SET_WALLETS, WRONG_KEY, KEY_MATCH, useWalletsDispatch } from '@/wallets/client/context'
+import { SET_WALLETS, WRONG_KEY, KEY_MATCH, NO_KEY, useWalletsDispatch } from '@/wallets/client/context'
 
 export function useServerWallets () {
   const dispatch = useWalletsDispatch()
@@ -108,7 +108,9 @@ export function useKeyInit () {
   const wrongKey = useIsWrongKey()
 
   useEffect(() => {
-    if (wrongKey) {
+    if (typeof window.indexedDB === 'undefined') {
+      dispatch({ type: NO_KEY })
+    } else if (wrongKey) {
       dispatch({ type: WRONG_KEY })
     } else {
       dispatch({ type: KEY_MATCH })

wallets/client/context/reducer.js

@@ -5,14 +5,16 @@ export const Status = {
   LOADING_WALLETS: 'LOADING_WALLETS',
   NO_WALLETS: 'NO_WALLETS',
   HAS_WALLETS: 'HAS_WALLETS',
-  PASSPHRASE_REQUIRED: 'PASSPHRASE_REQUIRED'
+  PASSPHRASE_REQUIRED: 'PASSPHRASE_REQUIRED',
+  WALLETS_UNAVAILABLE: 'WALLETS_UNAVAILABLE'
 }
 
 // wallet actions
 export const SET_WALLETS = 'SET_WALLETS'
 export const SET_KEY = 'SET_KEY'
 export const WRONG_KEY = 'WRONG_KEY'
 export const KEY_MATCH = 'KEY_MATCH'
+export const NO_KEY = 'KEY_UNAVAILABLE'
 
 export default function reducer (state, action) {
   switch (action.type) {
@@ -50,13 +52,18 @@ export default function reducer (state, action) {
           ? state.status
           : walletStatus(state.wallets)
       }
+    case NO_KEY:
+      return {
+        ...state,
+        status: Status.WALLETS_UNAVAILABLE
+      }
     default:
       return state
   }
 }
 
 function statusLocked (status) {
-  return [Status.PASSPHRASE_REQUIRED].includes(status)
+  return [Status.PASSPHRASE_REQUIRED, Status.WALLETS_UNAVAILABLE].includes(status)
 }
 
 function walletStatus (wallets) {