Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix hydration errors #242

Closed
wants to merge 2 commits into from
Closed

fix hydration errors #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b0ac8f
fix hydration errors
cctdaniel Sep 21, 2023
8e6c0ca
fix pre-commit
cctdaniel Sep 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions frontend/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { Dialog } from '@headlessui/react'
import { useState } from 'react'
import dynamic from 'next/dynamic'

const Header = () => {
const router = useRouter()
const [isMenuOpen, setIsMenuOpen] = useState(false)

const WalletMultiButtonDynamic = dynamic(
async () =>
(await import('@solana/wallet-adapter-react-ui')).WalletMultiButton,
{ ssr: false }
)

return (
<div className="before:gradient-border relative -bottom-[1px] mb-3">
<div className="col-span-12 flex h-24 items-center justify-between px-8 md:px-8 xl:col-span-10 xl:col-start-2">
Expand Down Expand Up @@ -42,7 +48,7 @@ const Header = () => {
</Link>
</div>
<div className="flex items-center justify-end space-x-2">
<WalletMultiButton className="primary-btn pt-0.5" />
<WalletMultiButtonDynamic className="primary-btn pt-0.5" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was causing hydration error when wallet is connected because client side and server side was returning different code

<div className="flex-shrink-0 md:hidden">
<button
className="rounded-full p-2 hover:bg-hoverGray"
Expand Down
225 changes: 111 additions & 114 deletions frontend/pages/staking.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
import { WalletModalButton } from '@solana/wallet-adapter-react-ui'
import BN from 'bn.js'
import type { NextPage } from 'next'
import { useRouter } from 'next/router'
import {
PythBalance,
StakeAccount,
Expand Down Expand Up @@ -50,7 +49,6 @@ const Staking: NextPage = () => {
const { connection } = useConnection()
const anchorWallet = useAnchorWallet()
const { publicKey, connected } = useWallet()
const { isReady } = useRouter()
const [
isMultipleStakeAccountsModalOpen,
setIsMultipleStakeAccountsModalOpen,
Expand Down Expand Up @@ -1064,127 +1062,126 @@ const Staking: NextPage = () => {
))}
</Tab.List>
<Tab.Panels className="mt-4 sm:mt-11">
{isReady &&
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isReady was causing hydration error if wallet wasn't connected

Object.keys(TabEnum)
.slice(3)
.map((v, idx) => (
<Tab.Panel key={idx}>
<div className="mx-auto max-w-xl text-center leading-6">
<div className="mb-4 h-36 sm:mb-12 sm:h-16">
{tabDescriptions[v as keyof typeof TabEnum]}
</div>

<div className="mb-4 flex items-end justify-between md:items-center ">
<label htmlFor="amount" className="block ">
Amount (PYTH)
</label>
<div className="ml-auto mr-0 flex flex-col-reverse items-end space-x-2 md:flex-row md:items-center">
{isBalanceLoading ? (
<div className="h-5 w-14 animate-pulse rounded-lg bg-darkGray4" />
) : (
<p className="mt-2 md:mt-0">
{currentTab === TabEnum.Lock
? 'Balance'
: currentTab === TabEnum.Unlock
? 'Locked Tokens'
: 'Withdrawable'}
: {connected ? balance?.toString() : '-'}
</p>
)}
<div className="mb-2 flex space-x-2 md:mb-0">
<button
className="outlined-btn hover:bg-darkGray4"
onClick={handleHalfBalanceClick}
>
Half
</button>
<button
className="outlined-btn hover:bg-darkGray4"
onClick={handleMaxBalanceClick}
>
Max
</button>
</div>
</div>
</div>
<input
type="text"
name="amount"
id="amount"
autoComplete="amount"
value={amount}
onChange={handleAmountChange}
className="input-no-spin mt-1 mb-8 block h-14 w-full rounded-full bg-darkGray4 px-4 text-center text-lg font-semibold focus:outline-none"
/>
{Object.keys(TabEnum)
.slice(3)
.map((v, idx) => (
<Tab.Panel key={idx}>
<div className="mx-auto max-w-xl text-center leading-6">
<div className="mb-4 h-36 sm:mb-12 sm:h-16">
{tabDescriptions[v as keyof typeof TabEnum]}
</div>

<div className="flex items-center justify-center ">
{!connected ? (
<WalletModalButton className="secondary-btn pt-0.5 text-xs" />
) : currentTab === TabEnum.Lock ? (
<button
className="action-btn text-base "
onClick={handleDeposit}
disabled={
isLockButtonDisabled ||
!isSufficientBalance ||
isActionLoading
}
>
{isActionLoading ? (
<Spinner />
) : isLockButtonDisabled ? (
<Tooltip content="You are currently not enrolled in governance.">
Lock
</Tooltip>
) : isSufficientBalance ? (
'Lock'
) : (
'Insufficient Balance'
)}
</button>
) : currentTab === TabEnum.Unlock ? (
<div className="mb-4 flex items-end justify-between md:items-center ">
<label htmlFor="amount" className="block ">
Amount (PYTH)
</label>
<div className="ml-auto mr-0 flex flex-col-reverse items-end space-x-2 md:flex-row md:items-center">
{isBalanceLoading ? (
<div className="h-5 w-14 animate-pulse rounded-lg bg-darkGray4" />
) : (
<p className="mt-2 md:mt-0">
{currentTab === TabEnum.Lock
? 'Balance'
: currentTab === TabEnum.Unlock
? 'Locked Tokens'
: 'Withdrawable'}
: {connected ? balance?.toString() : '-'}
</p>
)}
<div className="mb-2 flex space-x-2 md:mb-0">
<button
className="action-btn font-base"
onClick={handleUnlock}
disabled={
isLockButtonDisabled ||
!isSufficientBalance ||
isActionLoading
}
className="outlined-btn hover:bg-darkGray4"
onClick={handleHalfBalanceClick}
>
{isActionLoading ? (
<Spinner />
) : isLockButtonDisabled ? (
<Tooltip content="You are currently not enrolled in governance.">
Unlock
</Tooltip>
) : isSufficientBalance ? (
'Unlock'
) : (
'Insufficient Balance'
)}
Half
</button>
) : (
<button
className="action-btn font-base"
onClick={handleWithdraw}
disabled={
!isSufficientBalance || isActionLoading
}
className="outlined-btn hover:bg-darkGray4"
onClick={handleMaxBalanceClick}
>
{isActionLoading ? (
<Spinner />
) : isSufficientBalance ? (
'Withdraw'
) : (
'Insufficient Balance'
)}
Max
</button>
)}
</div>
</div>
</div>
</Tab.Panel>
))}
<input
type="text"
name="amount"
id="amount"
autoComplete="amount"
value={amount}
onChange={handleAmountChange}
className="input-no-spin mt-1 mb-8 block h-14 w-full rounded-full bg-darkGray4 px-4 text-center text-lg font-semibold focus:outline-none"
/>

<div className="flex items-center justify-center ">
{!connected ? (
<WalletModalButton className="secondary-btn pt-0.5 text-xs" />
) : currentTab === TabEnum.Lock ? (
<button
className="action-btn text-base "
onClick={handleDeposit}
disabled={
isLockButtonDisabled ||
!isSufficientBalance ||
isActionLoading
}
>
{isActionLoading ? (
<Spinner />
) : isLockButtonDisabled ? (
<Tooltip content="You are currently not enrolled in governance.">
Lock
</Tooltip>
) : isSufficientBalance ? (
'Lock'
) : (
'Insufficient Balance'
)}
</button>
) : currentTab === TabEnum.Unlock ? (
<button
className="action-btn font-base"
onClick={handleUnlock}
disabled={
isLockButtonDisabled ||
!isSufficientBalance ||
isActionLoading
}
>
{isActionLoading ? (
<Spinner />
) : isLockButtonDisabled ? (
<Tooltip content="You are currently not enrolled in governance.">
Unlock
</Tooltip>
) : isSufficientBalance ? (
'Unlock'
) : (
'Insufficient Balance'
)}
</button>
) : (
<button
className="action-btn font-base"
onClick={handleWithdraw}
disabled={
!isSufficientBalance || isActionLoading
}
>
{isActionLoading ? (
<Spinner />
) : isSufficientBalance ? (
'Withdraw'
) : (
'Insufficient Balance'
)}
</button>
)}
</div>
</div>
</Tab.Panel>
))}
</Tab.Panels>
</Tab.Group>
</div>
Expand Down
1 change: 1 addition & 0 deletions staking/test-ledger/faucet-keypair.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[0,161,188,48,100,25,104,191,3,16,139,200,139,151,205,116,237,28,107,46,54,6,17,13,171,68,208,98,36,160,130,109,45,255,47,34,24,44,251,167,84,179,31,216,123,81,142,127,70,30,146,25,7,217,170,229,124,194,155,241,106,57,37,173]
Binary file added staking/test-ledger/genesis.bin.failed
View file
Open in desktop
Binary file not shown.
Binary file added staking/test-ledger/genesis.tar.bz2.failed
View file
Open in desktop
Binary file not shown.
Empty file added staking/test-ledger/ledger.lock
View file
Open in desktop
Empty file.
Binary file added staking/test-ledger/rocksdb.failed/000004.log
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions staking/test-ledger/rocksdb.failed/CURRENT
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
MANIFEST-000005
1 change: 1 addition & 0 deletions staking/test-ledger/rocksdb.failed/IDENTITY
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
7b800297-ebe6-4b63-8843-c21ce9d9dcfe
Empty file added staking/test-ledger/rocksdb.failed/LOCK
View file
Open in desktop
Empty file.
Loading
Loading