Feat/milestone trustful zuzalu d app interface

.env.example

@@ -8,4 +8,5 @@ BUCKET_FOLDER_PATH=
 ENDPIONT=
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
-NEXT_PUBLIC_CONNECTOR_TOKEN=
+NEXT_PUBLIC_CONNECTOR_TOKEN=
+NEXT_PUBLIC_RAILWAY_TRUSTFUL=

app/layout.tsx

@@ -14,11 +14,14 @@ import React, { useEffect, useState } from 'react';
 import { ZupassProvider } from '@/context/ZupassContext';
 import '@/utils/yupExtensions';
 import Dialog from '@/app/spaces/components/Modal/Dialog';
+import { TrustfulContextProvider } from '@/context/TrustfulContext';
+import { Toaster } from 'react-hot-toast';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { LitProvider } from '@/context/LitContext';
 import { DialogProvider } from '@/components/dialog/DialogContext';
 import { GlobalDialog } from '@/components/dialog/GlobalDialog';
 import { ToastProvider } from '@/components/toast/ToastContext';
+import { CheckIcon, InfoIcon } from '@chakra-ui/icons';
 
 const queryClient = new QueryClient();
 
@@ -33,7 +36,7 @@ function RootLayout({
   children: React.ReactNode;
 }>) {
   const [isClient, setIsClient] = useState(false);
-  // const [show, setShow] = useState(true);
+  const [show, setShow] = useState(true);
 
   useEffect(() => {
     setIsClient(true);
@@ -58,12 +61,13 @@ function RootLayout({
                     <CeramicProvider>
                       <WalletProvider>
                         <ZupassProvider>
-                          <AppContextProvider>
-                            <ReactQueryDevtools initialIsOpen={false} />
-                            <Header />
-                            {isClient && <AuthPrompt />}
-                            <GlobalDialog />
-                            {/* {isClient && (
+                          <TrustfulContextProvider>
+                            <AppContextProvider>
+                              <ReactQueryDevtools initialIsOpen={false} />
+                              <Header />
+                              {isClient && <AuthPrompt />}
+                              <GlobalDialog />
+                              {/* {isClient && (
                         <Dialog
                           title="Upgrading Ceramic Node"
                           message="We are currently upgrading our Ceramic node. Some data may be temporarily unavailable or inconsistent. We apologize for any inconvenience."
@@ -72,10 +76,46 @@ function RootLayout({
                           onConfirm={() => setShow(false)}
                         />
                       )} */}
-                            <div style={{ minHeight: `calc(100vh - 50px)` }}>
-                              {children}
-                            </div>
-                          </AppContextProvider>
+                              <div style={{ minHeight: `calc(100vh - 50px)` }}>
+                                {children}
+                              </div>
+                              <Toaster
+                                position="top-right"
+                                toastOptions={{
+                                  duration: 4000,
+
+                                  style: {
+                                    padding: '16px',
+                                    borderRadius: '8px',
+                                    color: '#ffffff',
+                                    fontSize: '14px',
+                                  },
+
+                                  success: {
+                                    style: {
+                                      background: '#4CAF50',
+                                    },
+                                    icon: <CheckIcon color="#FFFFFF" />,
+                                    iconTheme: {
+                                      primary: '#4CAF50',
+                                      secondary: '#FFFFFF',
+                                    },
+                                  },
+
+                                  error: {
+                                    style: {
+                                      background: '#F44336',
+                                    },
+                                    icon: <InfoIcon color="#FFFFFF" />,
+                                    iconTheme: {
+                                      primary: '#F44336',
+                                      secondary: '#FFFFFF',
+                                    },
+                                  },
+                                }}
+                              />
+                            </AppContextProvider>
+                          </TrustfulContextProvider>
                         </ZupassProvider>
                       </WalletProvider>
                     </CeramicProvider>

app/spaces/[spaceid]/trustful/admin/components/AdminSection.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useAccount } from 'wagmi';
+import toast from 'react-hot-toast';
+import { DropdownMenuAdmin } from '@/app/spaces/[spaceid]/trustful/admin/components';
+import { Box, ChakraProvider } from '@chakra-ui/react';
+import { TheFooterNavbar } from '@/app/spaces/[spaceid]/trustful/components';
+import chakraTheme from '@/theme/lib/chakra-ui';
+
+export const AdminSection = () => {
+  const { address, chain } = useAccount();
+  const { push } = useRouter();
+  const params = useParams();
+
+  const actualURL = `/spaces/${params.spaceid}/trustful`;
+
+  // const { villagerAttestationCount } = useContext(WalletContext);
+  const villagerAttestationCount = Number(1);
+
+  useEffect(() => {
+    if (villagerAttestationCount === 0) {
+      toast.error(
+        <span className="flex flex-col">
+          <strong>You have not checked in.</strong>{' '}
+          <p>Please check-in first.</p>
+        </span>,
+      );
+      push('/pre-checkin');
+    }
+  }, [villagerAttestationCount]);
+
+  return (
+    <div>
+      <ChakraProvider theme={chakraTheme}>
+        <DropdownMenuAdmin />
+      </ChakraProvider>
+      <Box className="fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full items-center">
+        <TheFooterNavbar />
+      </Box>
+    </div>
+  );
+};