ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use dynamic import for WalletCard 

This fixes a lot of issues with hydration
This commit is contained in:
ekzyis 2024-07-05 08:09:24 +02:00
parent eb2f4b980f
commit c270805649
2 changed files with 6 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/wallet-card.js
View File

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

4
pages/settings/wallets/index.js
View File

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