[ECO-1966] Serve fonts and charting library through CDN (#418)

econia-labs · Dec 2, 2024 · 5cd02e3 · 5cd02e3
1 parent d2cff1e
commit 5cd02e3
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 44 deletions.
diff --git a/src/typescript/frontend/public/fonts/FormaDJRDisplay-Medium-Testing.woff2 b/src/typescript/frontend/public/fonts/FormaDJRDisplay-Medium-Testing.woff2
diff --git a/src/typescript/frontend/public/fonts/FormaDJRDisplay-Regular-Testing.woff2 b/src/typescript/frontend/public/fonts/FormaDJRDisplay-Regular-Testing.woff2
diff --git a/src/typescript/frontend/public/fonts/FormaDJRMicro-Regular-Testing.woff2 b/src/typescript/frontend/public/fonts/FormaDJRMicro-Regular-Testing.woff2
diff --git a/src/typescript/frontend/public/fonts/Pixelar-Regular.woff2 b/src/typescript/frontend/public/fonts/Pixelar-Regular.woff2
diff --git a/src/typescript/frontend/src/app/layout.tsx b/src/typescript/frontend/src/app/layout.tsx
@@ -3,27 +3,21 @@ import { getDefaultMetadata } from "configs/meta";
 import Providers from "context/providers";
 import StyledComponentsRegistry from "lib/registry";
 import "react-toastify/dist/ReactToastify.css";
-import {
-  formaDJRDisplayMedium,
-  formaDJRDisplayRegular,
-  formaDJRMicro,
-  pixelar,
-} from "styles/fonts";
 import "../app/global.css";
 import DisplayDebugData from "@/store/server-to-client/FetchFromServer";
+import { fontsStyle } from "styles/fonts";
 
 export const metadata: Metadata = getDefaultMetadata();
 export const viewport: Viewport = {
   themeColor: "#000000",
 };
 
-const fonts = [pixelar, formaDJRMicro, formaDJRDisplayMedium, formaDJRDisplayRegular];
-const fontsClassName = fonts.map((font) => font.variable).join(" ");
-
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html>
-      <body className={fontsClassName}>
+      <body>
+        {/* This is used to avoid React escaping the quotes in `fontsStyle`. */}
+        <style dangerouslySetInnerHTML={{ __html: fontsStyle }} />
         <StyledComponentsRegistry>
           <Providers>
             <DisplayDebugData />

diff --git a/src/typescript/frontend/src/components/charts/const.ts b/src/typescript/frontend/src/components/charts/const.ts
@@ -11,6 +11,7 @@ import {
 import { Period } from "@econia-labs/emojicoin-sdk";
 import { GREEN as GREEN_HEX, PINK as PINK_HEX } from "theme/colors";
 import { hexToRgba } from "utils/hex-to-rgba";
+import { CDN_URL } from "lib/env";
 
 export const TV_CHARTING_LIBRARY_RESOLUTIONS = [
   "1",
@@ -43,10 +44,10 @@ export const EXCHANGE_NAME = "emojicoin.fun";
 
 export const WIDGET_OPTIONS: Omit<ChartingLibraryWidgetOptions, "datafeed" | "container"> = {
   interval: "5" as ResolutionString,
-  library_path: "/static/charting_library/",
+  library_path: `${CDN_URL}/charting_library/`,
   theme: "Dark" as ThemeName,
   locale: "en" as LanguageCode,
-  custom_css_url: "/styles/tradingview.css",
+  custom_css_url: `${CDN_URL}/charting_library_stylesheets/emojicoin-dot-fun.css`,
   enabled_features: ["iframe_loading_compatibility_mode"],
   disabled_features: [
     "use_localstorage_for_settings" as ChartingLibraryFeatureset,

diff --git a/src/typescript/frontend/src/components/error-boundary/ErrorBoundaryFallback.tsx b/src/typescript/frontend/src/components/error-boundary/ErrorBoundaryFallback.tsx
@@ -5,7 +5,6 @@ import "./styles.css";
 
 import { type ErrorBoundaryFallbackProps } from "./types";
 import styled from "styled-components";
-import { pixelar } from "styles/fonts";
 
 export const ErrorContainerButton = styled.button`
   font-family: var(--font-pixelar) !important;
@@ -49,7 +48,7 @@ const ErrorBoundaryFallback: React.FC<ErrorBoundaryFallbackProps> = ({ error, re
 
       <h2 className="error-container__sub-title">Please, go to home page</h2>
 
-      <ErrorContainerButton className={pixelar.variable} onClick={onPressHandler}>
+      <ErrorContainerButton className={"font-pixelar"} onClick={onPressHandler}>
         Go to home page
       </ErrorContainerButton>
     </div>

diff --git a/src/typescript/frontend/src/lib/env.ts b/src/typescript/frontend/src/lib/env.ts
@@ -22,6 +22,7 @@ if (!["local", "devnet", "testnet", "mainnet", "custom"].includes(APTOS_NETWORK)
 let INTEGRATOR_ADDRESS: AccountAddressString;
 let INTEGRATOR_FEE_RATE_BPS: number;
 let BROKER_URL: string;
+let CDN_URL: string;
 
 export const LINKS: Links | undefined =
   typeof process.env.NEXT_PUBLIC_LINKS === "string" && process.env.NEXT_PUBLIC_LINKS !== ""
@@ -48,10 +49,17 @@ if (process.env.NEXT_PUBLIC_BROKER_URL) {
   throw new Error("Environment variable NEXT_PUBLIC_BROKER_URL is undefined.");
 }
 
+if (process.env.NEXT_PUBLIC_CDN_URL) {
+  CDN_URL = process.env.NEXT_PUBLIC_CDN_URL;
+} else {
+  throw new Error("Environment variable NEXT_PUBLIC_CDN_URL is undefined.");
+}
+
 const VERSION = parse(packageInfo.version);
 
 export {
   APTOS_NETWORK,
+  CDN_URL,
   INTEGRATOR_ADDRESS,
   INTEGRATOR_FEE_RATE_BPS,
   IS_ALLOWLIST_ENABLED,

diff --git a/src/typescript/frontend/src/styles/fonts.ts b/src/typescript/frontend/src/styles/fonts.ts
@@ -1,33 +1,30 @@
-import localFont from "next/font/local";
+import { CDN_URL } from "lib/env";
 
-export const pixelar = localFont({
-  src: "../../public/fonts/Pixelar-Regular.woff2",
-  display: "swap",
-  weight: "400",
-  style: "normal",
-  variable: "--font-pixelar",
-});
+export const fontsStyle = `
+  @font-face {
+    font-family: Pixelar;
+    font-style: normal;
+    font-weight: 400;
+    src: url("${CDN_URL}/fonts/Pixelar-Regular.woff2");
+  }
 
-export const formaDJRMicro = localFont({
-  src: "../../public/fonts/FormaDJRMicro-Regular-Testing.woff2",
-  display: "swap",
-  weight: "400",
-  style: "normal",
-  variable: "--font-forma",
-});
+  @font-face {
+    font-family: Forma;
+    font-style: normal;
+    font-weight: 400;
+    src: url("${CDN_URL}/fonts/FormaDJRMicro-Regular-Testing.woff2");
+  }
 
-export const formaDJRDisplayMedium = localFont({
-  src: "../../public/fonts/FormaDJRDisplay-Medium-Testing.woff2",
-  display: "swap",
-  weight: "400",
-  style: "normal",
-  variable: "--font-formaM",
-});
+  @font-face {
+    font-family: FormaM;
+    font-style: normal;
+    font-weight: 400;
+    src: url("${CDN_URL}/fonts/FormaDJRDisplay-Medium-Testing.woff2");
+  }
 
-export const formaDJRDisplayRegular = localFont({
-  src: "../../public/fonts/FormaDJRDisplay-Regular-Testing.woff2",
-  display: "swap",
-  weight: "400",
-  style: "normal",
-  variable: "--font-formaDR",
-});
+  :root {
+    --font-pixelar: Pixelar;
+    --font-forma: Forma;
+    --font-formaM: FormaM;
+  }
+`;
diff --git a/src/typescript/frontend/tailwind.config.js b/src/typescript/frontend/tailwind.config.js
@@ -17,7 +17,6 @@ module.exports = {
         pixelar: ["var(--font-pixelar)", ...fontFamily.sans],
         forma: ["var(--font-forma)", ...fontFamily.sans],
         "forma-bold": ["var(--font-formaM)", ...fontFamily.sans],
-        "forma-thin": ["var(--font-formaDR)", ...fontFamily.sans],
       },
       screens: {
         tall: { raw: "(min-height: 960px)" },