Skip to content

Commit ebc5728

Browse files
ryangoreeryangoree
authored
Add VPN and Restricted Countries pages (#1201)
* Add VPN page * Remove pasted code from trm message * Add restricted countries route
1 parent 2058fff commit ebc5728

15 files changed

+170
-47
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,31 @@
1111
// Import Routes
1212

1313
import { Route as rootRoute } from './ui/routes/__root'
14+
import { Route as VpnImport } from './ui/routes/vpn'
1415
import { Route as VoidImport } from './ui/routes/void'
16+
import { Route as RestrictedcountriesImport } from './ui/routes/restricted_countries'
1517
import { Route as MarketsImport } from './ui/routes/markets'
1618
import { Route as BridgeImport } from './ui/routes/bridge'
1719
import { Route as IndexImport } from './ui/routes/index'
1820
import { Route as MarketAddressImport } from './ui/routes/market.$address'
1921

2022
// Create/Update Routes
2123

24+
const VpnRoute = VpnImport.update({
25+
path: '/vpn',
26+
getParentRoute: () => rootRoute,
27+
} as any)
28+
2229
const VoidRoute = VoidImport.update({
2330
path: '/void',
2431
getParentRoute: () => rootRoute,
2532
} as any)
2633

34+
const RestrictedcountriesRoute = RestrictedcountriesImport.update({
35+
path: '/restricted_countries',
36+
getParentRoute: () => rootRoute,
37+
} as any)
38+
2739
const MarketsRoute = MarketsImport.update({
2840
path: '/markets',
2941
getParentRoute: () => rootRoute,
@@ -60,10 +72,18 @@ declare module '@tanstack/react-router' {
6072
preLoaderRoute: typeof MarketsImport
6173
parentRoute: typeof rootRoute
6274
}
75+
'/restricted_countries': {
76+
preLoaderRoute: typeof RestrictedcountriesImport
77+
parentRoute: typeof rootRoute
78+
}
6379
'/void': {
6480
preLoaderRoute: typeof VoidImport
6581
parentRoute: typeof rootRoute
6682
}
83+
'/vpn': {
84+
preLoaderRoute: typeof VpnImport
85+
parentRoute: typeof rootRoute
86+
}
6787
'/market/$address': {
6888
preLoaderRoute: typeof MarketAddressImport
6989
parentRoute: typeof rootRoute
@@ -77,7 +97,9 @@ export const routeTree = rootRoute.addChildren([
7797
IndexRoute,
7898
BridgeRoute,
7999
MarketsRoute,
100+
RestrictedcountriesRoute,
80101
VoidRoute,
102+
VpnRoute,
81103
MarketAddressRoute,
82104
])
83105

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { ScrollRestoration } from "@tanstack/react-router";
2+
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
3+
import { PropsWithChildren, ReactElement } from "react";
4+
import Footer from "src/ui/app/Footer/Footer";
5+
import { Navbar } from "src/ui/app/Navbar/Navbar";
6+
import { IneligibleAccountMessage } from "src/ui/compliance/IneligibleAccountMessage";
7+
8+
export function Page({ children }: PropsWithChildren): ReactElement {
9+
return (
10+
<div className="flex min-h-screen flex-col items-center justify-between">
11+
<div className="flex w-full grow flex-col gap-9">
12+
<Navbar />
13+
<IneligibleAccountMessage className="grow" />
14+
{/* This let's us to reset the scroll position to the top of the page
15+
when linking to other pages. This is useful, for example, when going
16+
from the the bottom of the All Markets page to a specific market details
17+
page. See:
18+
https://tanstack.com/router/latest/docs/framework/react/guide/scroll-restoration#preventing-scroll-restoration
19+
*/}
20+
<ScrollRestoration />
21+
{children}
22+
</div>
23+
<Footer />
24+
{import.meta.env.DEV ? (
25+
<div className="fixed">
26+
<TanStackRouterDevtools />
27+
</div>
28+
) : null}
29+
</div>
30+
);
31+
}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,24 @@ import useAddressScreen from "./hooks/useAddressScreen";
66

77
export function IneligibleAccountMessage({
88
className,
9+
show,
910
}: {
1011
className?: string;
12+
show?: boolean;
1113
}): ReactElement | undefined {
1214
const { address } = useAccount();
1315
const { isIneligible } = useAddressScreen(address);
1416
const navigate = useNavigate();
1517
const isVoid = !!useMatchRoute()({ to: "/void" });
1618

19+
// Redirect to void if ineligible
1720
useEffect(() => {
1821
if (isIneligible && !isVoid) {
1922
navigate({ to: "/void" });
2023
}
2124
}, [isIneligible, isVoid, navigate]);
2225

23-
return isIneligible ? (
26+
return isIneligible || show ? (
2427
<div
2528
className={classNames(
2629
"flex w-screen flex-col items-center justify-center gap-4",

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import ExclamationTriangleIcon from "@heroicons/react/24/outline/ExclamationTriangleIcon";
2+
import classNames from "classnames";
3+
import { ReactElement } from "react";
4+
5+
export function RestrictedCountryMessage({
6+
className,
7+
}: {
8+
className?: string;
9+
}): ReactElement | undefined {
10+
return (
11+
<div
12+
className={classNames(
13+
"flex w-screen flex-col items-center justify-center gap-8",
14+
className,
15+
)}
16+
>
17+
<div className="space-y-3">
18+
<h2 className="flex items-center justify-center gap-4">
19+
<ExclamationTriangleIcon className="text-red-500 size-10 stroke-error" />{" "}
20+
Restricted
21+
</h2>
22+
<p>
23+
We&lsquo;re sorry but access from restricted countries is prohibited.
24+
</p>
25+
</div>
26+
<a href="https://hyperdrive.box" className="daisy-link-primary">
27+
Hyperdrive Website
28+
</a>
29+
</div>
30+
);
31+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
2+
import classNames from "classnames";
3+
import { ReactElement } from "react";
4+
5+
export function VpnDetectedMessage({
6+
className,
7+
}: {
8+
className?: string;
9+
}): ReactElement | undefined {
10+
return (
11+
<div
12+
className={classNames(
13+
"flex w-screen flex-col items-center justify-center gap-8",
14+
className,
15+
)}
16+
>
17+
<div className="space-y-3">
18+
<h2 className="flex items-center justify-center gap-4">
19+
<ExclamationTriangleIcon className="text-red-500 size-10 stroke-error" />{" "}
20+
VPN detected
21+
</h2>
22+
<p>We&lsquo;re sorry but this app is not accessible for VPN users.</p>
23+
</div>
24+
<a href="https://hyperdrive.box" className="daisy-link-primary">
25+
Hyperdrive Website
26+
</a>
27+
</div>
28+
);
29+
}

‎apps/hyperdrive-trading/src/ui/routes/__root.tsx

Lines changed: 2 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,2 @@
1-
import {
2-
createRootRoute,
3-
Outlet,
4-
ScrollRestoration,
5-
} from "@tanstack/react-router";
6-
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
7-
import Footer from "src/ui/app/Footer/Footer";
8-
import { Navbar } from "src/ui/app/Navbar/Navbar";
9-
import { IneligibleAccountMessage } from "src/ui/compliance/IneligibleAccountMessage";
10-
export const Route = createRootRoute({
11-
component: () => <RootComponent />,
12-
});
13-
14-
function RootComponent() {
15-
return (
16-
<div className="flex min-h-screen flex-col items-center justify-between">
17-
<div className="flex w-full grow flex-col gap-9">
18-
<Navbar />
19-
<IneligibleAccountMessage className="grow" />
20-
{/* This let's us to reset the scroll position to the top of the page
21-
when linking to other pages. This is useful, for example, when going
22-
from the the bottom of the All Markets page to a specific market details
23-
page. See:
24-
https://tanstack.com/router/latest/docs/framework/react/guide/scroll-restoration#preventing-scroll-restoration
25-
*/}
26-
<ScrollRestoration />
27-
<Outlet />
28-
</div>
29-
<Footer />
30-
{import.meta.env.DEV ? (
31-
<div className="fixed">
32-
<TanStackRouterDevtools />
33-
</div>
34-
) : null}
35-
</div>
36-
);
37-
}
1+
import { createRootRoute } from "@tanstack/react-router";
2+
export const Route = createRootRoute();

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { createFileRoute } from "@tanstack/react-router";
2+
import { Page } from "src/ui/app/Page";
23
import { BRIDGE_ROUTE } from "src/ui/bridge/routes";
4+
35
export const Route = createFileRoute(BRIDGE_ROUTE)({
4-
component: () => <div>hi</div>,
6+
component: () => (
7+
<Page>
8+
<div>hi</div>
9+
</Page>
10+
),
511
});

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { createFileRoute } from "@tanstack/react-router";
2-
2+
import { Page } from "src/ui/app/Page";
33
import { Landing } from "src/ui/landing/Landing";
44
import { LANDING_ROUTE } from "src/ui/landing/routes";
5+
56
export const Route = createFileRoute(LANDING_ROUTE)({
6-
component: () => <Landing />,
7+
component: () => (
8+
<Page>
9+
<Landing />
10+
</Page>
11+
),
712
});

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createFileRoute } from "@tanstack/react-router";
2-
2+
import { Page } from "src/ui/app/Page";
33
import { Market } from "src/ui/markets/Market";
44
import { MARKET_DETAILS_ROUTE } from "src/ui/markets/routes";
55
import { z } from "zod";
@@ -10,7 +10,11 @@ const marketRouteParams = z.object({
1010
});
1111

1212
export const Route = createFileRoute(MARKET_DETAILS_ROUTE)({
13-
component: () => <Market />,
13+
component: () => (
14+
<Page>
15+
<Market />
16+
</Page>
17+
),
1418
validateSearch: marketRouteParams,
1519
loaderDeps: ({ search: { position, openOrClosed } }) => {
1620
return {

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import { createFileRoute } from "@tanstack/react-router";
2+
import { Page } from "src/ui/app/Page";
23
import { Markets } from "src/ui/markets/Markets";
34
import { ALL_MARKETS_ROUTE } from "src/ui/markets/routes";
5+
46
export const Route = createFileRoute(ALL_MARKETS_ROUTE)({
5-
component: () => <Markets />,
7+
component: () => (
8+
<Page>
9+
<Markets />
10+
</Page>
11+
),
612
});

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { createFileRoute } from "@tanstack/react-router";
2+
import { RestrictedCountryMessage } from "src/ui/compliance/RestrictedCountryMessage";
3+
4+
export const Route = createFileRoute("/restricted_countries")({
5+
component: () => (
6+
<div className="flex min-h-screen w-screen items-center justify-center px-[2vh]">
7+
<RestrictedCountryMessage />
8+
</div>
9+
),
10+
});

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { createFileRoute } from "@tanstack/react-router";
2+
import { Page } from "src/ui/app/Page";
23

34
/**
45
* An empty route that does nothing.
56
*/
67
export const Route = createFileRoute("/void")({
7-
component: () => <></>,
8+
component: () => <Page />,
89
});

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { createFileRoute } from "@tanstack/react-router";
2+
import { VpnDetectedMessage } from "src/ui/compliance/VpnDetectedMessage";
3+
4+
export const Route = createFileRoute("/vpn")({
5+
component: () => (
6+
<div className="flex min-h-screen w-screen items-center justify-center px-[2vh]">
7+
<VpnDetectedMessage />
8+
</div>
9+
),
10+
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const APP_VERSION = "1c8cef9c5fc1846840e0b6d1250b8d712b6dd8df";
1+
export const APP_VERSION = "2058fffec864d10aa21762ca873f84f8d4664d44";

‎yarn.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15601,7 +15601,7 @@ typedoc@^0.25.7:
1560115601
minimatch "^9.0.3"
1560215602
shiki "^0.14.7"
1560315603

15604-
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:
15604+
typescript@^5.0.2, typescript@^5.3.3, typescript@^5.4.4, typescript@^5.4.5, typescript@~5.2.2, typescript@~5.4.5:
1560515605
version "5.4.3"
1560615606
resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.3.tgz#5c6fedd4c87bee01cd7a528a30145521f8e0feff"
1560715607
integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==

0 commit comments

Comments
 (0)