Add restricted countries route

Author: ryangoree

apps/hyperdrive-trading/src/routeTree.gen.ts

@@ -15,6 +15,7 @@ import { Route as BridgeImport } from "./ui/routes/bridge";
 import { Route as IndexImport } from "./ui/routes/index";
 import { Route as MarketAddressImport } from "./ui/routes/market.$address";
 import { Route as MarketsImport } from "./ui/routes/markets";
+import { Route as RestrictedcountriesImport } from "./ui/routes/restricted_countries";
 import { Route as VoidImport } from "./ui/routes/void";
 import { Route as VpnImport } from "./ui/routes/vpn";
 
@@ -30,6 +31,11 @@ const VoidRoute = VoidImport.update({
   getParentRoute: () => rootRoute,
 } as any);
 
+const RestrictedcountriesRoute = RestrictedcountriesImport.update({
+  path: "/restricted_countries",
+  getParentRoute: () => rootRoute,
+} as any);
+
 const MarketsRoute = MarketsImport.update({
   path: "/markets",
   getParentRoute: () => rootRoute,
@@ -66,6 +72,10 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof MarketsImport;
       parentRoute: typeof rootRoute;
     };
+    "/restricted_countries": {
+      preLoaderRoute: typeof RestrictedcountriesImport;
+      parentRoute: typeof rootRoute;
+    };
     "/void": {
       preLoaderRoute: typeof VoidImport;
       parentRoute: typeof rootRoute;
@@ -87,6 +97,7 @@ export const routeTree = rootRoute.addChildren([
   IndexRoute,
   BridgeRoute,
   MarketsRoute,
+  RestrictedcountriesRoute,
   VoidRoute,
   VpnRoute,
   MarketAddressRoute,

apps/hyperdrive-trading/src/ui/compliance/RestrictedCountryMessage.tsx

@@ -0,0 +1,31 @@
+import ExclamationTriangleIcon from "@heroicons/react/24/outline/ExclamationTriangleIcon";
+import classNames from "classnames";
+import { ReactElement } from "react";
+
+export function RestrictedCountryMessage({
+  className,
+}: {
+  className?: string;
+}): ReactElement | undefined {
+  return (
+    <div
+      className={classNames(
+        "flex w-screen flex-col items-center justify-center gap-8",
+        className,
+      )}
+    >
+      <div className="space-y-3">
+        <h2 className="flex items-center justify-center gap-4">
+          <ExclamationTriangleIcon className="text-red-500 size-10 stroke-error" />{" "}
+          Restricted
+        </h2>
+        <p>
+          We&lsquo;re sorry but access from restricted countries is prohibited.
+        </p>
+      </div>
+      <a href="https://hyperdrive.box" className="daisy-link-primary">
+        Hyperdrive Website
+      </a>
+    </div>
+  );
+}

apps/hyperdrive-trading/src/ui/compliance/VpnDetectedMessage.tsx

@@ -10,15 +10,20 @@ export function VpnDetectedMessage({
   return (
     <div
       className={classNames(
-        "flex w-screen flex-col items-center justify-center gap-4",
+        "flex w-screen flex-col items-center justify-center gap-8",
         className,
       )}
     >
-      <h2 className="flex items-center gap-4">
-        <ExclamationTriangleIcon className="text-red-500 size-10 stroke-error" />
-        VPN detected
-      </h2>
-      <p>We&lsquo;re sorry but this app is not accessible for VPN users.</p>
+      <div className="space-y-3">
+        <h2 className="flex items-center justify-center gap-4">
+          <ExclamationTriangleIcon className="text-red-500 size-10 stroke-error" />{" "}
+          VPN detected
+        </h2>
+        <p>We&lsquo;re sorry but this app is not accessible for VPN users.</p>
+      </div>
+      <a href="https://hyperdrive.box" className="daisy-link-primary">
+        Hyperdrive Website
+      </a>
     </div>
   );
 }

apps/hyperdrive-trading/src/ui/routes/restricted_countries.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { RestrictedCountryMessage } from "src/ui/compliance/RestrictedCountryMessage";
+
+export const Route = createFileRoute("/restricted_countries")({
+  component: () => (
+    <div className="flex min-h-screen w-screen items-center justify-center px-[2vh]">
+      <RestrictedCountryMessage />
+    </div>
+  ),
+});