feat: set up sandbox page

src/app/features/settings-dropdown/settings-dropdown.tsx

@@ -5,6 +5,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { Box, Flex, SlideFade, Stack, color } from '@stacks/ui';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 
+import { IS_PROD_ENV } from '@shared/environment';
 import { RouteUrls } from '@shared/route-urls';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
@@ -166,6 +167,15 @@ export function SettingsDropdown() {
               Lock
             </MenuItem>
           )}
+          {!IS_PROD_ENV && (
+            <MenuItem
+              onClick={wrappedCloseCallback(() => {
+                navigate(RouteUrls.Sandbox);
+              })}
+            >
+              Sandbox
+            </MenuItem>
+          )}
           <MenuItem
             color={color('feedback-error')}
             onClick={wrappedCloseCallback(() =>

src/app/pages/sandbox/sandbox-buttons.tsx

@@ -0,0 +1,18 @@
+import { Flex, Stack } from 'leather-styles/jsx';
+
+import { LeatherButton } from '@app/components/button/button';
+
+const variants = ['solid', 'outline', 'ghost', 'link', 'text'];
+
+export function SandboxButtons() {
+  return (
+    <Stack gap="space.07">
+      {variants.map((variant: any) => (
+        <Flex alignItems="center" gap="space.03" key={variant}>
+          variant: {variant}
+          <LeatherButton variant={variant}>Button</LeatherButton>
+        </Flex>
+      ))}
+    </Stack>
+  );
+}

src/app/pages/sandbox/sandbox-container.tsx

@@ -0,0 +1,16 @@
+import { Outlet } from 'react-router-dom';
+
+import { Stack } from 'leather-styles/jsx';
+
+import { useRouteHeader } from '@app/common/hooks/use-route-header';
+import { ModalHeader } from '@app/components/modal-header';
+
+export function SandboxContainer() {
+  useRouteHeader(<ModalHeader hideActions defaultGoBack title="Sandbox" />, true);
+
+  return (
+    <Stack>
+      <Outlet />
+    </Stack>
+  );
+}

src/app/pages/sandbox/sandbox-elements.tsx

@@ -0,0 +1,31 @@
+import { Link } from 'react-router-dom';
+
+import { Stack, styled } from 'leather-styles/jsx';
+
+import { SandboxButtons } from './sandbox-buttons';
+import { SandboxTypography } from './sandbox-typography';
+
+const sandboxRoutes = [
+  {
+    path: '/sandbox/buttons',
+    element: <SandboxButtons />,
+    title: 'Buttons',
+  },
+  {
+    path: '/sandbox/typography',
+    element: <SandboxTypography />,
+    title: 'Typography',
+  },
+];
+
+export function SandboxElements() {
+  return (
+    <Stack display="flex" width="100%">
+      {sandboxRoutes.map(route => (
+        <Link key={route.path} to={route.path}>
+          <styled.span textDecoration="underline">{route.title}</styled.span>
+        </Link>
+      ))}
+    </Stack>
+  );
+}

src/app/pages/sandbox/sandbox-typography.tsx

@@ -0,0 +1,16 @@
+import { Flex, Stack, styled } from 'leather-styles/jsx';
+
+const textVariants = ['label.01', 'label.02', 'label.03', 'heading.01', 'heading.02', 'heading.03'];
+
+export function SandboxTypography() {
+  return (
+    <Stack gap="space.07">
+      {textVariants.map((variant: any) => (
+        <Flex alignItems="center" gap="space.03" key={variant}>
+          variant: {variant}
+          <styled.span textStyle={variant}>Button</styled.span>
+        </Flex>
+      ))}
+    </Stack>
+  );
+}

src/app/pages/sandbox/sandbox.tsx

@@ -0,0 +1,16 @@
+import { Route } from 'react-router-dom';
+
+import { RouteUrls } from '@shared/route-urls';
+
+import { SandboxButtons } from './sandbox-buttons';
+import { SandboxContainer } from './sandbox-container';
+import { SandboxElements } from './sandbox-elements';
+import { SandboxTypography } from './sandbox-typography';
+
+export const sandboxRoutes = (
+  <Route element={<SandboxContainer />}>
+    <Route path={RouteUrls.Sandbox} element={<SandboxElements />} />
+    <Route path={RouteUrls.SandboxButtons} element={<SandboxButtons />} />
+    <Route path={RouteUrls.SandboxTypography} element={<SandboxTypography />} />
+  </Route>
+);

src/app/routes/app-routes.tsx

@@ -36,6 +36,7 @@ import { WelcomePage } from '@app/pages/onboarding/welcome/welcome';
 import { ReceiveStxModal } from '@app/pages/receive/receive-stx';
 import { RequestError } from '@app/pages/request-error/request-error';
 import { RpcSignStacksTransaction } from '@app/pages/rpc-sign-stacks-transaction/rpc-sign-stacks-transaction';
+import { sandboxRoutes } from '@app/pages/sandbox/sandbox';
 import { BroadcastError } from '@app/pages/send/broadcast-error/broadcast-error';
 import { LockBitcoinSummary } from '@app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary';
 import { sendCryptoAssetFormRoutes } from '@app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes';
@@ -186,6 +187,7 @@ function useAppRoutes() {
         </Route>
 
         {sendCryptoAssetFormRoutes}
+        {sandboxRoutes}
 
         <Route
           path={RouteUrls.ViewSecretKey}

src/shared/environment.ts

@@ -4,6 +4,7 @@ export const PR_NUMBER = process.env.PR_NUMBER;
 export const COINBASE_APP_ID = process.env.COINBASE_APP_ID ?? '';
 export const COMMIT_SHA = process.env.COMMIT_SHA;
 export const IS_DEV_ENV = process.env.WALLET_ENVIRONMENT === 'development';
+export const IS_PROD_ENV = process.env.WALLET_ENVIRONMENT === 'production';
 export const IS_TEST_ENV = process.env.WALLET_ENVIRONMENT === 'testing';
 export const MOONPAY_API_KEY = process.env.MOONPAY_API_KEY ?? '';
 export const SEGMENT_WRITE_KEY = process.env.SEGMENT_WRITE_KEY ?? '';

src/shared/route-urls.ts

@@ -113,4 +113,9 @@ export enum RouteUrls {
 
   // Request routes stacks
   RpcSignStacksTransaction = '/sign-stacks-transaction',
+
+  // Sandbox routes
+  Sandbox = '/sandbox',
+  SandboxButtons = '/sandbox/buttons',
+  SandboxTypography = '/sandbox/typography',
 }