Add restricted countries route

Author: ryangoree

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

@@ -13,6 +13,7 @@
 import { Route as rootRoute } from './ui/routes/__root'
 import { Route as VpnImport } from './ui/routes/vpn'
 import { Route as VoidImport } from './ui/routes/void'
+import { Route as RestrictedcountriesImport } from './ui/routes/restricted_countries'
 import { Route as MarketsImport } from './ui/routes/markets'
 import { Route as BridgeImport } from './ui/routes/bridge'
 import { Route as IndexImport } from './ui/routes/index'
@@ -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>
+  ),
+});