diff --git a/components/use-indexeddb.js b/components/use-indexeddb.js index eac82872..0afeeeeb 100644 --- a/components/use-indexeddb.js +++ b/components/use-indexeddb.js @@ -27,12 +27,17 @@ function useIndexedDB ({ dbName, storeName, options = DEFAULT_OPTIONS, indices = db.transaction(storeName) while (operationQueue.current.length > 0) { const operation = operationQueue.current.shift() - operation(db) + // if the db is the same as the one we're processing, run the operation + // else, we'll just clear the operation queue + // XXX this is a consquence of using a ref to store the queue and should be fixed + if (dbName === db.name) { + operation(db) + } } } catch (error) { handleError(error) } - }, [storeName, handleError, operationQueue]) + }, [dbName, storeName, handleError, operationQueue]) useEffect(() => { let isMounted = true diff --git a/pages/settings/wallets/[wallet].js b/pages/settings/wallets/[wallet].js index cbaa0173..f69e93d5 100644 --- a/pages/settings/wallets/[wallet].js +++ b/pages/settings/wallets/[wallet].js @@ -13,11 +13,12 @@ import { canReceive, canSend, isConfigured } from '@/wallets/common' import { SSR } from '@/lib/constants' import WalletButtonBar from '@/components/wallet-buttonbar' import { useWalletConfigurator } from '@/wallets/config' -import { useCallback, useMemo } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' import { useMe } from '@/components/me' import validateWallet from '@/wallets/validate' import { ValidationError } from 'yup' import { useFormikContext } from 'formik' +import useDarkMode from '@/components/dark-mode' export const getServerSideProps = getGetServerSideProps({ authRequired: true }) @@ -28,6 +29,8 @@ export default function WalletSettings () { const wallet = useWallet(name) const { me } = useMe() const { save, detach } = useWalletConfigurator(wallet) + const [dark] = useDarkMode() + const [imgSrc, setImgSrc] = useState(wallet?.def.card?.image?.src) const initial = useMemo(() => { const initial = wallet?.def.fields.reduce((acc, field) => { @@ -69,12 +72,16 @@ export default function WalletSettings () { const { card: { image, title, subtitle } } = wallet?.def || { card: {} } + useEffect(() => { + if (!imgSrc) return + // wallet.png <-> wallet-dark.png + setImgSrc(dark ? image?.src.replace(/\.([a-z]{3})$/, '-dark.$1') : image?.src) + }, [dark]) + return ( {image - ? typeof image === 'object' - ? {title} - : {title} + ? {title} :

{title}

}
{subtitle}