Feature/3/user authentication flow

.env.sample

@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_API_URL='https://api-dev.testudo.xyz'

api/auth/authApi.ts

@@ -0,0 +1,28 @@
+import {
+  GoogleCallbackResponse,
+  NautilusBodyRequest,
+  NautilusResponse,
+  ErgoPayResponse,
+  ErgoPayRequestParameter,
+  GoogleCallbackRequestParameter,
+  UserInfoResponse,
+} from '@/api/auth/authApi.types';
+import { httpClient } from '@/utils/http-client';
+
+export const authApi = {
+  googleCallback: async (
+    parameter: GoogleCallbackRequestParameter,
+  ): Promise<GoogleCallbackResponse> =>
+    httpClient.get(`/auth/google/callback?code=${parameter.code}`),
+
+  nautilus: async (body: NautilusBodyRequest): Promise<NautilusResponse> =>
+    httpClient.post(`/auth/nautilus`, body),
+
+  ergoPay: async ({
+    address,
+  }: ErgoPayRequestParameter): Promise<ErgoPayResponse> =>
+    httpClient.get(`/ergopay/${address}`), // should be ergoauth://localhost/auth/ergopay/:address
+
+  userInfo: async (token: string | null): Promise<UserInfoResponse> =>
+    httpClient.get(`/auth/getUserInfo`, undefined, token),
+};

api/auth/authApi.types.ts

@@ -0,0 +1,47 @@
+import { ApiResponse, ApiError } from '@/utils/types';
+
+export interface GoogleCallbackRequestParameter {
+  code?: string;
+}
+
+export type SignInSuccessResponse = {
+  token: string;
+};
+
+export type GoogleCallbackResponse = SignInSuccessResponse | ApiError;
+
+export interface NautilusBodyRequest {
+  proof?: string;
+  message?: string;
+  address?: string;
+}
+
+export type NautilusResponse = SignInSuccessResponse | ApiError;
+
+export interface ErgoPayRequestParameter {
+  address: string;
+}
+
+export type ErgoPaySuccessResponse = ApiResponse<{
+  status: number;
+}>;
+
+export type ErgoPayResponse = ErgoPaySuccessResponse | ApiError;
+
+export type UserInfoSuccessResponse = {
+  user: {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    picture: string;
+  } | null;
+  addresses:
+    | {
+        id: string;
+        sign_message: string;
+      }[]
+    | undefined;
+};
+
+export type UserInfoResponse = UserInfoSuccessResponse | ApiError;

api/auth/index.ts

@@ -0,0 +1,49 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { authApi } from '@/api/auth/authApi';
+import {
+  SignInSuccessResponse,
+  GoogleCallbackResponse,
+  NautilusBodyRequest,
+  NautilusResponse,
+  ErgoPaySuccessResponse,
+  ErgoPayResponse,
+  ErgoPayRequestParameter,
+  GoogleCallbackRequestParameter,
+  UserInfoSuccessResponse,
+  UserInfoResponse,
+} from '@/api/auth/authApi.types';
+import { queryKeys } from '@/utils/react-query-keys';
+import { ApiError } from '@/utils/types';
+
+export const authApiGateway = {
+  useGoogleCallback: (parameter: GoogleCallbackRequestParameter) =>
+    useQuery<GoogleCallbackResponse, ApiError, SignInSuccessResponse>(
+      queryKeys.authKeys.useGoogleCallback(parameter),
+      () => authApi.googleCallback(parameter),
+      { enabled: !!parameter.code },
+    ),
+
+  useNautilus: (body: NautilusBodyRequest) =>
+    useQuery<NautilusResponse, ApiError, SignInSuccessResponse>(
+      queryKeys.authKeys.useNautilus(body),
+      () => authApi.nautilus(body),
+      { enabled: !!(body.address && body.message && body.proof) },
+    ),
+  useErgoPay: (parameter: ErgoPayRequestParameter) =>
+    useQuery<ErgoPayResponse, ApiError, ErgoPaySuccessResponse>(
+      queryKeys.authKeys.useErgoPay(parameter),
+      {
+        queryFn: () => authApi.ergoPay(parameter),
+      },
+    ),
+
+  useUserInfo: (token: string | null) =>
+    useQuery<UserInfoResponse, ApiError, UserInfoSuccessResponse>(
+      queryKeys.authKeys.useUserInfo(token),
+      () => authApi.userInfo(token),
+      {
+        enabled: !!token, // Only enable the query when the token is present
+      },
+    ),
+};

app/dashboard/page.tsx

@@ -1,4 +1,4 @@
-import { Layout } from '@/components/dashboard/layout/Layout';
+import { Layout } from '@/scenes/dashboard/layout/Layout';
 
 export default function dashboard() {
   return <Layout></Layout>;

app/globals.css

@@ -2,8 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  font-size: 16px;
+}
+
 html,
 body {
   height: 100%;
 }
-

app/page.tsx

@@ -1,5 +1,24 @@
-export default function Home() {
+import React from 'react';
+
+import { Box } from '@mui/material';
+
+import { Banner, Reward, Statistics, JoinUs, Footer } from '@/scenes/landing';
+
+const Landing = () => {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24"></main>
+    <>
+      <Box
+        component="main"
+        className="flex-grow bg-background-dark px-[6.25rem] py-20"
+      >
+        <Banner />
+        <Reward />
+        <Statistics />
+        <JoinUs />
+      </Box>
+      <Footer />
+    </>
   );
-}
+};
+
+export default Landing;

components/InputBox.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { styled } from '@mui/material';
+import TextField from '@mui/material/TextField';
+
+type Props = {
+  className?: string;
+  variant?: 'outlined';
+  disabled?: boolean;
+  label?: string;
+  color?: 'primary';
+  size?: 'small' | 'medium'; // Add size property
+};
+
+type PropsType = Props &
+  Omit<React.ComponentPropsWithoutRef<'input'>, keyof Props>;
+
+const StyledTextField = styled(TextField)`
+  border-color: ${({ theme }) => theme.palette.outline.main};
+  color: ${({ theme }) => theme.palette.onSurfaceVariant.main};
+  .MuiInputBase-input {
+    font-size: 16px;
+    font-weight: 700;
+    color: ${({ theme }) => theme.palette.onSurface.main};
+  }
+`;
+
+const InputBox = ({
+  className,
+  variant = 'outlined',
+  disabled = false,
+  value,
+  defaultValue,
+  label,
+  type,
+  onChange,
+  ...rest
+}: PropsType) => {
+  return (
+    <StyledTextField
+      required={false}
+      type={type}
+      variant={variant}
+      disabled={disabled}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={onChange}
+      size={rest?.size}
+      {...rest}
+      className={className}
+      label={label}
+    >
+      <TextField />
+    </StyledTextField>
+  );
+};
+
+export default InputBox;

components/PopUp/PopUp.tsx

@@ -0,0 +1,63 @@
+'use client';
+import React, { ReactNode } from 'react';
+
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import Image from 'next/image';
+
+interface Props {
+  state: boolean;
+  handleClose: () => void;
+  title?: string;
+  children: ReactNode;
+}
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+  '& .MuiModal-backdrop': {
+    backgroundColor: theme.palette.shadow.main,
+  },
+  '& .MuiPaper-root': {
+    padding: '1.25rem',
+    margin: '0',
+    backgroundColor: theme.palette.surface.main,
+    borderRadius: '0.75rem',
+    width: '35.5rem',
+  },
+  '& .MuiDialogTitle-root': {
+    color: theme.palette.onSurface.main,
+    fontSize: '1.125rem',
+    fontWeight: 'bold',
+    padding: 0,
+  },
+}));
+
+export default function PopUp({ state, handleClose, children, title }: Props) {
+  return (
+    <StyledDialog onClose={handleClose} open={state}>
+      <div className="flex items-center justify-between">
+        <DialogTitle>{title}</DialogTitle>
+        <IconButton
+          aria-label="close"
+          onClick={handleClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            padding: 0,
+          }}
+        >
+          <Image
+            src="/images/closeIcon.svg"
+            alt="close icon"
+            width={48}
+            height={48}
+          />
+        </IconButton>
+      </div>
+      <DialogContent sx={{ padding: 0 }}>{children}</DialogContent>
+    </StyledDialog>
+  );
+}

components/QRCode.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import QRCode from 'qrcode.react';
+
+interface Props {
+  data: string;
+  size?: number;
+}
+
+const QRCodeSection = ({ data, size }: Props) => {
+  return (
+    <div className=" rounded-xl bg-onTertiary-light p-6">
+      <QRCode value={data} size={size} />
+    </div>
+  );
+};
+
+export default QRCodeSection;

components/button/Button.tsx

@@ -0,0 +1,61 @@
+'use client';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+import { ButtonBase, styled } from '@mui/material';
+
+interface Props extends ComponentPropsWithoutRef<'button'> {
+  children: ReactNode;
+  kind: 'Filled' | 'Tonal' | 'Outlined';
+  className?: string;
+  fullWidth?: boolean;
+}
+
+const getColorBasedOnKind = (kind: 'Filled' | 'Tonal' | 'Outlined') => {
+  switch (kind) {
+    case 'Filled':
+      return {
+        color: ({ theme }) => theme.palette.onPrimary.main,
+        bgColor: ({ theme }) => theme.palette.primary.main,
+        borderColor: ({ theme }) => theme.palette.primary.main,
+      };
+    case 'Tonal':
+      return {
+        color: ({ theme }) => theme.palette.onSecondaryContainer?.main,
+        bgColor: ({ theme }) => theme.palette.secondaryContainer?.main,
+        borderColor: ({ theme }) => theme.palette.secondaryContainer?.main,
+      };
+    case 'Outlined':
+      return {
+        color: ({ theme }) => theme.palette.primary?.main,
+        bgColor: () => 'transparent',
+        borderColor: ({ theme }) => theme.palette.outline?.main,
+      };
+  }
+};
+
+export default function Button({
+  className,
+  kind,
+  fullWidth,
+  children,
+  ...rest
+}: Props) {
+  const StyledButton = styled(ButtonBase)`
+    background-color: ${getColorBasedOnKind(kind).bgColor} !important;
+    color: ${getColorBasedOnKind(kind).color};
+    padding: 0.625rem 1.5rem;
+    border-radius: 6.25rem;
+    border: 1px solid ${getColorBasedOnKind(kind)?.borderColor};
+    width: ${fullWidth ? '100%' : 'auto'};
+    cursor: pointer;
+  `;
+
+  return (
+    <StyledButton
+      {...rest}
+      className={`${className} styledBtn text-sm font-semibold`}
+    >
+      {children}
+    </StyledButton>
+  );
+}