From c270805649bb100c3e1fe9c548d100a17105d7a8 Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Fri, 5 Jul 2024 08:09:24 +0200
Subject: [PATCH] Use dynamic import for WalletCard

This fixes a lot of issues with hydration
---
 components/wallet-card.js       | 13 +++----------
 pages/settings/wallets/index.js |  4 +++-
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/components/wallet-card.js b/components/wallet-card.js
index c2229ad1..dd3209e0 100644
--- a/components/wallet-card.js
+++ b/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} /></>}
diff --git a/pages/settings/wallets/index.js b/pages/settings/wallets/index.js
index 50265172..308f6b3d 100644
--- a/pages/settings/wallets/index.js
+++ b/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 })