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 }) {
-
+
{wallet.isConfigured
? <>configure>
: <>attach>}
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 })