Changes to main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polymesh-explorer",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3005",
@@ -10,6 +10,7 @@
     "ts:check": "tsc --noEmit"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",

src/components/shared/layout/AppLayout.tsx

@@ -4,13 +4,17 @@ import { Box, Container, styled, Typography } from '@mui/material';
 
 import React, { useMemo } from 'react';
 import { usePathname } from 'next/navigation';
+import Image from 'next/image';
+import { NorthEast } from '@mui/icons-material';
+
 import { DashboardLayout } from '@/components/shared/layout/DashboardLayout';
 import { NetworkSelector } from './NetworkSelector';
 import { LayoutSearchTextInput } from './LayoutSearchTextInput';
-import { APP_BACKGROUD } from '@/config/images';
+import { APP_BACKGROUD, PROTOFIRE_LOGO } from '@/config/images';
 import { GenericLink } from '../common/GenericLink';
 import { POLYMESH_DOCS } from '@/config/constant';
 import { useVersion } from '@/hooks/common/useVersion';
+import { ContactModal } from './ContactModal';
 
 const MainContainer = styled(Container)(() => ({
   color: '#fff',
@@ -51,6 +55,7 @@ export function AppLayout({
   buttonActionComponent = <NetworkSelector />,
 }: Props) {
   const { version, loading } = useVersion();
+
   const pathname = usePathname();
   const isHomePage = pathname === '/';
   const barActions = useMemo(() => {
@@ -102,29 +107,34 @@ export function AppLayout({
             <ContentWrapper>{children}</ContentWrapper>
           </MainContainer>
         </DashboardLayout>
-        <Footer>
-          <Box
-            component="span"
-            sx={{
-              display: 'flex',
-              gap: '20px',
-              '& a': {
-                color: '#fff',
-                textDecoration: 'none',
-                '&:hover': {
-                  textDecoration: 'underline',
-                },
-              },
-            }}
-          >
-            <Typography variant="caption">
-              <GenericLink isExternal href={POLYMESH_DOCS}>
+        <Footer
+          sx={{
+            zIndex: 2,
+            px: '24px',
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Typography variant="caption">
+            <GenericLink isExternal href={POLYMESH_DOCS}>
+              <Box sx={{ display: 'flex', gap: 0.5, alignItems: 'center' }}>
                 Polymesh Docs
-              </GenericLink>
-            </Typography>
-            <Typography sx={{ opacity: 0.5 }} variant="caption">
-              V {version || (loading ? '0.0.0' : '0.0.0')}
+                <NorthEast sx={{ fontSize: 'small' }} />
+              </Box>
+            </GenericLink>
+          </Typography>
+          <Typography sx={{ opacity: 0.5 }} variant="caption">
+            V {version || (loading ? '0.0.0' : '0.0.0')}
+          </Typography>
+
+          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+            <Typography sx={{ color: '#D6D6D6', fontSize: '12px' }}>
+              developed by
             </Typography>
+
+            <Image alt="Protofire" src={PROTOFIRE_LOGO} />
+
+            <ContactModal />
           </Box>
         </Footer>
       </Box>

src/components/shared/layout/ContactModal.tsx

@@ -0,0 +1,257 @@
+import {
+  Backdrop,
+  Box,
+  Button,
+  IconButton,
+  Modal,
+  TextField,
+  Typography,
+} from '@mui/material';
+import React, { ChangeEvent, FormEvent, useRef, useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import emailjs from '@emailjs/browser';
+import { useToggle } from '@/hooks/common/useToggle';
+import theme from '@/theme';
+
+interface FormData {
+  fullName: string;
+  email: string;
+  message: string;
+}
+
+const ModalUI = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  maxWidth: 570,
+  height: 'fit-content',
+  bgcolor: 'transparent',
+  overflow: 'hidden',
+  '& .MuiBackdrop-root': {
+    backgroundColor: 'rgba(0, 0, 0, 0.0)',
+  },
+};
+
+const InputsUI = {
+  '& .MuiOutlinedInput-root': {
+    bgcolor: '#191919',
+    borderRadius: '12px',
+    '& fieldset': {
+      border: '0.5px solid #383736',
+      borderRadius: '12px',
+    },
+    '&:hover fieldset': {
+      borderColor: '#555555',
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: theme.palette.primary.main,
+    },
+  },
+  '& .MuiInputBase-input': {
+    color: '#fff',
+    '&::placeholder': {
+      color: '#ccc',
+      opacity: 1,
+    },
+  },
+  '& .MuiOutlinedInput-input:-webkit-autofill': {
+    WebkitBoxShadow: '0 0 0 100px #191919 inset',
+    WebkitTextFillColor: '#fff',
+  },
+};
+
+export function ContactModal() {
+  const toggle = useToggle();
+  const formRef = useRef(null);
+  const [formData, setFormData] = useState<FormData>({
+    fullName: '',
+    email: '',
+    message: '',
+  });
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+
+    if (formRef.current) {
+      emailjs
+        .sendForm(
+          process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID as string,
+          process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID as string,
+          formRef.current,
+          process.env.NEXT_PUBLIC_EMAILJS_USER_ID as string,
+        )
+        .then(() => {
+          setSuccess(true);
+          setLoading(false);
+          setFormData({ fullName: '', email: '', message: '' });
+        })
+        .catch((err) => {
+          console.error('Error sending email:', err);
+          setError('Error al enviar el mensaje. Inténtalo de nuevo.');
+          setLoading(false);
+        });
+    } else {
+      setError('Formulario no disponible');
+      setLoading(false);
+    }
+  };
+
+  const handleModalClose = () => {
+    toggle.toggle();
+    setSuccess(false);
+    setError(null);
+    setLoading(false);
+    setFormData({ fullName: '', email: '', message: '' });
+  };
+  return (
+    <>
+      <Modal
+        sx={ModalUI}
+        open={toggle.state}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+        slotProps={{
+          backdrop: {
+            timeout: 500,
+          },
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            p: '20px',
+            overflow: 'hidden',
+            bgcolor: '#08090B',
+            border: '1px solid #191919',
+            borderRadius: '20px',
+          }}
+        >
+          <IconButton
+            sx={{ ml: 'auto', color: '#fff' }}
+            aria-label="close"
+            onClick={handleModalClose}
+          >
+            <CloseIcon />
+          </IconButton>
+          <form ref={formRef} onSubmit={handleSubmit}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '24px',
+                p: '20px',
+              }}
+            >
+              <span style={{ color: '#fff', fontSize: '24px' }}>
+                Contact Protofire team
+              </span>
+              <Box
+                sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+              >
+                <span>Full Name</span>
+                <TextField
+                  sx={InputsUI}
+                  id="fullName"
+                  variant="outlined"
+                  name="fullName"
+                  value={formData.fullName}
+                  onChange={handleChange}
+                  required
+                />
+              </Box>
+              <Box
+                sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+              >
+                <span>Email</span>
+                <TextField
+                  sx={InputsUI}
+                  id="email"
+                  variant="outlined"
+                  name="email"
+                  type="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  required
+                />
+              </Box>
+              <Box
+                sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+              >
+                <span>How can we help you?</span>
+                <TextField
+                  sx={InputsUI}
+                  id="message"
+                  variant="outlined"
+                  placeholder="Message"
+                  multiline
+                  minRows={4}
+                  maxRows={4}
+                  name="message"
+                  value={formData.message}
+                  onChange={handleChange}
+                  required
+                />
+              </Box>
+              {error && <Typography color="error">{error}</Typography>}
+              {success && (
+                <Typography color="success.main">
+                  Message sent successfully!
+                </Typography>
+              )}
+
+              <Box
+                sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+              >
+                <Button
+                  type="submit"
+                  disabled={loading}
+                  sx={{
+                    ml: 'auto',
+                    borderRadius: '30px',
+                    bgcolor: theme.palette.primary.main,
+                  }}
+                  variant="contained"
+                >
+                  {loading ? 'Sending...' : 'Send Message'}
+                </Button>
+              </Box>
+            </Box>
+          </form>
+        </Box>
+      </Modal>
+
+      <Button
+        sx={{
+          color: '#EF801F',
+          bgcolor: '#0D0D0D',
+          border: '1px solid #3E3E3E',
+          borderRadius: '4px',
+          textTransform: 'uppercase',
+          fontSize: '12px',
+          py: 0,
+          px: 0.5,
+        }}
+        onClick={() => toggle.toggle()}
+      >
+        Contact Protofire
+      </Button>
+    </>
+  );
+}

src/components/shared/layout/DashboardLayout/index.tsx

@@ -556,6 +556,7 @@ export function DashboardLayout(props: DashboardLayoutProps) {
           boxSizing: 'border-box',
           backgroundImage: 'none',
           background: { xs: '#050204', sm: 'transparent' },
+          zIndex: 1,
           border: '0',
           ...getDrawerWidthTransitionMixin(isNavigationExpanded),
         },