feat: use tx history pathname

packages/app/src/app/(with-sidebar)/bridge/transaction-history/page.tsx

@@ -0,0 +1,14 @@
+import { PathnameEnum } from '@/bridge/constants';
+
+import BridgePageWrapper from '../BridgePageWrapper';
+import { generateMetadata } from '../page';
+
+type Props = {
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+
+export { generateMetadata };
+
+export default async function BridgeBuyPage({ searchParams }: Props) {
+  return <BridgePageWrapper searchParams={searchParams} redirectPath={PathnameEnum.TX_HISTORY} />;
+}

packages/arb-token-bridge-ui/src/components/MainContent/MainContent.tsx

@@ -20,21 +20,18 @@ import { ArbitrumStats, statsLocalStorageKey } from './ArbitrumStats';
 export function MainContent() {
   const pathname = usePathname();
   const [isArbitrumStatsVisible] = useLocalStorage<boolean>(statsLocalStorageKey);
-  const [{ tab, disabledFeatures }] = useArbQueryParams();
+  const [{ disabledFeatures }] = useArbQueryParams();
   const showBuyPanel = isOnrampFeatureEnabled({ disabledFeatures });
 
   const selectedTab = useMemo(() => {
-    if (showBuyPanel) {
-      // `tab` from useArbQueryParams will never be 0 when showBuyPanel is true
-      // because we use /buy and don't use ?tab=buy
-      // so we need to hardcode to return 0 rather than `tab`
-      if (pathname === PathnameEnum.BUY) {
-        return 0;
-      }
-      return tab;
+    if (pathname === PathnameEnum.BUY) {
+      return 0;
     }
-    return Math.max(0, tab - 1);
-  }, [showBuyPanel, tab, pathname]);
+    if (pathname === PathnameEnum.TX_HISTORY) {
+      return showBuyPanel ? 2 : 1;
+    }
+    return showBuyPanel ? 1 : 0;
+  }, [showBuyPanel, pathname]);
 
   useBalanceUpdater();
 

packages/arb-token-bridge-ui/src/components/TopNavBar.tsx

@@ -8,8 +8,7 @@ import { twMerge } from 'tailwind-merge';
 
 import { PathnameEnum } from '../constants';
 import { useArbQueryParams } from '../hooks/useArbQueryParams';
-import { useMode } from '../hooks/useMode';
-import { TabParamEnum, isOnrampFeatureEnabled } from '../util/queryParamUtils';
+import { isOnrampFeatureEnabled } from '../util/queryParamUtils';
 import { useTransactionReminderInfo } from './TransactionHistory/useTransactionReminderInfo';
 
 function StyledTab({
@@ -25,14 +24,13 @@ function StyledTab({
   }>) {
   const pathname = usePathname();
   const isBuyTab = pathname === PathnameEnum.BUY;
-  const { embedMode } = useMode();
 
   return (
     <Tab
       as={Link}
       href={
         href ?? {
-          pathname: embedMode ? PathnameEnum.EMBED : PathnameEnum.BRIDGE,
+          pathname: PathnameEnum.BRIDGE,
           query: hrefQuery,
         }
       }
@@ -54,7 +52,6 @@ export function TopNavBar() {
   const { colorClassName } = useTransactionReminderInfo();
   const [{ disabledFeatures }] = useArbQueryParams();
   const showBuyPanel = isOnrampFeatureEnabled({ disabledFeatures });
-  const { embedMode } = useMode();
   const pathname = usePathname();
   const isBuyTab = pathname === PathnameEnum.BUY;
   const searchParams = useSearchParams();
@@ -74,7 +71,7 @@ export function TopNavBar() {
       {showBuyPanel && (
         <StyledTab
           href={{
-            pathname: embedMode ? PathnameEnum.EMBED_BUY : PathnameEnum.BUY,
+            pathname: PathnameEnum.BUY,
             query: searchParamsWithoutTab.toString(),
           }}
           className={isBuyTab ? 'bg-black/75' : ''}
@@ -90,7 +87,10 @@ export function TopNavBar() {
       </StyledTab>
       <StyledTab
         aria-label="Switch to Transaction History Tab"
-        hrefQuery={`${searchParamsWithoutTab.toString()}&tab=${TabParamEnum.TX_HISTORY}`}
+        href={{
+          pathname: PathnameEnum.TX_HISTORY,
+          query: searchParamsWithoutTab.toString(),
+        }}
       >
         <Image src="/icons/history.svg" width={24} height={24} alt="history icon" />
         Txn History{' '}

packages/arb-token-bridge-ui/src/constants.ts

@@ -35,6 +35,7 @@ export const PORTAL_API_ENDPOINT = 'https://portal.arbitrum.io';
 export enum PathnameEnum {
   BRIDGE = '/bridge',
   BUY = '/bridge/buy',
+  TX_HISTORY = '/bridge/transaction-history',
   EMBED = '/bridge/embed',
   EMBED_BUY = '/bridge/embed/buy',
 }