-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #204 from lidofinance/feature/si-1068-proposal-mod…
…ify-behavior-on-faq-click-following FAQ click-following navigation
- Loading branch information
Showing
12 changed files
with
194 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,18 @@ | ||
| import Link from 'next/link'; | ||
|
|
||
| import { useInpageNavigation } from 'providers/inpage-navigation'; | ||
| import { InfoBoxStyled } from 'features/withdrawals/shared'; | ||
|
|
||
| export const BunkerInfo = () => { | ||
| const { navigateInpageAnchor } = useInpageNavigation(); | ||
|
|
||
| return ( | ||
| <InfoBoxStyled> | ||
| Lido protocol is in "Bunker mode". The withdrawal requests are | ||
| slowed down until the consequences of the incident that caused | ||
| "Bunker mode" are not resolved. For more details,{' '} | ||
| <Link href="#bunkerModeScenarios">see here</Link>. | ||
| <a href="#bunkerModeScenarios" onClick={navigateInpageAnchor}> | ||
| see here | ||
| </a> | ||
| . | ||
| </InfoBoxStyled> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { | ||
| FC, | ||
| PropsWithChildren, | ||
| createContext, | ||
| useContext, | ||
| useState, | ||
| useMemo, | ||
| useCallback, | ||
| useEffect, | ||
| } from 'react'; | ||
| import invariant from 'tiny-invariant'; | ||
| import { dynamics } from 'config'; | ||
| import { useRouter } from 'next/router'; | ||
|
|
||
| export type InpageNavigationContextValue = { | ||
| hashNav: string; | ||
| navigateInpageAnchor: (e: React.MouseEvent<HTMLAnchorElement>) => void; | ||
| resetInpageAnchor: () => void; | ||
| resetSpecificAnchor: (hash: string) => void; | ||
| }; | ||
|
|
||
| const InpageNavigationContext = | ||
| createContext<InpageNavigationContextValue | null>(null); | ||
| InpageNavigationContext.displayName = 'InpageNavigationContext'; | ||
|
|
||
| // IPFS-compatible hash-based in-page navigation | ||
| export const InpageNavigationProvider: FC<PropsWithChildren> = ({ | ||
| children, | ||
| }) => { | ||
| const { asPath } = useRouter(); | ||
| const [hashNav, setHash] = useState(''); | ||
|
|
||
| useEffect(() => { | ||
| if (dynamics.ipfsMode) return; // Hash is reserved in ipfs mode, ignored here | ||
| const hash = asPath.split('#')[1]; | ||
| setHash(hash); | ||
| }, [asPath]); | ||
|
|
||
| const navigateInpageAnchor = useCallback( | ||
| (e: React.MouseEvent<HTMLAnchorElement>) => { | ||
| const href = e.currentTarget.getAttribute('href'); | ||
| if (!href) return; | ||
| const hash = href.split('#')[1]; | ||
| e.preventDefault(); | ||
|
|
||
| // Remember the hash | ||
| setHash(hash); | ||
|
|
||
| // Perform animated scroll | ||
| document.getElementById(hash)?.scrollIntoView({ | ||
| behavior: 'smooth', | ||
| }); | ||
|
|
||
| // Change the hash for non-ipfs ui, without scrolling the page | ||
| // We have done animated scroll already on next step | ||
| if (!dynamics.ipfsMode) { | ||
| history.pushState({}, '', `#${hash}`); | ||
| } | ||
| }, | ||
| [], | ||
| ); | ||
|
|
||
| const resetInpageAnchor = useCallback(() => { | ||
| setHash(''); | ||
| if (!dynamics.ipfsMode) { | ||
| const hashTrimmed = asPath.split('#')[0]; | ||
| history.pushState({}, '', hashTrimmed); | ||
| } | ||
| }, [asPath]); | ||
|
|
||
| const resetSpecificAnchor = useCallback( | ||
| (hash: string) => { | ||
| if (hash !== hashNav) return; | ||
| resetInpageAnchor(); | ||
| }, | ||
| [resetInpageAnchor, hashNav], | ||
| ); | ||
|
|
||
| const value = useMemo( | ||
| () => ({ | ||
| hashNav, | ||
| navigateInpageAnchor, | ||
| resetInpageAnchor, | ||
| resetSpecificAnchor, | ||
| }), | ||
| [hashNav, navigateInpageAnchor, resetInpageAnchor, resetSpecificAnchor], | ||
| ); | ||
|
|
||
| return ( | ||
| <InpageNavigationContext.Provider value={value}> | ||
| {children} | ||
| </InpageNavigationContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export const useInpageNavigation = () => { | ||
| const value = useContext(InpageNavigationContext); | ||
| invariant( | ||
| value !== null, | ||
| 'useInpageNavigation was used used outside of InpageNavigationProvider', | ||
| ); | ||
| return value; | ||
| }; |
25 changes: 25 additions & 0 deletions
25
shared/components/accordion-navigatable/accordion-navigatable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { Accordion } from '@lidofinance/lido-ui'; | ||
| import { useInpageNavigation } from 'providers/inpage-navigation'; | ||
| import { useCallback } from 'react'; | ||
|
|
||
| type AccordionNavigatableProps = React.ComponentProps<typeof Accordion> & { | ||
| id: string; | ||
| }; | ||
|
|
||
| export const AccordionNavigatable = (props: AccordionNavigatableProps) => { | ||
| const { onCollapse, id } = props; | ||
| const { hashNav, resetSpecificAnchor } = useInpageNavigation(); | ||
|
|
||
| const handleCollapse = useCallback(() => { | ||
| resetSpecificAnchor(id); | ||
| onCollapse?.(); | ||
| }, [resetSpecificAnchor, id, onCollapse]); | ||
|
|
||
| return ( | ||
| <Accordion | ||
| defaultExpanded={hashNav === id} | ||
| {...props} | ||
| onCollapse={handleCollapse} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './accordion-navigatable'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters