fix: App URL (#39)

* appUrl is config-based

* layout

* getNetworkAppUrl

* rm image

src/app/components/Modals/Terms/data/terms.tsx

@@ -1,14 +1,15 @@
+import { getNetworkAppUrl } from "@/config";
+
 export const Terms = () => {
+  const url = getNetworkAppUrl();
+
   return (
     <div className="rounded-2xl border border-neutral-content p-6 dark:border-neutral-content/20 overflow-y-scroll no-scrollbar max-h-[100vh] terms-container">
       <p className="italic">Last updated [27 May 2024]</p>
       <br />
       <p>
-        <a
-          href="https://btcstaking.testnet.babylonchain.io/"
-          className="text-primary italic"
-        >
-          https://btcstaking.testnet.babylonchain.io/
+        <a href={url} className="text-primary italic">
+          {url}
         </a>{" "}
         is a website-hosted user interface (the{" "}
         <i className="text-primary">“Interface”</i>).{" "}

src/app/layout.tsx

@@ -3,6 +3,8 @@ import { Inter } from "next/font/google";
 import "react-responsive-modal/styles.css";
 import "react-tooltip/dist/react-tooltip.css";
 
+import { getNetworkAppUrl } from "@/config";
+
 import "./globals.css";
 import Providers from "./providers";
 
@@ -27,17 +29,11 @@ export default function RootLayout({
       <meta property="og:image:type" content="image/png" />
       <meta property="og:image:width" content="2048" />
       <meta property="og:image:height" content="1170" />
-      <meta
-        property="og:image"
-        content="https://btcstaking.babylonchain.io/og.png"
-      />
+      <meta property="og:image" content={`${getNetworkAppUrl()}/og.png`} />
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:title" content="BTC Staking Dashboard" />
       <meta name="twitter:description" content="BTC Staking Dashboard" />
-      <meta
-        name="twitter:image"
-        content="https://btcstaking.babylonchain.io/og.png"
-      />
+      <meta name="twitter:image" content={`${getNetworkAppUrl()}/og.png`} />
       <meta name="twitter:image:type" content="image/png" />
       <meta name="twitter:image:width" content="2048" />
       <meta name="twitter:image:height" content="1170" />

src/config/index.ts

@@ -5,3 +5,10 @@ export const shouldDisplayTestingMsg = (): boolean => {
     process.env.NEXT_PUBLIC_DISPLAY_TESTING_MESSAGES?.toString() !== "false"
   );
 };
+
+// getNetworkAppUrl function is used to get the network app url based on the environment
+export const getNetworkAppUrl = (): string => {
+  return shouldDisplayTestingMsg()
+    ? "https://btcstaking.testnet.babylonchain.io"
+    : "https://btcstaking.babylonchain.io";
+};