Feat/update bridge sdk

webapps/world-builder-dashboard/src/components/landing/Container.tsx

@@ -76,7 +76,7 @@ const Container: React.FC<ContainerProps> = ({ components, isNavbarOpen, setIsNa
                             setIsNavbarOpen={setIsNavbarOpen}
                             startBuilding={startBuilding}
                             navigateLink={navigateLink}
-                            isSticky={true}
+                            isContainer={true}
                         />
                         <div className={`${parentStyles.mainLayout} ${isNavbarOpen ? styles.layoutDarkened : ''}`}
                             style={backgroundStyle ? { background: backgroundStyle } : undefined}>

webapps/world-builder-dashboard/src/components/landing/Landing.module.css

@@ -44,11 +44,21 @@ body {
   align-self: stretch;
 }
 
+.navbarStickyContainer {
+  position: sticky;
+  z-index: 1005;
+  top: 24px;
+  padding: 12px 12px 12px 16px;
+  align-items: flex-start;
+  border-radius: 20px;
+  border: 1px solid var(--gray-500, #737373);
+  background: hsl(0, 0%, 3%);
+}
+
 .navbarSticky {
   position: sticky;
   z-index: 1005;
   top: 0px;
-  padding-top: 24px;
   padding: 12px 12px 12px 16px;
   align-items: flex-start;
   border-radius: 20px;

webapps/world-builder-dashboard/src/components/landing/Navbar.tsx

@@ -12,7 +12,7 @@ interface NavbarProps {
   setIsNavbarOpen: React.Dispatch<React.SetStateAction<boolean>>
   startBuilding: () => void
   navigateLink: (item: { name: string; link: string }) => void
-  isSticky: boolean
+  isContainer: boolean
 }
 
 const NAVBAR_ITEMS = [
@@ -26,12 +26,12 @@ const NAVBAR_ITEMS = [
   }
 ]
 
-const Navbar: React.FC<NavbarProps> = ({ navbarOpen, smallView, setIsNavbarOpen, startBuilding, navigateLink, isSticky }) => {
+const Navbar: React.FC<NavbarProps> = ({ navbarOpen, smallView, setIsNavbarOpen, startBuilding, navigateLink, isContainer }) => {
   const navigate = useNavigate()
   const location = useLocation()
   return (
     <>
-      <div className={`${styles.navbarContainer} ${isSticky ? styles.navbarSticky : ''}`}>
+      <div className={`${styles.navbarContainer} ${isContainer ? styles.navbarStickyContainer : styles.navbarSticky}`}>
         <div className={styles.navbar}>
           <div className={styles.logoWrapper} onClick={() => navigate('/')}>
             <IconGame7Logo />

webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.module.css

@@ -6,11 +6,20 @@ body {
   -webkit-scrollbar: none;
 }
 
+
+.sticky {
+  position: sticky;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  z-index: 1000;
+}
+
 .layout {
   display: flex;
   width: 100vw;
-  height: 100svh;
-  padding: 24px;
+  height: calc(100svh);
+  padding: 24px 24px 0px 24px;
   flex-direction: column;
   align-items: center;
   gap: 16px;

webapps/world-builder-dashboard/src/pages/LandingPage/LandingPage.tsx

@@ -1,5 +1,5 @@
 // LandingPage.tsx
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styles from './LandingPage.module.css'
 import { useMediaQuery } from 'summon-ui/mantine'
@@ -19,18 +19,35 @@ const LandingPage: React.FC = () => {
   const [navbarOpen, setNavBarOpen] = useState<boolean>(false)
   const smallView = useMediaQuery('(max-width: 750px)')
   const isLargeView = useMediaQuery('(min-width: 1440px)')
-
+  const mainLayoutRef = useRef<HTMLDivElement>(null);
+  const footerRef = useRef<HTMLDivElement>(null);
   const [backgroundStyle, setBackgroundStyle] = useState<string | undefined>();
 
   useEffect(() => {
-    const img = new Image();
-    img.src = backgroundImage as string;
+    const img = new Image()
+    img.src = backgroundImage as string
 
     img.onload = () => {
-      setBackgroundStyle(`#1b1b1b url(${backgroundImage}) 50% / cover no-repeat`);
+      setBackgroundStyle(`#1b1b1b url(${backgroundImage}) 50% / cover no-repeat`)
+    }
+  }, [])
+
+  useEffect(() => {
+    const element = mainLayoutRef.current;
+    if (!element) return;
+
+    const handleScroll = () => {
+      const isAtBottom = element.scrollHeight - element.scrollTop === element.clientHeight;
+      if (isAtBottom) {
+        footerRef.current?.scrollIntoView({ behavior: 'smooth' });
+      }
     };
+
+    element.addEventListener('scroll', handleScroll);
+    return () => element.removeEventListener('scroll', handleScroll);
   }, []);
 
+
   const startBuilding = () => {
     setSelectedNetworkType('Testnet')
     navigate('/faucet')
@@ -78,9 +95,9 @@ const LandingPage: React.FC = () => {
                 setIsNavbarOpen={setNavBarOpen}
                 startBuilding={startBuilding}
                 navigateLink={navigateLink}
-                isSticky={true}
+                isContainer={false}
               />
-              <div className={`${styles.mainLayout} ${navbarOpen ? styles.layoutDarkened : ''}`}
+              <div ref={mainLayoutRef} className={`${styles.mainLayout} ${navbarOpen ? styles.layoutDarkened : ''}`}
                 style={backgroundStyle ? { background: backgroundStyle } : undefined}>
                 <MainSection smallView={!!smallView} startBuilding={startBuilding} />
                 <BenefitsSection />
@@ -94,7 +111,9 @@ const LandingPage: React.FC = () => {
               )}
             </div>
           </div>
-          <Footer />
+          <div ref={footerRef}  >
+            <Footer />
+          </div>
         </div>
       </>
       )}

webapps/world-builder-dashboard/src/pages/LegalPage/LegalPage.tsx

@@ -48,7 +48,7 @@ const LandingPage: React.FC<LegalPageProps> = ({legalContent}) => {
               setIsNavbarOpen={setNavBarOpen}
               startBuilding={startBuilding}
               navigateLink={navigateLink}
-              isSticky={true}
+              isContainer={false}
             />
             <div className={styles.legalHeader}>
               <div className={styles.headerContainer}>