feat: simple ui

src/App.tsx

@@ -54,6 +54,7 @@ import { useCommandMenu } from './hooks/useCommandMenu';
 import { useComplianceState } from './hooks/useComplianceState';
 import { useInitializePage } from './hooks/useInitializePage';
 import { useLocalStorage } from './hooks/useLocalStorage';
+import { useMobileWebEnabled } from './hooks/useMobileWebEnabled';
 import { useReferralCode } from './hooks/useReferralCode';
 import { useShouldShowFooter } from './hooks/useShouldShowFooter';
 import { useSimpleUiEnabled } from './hooks/useSimpleUiEnabled';
@@ -79,7 +80,6 @@ import breakpoints from './styles/breakpoints';
 const MarketsPage = lazy(() => import('@/pages/markets/Markets'));
 const PortfolioPage = lazy(() => import('@/pages/portfolio/Portfolio'));
 const AlertsPage = lazy(() => import('@/pages/AlertsPage'));
-const ProfilePage = lazy(() => import('@/pages/Profile'));
 const SettingsPage = lazy(() => import('@/pages/settings/Settings'));
 const TradePage = lazy(() => import('@/pages/trade/Trade'));
 const SpotPage = lazy(() => import('@/pages/spot/Spot'));
@@ -92,6 +92,10 @@ const VaultPage = lazy(() => import('@/pages/vaults/VaultPage'));
 const SimpleMarketsPage = lazy(() => import('@/pages/markets/simple-ui/MarketsMobile'));
 const SimpleAssetPage = lazy(() => import('@/pages/trade/simple-ui/AssetPage'));
 
+// Mobile Web
+const MobileWebTradePage = lazy(() => import('@/pages/trade/mobile-web/Trade'));
+const MobileWebTradeFormPage = lazy(() => import('@/pages/trade/mobile-web/TradeForm'));
+
 const Content = () => {
   useInitializePage();
   useAnalytics();
@@ -111,6 +115,7 @@ const Content = () => {
   const isShowingFooter = useShouldShowFooter();
   const abDefaultToMarkets = useCustomFlagValue(CustomFlags.abDefaultToMarkets);
   const isSimpleUi = useSimpleUiEnabled();
+  const isMobileWebEnabled = useMobileWebEnabled();
   const { showComplianceBanner } = useComplianceState();
   const isSimpleUiUserMenuOpen = useAppSelector(getIsUserMenuOpen);
 
@@ -128,7 +133,9 @@ const Content = () => {
 
   const { dialogAreaRef } = useDialogArea() ?? {};
 
-  if (isSimpleUi) {
+  const showMobileWeb = isMobileWebEnabled && isTablet;
+
+  if (isSimpleUi && !showMobileWeb) {
     const matchMarkets = matchPath(AppRoute.Markets, location.pathname);
     const backgroundColor =
       matchMarkets && isSimpleUiUserMenuOpen ? 'var(--color-layer-1)' : 'transparent';
@@ -203,33 +210,37 @@ const Content = () => {
               <Route path={`${AppRoute.Referrals}/*`} element={<AffiliatesPage />} />
 
               <Route path={AppRoute.Trade}>
-                <Route path=":market" element={<TradePage />} />
-                <Route path={AppRoute.Trade} element={<TradePage />} />
+                <Route
+                  path=":market"
+                  element={showMobileWeb ? <MobileWebTradePage /> : <TradePage />}
+                />
+                <Route
+                  path={AppRoute.Trade}
+                  element={showMobileWeb ? <MobileWebTradePage /> : <TradePage />}
+                />
               </Route>
 
               <Route path={AppRoute.Spot}>
                 <Route path=":tokenMint" element={<SpotPage />} />
                 <Route index element={<SpotPage />} />
               </Route>
 
+              <Route path={AppRoute.TradeForm}>
+                <Route path=":market" element={<MobileWebTradeFormPage />} />
+                <Route path={AppRoute.TradeForm} element={<MobileWebTradeFormPage />} />
+              </Route>
+
               <Route path={AppRoute.Markets}>
                 <Route path={AppRoute.Markets} element={<MarketsPage />} />
               </Route>
 
               <Route path={`/${chainTokenLabel}/*`} element={<RewardsPage />} />
 
-              {isTablet && (
-                <>
-                  <Route path={AppRoute.Alerts} element={<AlertsPage />} />
-                  <Route path={AppRoute.Profile} element={<ProfilePage />} />
-                  <Route path={`${AppRoute.Settings}/*`} element={<SettingsPage />} />
-                </>
-              )}
-
               <Route element={<GuardedMobileRoute />}>
                 <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
               </Route>
 
+              <Route path={AppRoute.Alerts} element={<AlertsPage />} />
               <Route path={AppRoute.Vault}>
                 <Route path={AppRoute.Vault} element={<VaultPage />} />
               </Route>
@@ -250,9 +261,9 @@ const Content = () => {
           </Suspense>
         </$Main>
 
-        {isTablet ? <FooterMobile /> : <FooterDesktop />}
+        {showMobileWeb ? <FooterMobile /> : <FooterDesktop />}
 
-        <NotificationsToastArea tw="z-[2] [grid-area:Main]" />
+        <NotificationsToastArea tw="z-[2000] [grid-area:Main]" />
 
         <$DialogArea ref={dialogAreaRef}>
           <DialogManager />

src/bonsai/forms/trade/fields.ts

@@ -76,6 +76,7 @@ export function getTradeFormFieldStates(
     goodTil: DEFAULT_GOOD_TIL_TIME,
     stopLossOrder: undefined,
     takeProfitOrder: undefined,
+    isClosingPosition: false,
   };
 
   // Initialize all fields as not visible
@@ -103,7 +104,7 @@ export function getTradeFormFieldStates(
       states[key] = {
         ...(states[key] as any),
         state: 'enabled',
-        effectiveValue: states[key].effectiveValue ?? states[key].rawValue ?? defaults[key],
+        effectiveValue: states[key]?.effectiveValue ?? states[key]?.rawValue ?? defaults[key],
       };
     });
   }
@@ -151,7 +152,14 @@ export function getTradeFormFieldStates(
     makeTriggersVisibleIfPossible(result);
     switch (type) {
       case TradeFormType.MARKET:
-        makeVisible(result, ['marketId', 'side', 'size', 'marginMode', 'reduceOnly']);
+        makeVisible(result, [
+          'marketId',
+          'side',
+          'size',
+          'marginMode',
+          'reduceOnly',
+          'isClosingPosition',
+        ]);
         setMarginMode(result);
         disableReduceOnlyIfIncreasingMarketOrder(result);
 
@@ -166,6 +174,7 @@ export function getTradeFormFieldStates(
           'marginMode',
           'reduceOnly',
           'postOnly',
+          'isClosingPosition',
         ]);
         defaultSizeIfSizeInputIsInvalid(result);
         setMarginMode(result);

src/bonsai/forms/trade/reducer.ts

@@ -32,6 +32,7 @@ const getMinimumRequiredFields = (
     triggerPrice: undefined,
     stopLossOrder: undefined,
     takeProfitOrder: undefined,
+    isClosingPosition: undefined,
   };
 
   // Add marketId if provided
@@ -86,6 +87,11 @@ export const tradeFormReducer = createVanillaReducer({
       marginMode,
     }),
 
+    setIsClosingPosition: (state, isClosingPosition: boolean) => ({
+      ...state,
+      isClosingPosition,
+    }),
+
     // Size related actions
     setSizeToken: (state, value: string) => ({
       ...state,

src/bonsai/forms/trade/summary.ts

@@ -80,7 +80,7 @@ export function calculateTradeSummary(
 
   const fieldStates = getTradeFormFieldStates(state, accountData, baseAccount);
 
-  const effectiveTrade = mapValues(fieldStates, (s) => s.effectiveValue) as TradeForm;
+  const effectiveTrade = mapValues(fieldStates, (s) => s?.effectiveValue) as TradeForm;
 
   const options = calculateTradeFormOptions(state.type, fieldStates, baseAccount);
 

src/bonsai/forms/trade/types.ts

@@ -120,6 +120,8 @@ export type TradeForm = {
   // additional triggers
   stopLossOrder: TriggerOrderState | undefined;
   takeProfitOrder: TriggerOrderState | undefined;
+
+  isClosingPosition?: boolean;
 };
 
 // Define the FieldState type with conditional properties

src/components/Collapsible.tsx

@@ -85,6 +85,9 @@ const $Root = styled(Root)`
   &[data-state='open'] {
     gap: 0.5rem;
   }
+
+  padding-bottom: 1rem;
+  border-bottom: solid 1px var(--color-border);
 `;
 
 const $Trigger = styled(Trigger)`

src/components/CollapsibleTabs.tsx

@@ -90,17 +90,19 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
             ))}
           </$TabsList>
 
-          <Toolbar>
-            {currentTab?.slotToolbar ?? slotToolbar}
-            <CollapsibleTrigger asChild>
-              <$IconButton
-                iconName={IconName.Caret}
-                isToggle
-                buttonStyle={ButtonStyle.WithoutBackground}
-                shape={ButtonShape.Square}
-              />
-            </CollapsibleTrigger>
-          </Toolbar>
+          {slotToolbar && (
+            <Toolbar>
+              {currentTab?.slotToolbar ?? slotToolbar}
+              <CollapsibleTrigger asChild>
+                <$IconButton
+                  iconName={IconName.Caret}
+                  isToggle
+                  buttonStyle={ButtonStyle.WithoutBackground}
+                  shape={ButtonShape.Square}
+                />
+              </CollapsibleTrigger>
+            </Toolbar>
+          )}
         </$Header>
 
         <CollapsibleContent tw="stack shadow-none">

src/components/MobileDropdownMenu.tsx

@@ -0,0 +1,114 @@
+import { forwardRef } from 'react';
+
+import { Content, Item, Portal, Root, Separator, Trigger } from '@radix-ui/react-dropdown-menu';
+import { CaretDownIcon } from '@radix-ui/react-icons';
+import { Fragment } from 'react/jsx-runtime';
+import styled from 'styled-components';
+
+import { forwardRefFn } from '@/lib/genericFunctionalComponentUtils';
+
+import { Button, ButtonProps } from './Button';
+import { DropdownMenuItem } from './DropdownMenu';
+
+type StyleProps = {
+  align?: 'center' | 'start' | 'end';
+  side?: 'top' | 'bottom';
+  sideOffset?: number;
+  className?: string;
+  withPortal?: boolean;
+};
+
+export const MobileDropdownMenu = forwardRefFn(
+  <T extends string>({
+    className,
+    children,
+    items,
+    slotTop,
+    align,
+    side,
+    sideOffset,
+    withPortal = true,
+  }: StyleProps & {
+    children: React.ReactNode;
+    items: DropdownMenuItem<T>[];
+    slotTop?: React.ReactNode;
+  }) => {
+    const content = (
+      <Content
+        align={align}
+        side={side}
+        sideOffset={sideOffset}
+        tw="z-20 w-fit overflow-hidden rounded-[0.5rem] border border-solid border-color-border bg-color-layer-4"
+      >
+        {slotTop && (
+          <>
+            <div tw="px-1 py-0.5">{slotTop}</div>
+            <Separator tw="border-b-[length:--border-width] border-b-color-border [border-bottom-style:solid]" />
+          </>
+        )}
+        {items.map((item, idx) => (
+          <Fragment key={item.value}>
+            <Item
+              tw="row cursor-pointer select-none justify-between px-1 py-0.75 font-medium-book first:rounded-tl-[0.5rem] first:rounded-tr-[0.5rem] last:rounded-bl-[0.5rem] last:rounded-br-[0.5rem] disabled:cursor-default"
+              onSelect={item.onSelect}
+              disabled={!item.onSelect}
+              css={{
+                ...(item.active ? { backgroundColor: 'var(--color-layer-3)' } : {}),
+                cursor: item.onSelect ? 'pointer' : 'not-allowed',
+                color: {
+                  active: 'var(--color-text-0)',
+                  accent: 'var(--color-accent)',
+                  create: 'var(--color-green)',
+                  destroy: 'var(--color-red)',
+                  none: item.onSelect ? undefined : 'var(--color-text-1)',
+                }[item.highlightColor ?? (item.active ? 'active' : 'none')],
+              }}
+            >
+              <span tw="whitespace-nowrap">{item.label}</span>
+              {item.icon && <span tw="row ml-1">{item.icon}</span>}
+            </Item>
+            {idx !== items.length - 1 && (
+              <Separator tw="border-b-[length:--border-width] border-b-color-border [border-bottom-style:solid]" />
+            )}
+          </Fragment>
+        ))}
+      </Content>
+    );
+
+    const dropdownContent = withPortal ? <Portal>{content}</Portal> : content;
+
+    return (
+      <Root>
+        <Trigger className={className} asChild>
+          {children}
+        </Trigger>
+
+        {dropdownContent}
+      </Root>
+    );
+  }
+);
+
+export const DropdownMenuTrigger = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+  ({ children, ...props }, ref) => (
+    <DropdownMenuButton {...props} ref={ref}>
+      {children} <CaretDownIcon />
+    </DropdownMenuButton>
+  )
+);
+
+const DropdownMenuButton = styled(Button)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px;
+  border-width: 1.5px;
+  border-color: var(--color-layer-4);
+
+  &[data-state='open'] {
+    svg {
+      transition: rotate 0.3s var(--ease-out-expo);
+      rotate: -0.5turn;
+    }
+  }
+`;

src/components/NavigationMenu.tsx

@@ -15,6 +15,8 @@ import styled, { css, keyframes } from 'styled-components';
 
 import { MenuConfig, MenuItem } from '@/constants/menus';
 
+import { useBreakpoints } from '@/hooks/useBreakpoints';
+
 import { layoutMixins } from '@/styles/layoutMixins';
 import { popoverMixins } from '@/styles/popoverMixins';
 
@@ -63,11 +65,12 @@ const NavItemWithRef = <MenuItemValue extends string>(
   ref: Ref<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement>
 ) => {
   const location = useLocation();
+  const { isTablet } = useBreakpoints();
 
   const children = (
     <>
       {slotBefore}
-      <span>
+      <span css={isTablet ? { fontSize: 16 } : undefined}>
         {label}
         {tag && (
           <>
@@ -95,7 +98,7 @@ const NavItemWithRef = <MenuItemValue extends string>(
         tw="whitespace-nowrap"
         {...props}
       >
-        {children}
+        {isTablet ? <div tw="mx-auto flex items-center gap-0.25">{children}</div> : children}
       </NavLink>
     </Link>
   ) : props.onClick ? (