[DO NOT MERGE] Test algolia search

.env.example

@@ -1,3 +1,5 @@
 ALGOLIA_APP_ID=I9A62UQS9Z
 ALGOLIA_WRITE_API_KEY=
-ALGOLIA_INDEX_NAME=docs-test
+ALGOLIA_INDEX_NAME=docs-test
+PUBLIC_ALGOLIA_SEARCH_APP_ID=
+PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY=

package.json

@@ -53,6 +53,7 @@
     "@openzeppelin/contracts": "^4.9.6",
     "astro": "^4.15.1",
     "bignumber.js": "^9.1.2",
+    "chainlink-algolia-search": "^0.7.0",
     "clipboard": "^2.0.11",
     "dotenv": "^16.4.5",
     "ethers": "^5.7.2",

src/components/Header/Header.astro

@@ -3,6 +3,10 @@ import NotificationBanner from "~/features/notifications/components/Notification
 import { NavBar } from "./NavBar"
 
 const path = Astro.url.pathname
+const algoliaVars = {
+  algoliaAppId: import.meta.env.PUBLIC_ALGOLIA_SEARCH_APP_ID || "",
+  algoliaPublicApiKey: import.meta.env.PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY || "",
+}
 ---
 
 <!-- Google Tag Manager (noscript) -->
@@ -12,6 +16,6 @@ const path = Astro.url.pathname
   width="0"
   style="display:none;visibility:hidden"></iframe>
 <!-- End Google Tag Manager (noscript) -->
-<NavBar path={path} client:idle />
+<NavBar path={path} client:idle algoliaVars={algoliaVars} />
 
 <NotificationBanner />

src/components/Header/Nav/navBar.module.css

@@ -236,10 +236,6 @@
     fill: var(--color-text-primary);
   }
 
-  .searchTrigger {
-    display: initial;
-  }
-
   .rightSection {
     justify-content: flex-end;
   }

src/components/Header/NavBar.tsx

@@ -5,7 +5,15 @@ import { getNavigationProps } from "./getNavigationProps"
 import { useNavBar } from "./useNavBar/useNavBar"
 import styles from "./scroll.module.css"
 
-export const NavBar = ({ path, showSearch = true }: { path: string; showSearch?: boolean }) => {
+export const NavBar = ({
+  path,
+  showSearch = true,
+  algoliaVars,
+}: {
+  path: string
+  showSearch?: boolean
+  algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
+}) => {
   const navRef = React.useRef(null)
 
   const { setNavBarInfo } = useNavBar()
@@ -47,7 +55,7 @@ export const NavBar = ({ path, showSearch = true }: { path: string; showSearch?:
       <Nav
         {...getNavigationProps()}
         path={path}
-        searchTrigger={showSearch ? <Search /> : undefined}
+        searchTrigger={showSearch ? <Search algoliaVars={algoliaVars} /> : undefined}
         onHideChange={onHideChange}
         doubleNavbar={doubleNavbar()}
       />

src/components/Header/aiSearch/Search.tsx

@@ -1,11 +1,10 @@
-import { SearchButton } from "./SearchButton"
-import { SearchModal } from "./SearchModal"
+import { SearchButton } from "chainlink-algolia-search"
+import "chainlink-algolia-search/dist/index.css"
 
-export const Search = () => {
-  return (
-    <>
-      <SearchButton />
-      <SearchModal />
-    </>
-  )
+export const Search = ({
+  algoliaVars: { algoliaAppId, algoliaPublicApiKey },
+}: {
+  algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
+}) => {
+  return <SearchButton algoliaAppId={algoliaAppId} algoliaPublicApiKey={algoliaPublicApiKey} />
 }