dirtycajunrice · October 3, 2023 18:55
diff --git a/layout.tsx b/layout.tsx
 import CommandPalette from "@/app/_global/command-palette";

 // noinspection JSUnusedGlobalSymbols
 import NavBar from "@/app/_global/navbar";
 import Settings from "@/app/_global/settings";
 import Sidebar from "@/app/_global/sidebar";
 import SVGGradient from "@/components/icons/SVGGradient";
 import { ChildrenProps } from "@/interfaces/next";
 import "@/styles/globals.css";
 import "@/styles/notiflix.css";
 import "@/types/prototypes";
 import { getSettingsCookie } from "@/utils/serverActions/settingsCookie";
 import { Analytics } from "@vercel/analytics/react";
 import { Metadata } from "next";
 import { Exo } from "next/font/google";
 import Providers from "src/app/_global/providers";

 // If loading a variable font, you don't need to specify the font weight
 const exo = Exo({
  subsets: [ "latin" ],
  display: "swap",
  variable: "--font-exo",
 });

 const AppName = "Tradescrow";
 const AppDescription = "Trade anyone. Anything. Safely.";
 const BaseURL = "https://tradescrow.io";

 export const metadata: Metadata = {
  metadataBase: new URL(BaseURL),
  title: {
    default: AppName,
    template: "%s | Tradescrow",
  },
  description: AppDescription,
  generator: "Next.js",
  applicationName: AppName,
  referrer: "origin-when-cross-origin",
  keywords: [ "Trade", "Escrow", "Crypto", "Swap", "P2P", "NFT", "Token" ],
  authors: [
    { name: "Nicholas St. Germain", url: "https://cajun.pro" },
  ],
  colorScheme: "dark",
  creator: "Nicholas St. Germain",
  publisher: "Vercel",
  alternates: {
    canonical: "/",
    languages: {
      "en-US": "/", // /en-US
    },
  },
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  viewport: {
    width: "device-width",
    initialScale: 1,
    maximumScale: 5,
  },
  openGraph: {
    title: AppName,
    description: AppDescription,
    url: BaseURL,
    siteName: AppName,
    images: [
      { url: "/FlyingCrow.gif", width: 300, height: 300, alt: "Tradescrow Crow" },
      { url: "/icon.png", width: 512, height: 512, alt: "Tradescrow Logo" },
    ],
    videos: [ { url: "/FlyingCrow.mp4", width: 240, height: 240 } ],
    locale: "en_US",
    type: "website",
  },
  icons: {
    icon: "/icon.png",
    shortcut: "/icon.png",
    apple: "/icon.png",
    other: {
      rel: "apple-touch-icon-precomposed",
      url: "/icon.png",
    },
  },
  robots: {
    index: true,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: true,
      noimageindex: true,
      nocache: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
 };

 const RootLayout = ({ children }: ChildrenProps) => {
  let theme = getSettingsCookie().theme;

  return (
    <html lang="en" data-theme={theme} className={`${exo.variable} group/theme`}>
      <body className="font-exo bg-gradient-site">
        <SVGGradient color="silver" />
        <SVGGradient color="gold" />
        <Providers>
          <NavBar />
          <Sidebar />
          {children}
          <Settings />
          <CommandPalette />
          <Analytics />
        </Providers>
      </body>
    </html>
  );
 };

 export default RootLayout;
diff --git a/settings-cookie.tsx b/settings-cookie.tsx
 "use server";

 import { DefaultSettingsCookie } from "@/data/constants";
 import { ISettingsCookie } from "@/interfaces/cookies";
 import { ApprovalType, ThemeColor } from "@/types/core";
 import { ResponseCookie } from "next/dist/compiled/@edge-runtime/cookies";
 import { cookies } from "next/headers";

 /**
 * This function is used to retrieve a specific cookie ('ts-settings') and parse its JSON value.
 * The 'ts-settings' cookie contains user specific settings, these settings are stored in a
 * 'SettingsCookie' object.
 *
 * If the 'ts-settings' cookie does not exist, a default 'SettingsCookie' object is returned with
 * 'allowUnverified' set to false. This approach ensures that the function does not return null or undefined,
 * it will always return a 'SettingsCookie' object.
 *
 * @return {ISettingsCookie} An object containing user specific settings or a default
 * 'SettingsCookie' object with 'allowUnverified' property set to false.
 */
 export const getSettingsCookie = (): ISettingsCookie => {
  const settingsCookie = cookies().get("ts-settings");
  return settingsCookie ? JSON.parse(settingsCookie.value) : DefaultSettingsCookie;
 };

 /**
 * Creates a settings cookie with properties necessary for a ResponseCookie.
 *
 * @function makeSettingsCookie
 * @param {ISettingsCookie} settingsCookie - The settings object to be stored in the cookie.
 * @returns {ResponseCookie} Returns a response cookie with the name 'ts-settings' and the value as
 * a stringified version of the settings cookie.
 */
 const makeSettingsCookie = (settingsCookie: ISettingsCookie): ResponseCookie => {
  return {
    name: "ts-settings",
    value: JSON.stringify(settingsCookie),
    httpOnly: true,
    path: "/",
    maxAge: 86_400 * 365,
  };
 };

 /** Set the visibility of unverified tokens
 *
 * @async
 * @export
 * @function setSettingsCookieShowUnverified
 * @param {boolean} showUnverified - Show unverified tokens?
 * @returns {Promise<void>} - void
 * @throws {Error} There might be potential errors with async execution, always good to be wrapped in a try/catch.
 */
 export const setSettingsCookieShowUnverified = async (showUnverified: boolean): Promise<void> => {
  cookies().set(makeSettingsCookie({ ...getSettingsCookie(), showUnverified }));
 };

 /**
 * Sets the theme color to the settings cookie. The new theme will overwrite the old theme value.
 *
 * @async
 * @export
 * @function setSettingsCookieTheme
 * @param {ThemeColor} theme - The theme color to set to the settings cookie.
 * @returns {Promise<void>} A Promise that resolves once the new theme color has been set.
 * @throws {Error} There might be potential errors with async execution, always good to be wrapped in a try/catch.
 *
 */
 export const setSettingsCookieTheme = async (theme: ThemeColor): Promise<void> => {
  cookies().set(makeSettingsCookie({ ...getSettingsCookie(), theme }));
 };

 /**
 * Sets the approval status to the settings cookie. The new approval will overwrite the previous value.
 *
 * @async
 * @export
 * @function setSettingsCookieApproval
 * @param {ApprovalType} approval - The approval status to set to the settings cookie.
 * @returns {Promise<void>} A Promise that resolves once the new approval status has been set.
 * @throws {Error} There might be potential errors with async execution, always good to be wrapped in a try/catch.
 */
 export const setSettingsCookieApproval = async (approval: ApprovalType): Promise<void> => {
  cookies().set(makeSettingsCookie({ ...getSettingsCookie(), approval }));
 };

 /**
 * Resets the settings cookie back to the default settings.
 *
 * @async
 * @export
 * @function resetSettingsCookie
 * @returns {Promise<void>} A Promise that resolves once the settings cookie has been reset back to defaults.
 * @throws {Error} There might be potential errors with async execution and it's always good to be
 * wrapped in a try/catch.
 */
 export const resetSettingsCookie = async (): Promise<void> => {
  cookies().set(makeSettingsCookie(DefaultSettingsCookie));
 };

 export const getSettingsCookieTheme = (): ThemeColor => {
  return getSettingsCookie().theme;
 };
	import CommandPalette from "@/app/_global/command-palette";

	// noinspection JSUnusedGlobalSymbols
	import NavBar from "@/app/_global/navbar";
	import Settings from "@/app/_global/settings";
	import Sidebar from "@/app/_global/sidebar";
	import SVGGradient from "@/components/icons/SVGGradient";
	import { ChildrenProps } from "@/interfaces/next";
	import "@/styles/globals.css";
	import "@/styles/notiflix.css";
	import "@/types/prototypes";
	import { getSettingsCookie } from "@/utils/serverActions/settingsCookie";
	import { Analytics } from "@vercel/analytics/react";
	import { Metadata } from "next";
	import { Exo } from "next/font/google";
	import Providers from "src/app/_global/providers";

	// If loading a variable font, you don't need to specify the font weight
	const exo = Exo({
	subsets: [ "latin" ],
	display: "swap",
	variable: "--font-exo",
	});

	const AppName = "Tradescrow";
	const AppDescription = "Trade anyone. Anything. Safely.";
	const BaseURL = "https://tradescrow.io";

	export const metadata: Metadata = {
	metadataBase: new URL(BaseURL),
	title: {
	default: AppName,
	template: "%s \| Tradescrow",
	},
	description: AppDescription,
	generator: "Next.js",
	applicationName: AppName,
	referrer: "origin-when-cross-origin",
	keywords: [ "Trade", "Escrow", "Crypto", "Swap", "P2P", "NFT", "Token" ],
	authors: [
	{ name: "Nicholas St. Germain", url: "https://cajun.pro" },
	],
	colorScheme: "dark",
	creator: "Nicholas St. Germain",
	publisher: "Vercel",
	alternates: {
	canonical: "/",
	languages: {
	"en-US": "/", // /en-US
	},
	},
	formatDetection: {
	email: false,
	address: false,
	telephone: false,
	},
	viewport: {
	width: "device-width",
	initialScale: 1,
	maximumScale: 5,
	},
	openGraph: {
	title: AppName,
	description: AppDescription,
	url: BaseURL,
	siteName: AppName,
	images: [
	{ url: "/FlyingCrow.gif", width: 300, height: 300, alt: "Tradescrow Crow" },
	{ url: "/icon.png", width: 512, height: 512, alt: "Tradescrow Logo" },
	],
	videos: [ { url: "/FlyingCrow.mp4", width: 240, height: 240 } ],
	locale: "en_US",
	type: "website",
	},
	icons: {
	icon: "/icon.png",
	shortcut: "/icon.png",
	apple: "/icon.png",
	other: {
	rel: "apple-touch-icon-precomposed",
	url: "/icon.png",
	},
	},
	robots: {
	index: true,
	follow: true,
	nocache: true,
	googleBot: {
	index: true,
	follow: true,
	noimageindex: true,
	nocache: true,
	"max-video-preview": -1,
	"max-image-preview": "large",
	"max-snippet": -1,
	},
	},
	};

	const RootLayout = ({ children }: ChildrenProps) => {
	let theme = getSettingsCookie().theme;

	return (
	<html lang="en" data-theme={theme} className={`${exo.variable} group/theme`}>
	<body className="font-exo bg-gradient-site">
	<SVGGradient color="silver" />
	<SVGGradient color="gold" />
	<Providers>
	<NavBar />
	<Sidebar />
	{children}
	<Settings />
	<CommandPalette />
	<Analytics />
	</Providers>
	</body>
	</html>
	);
	};

	export default RootLayout;