fix: re-order the products pill

Author: gambinish

app/components/UI/Perps/components/PerpsProducts/PerpsProducts.test.tsx

@@ -177,7 +177,7 @@ describe('PerpsProducts', () => {
     expect(getByText('Crypto')).toBeOnTheScreen();
   });
 
-  it('renders a leading "New" pill when recently listed markets exist', () => {
+  it('renders a trailing "New" pill when recently listed markets exist', () => {
     mockHasNewMarkets = true;
     mockCategories = [{ id: 'crypto', label: 'Crypto' }];
 
@@ -197,7 +197,7 @@ describe('PerpsProducts', () => {
     expect(queryByTestId('perps-products-new')).toBeNull();
   });
 
-  it('renders the "New" pill before category pills and navigates with the "new" filter', () => {
+  it('renders the "New" pill after category pills and navigates with the "new" filter', () => {
     mockHasNewMarkets = true;
     mockCategories = [{ id: 'crypto', label: 'Crypto' }];
 

app/components/UI/Perps/components/PerpsProducts/PerpsProducts.tsx

@@ -48,7 +48,7 @@ const PRODUCTS_ROW_COUNT = 2;
  * PerpsProducts – grid of category pills for the Perps home screen.
  *
  * Categories are driven by `MARKET_CATEGORIES` from `@metamask/perps-controller`.
- * Pills whose category has zero available markets are hidden. A leading
+ * Pills whose category has zero available markets are hidden. A trailing
  * "New" pill is shown when any market was listed within the last 30 days
  * (see `useHasNewMarkets`).
  * Tapping a pill navigates to the Markets list screen with that category
@@ -67,7 +67,7 @@ const PerpsProducts: React.FC<PerpsProductsProps> = ({
   const hasNewMarkets = useHasNewMarkets();
 
   const categoriesWithLabels = useMemo(
-    () => (hasNewMarkets ? [NEW_CATEGORY, ...categories] : categories),
+    () => (hasNewMarkets ? [...categories, NEW_CATEGORY] : categories),
     [categories, hasNewMarkets],
   );