dark/light mode images on wallet pages

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 (
     <CenterLayout>
       {image
-        ? typeof image === 'object'
-          ? <img {...image} alt={title} className='pb-2' />
-          : <img src={image} width='33%' alt={title} className='pb-2' />
+        ? <img alt={title} {...image} src={imgSrc} className='pb-3 px-2 mw-100' />
         : <h2 className='pb-2'>{title}</h2>}
       <h6 className='text-muted text-center pb-3'><Text>{subtitle}</Text></h6>
       <Form