Retain contract address while switching between link tabs
This commit is contained in:
parent
3e052e6e1e
commit
4d53d498d7
@ -1,5 +1,6 @@
|
||||
import clsx from 'clsx'
|
||||
import { Anchor } from 'components/Anchor'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
export interface LinkTabProps {
|
||||
title: string
|
||||
@ -11,6 +12,10 @@ export interface LinkTabProps {
|
||||
export const LinkTab = (props: LinkTabProps) => {
|
||||
const { title, description, href, isActive } = props
|
||||
|
||||
// get contract address from the router
|
||||
const router = useRouter()
|
||||
const { contractAddress } = router.query
|
||||
|
||||
return (
|
||||
<Anchor
|
||||
className={clsx(
|
||||
@ -19,7 +24,7 @@ export const LinkTab = (props: LinkTabProps) => {
|
||||
isActive ? 'border-plumbus' : 'border-transparent',
|
||||
isActive ? 'bg-plumbus/5 hover:bg-plumbus/10' : 'hover:bg-white/5',
|
||||
)}
|
||||
href={href}
|
||||
href={href + (contractAddress ? `?contractAddress=${contractAddress as string}` : '')}
|
||||
>
|
||||
<h4 className="font-bold">{title}</h4>
|
||||
<span className="text-sm text-white/80 line-clamp-2">{description}</span>
|
||||
|
||||
@ -489,6 +489,9 @@ const BadgeHubExecutePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
|
||||
|
||||
@ -81,6 +81,9 @@ const BadgeHubMigratePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -116,6 +116,9 @@ const BadgeHubQueryPage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -96,6 +96,9 @@ const BaseMinterExecutePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -81,6 +81,9 @@ const BaseMinterMigratePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -68,6 +68,9 @@ const BaseMinterQueryPage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -188,6 +188,9 @@ const OpenEditionMinterExecutePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -81,6 +81,9 @@ const OpenEditionMinterMigratePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -73,6 +73,9 @@ const OpenEditionMinterQueryPage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -141,6 +141,9 @@ const Sg721ExecutePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -81,6 +81,9 @@ const Sg721MigratePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -85,6 +85,9 @@ const Sg721QueryPage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -89,6 +89,9 @@ const SplitsExecutePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -82,6 +82,9 @@ const SplitsMigratePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -99,6 +99,9 @@ const SplitsQueryPage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -196,6 +196,9 @@ const VendingMinterExecutePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -81,6 +81,9 @@ const VendingMinterMigratePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -73,6 +73,9 @@ const VendingMinterQueryPage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
@ -168,6 +168,9 @@ const WhitelistExecutePage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
|
||||
|
||||
@ -115,6 +115,9 @@ const WhitelistQueryPage: NextPage = () => {
|
||||
if (contractAddress.length > 0) {
|
||||
void router.replace({ query: { contractAddress } })
|
||||
}
|
||||
if (contractAddress.length === 0) {
|
||||
void router.replace({ query: {} })
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contractAddress])
|
||||
useEffect(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user