fix different carousels named the exact same thing

components/nav/index.js

@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import DesktopHeader from './desktop/header'
 import MobileHeader from './mobile/header'
 import StickyBar from './sticky-bar'
-import { CarouselProvider } from './carousel'
+import { PriceCarouselProvider } from './price-carousel'
 
 export default function Navigation ({ sub }) {
   const router = useRouter()
@@ -17,10 +17,10 @@ export default function Navigation ({ sub }) {
   }
 
   return (
-    <CarouselProvider>
+    <PriceCarouselProvider>
       <DesktopHeader {...props} />
       <MobileHeader {...props} />
       <StickyBar {...props} />
-    </CarouselProvider>
+    </PriceCarouselProvider>
   )
 }

components/nav/price-carousel.js

@@ -12,12 +12,12 @@ const carousel = [
   'halving'
 ]
 
-export const CarouselContext = createContext({
+export const PriceCarouselContext = createContext({
   selection: undefined,
   handleClick: () => {}
 })
 
-export function CarouselProvider ({ children }) {
+export function PriceCarouselProvider ({ children }) {
   const [selection, setSelection] = useState(undefined)
   const [pos, setPos] = useState(0)
 
@@ -35,12 +35,12 @@ export function CarouselProvider ({ children }) {
   }, [pos])
 
   return (
-    <CarouselContext.Provider value={[selection, handleClick]}>
+    <PriceCarouselContext.Provider value={[selection, handleClick]}>
       {children}
-    </CarouselContext.Provider>
+    </PriceCarouselContext.Provider>
   )
 }
 
-export function useCarousel () {
-  return useContext(CarouselContext)
+export function usePriceCarousel () {
+  return useContext(PriceCarouselContext)
 }

components/nav/static.js

@@ -1,11 +1,11 @@
 import { Container, Nav, Navbar } from 'react-bootstrap'
 import styles from '../header.module.css'
 import { BackOrBrand, NavPrice, SearchItem } from './common'
-import { CarouselProvider } from './carousel'
+import { PriceCarouselProvider } from './price-carousel'
 
 export default function StaticHeader () {
   return (
-    <CarouselProvider>
+    <PriceCarouselProvider>
       <Container as='header' className='px-sm-0'>
         <Navbar>
           <Nav
@@ -17,6 +17,6 @@ export default function StaticHeader () {
           </Nav>
         </Navbar>
       </Container>
-    </CarouselProvider>
+    </PriceCarouselProvider>
   )
 }

components/price.js

@@ -8,7 +8,7 @@ import { NORMAL_POLL_INTERVAL, SSR } from '@/lib/constants'
 import { useBlockHeight } from './block-height'
 import { useChainFee } from './chain-fee'
 import { CompactLongCountdown } from './countdown'
-import { useCarousel } from './nav/carousel'
+import { usePriceCarousel } from './nav/price-carousel'
 
 export const PriceContext = React.createContext({
   price: null,
@@ -45,7 +45,7 @@ export function PriceProvider ({ price, children }) {
 }
 
 export default function Price ({ className }) {
-  const [selection, handleClick] = useCarousel()
+  const [selection, handleClick] = usePriceCarousel()
 
   const { price, fiatSymbol } = usePrice()
   const { height: blockHeight, halving } = useBlockHeight()