refactor: Check darkmode in useWallets (#1640)

* Check darkmode in useWallets

* Check darkmode in useWalletImage

components/wallet-card.js

@@ -7,8 +7,7 @@ import { Status, isConfigured } from '@/wallets/common'
 import DraggableIcon from '@/svgs/draggable.svg'
 import RecvIcon from '@/svgs/arrow-left-down-line.svg'
 import SendIcon from '@/svgs/arrow-right-up-line.svg'
-import useDarkMode from './dark-mode'
+import { useWalletImage } from '@/components/wallet-image'
-import { useEffect, useState } from 'react'
 
 const statusToClass = status => {
   switch (status) {
@@ -20,15 +19,7 @@ const statusToClass = status => {
 }
 
 export default function WalletCard ({ wallet, draggable, onDragStart, onDragEnter, onDragEnd, onTouchStart, sourceIndex, targetIndex, index }) {
-  const [dark] = useDarkMode()
+  const image = useWalletImage(wallet)
-  const { card: { title, image } } = wallet.def
-  const [imgSrc, setImgSrc] = useState(image?.src)
-
-  useEffect(() => {
-    if (!imgSrc) return
-    // wallet.png <-> wallet-dark.png
-    setImgSrc(dark ? image?.src.replace(/\.([a-z]{3})$/, '-dark.$1') : image?.src)
-  }, [dark])
 
   return (
     <Card
@@ -56,8 +47,8 @@ export default function WalletCard ({ wallet, draggable, onDragStart, onDragEnte
       >
         <div className='d-flex text-center align-items-center h-100'>
           {image
-            ? <img alt={title} width='100%' {...image} src={imgSrc} />
+            ? <img width='100%' {...image} />
-            : <Card.Title className='w-100 justify-content-center align-items-center'>{title}</Card.Title>}
+            : <Card.Title className='w-100 justify-content-center align-items-center'>{wallet.def.card.title}</Card.Title>}
         </div>
       </Card.Body>
       <Link href={`/settings/wallets/${wallet.def.name}`}>

components/wallet-image.js

@@ -0,0 +1,14 @@
+import useDarkMode from '@/components/dark-mode'
+
+export function useWalletImage (wallet) {
+  const [darkMode] = useDarkMode()
+
+  const { title, image } = wallet.def.card
+
+  if (!image) return null
+
+  // wallet.png <-> wallet-dark.png
+  const src = darkMode ? image?.src.replace(/\.([a-z]{3})$/, '-dark.$1') : image?.src
+
+  return { ...image, alt: title, src }
+}

pages/settings/wallets/[wallet].js

@@ -13,12 +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, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo } 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'
+import { useWalletImage } from '@/components/wallet-image'
 
 export const getServerSideProps = getGetServerSideProps({ authRequired: true })
 
@@ -29,8 +29,7 @@ export default function WalletSettings () {
   const wallet = useWallet(name)
   const { me } = useMe()
   const { save, detach } = useWalletConfigurator(wallet)
-  const [dark] = useDarkMode()
+  const image = useWalletImage(wallet)
-  const [imgSrc, setImgSrc] = useState(wallet?.def.card?.image?.src)
 
   const initial = useMemo(() => {
     const initial = wallet?.def.fields.reduce((acc, field) => {
@@ -70,20 +69,12 @@ export default function WalletSettings () {
     }
   }, [wallet.def])
 
-  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
-        ? <img alt={title} {...image} src={imgSrc} className='pb-3 px-2 mw-100' />
+        ? <img {...image} className='pb-3 px-2 mw-100' />
-        : <h2 className='pb-2'>{title}</h2>}
+        : <h2 className='pb-2'>{wallet.def.card.title}</h2>}
-      <h6 className='text-muted text-center pb-3'><Text>{subtitle}</Text></h6>
+      <h6 className='text-muted text-center pb-3'><Text>{wallet.def.card.subtitle}</Text></h6>
       <Form
         initial={initial}
         enableReinitialize