landing page restyling - dynamic widget

.changeset/long-clocks-laugh.md

@@ -0,0 +1,5 @@
+---
+"@fleek-platform/dashboard": minor
+---
+
+Added Landinmg Page

src/fragments/Home/HomeStyles.ts

@@ -23,7 +23,7 @@ export const HomeStyles = {
 
       height: '120vh',
       width: '90vw',
-      bottom: '-80%',
+      bottom: '-95%',
     }),
   },
   Hero: {

src/pages/LandingPage/index.tsx

@@ -1,56 +1,58 @@
 // TODO: This page can be removed
 // to favour redirection to website
 // the user can login from website
-import { useEffect } from 'react';
 
-import { Home } from '@/fragments/Home/Home';
 import { App } from '../../fragments/App/App';
 import { HomeStyles } from '../../fragments/Home/HomeStyles';
 import { LayoutHead } from '@/components';
 import { LandingPageProvider } from '@/providers/Providers';
-import { useAuthContext } from '../../providers/AuthProvider';
 
-import { Navbar } from '../../fragments/App/Navbar/Navbar';
-import { Box, Button } from '@/ui';
-import { ExternalLink, FleekLogo, Link } from '@/components';
-import { routes } from '@fleek-platform/utils-routes';
-import { constants } from '@/constants';
-
-const LoginButton = ({ title, handleLogIn }) => (
-  <Button onClick={handleLogIn}>{title}</Button>
-);
+import { Box } from '@/ui';
+import { FleekLogo } from '@/components';
+import {
+  DynamicEmbeddedWidget,
+  useDynamicContext,
+} from '@dynamic-labs/sdk-react-core';
 
 const HomePage = () => {
-  const auth = useAuthContext();
-
-  const handleLogIn = () => {
-    auth.login('dynamic');
-  };
-
-  useEffect(() => {
-    handleLogIn();
-  }, []);
+  const { sdkHasLoaded } = useDynamicContext();
 
   return (
     <LandingPageProvider>
       <LayoutHead title={LayoutHead.titles.home} />
-      <Navbar.Container layout="template">
-        <Link href={routes.home()}>
-          <FleekLogo showTypography />
-        </Link>
-
-        <Box className="flex-row gap-3 [grid-area:login]">
-          <ExternalLink href={constants.EXTERNAL_LINK.FLEEK_DOCS}>
-            <Button intent="neutral">Read docs</Button>
-          </ExternalLink>
-          <LoginButton title="Sign in" handleLogIn={handleLogIn} />
-        </Box>
-      </Navbar.Container>
 
       <HomeStyles.Background.Wrapper>
         <HomeStyles.Background.Image />
-        <App.Content>
-          <Home.Sections.Hero handleLogIn={handleLogIn} />
+        <App.Content className="relative flex justify-center items-center flex-col max-w-[400px] w-full max-h-[300px] h-full">
+          <Box
+            className={`relative w-full ${
+              sdkHasLoaded
+                ? 'border-[1px] rounded-[10px] border-neutral-9 transition-[border-color] duration-500 ease-out'
+                : ''
+            }`}
+          >
+            <div className="absolute top-0 left-0 right-0 flex justify-center -translate-y-1/2 z-10">
+              <FleekLogo
+                showTypography
+                className={`transition-opacity duration-250 pl-[10px] pr-[15px] bg-black ${
+                  !sdkHasLoaded ? 'animate-pulse opacity-85' : ''
+                }`}
+              />
+            </div>
+
+            <Box
+              className={`transition-all duration-500 overflow-hidden h-fit bg-black rounded-[10px] z-9 ${
+                sdkHasLoaded
+                  ? 'opacity-100 max-h-[1000px]'
+                  : 'opacity-0 max-h-0'
+              }`}
+            >
+              <DynamicEmbeddedWidget
+                background="none"
+                className="dynamic-widget-container"
+              />
+            </Box>
+          </Box>
         </App.Content>
       </HomeStyles.Background.Wrapper>
       <App.Footer />

src/providers/DynamicProvider.tsx

@@ -10,7 +10,7 @@ import { secrets } from '@/secrets';
 
 import { useCookies } from './CookiesProvider';
 import { useGenerateUserSessionDetailsMutation } from '@/generated/graphqlClient';
-import { useRouter } from 'next/router';
+import { useLoading } from './LoadingProvider';
 
 export type DynamicProviderProps = React.PropsWithChildren<{}>;
 
@@ -22,7 +22,7 @@ export const DynamicProvider: React.FC<DynamicProviderProps> = ({
   const [meQuery] = useMeQuery({ pause: !cookies.values.accessToken });
   const [, generateUserSessionDetails] =
     useGenerateUserSessionDetailsMutation();
-  const router = useRouter();
+  const { showLoading } = useLoading();
 
   return (
     <DynamicContextProvider
@@ -31,6 +31,7 @@ export const DynamicProvider: React.FC<DynamicProviderProps> = ({
         walletConnectors: [EthereumWalletConnectors],
         eventsCallbacks: {
           onAuthSuccess: async ({ authToken }) => {
+            showLoading();
             // TODO: Solved accessToken and projectId here
             // thus, remove previous handling elsewhere
             const { data, error } = await generateUserSessionDetails({

src/providers/LoadingProvider.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext, useState } from 'react';
+import { LoadingFullScreen } from '@/components/Loading';
+import { Box } from '@/ui';
+
+type LoadingContextType = {
+  showLoading: () => void;
+  hideLoading: () => void;
+  isLoading: boolean;
+};
+
+const LoadingContext = createContext<LoadingContextType | undefined>(undefined);
+
+export const useLoading = () => {
+  const context = useContext(LoadingContext);
+  if (!context) {
+    throw new Error('useLoading must be used within a LoadingProvider');
+  }
+  return context;
+};
+
+export const LoadingProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const showLoading = () => setIsLoading(true);
+  const hideLoading = () => setIsLoading(false);
+
+  return (
+    <LoadingContext.Provider value={{ showLoading, hideLoading, isLoading }}>
+      <Box className="relative">
+        {isLoading && (
+          <Box className="fixed left-0 top-0 right-0 bottom-0 h-screen w-screen z-[100] bg-black">
+            <LoadingFullScreen />
+          </Box>
+        )}
+        {children}
+      </Box>
+    </LoadingContext.Provider>
+  );
+};

src/providers/PermissionsProvider.tsx

@@ -17,6 +17,8 @@ const [Provider, useContext] = createContext<PermissionsContext>({
 export const PermissionsProvider: React.FC<ChildrenProps> = ({ children }) => {
   const { project: data, loading } = useProjectContext();
 
+  if (!data) return null;
+
   return (
     <Provider
       value={{

src/providers/ProjectProvider.tsx

@@ -13,6 +13,7 @@ import { useAuthContext } from './AuthProvider';
 import { useCookies } from './CookiesProvider';
 import { LoadingFullScreen } from '@/components/Loading';
 import { getQueryParamsToObj } from '@/utils/url';
+import { useLoading } from './LoadingProvider';
 
 const LOADING_MIN_TIMEOUT = 1800;
 
@@ -34,6 +35,7 @@ const [Provider, useContext] = createContext<ProjectContext>({
 export const ProjectProvider: React.FC<React.PropsWithChildren<{}>> = ({
   children,
 }) => {
+  const { hideLoading } = useLoading();
   const [isLoading, setIsLoading] = useState(true);
   const auth = useAuthContext();
   const router = useRouter();
@@ -112,7 +114,11 @@ export const ProjectProvider: React.FC<React.PropsWithChildren<{}>> = ({
     return () => clearTimeout(timer);
   }, [project, projectsQuery.data]);
 
-  if (isLoading || !auth.accessToken) return <LoadingFullScreen />;
+  if (isLoading || !auth.accessToken) {
+    return <LoadingFullScreen />;
+  }
+
+  hideLoading();
 
   return (
     <Provider

src/providers/Providers.tsx

@@ -10,6 +10,7 @@ import { ToastProvider } from './ToastProvider';
 import { UploadProvider } from './UploadProvider';
 import { UrqlProvider } from './UrqlProvider';
 import { WagmiProvider } from './WagmiProvider';
+import { LoadingProvider } from './LoadingProvider';
 
 type ProvidersProps = ChildrenProps<{
   requestCookies?: CookiesContext['values'];
@@ -24,21 +25,25 @@ export const Providers: React.FC<ProvidersProps> = ({
   return (
     <CookiesProvider requestCookies={requestCookies}>
       <UrqlProvider>
-        <DynamicProvider>
-          <QueryClientProvider>
-            <WagmiProvider>
-              <ThemeProvider forcedTheme={forcedTheme}>
-                <ToastProvider>
-                  <SessionProvider>
-                    <UploadProvider>
-                      <FeedbackModalProvider>{children}</FeedbackModalProvider>
-                    </UploadProvider>
-                  </SessionProvider>
-                </ToastProvider>
-              </ThemeProvider>
-            </WagmiProvider>
-          </QueryClientProvider>
-        </DynamicProvider>
+        <LoadingProvider>
+          <DynamicProvider>
+            <QueryClientProvider>
+              <WagmiProvider>
+                <ThemeProvider forcedTheme={forcedTheme}>
+                  <ToastProvider>
+                    <SessionProvider>
+                      <UploadProvider>
+                        <FeedbackModalProvider>
+                          {children}
+                        </FeedbackModalProvider>
+                      </UploadProvider>
+                    </SessionProvider>
+                  </ToastProvider>
+                </ThemeProvider>
+              </WagmiProvider>
+            </QueryClientProvider>
+          </DynamicProvider>
+        </LoadingProvider>
       </UrqlProvider>
     </CookiesProvider>
   );
@@ -52,9 +57,11 @@ export const LandingPageProvider: React.FC<ProvidersProps> = ({
     <UrqlProvider>
       <QueryClientProvider>
         <ThemeProvider forcedTheme={forcedTheme}>
-          <DynamicProvider>
-            <SessionProviderMin>{children}</SessionProviderMin>
-          </DynamicProvider>
+          <LoadingProvider>
+            <DynamicProvider>
+              <SessionProviderMin>{children}</SessionProviderMin>
+            </DynamicProvider>
+          </LoadingProvider>
         </ThemeProvider>
       </QueryClientProvider>
     </UrqlProvider>