Add VPN and Restricted Countries pages

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

@@ -11,19 +11,31 @@
 // Import Routes
 
 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'
 import { Route as MarketAddressImport } from './ui/routes/market.$address'
 
 // Create/Update Routes
 
+const VpnRoute = VpnImport.update({
+  path: '/vpn',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const VoidRoute = VoidImport.update({
   path: '/void',
   getParentRoute: () => rootRoute,
 } as any)
 
+const RestrictedcountriesRoute = RestrictedcountriesImport.update({
+  path: '/restricted_countries',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const MarketsRoute = MarketsImport.update({
   path: '/markets',
   getParentRoute: () => rootRoute,
@@ -60,10 +72,18 @@ 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
     }
+    '/vpn': {
+      preLoaderRoute: typeof VpnImport
+      parentRoute: typeof rootRoute
+    }
     '/market/$address': {
       preLoaderRoute: typeof MarketAddressImport
       parentRoute: typeof rootRoute
@@ -77,7 +97,9 @@ export const routeTree = rootRoute.addChildren([
   IndexRoute,
   BridgeRoute,
   MarketsRoute,
+  RestrictedcountriesRoute,
   VoidRoute,
+  VpnRoute,
   MarketAddressRoute,
 ])
 

apps/hyperdrive-trading/src/ui/app/Page.tsx

@@ -0,0 +1,31 @@
+import { ScrollRestoration } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+import { PropsWithChildren, ReactElement } from "react";
+import Footer from "src/ui/app/Footer/Footer";
+import { Navbar } from "src/ui/app/Navbar/Navbar";
+import { IneligibleAccountMessage } from "src/ui/compliance/IneligibleAccountMessage";
+
+export function Page({ children }: PropsWithChildren): ReactElement {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-between">
+      <div className="flex w-full grow flex-col gap-9">
+        <Navbar />
+        <IneligibleAccountMessage className="grow" />
+        {/* This let's us to reset the scroll position to the top of the page
+        when linking to other pages. This is useful, for example,  when going
+        from the the bottom of the All Markets page to a specific market details
+        page. See:
+        https://tanstack.com/router/latest/docs/framework/react/guide/scroll-restoration#preventing-scroll-restoration
+        */}
+        <ScrollRestoration />
+        {children}
+      </div>
+      <Footer />
+      {import.meta.env.DEV ? (
+        <div className="fixed">
+          <TanStackRouterDevtools />
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -6,21 +6,24 @@ import useAddressScreen from "./hooks/useAddressScreen";
 
 export function IneligibleAccountMessage({
   className,
+  show,
 }: {
   className?: string;
+  show?: boolean;
 }): ReactElement | undefined {
   const { address } = useAccount();
   const { isIneligible } = useAddressScreen(address);
   const navigate = useNavigate();
   const isVoid = !!useMatchRoute()({ to: "/void" });
 
+  // Redirect to void if ineligible
   useEffect(() => {
     if (isIneligible && !isVoid) {
       navigate({ to: "/void" });
     }
   }, [isIneligible, isVoid, navigate]);
 
-  return isIneligible ? (
+  return isIneligible || show ? (
     <div
       className={classNames(
         "flex w-screen flex-col items-center justify-center gap-4",

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

@@ -0,0 +1,29 @@
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import classNames from "classnames";
+import { ReactElement } from "react";
+
+export function VpnDetectedMessage({
+  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" />{" "}
+          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/__root.tsx

@@ -1,37 +1,2 @@
-import {
-  createRootRoute,
-  Outlet,
-  ScrollRestoration,
-} from "@tanstack/react-router";
-import { TanStackRouterDevtools } from "@tanstack/router-devtools";
-import Footer from "src/ui/app/Footer/Footer";
-import { Navbar } from "src/ui/app/Navbar/Navbar";
-import { IneligibleAccountMessage } from "src/ui/compliance/IneligibleAccountMessage";
-export const Route = createRootRoute({
-  component: () => <RootComponent />,
-});
-
-function RootComponent() {
-  return (
-    <div className="flex min-h-screen flex-col items-center justify-between">
-      <div className="flex w-full grow flex-col gap-9">
-        <Navbar />
-        <IneligibleAccountMessage className="grow" />
-        {/* This let's us to reset the scroll position to the top of the page
-        when linking to other pages. This is useful, for example,  when going
-        from the the bottom of the All Markets page to a specific market details
-        page. See:
-        https://tanstack.com/router/latest/docs/framework/react/guide/scroll-restoration#preventing-scroll-restoration
-        */}
-        <ScrollRestoration />
-        <Outlet />
-      </div>
-      <Footer />
-      {import.meta.env.DEV ? (
-        <div className="fixed">
-          <TanStackRouterDevtools />
-        </div>
-      ) : null}
-    </div>
-  );
-}
+import { createRootRoute } from "@tanstack/react-router";
+export const Route = createRootRoute();

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

@@ -1,5 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { Page } from "src/ui/app/Page";
 import { BRIDGE_ROUTE } from "src/ui/bridge/routes";
+
 export const Route = createFileRoute(BRIDGE_ROUTE)({
-  component: () => <div>hi</div>,
+  component: () => (
+    <Page>
+      <div>hi</div>
+    </Page>
+  ),
 });

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

@@ -1,7 +1,12 @@
 import { createFileRoute } from "@tanstack/react-router";
-
+import { Page } from "src/ui/app/Page";
 import { Landing } from "src/ui/landing/Landing";
 import { LANDING_ROUTE } from "src/ui/landing/routes";
+
 export const Route = createFileRoute(LANDING_ROUTE)({
-  component: () => <Landing />,
+  component: () => (
+    <Page>
+      <Landing />
+    </Page>
+  ),
 });

apps/hyperdrive-trading/src/ui/routes/market.$address.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from "@tanstack/react-router";
-
+import { Page } from "src/ui/app/Page";
 import { Market } from "src/ui/markets/Market";
 import { MARKET_DETAILS_ROUTE } from "src/ui/markets/routes";
 import { z } from "zod";
@@ -10,7 +10,11 @@ const marketRouteParams = z.object({
 });
 
 export const Route = createFileRoute(MARKET_DETAILS_ROUTE)({
-  component: () => <Market />,
+  component: () => (
+    <Page>
+      <Market />
+    </Page>
+  ),
   validateSearch: marketRouteParams,
   loaderDeps: ({ search: { position, openOrClosed } }) => {
     return {

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

@@ -1,6 +1,12 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { Page } from "src/ui/app/Page";
 import { Markets } from "src/ui/markets/Markets";
 import { ALL_MARKETS_ROUTE } from "src/ui/markets/routes";
+
 export const Route = createFileRoute(ALL_MARKETS_ROUTE)({
-  component: () => <Markets />,
+  component: () => (
+    <Page>
+      <Markets />
+    </Page>
+  ),
 });

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>
+  ),
+});

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

@@ -1,8 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { Page } from "src/ui/app/Page";
 
 /**
  * An empty route that does nothing.
  */
 export const Route = createFileRoute("/void")({
-  component: () => <></>,
+  component: () => <Page />,
 });

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

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

apps/hyperdrive-trading/src/version.output.ts

@@ -1 +1 @@
-export const APP_VERSION = "1c8cef9c5fc1846840e0b6d1250b8d712b6dd8df";
+export const APP_VERSION =  "2058fffec864d10aa21762ca873f84f8d4664d44";

yarn.lock

@@ -15601,7 +15601,7 @@ typedoc@^0.25.7:
     minimatch "^9.0.3"
     shiki "^0.14.7"
 
-typescript@^4.7.4, typescript@^5.0.2, typescript@^5.3.3, typescript@^5.4.4, typescript@^5.4.5, typescript@~5.2.2, typescript@~5.4.5:
+typescript@^5.0.2, typescript@^5.3.3, typescript@^5.4.4, typescript@^5.4.5, typescript@~5.2.2, typescript@~5.4.5:
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.3.tgz#5c6fedd4c87bee01cd7a528a30145521f8e0feff"
   integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==