Use dynamic import for WalletCard

This fixes a lot of issues with hydration

components/wallet-card.js

@@ -4,19 +4,12 @@ import Plug from '@/svgs/plug.svg'
 import Gear from '@/svgs/settings-5-fill.svg'
 import Link from 'next/link'
 import { useWallet, Status } from './wallet'
-import { useEffect, useState } from 'react'
 
-export function WalletCard ({ name, title, badges, status }) {
+export default function WalletCard ({ name, title, badges, status }) {
   const wallet = useWallet(name)
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    // fix mismatched className props during hydration
-    setMounted(true)
-  }, [])
 
   let indicator = styles.disabled
-  switch (mounted && wallet.status) {
+  switch (wallet.status) {
     case Status.Enabled:
     case true:
       indicator = styles.success
@@ -47,7 +40,7 @@ export function WalletCard ({ name, title, badges, status }) {
         </Card.Subtitle>
       </Card.Body>
       <Link href={`/settings/wallets/${name}`}>
-        <Card.Footer className={styles.attach} suppressHydrationWarning>
+        <Card.Footer className={styles.attach}>
           {wallet.isConfigured
             ? <>configure<Gear width={14} height={14} /></>
             : <>attach<Plug width={14} height={14} /></>}

pages/settings/wallets/index.js

@@ -1,11 +1,13 @@
 import { getGetServerSideProps } from '@/api/ssrApollo'
 import Layout from '@/components/layout'
 import styles from '@/styles/wallet.module.css'
-import { WalletCard } from '@/components/wallet-card'
 import { WALLETS as WALLETS_QUERY } from '@/fragments/wallet'
 import Link from 'next/link'
 import { WALLET_DEFS } from '@/components/wallet'
 import { useState } from 'react'
+import dynamic from 'next/dynamic'
+
+const WalletCard = dynamic(() => import('@/components/wallet-card'), { ssr: false })
 
 export const getServerSideProps = getGetServerSideProps({ query: WALLETS_QUERY, authRequired: true })