From 8cc85a47996e64238314f8dd69f77dc47d721215 Mon Sep 17 00:00:00 2001
From: Brian August Nguyen <brianacnguyen@gmail.com>
Date: Tue, 25 Nov 2025 16:13:03 -0800
Subject: [PATCH 1/5] chore: Updated ButtonFilters on activity page (#23285)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This PR updates the ButtonFilters on the activity page to be using the
temp ButtonFilter component
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:
https://consensyssoftware.atlassian.net/jira/software/c/projects/MDP/boards/2972?assignee=62afb43d33a882e2be47c36f&selectedIssue=MDP-411

## **Manual testing steps**

```gherkin
Feature: ButtonFilter in Activity page

  Scenario: user navigates to Activity page
    Given initial state

    When user clicks on different tabs
    Then they should see the same ButtonFilters
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

https://github.com/user-attachments/assets/71cb36a8-2288-402a-ac6c-abf831487f9d

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Replaces legacy/custom filter buttons with the shared ButtonFilter
component in PerpsTransactionsView and Ramp OrdersList, updating
layout/styling and snapshots.
>
> - **UI**:
> - **Perps** (`PerpsTransactionsView.tsx`): Replace `Button` tabs with
`ButtonFilter` (`size: Md`) and render labels as children.
> - **Ramp - OrdersList** (`OrdersList.tsx`): Remove custom
`FilterButton`/legacy `Button` in favor of `ButtonFilter`; wrap header
in `Box` with Tailwind spacing; set `size: Md`; add accessibility
labels; adjust horizontal `ScrollView` content spacing.
> - **Styles** (`OrdersList.styles.ts`): Remove unused `filters` style.
> - **Tests**:
> - Update snapshots for `OrdersList` and `ActivityView` to reflect
`ButtonFilter` structure and new header layout.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
3a6fdd3003a6928f78548c39855414c69963c1ad. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---
 .../PerpsTransactionsView.tsx                 |   17 +-
 .../Views/OrdersList/OrdersList.styles.ts     |    7 -
 .../Views/OrdersList/OrdersList.tsx           |   73 +-
 .../__snapshots__/OrdersList.test.tsx.snap    | 4898 +++++++++++++----
 .../__snapshots__/index.test.tsx.snap         |  696 ++-
 5 files changed, 4505 insertions(+), 1186 deletions(-)

diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx
index b4fa29dec3f..e81c6dda770 100644
--- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx
+++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx
@@ -36,10 +36,8 @@ import { formatDateSection } from '../../utils/formatUtils';
 import { styleSheet } from './PerpsTransactionsView.styles';
 import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement';
 import { TraceName } from '../../../../../util/trace';
-import Button, {
-  ButtonSize,
-  ButtonVariants,
-} from '../../../../../component-library/components/Buttons/Button';
+import ButtonFilter from '../../../../../component-library/components-temp/ButtonFilter';
+import { ButtonSize } from '@metamask/design-system-react-native';
 
 const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
   const { styles } = useStyles(styleSheet, {});
@@ -225,14 +223,15 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
       };
 
       return (
-        <Button
+        <ButtonFilter
           key={tab}
-          variant={isActive ? ButtonVariants.Primary : ButtonVariants.Secondary}
-          size={ButtonSize.Sm}
+          isActive={isActive}
+          size={ButtonSize.Md}
           onPress={handleTabPress}
           accessibilityRole="button"
-          label={strings(`perps.transactions.tabs.${i18nKey}`)}
-        />
+        >
+          {strings(`perps.transactions.tabs.${i18nKey}`)}
+        </ButtonFilter>
       );
     },
     [activeFilter],
diff --git a/app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.styles.ts b/app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.styles.ts
index a567868f5bf..ecdfa7e5d2b 100644
--- a/app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.styles.ts
+++ b/app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.styles.ts
@@ -3,13 +3,6 @@ import { Colors } from '../../../../../../util/theme/models';
 
 const createStyles = (colors: Colors) =>
   StyleSheet.create({
-    filters: {
-      flexDirection: 'row',
-      columnGap: 8,
-      alignItems: 'center',
-      marginVertical: 16,
-      marginHorizontal: 24,
-    },
     emptyMessage: {
       textAlign: 'center',
     },
diff --git a/app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.tsx b/app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.tsx
index 8dbbbf2dff3..6d13c8504d9 100644
--- a/app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.tsx
+++ b/app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.tsx
@@ -11,11 +11,6 @@ import OrderListItem from '../../components/OrderListItem';
 import Row from '../../components/Row';
 import createStyles from './OrdersList.styles';
 
-import Button, {
-  ButtonSize,
-  ButtonVariants,
-} from '../../../../../../component-library/components/Buttons/Button';
-import { ButtonProps } from '../../../../../../component-library/components/Buttons/Button/Button.types';
 import Text, {
   TextColor,
   TextVariant,
@@ -29,25 +24,15 @@ import { FiatOrder, getOrders } from '../../../../../../reducers/fiatOrders';
 import { strings } from '../../../../../../../locales/i18n';
 import { useTheme } from '../../../../../../util/theme';
 import { createDepositOrderDetailsNavDetails } from '../../../Deposit/Views/DepositOrderDetails/DepositOrderDetails';
+import ButtonFilter from '../../../../../../component-library/components-temp/ButtonFilter';
+import {
+  Box,
+  ButtonSize as ButtonBaseSize,
+} from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
 
 type filterType = 'ALL' | 'PURCHASE' | 'SELL';
 
-interface FilterButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
-  readonly selected?: boolean;
-}
-
-function FilterButton({ selected = false, ...props }: FilterButtonProps) {
-  return (
-    <Button
-      variant={selected ? ButtonVariants.Primary : ButtonVariants.Secondary}
-      size={ButtonSize.Sm}
-      accessibilityRole="button"
-      accessible
-      {...props}
-    />
-  );
-}
-
 function OrdersList() {
   const { colors } = useTheme();
   const styles = createStyles(colors);
@@ -55,6 +40,7 @@ function OrdersList() {
   const allOrders = useSelector(getOrders);
   const [currentFilter, setCurrentFilter] = useState<filterType>('ALL');
   const { goToDeposit } = useRampNavigation();
+  const tw = useTailwind();
   const orders = allOrders.filter((order) => {
     if (currentFilter === 'PURCHASE') {
       return (
@@ -118,25 +104,38 @@ function OrdersList() {
   return (
     <FlatList
       ListHeaderComponent={
-        <ScrollView horizontal>
-          <Row style={styles.filters}>
-            <FilterButton
-              label={strings('fiat_on_ramp_aggregator.All')}
+        <Box twClassName="px-4 py-2 bg-default">
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={tw.style('flex-row gap-3')}
+          >
+            <ButtonFilter
               onPress={() => setCurrentFilter('ALL')}
-              selected={currentFilter === 'ALL'}
-            />
-            <FilterButton
-              label={strings('fiat_on_ramp_aggregator.Purchased')}
+              isActive={currentFilter === 'ALL'}
+              size={ButtonBaseSize.Md}
+              accessibilityLabel={strings('fiat_on_ramp_aggregator.All')}
+            >
+              {strings('fiat_on_ramp_aggregator.All')}
+            </ButtonFilter>
+            <ButtonFilter
               onPress={() => setCurrentFilter('PURCHASE')}
-              selected={currentFilter === 'PURCHASE'}
-            />
-            <FilterButton
-              label={strings('fiat_on_ramp_aggregator.Sold')}
+              isActive={currentFilter === 'PURCHASE'}
+              size={ButtonBaseSize.Md}
+              accessibilityLabel={strings('fiat_on_ramp_aggregator.Purchased')}
+            >
+              {strings('fiat_on_ramp_aggregator.Purchased')}
+            </ButtonFilter>
+            <ButtonFilter
               onPress={() => setCurrentFilter('SELL')}
-              selected={currentFilter === 'SELL'}
-            />
-          </Row>
-        </ScrollView>
+              isActive={currentFilter === 'SELL'}
+              size={ButtonBaseSize.Md}
+              accessibilityLabel={strings('fiat_on_ramp_aggregator.Sold')}
+            >
+              {strings('fiat_on_ramp_aggregator.Sold')}
+            </ButtonFilter>
+          </ScrollView>
+        </Box>
       }
       data={orders}
       renderItem={renderItem}
diff --git a/app/components/UI/Ramp/Aggregator/Views/OrdersList/__snapshots__/OrdersList.test.tsx.snap b/app/components/UI/Ramp/Aggregator/Views/OrdersList/__snapshots__/OrdersList.test.tsx.snap
index de9abeabc3f..6c4ca787f09 100644
--- a/app/components/UI/Ramp/Aggregator/Views/OrdersList/__snapshots__/OrdersList.test.tsx.snap
+++ b/app/components/UI/Ramp/Aggregator/Views/OrdersList/__snapshots__/OrdersList.test.tsx.snap
@@ -18,37 +18,45 @@ exports[`OrdersList renders buy only correctly when pressing buy filter 1`] = `
     </Row>
   }
   ListHeaderComponent={
-    <ForwardRef
-      horizontal={true}
+    <Box
+      twClassName="px-4 py-2 bg-default"
     >
-      <Row
-        style={
+      <ForwardRef
+        contentContainerStyle={
           {
-            "alignItems": "center",
-            "columnGap": 8,
             "flexDirection": "row",
-            "marginHorizontal": 24,
-            "marginVertical": 16,
+            "gap": 12,
           }
         }
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
       >
-        <FilterButton
-          label="All"
+        <ButtonFilter
+          accessibilityLabel="All"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-        <FilterButton
-          label="Purchased"
+          size="md"
+        >
+          All
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Purchased"
+          isActive={true}
           onPress={[Function]}
-          selected={true}
-        />
-        <FilterButton
-          label="Sold"
+          size="md"
+        >
+          Purchased
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Sold"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-      </Row>
-    </ForwardRef>
+          size="md"
+        >
+          Sold
+        </ButtonFilter>
+      </ForwardRef>
+    </Box>
   }
   data={
     [
@@ -189,148 +197,556 @@ exports[`OrdersList renders buy only correctly when pressing buy filter 1`] = `
       collapsable={false}
       onLayout={[Function]}
     >
-      <RCTScrollView
-        collapsable={false}
-        handlerTag={2}
-        handlerType="NativeViewGestureHandler"
-        horizontal={true}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "display": "flex",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
+        }
       >
-        <View>
-          <View
-            style={
-              [
-                {
-                  "marginVertical": 8,
-                },
-                undefined,
-                undefined,
-                {
-                  "alignItems": "center",
-                  "columnGap": 8,
-                  "flexDirection": "row",
-                  "marginHorizontal": 24,
-                  "marginVertical": 16,
-                },
-              ]
+        <RCTScrollView
+          collapsable={false}
+          contentContainerStyle={
+            {
+              "flexDirection": "row",
+              "gap": 12,
             }
-          >
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+          }
+          handlerTag={2}
+          handlerType="NativeViewGestureHandler"
+          horizontal={true}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          showsHorizontalScrollIndicator={false}
+        >
+          <View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="All"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                All
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    All
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#121314",
-                  "borderRadius": 12,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Purchased"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#ffffff",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#121314",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                Purchased
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#ffffff",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#ffffff",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Purchased
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Sold"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                Sold
-              </Text>
-            </TouchableOpacity>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Sold
+                  </Text>
+                </View>
+              </View>
+            </View>
           </View>
-        </View>
-      </RCTScrollView>
+        </RCTScrollView>
+      </View>
     </View>
     <View
       onFocusCapture={[Function]}
@@ -1684,37 +2100,45 @@ exports[`OrdersList renders correctly 1`] = `
     </Row>
   }
   ListHeaderComponent={
-    <ForwardRef
-      horizontal={true}
+    <Box
+      twClassName="px-4 py-2 bg-default"
     >
-      <Row
-        style={
+      <ForwardRef
+        contentContainerStyle={
           {
-            "alignItems": "center",
-            "columnGap": 8,
             "flexDirection": "row",
-            "marginHorizontal": 24,
-            "marginVertical": 16,
+            "gap": 12,
           }
         }
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
       >
-        <FilterButton
-          label="All"
+        <ButtonFilter
+          accessibilityLabel="All"
+          isActive={true}
           onPress={[Function]}
-          selected={true}
-        />
-        <FilterButton
-          label="Purchased"
+          size="md"
+        >
+          All
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Purchased"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-        <FilterButton
-          label="Sold"
+          size="md"
+        >
+          Purchased
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Sold"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-      </Row>
-    </ForwardRef>
+          size="md"
+        >
+          Sold
+        </ButtonFilter>
+      </ForwardRef>
+    </Box>
   }
   data={
     [
@@ -1878,148 +2302,556 @@ exports[`OrdersList renders correctly 1`] = `
       collapsable={false}
       onLayout={[Function]}
     >
-      <RCTScrollView
-        collapsable={false}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        horizontal={true}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "display": "flex",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
+        }
       >
-        <View>
-          <View
-            style={
-              [
-                {
-                  "marginVertical": 8,
-                },
-                undefined,
-                undefined,
-                {
-                  "alignItems": "center",
-                  "columnGap": 8,
-                  "flexDirection": "row",
-                  "marginHorizontal": 24,
-                  "marginVertical": 16,
-                },
-              ]
+        <RCTScrollView
+          collapsable={false}
+          contentContainerStyle={
+            {
+              "flexDirection": "row",
+              "gap": 12,
             }
-          >
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+          }
+          handlerTag={-1}
+          handlerType="NativeViewGestureHandler"
+          horizontal={true}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          showsHorizontalScrollIndicator={false}
+        >
+          <View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#121314",
-                  "borderRadius": 12,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="All"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#ffffff",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#121314",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                All
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#ffffff",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#ffffff",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    All
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Purchased"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                Purchased
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Purchased
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Sold"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                Sold
-              </Text>
-            </TouchableOpacity>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Sold
+                  </Text>
+                </View>
+              </View>
+            </View>
           </View>
-        </View>
-      </RCTScrollView>
+        </RCTScrollView>
+      </View>
     </View>
     <View
       onFocusCapture={[Function]}
@@ -3639,37 +4471,45 @@ exports[`OrdersList renders empty buy message 1`] = `
     </Row>
   }
   ListHeaderComponent={
-    <ForwardRef
-      horizontal={true}
+    <Box
+      twClassName="px-4 py-2 bg-default"
     >
-      <Row
-        style={
+      <ForwardRef
+        contentContainerStyle={
           {
-            "alignItems": "center",
-            "columnGap": 8,
             "flexDirection": "row",
-            "marginHorizontal": 24,
-            "marginVertical": 16,
+            "gap": 12,
           }
         }
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
       >
-        <FilterButton
-          label="All"
+        <ButtonFilter
+          accessibilityLabel="All"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-        <FilterButton
-          label="Purchased"
+          size="md"
+        >
+          All
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Purchased"
+          isActive={true}
           onPress={[Function]}
-          selected={true}
-        />
-        <FilterButton
-          label="Sold"
+          size="md"
+        >
+          Purchased
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Sold"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-      </Row>
-    </ForwardRef>
+          size="md"
+        >
+          Sold
+        </ButtonFilter>
+      </ForwardRef>
+    </Box>
   }
   data={[]}
   getItem={[Function]}
@@ -3693,148 +4533,556 @@ exports[`OrdersList renders empty buy message 1`] = `
       collapsable={false}
       onLayout={[Function]}
     >
-      <RCTScrollView
-        collapsable={false}
-        handlerTag={5}
-        handlerType="NativeViewGestureHandler"
-        horizontal={true}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "display": "flex",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
+        }
       >
-        <View>
-          <View
-            style={
-              [
-                {
-                  "marginVertical": 8,
-                },
-                undefined,
-                undefined,
-                {
-                  "alignItems": "center",
-                  "columnGap": 8,
-                  "flexDirection": "row",
-                  "marginHorizontal": 24,
-                  "marginVertical": 16,
-                },
-              ]
+        <RCTScrollView
+          collapsable={false}
+          contentContainerStyle={
+            {
+              "flexDirection": "row",
+              "gap": 12,
             }
-          >
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+          }
+          handlerTag={5}
+          handlerType="NativeViewGestureHandler"
+          horizontal={true}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          showsHorizontalScrollIndicator={false}
+        >
+          <View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="All"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
-              >
-                All
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#121314",
-                  "borderRadius": 12,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="text"
-                style={
+                accessibilityValue={
                   {
-                    "color": "#ffffff",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
-                  }
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
                 }
               >
-                Purchased
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="text"
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    All
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
+              }
+            >
+              <View
+                accessibilityLabel="Purchased"
+                accessibilityRole="button"
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#121314",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#ffffff",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#ffffff",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Purchased
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                [
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
+              }
+            >
+              <View
+                accessibilityLabel="Sold"
+                accessibilityRole="button"
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                Sold
-              </Text>
-            </TouchableOpacity>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Sold
+                  </Text>
+                </View>
+              </View>
+            </View>
           </View>
-        </View>
-      </RCTScrollView>
+        </RCTScrollView>
+      </View>
     </View>
     <View
       onLayout={[Function]}
@@ -3887,37 +5135,45 @@ exports[`OrdersList renders empty sell message 1`] = `
     </Row>
   }
   ListHeaderComponent={
-    <ForwardRef
-      horizontal={true}
+    <Box
+      twClassName="px-4 py-2 bg-default"
     >
-      <Row
-        style={
+      <ForwardRef
+        contentContainerStyle={
           {
-            "alignItems": "center",
-            "columnGap": 8,
             "flexDirection": "row",
-            "marginHorizontal": 24,
-            "marginVertical": 16,
+            "gap": 12,
           }
         }
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
       >
-        <FilterButton
-          label="All"
+        <ButtonFilter
+          accessibilityLabel="All"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-        <FilterButton
-          label="Purchased"
+          size="md"
+        >
+          All
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Purchased"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-        <FilterButton
-          label="Sold"
+          size="md"
+        >
+          Purchased
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Sold"
+          isActive={true}
           onPress={[Function]}
-          selected={true}
-        />
-      </Row>
-    </ForwardRef>
+          size="md"
+        >
+          Sold
+        </ButtonFilter>
+      </ForwardRef>
+    </Box>
   }
   data={[]}
   getItem={[Function]}
@@ -3941,148 +5197,556 @@ exports[`OrdersList renders empty sell message 1`] = `
       collapsable={false}
       onLayout={[Function]}
     >
-      <RCTScrollView
-        collapsable={false}
-        handlerTag={4}
-        handlerType="NativeViewGestureHandler"
-        horizontal={true}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "display": "flex",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
+        }
       >
-        <View>
-          <View
-            style={
-              [
-                {
-                  "marginVertical": 8,
-                },
-                undefined,
-                undefined,
-                {
-                  "alignItems": "center",
-                  "columnGap": 8,
-                  "flexDirection": "row",
-                  "marginHorizontal": 24,
-                  "marginVertical": 16,
-                },
-              ]
+        <RCTScrollView
+          collapsable={false}
+          contentContainerStyle={
+            {
+              "flexDirection": "row",
+              "gap": 12,
             }
-          >
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+          }
+          handlerTag={4}
+          handlerType="NativeViewGestureHandler"
+          horizontal={true}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          showsHorizontalScrollIndicator={false}
+        >
+          <View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
+              <View
+                accessibilityLabel="All"
+                accessibilityRole="button"
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    All
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                [
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
+              }
+            >
+              <View
+                accessibilityLabel="Purchased"
+                accessibilityRole="button"
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                All
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Purchased
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Sold"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
-              >
-                Purchased
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
-              style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#121314",
-                  "borderRadius": 12,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
-              }
-            >
-              <Text
-                accessibilityRole="text"
-                style={
+                accessibilityValue={
                   {
-                    "color": "#ffffff",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
-                  }
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#121314",
+                      },
+                      undefined,
+                    ],
+                  ]
                 }
               >
-                Sold
-              </Text>
-            </TouchableOpacity>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#ffffff",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#ffffff",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Sold
+                  </Text>
+                </View>
+              </View>
+            </View>
           </View>
-        </View>
-      </RCTScrollView>
+        </RCTScrollView>
+      </View>
     </View>
     <View
       onLayout={[Function]}
@@ -4135,37 +5799,45 @@ exports[`OrdersList renders sell only correctly when pressing sell filter 1`] =
     </Row>
   }
   ListHeaderComponent={
-    <ForwardRef
-      horizontal={true}
+    <Box
+      twClassName="px-4 py-2 bg-default"
     >
-      <Row
-        style={
+      <ForwardRef
+        contentContainerStyle={
           {
-            "alignItems": "center",
-            "columnGap": 8,
             "flexDirection": "row",
-            "marginHorizontal": 24,
-            "marginVertical": 16,
+            "gap": 12,
           }
         }
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
       >
-        <FilterButton
-          label="All"
+        <ButtonFilter
+          accessibilityLabel="All"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-        <FilterButton
-          label="Purchased"
+          size="md"
+        >
+          All
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Purchased"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-        <FilterButton
-          label="Sold"
+          size="md"
+        >
+          Purchased
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Sold"
+          isActive={true}
           onPress={[Function]}
-          selected={true}
-        />
-      </Row>
-    </ForwardRef>
+          size="md"
+        >
+          Sold
+        </ButtonFilter>
+      </ForwardRef>
+    </Box>
   }
   data={
     [
@@ -4215,148 +5887,556 @@ exports[`OrdersList renders sell only correctly when pressing sell filter 1`] =
       collapsable={false}
       onLayout={[Function]}
     >
-      <RCTScrollView
-        collapsable={false}
-        handlerTag={3}
-        handlerType="NativeViewGestureHandler"
-        horizontal={true}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "display": "flex",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
+        }
       >
-        <View>
-          <View
-            style={
-              [
-                {
-                  "marginVertical": 8,
-                },
-                undefined,
-                undefined,
-                {
-                  "alignItems": "center",
-                  "columnGap": 8,
-                  "flexDirection": "row",
-                  "marginHorizontal": 24,
-                  "marginVertical": 16,
-                },
-              ]
+        <RCTScrollView
+          collapsable={false}
+          contentContainerStyle={
+            {
+              "flexDirection": "row",
+              "gap": 12,
             }
-          >
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+          }
+          handlerTag={3}
+          handlerType="NativeViewGestureHandler"
+          horizontal={true}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          showsHorizontalScrollIndicator={false}
+        >
+          <View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="All"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                All
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    All
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Purchased"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                Purchased
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Purchased
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#121314",
-                  "borderRadius": 12,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Sold"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#ffffff",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#121314",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                Sold
-              </Text>
-            </TouchableOpacity>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#ffffff",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#ffffff",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Sold
+                  </Text>
+                </View>
+              </View>
+            </View>
           </View>
-        </View>
-      </RCTScrollView>
+        </RCTScrollView>
+      </View>
     </View>
     <View
       onFocusCapture={[Function]}
@@ -4646,37 +6726,45 @@ exports[`OrdersList resets filter to all after other filter was set 1`] = `
     </Row>
   }
   ListHeaderComponent={
-    <ForwardRef
-      horizontal={true}
+    <Box
+      twClassName="px-4 py-2 bg-default"
     >
-      <Row
-        style={
+      <ForwardRef
+        contentContainerStyle={
           {
-            "alignItems": "center",
-            "columnGap": 8,
             "flexDirection": "row",
-            "marginHorizontal": 24,
-            "marginVertical": 16,
+            "gap": 12,
           }
         }
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
       >
-        <FilterButton
-          label="All"
+        <ButtonFilter
+          accessibilityLabel="All"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-        <FilterButton
-          label="Purchased"
+          size="md"
+        >
+          All
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Purchased"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-        <FilterButton
-          label="Sold"
+          size="md"
+        >
+          Purchased
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Sold"
+          isActive={true}
           onPress={[Function]}
-          selected={true}
-        />
-      </Row>
-    </ForwardRef>
+          size="md"
+        >
+          Sold
+        </ButtonFilter>
+      </ForwardRef>
+    </Box>
   }
   data={
     [
@@ -4726,148 +6814,556 @@ exports[`OrdersList resets filter to all after other filter was set 1`] = `
       collapsable={false}
       onLayout={[Function]}
     >
-      <RCTScrollView
-        collapsable={false}
-        handlerTag={6}
-        handlerType="NativeViewGestureHandler"
-        horizontal={true}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "display": "flex",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
+        }
       >
-        <View>
-          <View
-            style={
-              [
-                {
-                  "marginVertical": 8,
-                },
-                undefined,
-                undefined,
-                {
-                  "alignItems": "center",
-                  "columnGap": 8,
-                  "flexDirection": "row",
-                  "marginHorizontal": 24,
-                  "marginVertical": 16,
-                },
-              ]
+        <RCTScrollView
+          collapsable={false}
+          contentContainerStyle={
+            {
+              "flexDirection": "row",
+              "gap": 12,
             }
-          >
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+          }
+          handlerTag={6}
+          handlerType="NativeViewGestureHandler"
+          horizontal={true}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          showsHorizontalScrollIndicator={false}
+        >
+          <View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="All"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                All
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    All
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Purchased"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                Purchased
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Purchased
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#121314",
-                  "borderRadius": 12,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Sold"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#ffffff",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#121314",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+              >
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#ffffff",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
                   }
-                }
-              >
-                Sold
-              </Text>
-            </TouchableOpacity>
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#ffffff",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Sold
+                  </Text>
+                </View>
+              </View>
+            </View>
           </View>
-        </View>
-      </RCTScrollView>
+        </RCTScrollView>
+      </View>
     </View>
     <View
       onFocusCapture={[Function]}
@@ -5157,37 +7653,45 @@ exports[`OrdersList resets filter to all after other filter was set 2`] = `
     </Row>
   }
   ListHeaderComponent={
-    <ForwardRef
-      horizontal={true}
+    <Box
+      twClassName="px-4 py-2 bg-default"
     >
-      <Row
-        style={
+      <ForwardRef
+        contentContainerStyle={
           {
-            "alignItems": "center",
-            "columnGap": 8,
             "flexDirection": "row",
-            "marginHorizontal": 24,
-            "marginVertical": 16,
+            "gap": 12,
           }
         }
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
       >
-        <FilterButton
-          label="All"
+        <ButtonFilter
+          accessibilityLabel="All"
+          isActive={true}
           onPress={[Function]}
-          selected={true}
-        />
-        <FilterButton
-          label="Purchased"
+          size="md"
+        >
+          All
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Purchased"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-        <FilterButton
-          label="Sold"
+          size="md"
+        >
+          Purchased
+        </ButtonFilter>
+        <ButtonFilter
+          accessibilityLabel="Sold"
+          isActive={false}
           onPress={[Function]}
-          selected={false}
-        />
-      </Row>
-    </ForwardRef>
+          size="md"
+        >
+          Sold
+        </ButtonFilter>
+      </ForwardRef>
+    </Box>
   }
   data={
     [
@@ -5351,148 +7855,556 @@ exports[`OrdersList resets filter to all after other filter was set 2`] = `
       collapsable={false}
       onLayout={[Function]}
     >
-      <RCTScrollView
-        collapsable={false}
-        handlerTag={6}
-        handlerType="NativeViewGestureHandler"
-        horizontal={true}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#ffffff",
+              "display": "flex",
+              "paddingBottom": 8,
+              "paddingLeft": 16,
+              "paddingRight": 16,
+              "paddingTop": 8,
+            },
+            undefined,
+          ]
+        }
       >
-        <View>
-          <View
-            style={
-              [
-                {
-                  "marginVertical": 8,
-                },
-                undefined,
-                undefined,
-                {
-                  "alignItems": "center",
-                  "columnGap": 8,
-                  "flexDirection": "row",
-                  "marginHorizontal": 24,
-                  "marginVertical": 16,
-                },
-              ]
+        <RCTScrollView
+          collapsable={false}
+          contentContainerStyle={
+            {
+              "flexDirection": "row",
+              "gap": 12,
             }
-          >
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+          }
+          handlerTag={6}
+          handlerType="NativeViewGestureHandler"
+          horizontal={true}
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          showsHorizontalScrollIndicator={false}
+        >
+          <View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#121314",
-                  "borderRadius": 12,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="All"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#ffffff",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#121314",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                All
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#ffffff",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#ffffff",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    All
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Purchased"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                Purchased
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              accessibilityRole="button"
-              accessible={true}
-              activeOpacity={1}
-              onPress={[Function]}
-              onPressIn={[Function]}
-              onPressOut={[Function]}
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Purchased
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View
               style={
-                {
-                  "alignItems": "center",
-                  "alignSelf": "flex-start",
-                  "backgroundColor": "#3c4d9d0f",
-                  "borderColor": "transparent",
-                  "borderRadius": 12,
-                  "borderWidth": 1,
-                  "flexDirection": "row",
-                  "height": 32,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                  "paddingHorizontal": 16,
-                }
+                [
+                  {
+                    "transform": [
+                      {
+                        "scale": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                  },
+                ]
               }
             >
-              <Text
-                accessibilityRole="text"
-                style={
+              <View
+                accessibilityLabel="Sold"
+                accessibilityRole="button"
+                accessibilityState={
                   {
-                    "color": "#121314",
-                    "fontFamily": "Geist Medium",
-                    "fontSize": 16,
-                    "letterSpacing": 0,
-                    "lineHeight": 24,
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    {
+                      "alignItems": "center",
+                      "backgroundColor": "#3c4d9d0f",
+                      "borderRadius": 12,
+                      "flexDirection": "row",
+                      "height": 40,
+                      "justifyContent": "center",
+                      "minWidth": 80,
+                      "opacity": 1,
+                      "overflow": "hidden",
+                      "paddingLeft": 16,
+                      "paddingRight": 16,
+                      "width": "auto",
+                    },
+                    [
+                      {
+                        "backgroundColor": "#3c4d9d0f",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
               >
-                Sold
-              </Text>
-            </TouchableOpacity>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "bottom": 0,
+                      "display": "flex",
+                      "justifyContent": "center",
+                      "left": 0,
+                      "opacity": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                  testID="spinner-container"
+                >
+                  <View
+                    style={
+                      [
+                        {
+                          "alignItems": "center",
+                          "columnGap": 8,
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                    testID="spinner"
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "transform": [
+                              {
+                                "rotate": "0deg",
+                              },
+                            ],
+                          },
+                        ]
+                      }
+                      testID="spinner-animated-view"
+                    >
+                      <SvgMock
+                        fill="currentColor"
+                        name="Loading"
+                        style={
+                          [
+                            {
+                              "color": "#121314",
+                              "height": 20,
+                              "width": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        testID="spinner-icon"
+                      />
+                    </View>
+                  </View>
+                </View>
+                <View
+                  style={
+                    {
+                      "alignItems": "center",
+                      "columnGap": 8,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "opacity": 1,
+                    }
+                  }
+                  testID="content-container"
+                >
+                  <Text
+                    accessibilityRole="text"
+                    style={
+                      [
+                        {
+                          "color": "#121314",
+                          "flexGrow": 0,
+                          "flexShrink": 1,
+                          "flexWrap": "wrap",
+                          "fontFamily": "Geist Medium",
+                          "fontSize": 16,
+                          "fontWeight": 400,
+                          "letterSpacing": 0,
+                          "lineHeight": 24,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    Sold
+                  </Text>
+                </View>
+              </View>
+            </View>
           </View>
-        </View>
-      </RCTScrollView>
+        </RCTScrollView>
+      </View>
     </View>
     <View
       onFocusCapture={[Function]}
diff --git a/app/components/Views/ActivityView/__snapshots__/index.test.tsx.snap b/app/components/Views/ActivityView/__snapshots__/index.test.tsx.snap
index 86fdec10daa..7be976d11f8 100644
--- a/app/components/Views/ActivityView/__snapshots__/index.test.tsx.snap
+++ b/app/components/Views/ActivityView/__snapshots__/index.test.tsx.snap
@@ -510,37 +510,45 @@ exports[`ActivityView should render correctly 1`] = `
                             </Row>
                           }
                           ListHeaderComponent={
-                            <ForwardRef
-                              horizontal={true}
+                            <Box
+                              twClassName="px-4 py-2 bg-default"
                             >
-                              <Row
-                                style={
+                              <ForwardRef
+                                contentContainerStyle={
                                   {
-                                    "alignItems": "center",
-                                    "columnGap": 8,
                                     "flexDirection": "row",
-                                    "marginHorizontal": 24,
-                                    "marginVertical": 16,
+                                    "gap": 12,
                                   }
                                 }
+                                horizontal={true}
+                                showsHorizontalScrollIndicator={false}
                               >
-                                <FilterButton
-                                  label="All"
+                                <ButtonFilter
+                                  accessibilityLabel="All"
+                                  isActive={true}
                                   onPress={[Function]}
-                                  selected={true}
-                                />
-                                <FilterButton
-                                  label="Purchased"
+                                  size="md"
+                                >
+                                  All
+                                </ButtonFilter>
+                                <ButtonFilter
+                                  accessibilityLabel="Purchased"
+                                  isActive={false}
                                   onPress={[Function]}
-                                  selected={false}
-                                />
-                                <FilterButton
-                                  label="Sold"
+                                  size="md"
+                                >
+                                  Purchased
+                                </ButtonFilter>
+                                <ButtonFilter
+                                  accessibilityLabel="Sold"
+                                  isActive={false}
                                   onPress={[Function]}
-                                  selected={false}
-                                />
-                              </Row>
-                            </ForwardRef>
+                                  size="md"
+                                >
+                                  Sold
+                                </ButtonFilter>
+                              </ForwardRef>
+                            </Box>
                           }
                           data={[]}
                           getItem={[Function]}
@@ -564,148 +572,556 @@ exports[`ActivityView should render correctly 1`] = `
                               collapsable={false}
                               onLayout={[Function]}
                             >
-                              <RCTScrollView
-                                collapsable={false}
-                                handlerTag={-1}
-                                handlerType="NativeViewGestureHandler"
-                                horizontal={true}
-                                onGestureHandlerEvent={[Function]}
-                                onGestureHandlerStateChange={[Function]}
+                              <View
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "#ffffff",
+                                      "display": "flex",
+                                      "paddingBottom": 8,
+                                      "paddingLeft": 16,
+                                      "paddingRight": 16,
+                                      "paddingTop": 8,
+                                    },
+                                    undefined,
+                                  ]
+                                }
                               >
-                                <View>
-                                  <View
-                                    style={
-                                      [
-                                        {
-                                          "marginVertical": 8,
-                                        },
-                                        undefined,
-                                        undefined,
-                                        {
-                                          "alignItems": "center",
-                                          "columnGap": 8,
-                                          "flexDirection": "row",
-                                          "marginHorizontal": 24,
-                                          "marginVertical": 16,
-                                        },
-                                      ]
+                                <RCTScrollView
+                                  collapsable={false}
+                                  contentContainerStyle={
+                                    {
+                                      "flexDirection": "row",
+                                      "gap": 12,
                                     }
-                                  >
-                                    <TouchableOpacity
-                                      accessibilityRole="button"
-                                      accessible={true}
-                                      activeOpacity={1}
-                                      onPress={[Function]}
-                                      onPressIn={[Function]}
-                                      onPressOut={[Function]}
+                                  }
+                                  handlerTag={-1}
+                                  handlerType="NativeViewGestureHandler"
+                                  horizontal={true}
+                                  onGestureHandlerEvent={[Function]}
+                                  onGestureHandlerStateChange={[Function]}
+                                  showsHorizontalScrollIndicator={false}
+                                >
+                                  <View>
+                                    <View
                                       style={
-                                        {
-                                          "alignItems": "center",
-                                          "alignSelf": "flex-start",
-                                          "backgroundColor": "#121314",
-                                          "borderRadius": 12,
-                                          "flexDirection": "row",
-                                          "height": 32,
-                                          "justifyContent": "center",
-                                          "overflow": "hidden",
-                                          "paddingHorizontal": 16,
-                                        }
+                                        [
+                                          {
+                                            "transform": [
+                                              {
+                                                "scale": 1,
+                                              },
+                                            ],
+                                          },
+                                          {
+                                            "alignItems": "center",
+                                            "justifyContent": "center",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityRole="text"
-                                        style={
+                                      <View
+                                        accessibilityLabel="All"
+                                        accessibilityRole="button"
+                                        accessibilityState={
                                           {
-                                            "color": "#ffffff",
-                                            "fontFamily": "Geist Medium",
-                                            "fontSize": 16,
-                                            "letterSpacing": 0,
-                                            "lineHeight": 24,
+                                            "busy": undefined,
+                                            "checked": undefined,
+                                            "disabled": undefined,
+                                            "expanded": undefined,
+                                            "selected": undefined,
                                           }
                                         }
+                                        accessibilityValue={
+                                          {
+                                            "max": undefined,
+                                            "min": undefined,
+                                            "now": undefined,
+                                            "text": undefined,
+                                          }
+                                        }
+                                        accessible={true}
+                                        collapsable={false}
+                                        focusable={true}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onResponderGrant={[Function]}
+                                        onResponderMove={[Function]}
+                                        onResponderRelease={[Function]}
+                                        onResponderTerminate={[Function]}
+                                        onResponderTerminationRequest={[Function]}
+                                        onStartShouldSetResponder={[Function]}
+                                        style={
+                                          [
+                                            {
+                                              "alignItems": "center",
+                                              "backgroundColor": "#3c4d9d0f",
+                                              "borderRadius": 12,
+                                              "flexDirection": "row",
+                                              "height": 40,
+                                              "justifyContent": "center",
+                                              "minWidth": 80,
+                                              "opacity": 1,
+                                              "overflow": "hidden",
+                                              "paddingLeft": 16,
+                                              "paddingRight": 16,
+                                              "width": "auto",
+                                            },
+                                            [
+                                              {
+                                                "backgroundColor": "#121314",
+                                              },
+                                              undefined,
+                                            ],
+                                          ]
+                                        }
                                       >
-                                        All
-                                      </Text>
-                                    </TouchableOpacity>
-                                    <TouchableOpacity
-                                      accessibilityRole="button"
-                                      accessible={true}
-                                      activeOpacity={1}
-                                      onPress={[Function]}
-                                      onPressIn={[Function]}
-                                      onPressOut={[Function]}
+                                        <View
+                                          style={
+                                            {
+                                              "alignItems": "center",
+                                              "bottom": 0,
+                                              "display": "flex",
+                                              "justifyContent": "center",
+                                              "left": 0,
+                                              "opacity": 0,
+                                              "position": "absolute",
+                                              "right": 0,
+                                              "top": 0,
+                                            }
+                                          }
+                                          testID="spinner-container"
+                                        >
+                                          <View
+                                            style={
+                                              [
+                                                {
+                                                  "alignItems": "center",
+                                                  "columnGap": 8,
+                                                  "flexDirection": "row",
+                                                },
+                                                undefined,
+                                              ]
+                                            }
+                                            testID="spinner"
+                                          >
+                                            <View
+                                              style={
+                                                [
+                                                  {
+                                                    "transform": [
+                                                      {
+                                                        "rotate": "0deg",
+                                                      },
+                                                    ],
+                                                  },
+                                                ]
+                                              }
+                                              testID="spinner-animated-view"
+                                            >
+                                              <SvgMock
+                                                fill="currentColor"
+                                                name="Loading"
+                                                style={
+                                                  [
+                                                    {
+                                                      "color": "#ffffff",
+                                                      "height": 20,
+                                                      "width": 20,
+                                                    },
+                                                    undefined,
+                                                  ]
+                                                }
+                                                testID="spinner-icon"
+                                              />
+                                            </View>
+                                          </View>
+                                        </View>
+                                        <View
+                                          style={
+                                            {
+                                              "alignItems": "center",
+                                              "columnGap": 8,
+                                              "flexDirection": "row",
+                                              "justifyContent": "center",
+                                              "opacity": 1,
+                                            }
+                                          }
+                                          testID="content-container"
+                                        >
+                                          <Text
+                                            accessibilityRole="text"
+                                            style={
+                                              [
+                                                {
+                                                  "color": "#ffffff",
+                                                  "flexGrow": 0,
+                                                  "flexShrink": 1,
+                                                  "flexWrap": "wrap",
+                                                  "fontFamily": "Geist Medium",
+                                                  "fontSize": 16,
+                                                  "fontWeight": 400,
+                                                  "letterSpacing": 0,
+                                                  "lineHeight": 24,
+                                                  "textAlign": "center",
+                                                },
+                                                undefined,
+                                              ]
+                                            }
+                                          >
+                                            All
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
                                       style={
-                                        {
-                                          "alignItems": "center",
-                                          "alignSelf": "flex-start",
-                                          "backgroundColor": "#3c4d9d0f",
-                                          "borderColor": "transparent",
-                                          "borderRadius": 12,
-                                          "borderWidth": 1,
-                                          "flexDirection": "row",
-                                          "height": 32,
-                                          "justifyContent": "center",
-                                          "overflow": "hidden",
-                                          "paddingHorizontal": 16,
-                                        }
+                                        [
+                                          {
+                                            "transform": [
+                                              {
+                                                "scale": 1,
+                                              },
+                                            ],
+                                          },
+                                          {
+                                            "alignItems": "center",
+                                            "justifyContent": "center",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityRole="text"
-                                        style={
+                                      <View
+                                        accessibilityLabel="Purchased"
+                                        accessibilityRole="button"
+                                        accessibilityState={
                                           {
-                                            "color": "#121314",
-                                            "fontFamily": "Geist Medium",
-                                            "fontSize": 16,
-                                            "letterSpacing": 0,
-                                            "lineHeight": 24,
+                                            "busy": undefined,
+                                            "checked": undefined,
+                                            "disabled": undefined,
+                                            "expanded": undefined,
+                                            "selected": undefined,
                                           }
                                         }
+                                        accessibilityValue={
+                                          {
+                                            "max": undefined,
+                                            "min": undefined,
+                                            "now": undefined,
+                                            "text": undefined,
+                                          }
+                                        }
+                                        accessible={true}
+                                        collapsable={false}
+                                        focusable={true}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onResponderGrant={[Function]}
+                                        onResponderMove={[Function]}
+                                        onResponderRelease={[Function]}
+                                        onResponderTerminate={[Function]}
+                                        onResponderTerminationRequest={[Function]}
+                                        onStartShouldSetResponder={[Function]}
+                                        style={
+                                          [
+                                            {
+                                              "alignItems": "center",
+                                              "backgroundColor": "#3c4d9d0f",
+                                              "borderRadius": 12,
+                                              "flexDirection": "row",
+                                              "height": 40,
+                                              "justifyContent": "center",
+                                              "minWidth": 80,
+                                              "opacity": 1,
+                                              "overflow": "hidden",
+                                              "paddingLeft": 16,
+                                              "paddingRight": 16,
+                                              "width": "auto",
+                                            },
+                                            [
+                                              {
+                                                "backgroundColor": "#3c4d9d0f",
+                                              },
+                                              undefined,
+                                            ],
+                                          ]
+                                        }
                                       >
-                                        Purchased
-                                      </Text>
-                                    </TouchableOpacity>
-                                    <TouchableOpacity
-                                      accessibilityRole="button"
-                                      accessible={true}
-                                      activeOpacity={1}
-                                      onPress={[Function]}
-                                      onPressIn={[Function]}
-                                      onPressOut={[Function]}
+                                        <View
+                                          style={
+                                            {
+                                              "alignItems": "center",
+                                              "bottom": 0,
+                                              "display": "flex",
+                                              "justifyContent": "center",
+                                              "left": 0,
+                                              "opacity": 0,
+                                              "position": "absolute",
+                                              "right": 0,
+                                              "top": 0,
+                                            }
+                                          }
+                                          testID="spinner-container"
+                                        >
+                                          <View
+                                            style={
+                                              [
+                                                {
+                                                  "alignItems": "center",
+                                                  "columnGap": 8,
+                                                  "flexDirection": "row",
+                                                },
+                                                undefined,
+                                              ]
+                                            }
+                                            testID="spinner"
+                                          >
+                                            <View
+                                              style={
+                                                [
+                                                  {
+                                                    "transform": [
+                                                      {
+                                                        "rotate": "0deg",
+                                                      },
+                                                    ],
+                                                  },
+                                                ]
+                                              }
+                                              testID="spinner-animated-view"
+                                            >
+                                              <SvgMock
+                                                fill="currentColor"
+                                                name="Loading"
+                                                style={
+                                                  [
+                                                    {
+                                                      "color": "#121314",
+                                                      "height": 20,
+                                                      "width": 20,
+                                                    },
+                                                    undefined,
+                                                  ]
+                                                }
+                                                testID="spinner-icon"
+                                              />
+                                            </View>
+                                          </View>
+                                        </View>
+                                        <View
+                                          style={
+                                            {
+                                              "alignItems": "center",
+                                              "columnGap": 8,
+                                              "flexDirection": "row",
+                                              "justifyContent": "center",
+                                              "opacity": 1,
+                                            }
+                                          }
+                                          testID="content-container"
+                                        >
+                                          <Text
+                                            accessibilityRole="text"
+                                            style={
+                                              [
+                                                {
+                                                  "color": "#121314",
+                                                  "flexGrow": 0,
+                                                  "flexShrink": 1,
+                                                  "flexWrap": "wrap",
+                                                  "fontFamily": "Geist Medium",
+                                                  "fontSize": 16,
+                                                  "fontWeight": 400,
+                                                  "letterSpacing": 0,
+                                                  "lineHeight": 24,
+                                                  "textAlign": "center",
+                                                },
+                                                undefined,
+                                              ]
+                                            }
+                                          >
+                                            Purchased
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
+                                    <View
                                       style={
-                                        {
-                                          "alignItems": "center",
-                                          "alignSelf": "flex-start",
-                                          "backgroundColor": "#3c4d9d0f",
-                                          "borderColor": "transparent",
-                                          "borderRadius": 12,
-                                          "borderWidth": 1,
-                                          "flexDirection": "row",
-                                          "height": 32,
-                                          "justifyContent": "center",
-                                          "overflow": "hidden",
-                                          "paddingHorizontal": 16,
-                                        }
+                                        [
+                                          {
+                                            "transform": [
+                                              {
+                                                "scale": 1,
+                                              },
+                                            ],
+                                          },
+                                          {
+                                            "alignItems": "center",
+                                            "justifyContent": "center",
+                                          },
+                                        ]
                                       }
                                     >
-                                      <Text
-                                        accessibilityRole="text"
-                                        style={
+                                      <View
+                                        accessibilityLabel="Sold"
+                                        accessibilityRole="button"
+                                        accessibilityState={
+                                          {
+                                            "busy": undefined,
+                                            "checked": undefined,
+                                            "disabled": undefined,
+                                            "expanded": undefined,
+                                            "selected": undefined,
+                                          }
+                                        }
+                                        accessibilityValue={
                                           {
-                                            "color": "#121314",
-                                            "fontFamily": "Geist Medium",
-                                            "fontSize": 16,
-                                            "letterSpacing": 0,
-                                            "lineHeight": 24,
+                                            "max": undefined,
+                                            "min": undefined,
+                                            "now": undefined,
+                                            "text": undefined,
                                           }
                                         }
+                                        accessible={true}
+                                        collapsable={false}
+                                        focusable={true}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onResponderGrant={[Function]}
+                                        onResponderMove={[Function]}
+                                        onResponderRelease={[Function]}
+                                        onResponderTerminate={[Function]}
+                                        onResponderTerminationRequest={[Function]}
+                                        onStartShouldSetResponder={[Function]}
+                                        style={
+                                          [
+                                            {
+                                              "alignItems": "center",
+                                              "backgroundColor": "#3c4d9d0f",
+                                              "borderRadius": 12,
+                                              "flexDirection": "row",
+                                              "height": 40,
+                                              "justifyContent": "center",
+                                              "minWidth": 80,
+                                              "opacity": 1,
+                                              "overflow": "hidden",
+                                              "paddingLeft": 16,
+                                              "paddingRight": 16,
+                                              "width": "auto",
+                                            },
+                                            [
+                                              {
+                                                "backgroundColor": "#3c4d9d0f",
+                                              },
+                                              undefined,
+                                            ],
+                                          ]
+                                        }
                                       >
-                                        Sold
-                                      </Text>
-                                    </TouchableOpacity>
+                                        <View
+                                          style={
+                                            {
+                                              "alignItems": "center",
+                                              "bottom": 0,
+                                              "display": "flex",
+                                              "justifyContent": "center",
+                                              "left": 0,
+                                              "opacity": 0,
+                                              "position": "absolute",
+                                              "right": 0,
+                                              "top": 0,
+                                            }
+                                          }
+                                          testID="spinner-container"
+                                        >
+                                          <View
+                                            style={
+                                              [
+                                                {
+                                                  "alignItems": "center",
+                                                  "columnGap": 8,
+                                                  "flexDirection": "row",
+                                                },
+                                                undefined,
+                                              ]
+                                            }
+                                            testID="spinner"
+                                          >
+                                            <View
+                                              style={
+                                                [
+                                                  {
+                                                    "transform": [
+                                                      {
+                                                        "rotate": "0deg",
+                                                      },
+                                                    ],
+                                                  },
+                                                ]
+                                              }
+                                              testID="spinner-animated-view"
+                                            >
+                                              <SvgMock
+                                                fill="currentColor"
+                                                name="Loading"
+                                                style={
+                                                  [
+                                                    {
+                                                      "color": "#121314",
+                                                      "height": 20,
+                                                      "width": 20,
+                                                    },
+                                                    undefined,
+                                                  ]
+                                                }
+                                                testID="spinner-icon"
+                                              />
+                                            </View>
+                                          </View>
+                                        </View>
+                                        <View
+                                          style={
+                                            {
+                                              "alignItems": "center",
+                                              "columnGap": 8,
+                                              "flexDirection": "row",
+                                              "justifyContent": "center",
+                                              "opacity": 1,
+                                            }
+                                          }
+                                          testID="content-container"
+                                        >
+                                          <Text
+                                            accessibilityRole="text"
+                                            style={
+                                              [
+                                                {
+                                                  "color": "#121314",
+                                                  "flexGrow": 0,
+                                                  "flexShrink": 1,
+                                                  "flexWrap": "wrap",
+                                                  "fontFamily": "Geist Medium",
+                                                  "fontSize": 16,
+                                                  "fontWeight": 400,
+                                                  "letterSpacing": 0,
+                                                  "lineHeight": 24,
+                                                  "textAlign": "center",
+                                                },
+                                                undefined,
+                                              ]
+                                            }
+                                          >
+                                            Sold
+                                          </Text>
+                                        </View>
+                                      </View>
+                                    </View>
                                   </View>
-                                </View>
-                              </RCTScrollView>
+                                </RCTScrollView>
+                              </View>
                             </View>
                             <View
                               onLayout={[Function]}

From 65ae4f9ad9adf597a6df261b6d041892591c808f Mon Sep 17 00:00:00 2001
From: Kylan Hurt <6249205+smilingkylan@users.noreply.github.com>
Date: Tue, 25 Nov 2025 16:32:04 -0800
Subject: [PATCH 2/5] chore: fix signature verification sorting issue cp-7.60.0
 (#23220)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Related issues**

Fixes: https://github.com/MetaMask/metamask-mobile/issues/23222
- issue where URL canonicalization was not properly sorting due to the
way that `.sort` works on React Native.
- add case for `sig_params` being empty, so that we can still sign links
without any parameters that need to be signed
- removed edge case unit test since it added very little value (no one
should be using spaces in a signed URL)

## **Description**

**Reason for change:**
Deep link signature verification was failing for marketing links (e.g.,
`https://link.metamask.io/perps?sig_params=...&utm_...`). The Mobile
app's `canonicalize` function had diverged from the Extension's
implementation, causing signature mismatches.

The root cause: **React Native's `URLSearchParams.sort()` is not
implemented** — it throws an error. This meant parameters weren't being
sorted correctly, so the canonical URL didn't match what was signed.

**Improvement/solution:**
Updated the `canonicalize` function to:

1. **Use custom array sorting** instead of `URLSearchParams.sort()`
(which is broken in React Native)
2. **Handle empty `sig_params` explicitly** — when `sig_params=''`, only
include `sig_params` itself in the canonical URL (allows appending UTMs
after signing)
3. **Use `getAll()`/`append()`** instead of `get()`/`set()` to preserve
multiple values for the same parameter (matches Extension behavior)
4. **Use `encodeURIComponent()`** for consistent URL encoding

These changes align Mobile with the Extension's canonicalization logic,
ensuring signed deep links verify correctly.

## **Changelog**

CHANGELOG entry: Fixed deep link signature verification failing for
marketing links with UTM parameters

## **Manual testing steps**

```gherkin
Feature: Deep Link Signature Verification

  Scenario: user opens a signed deep link with sig_params and appended UTMs
    Given a signed deep link with sig_params listing specific parameters
    And UTM parameters are appended after signing

    When user opens the deep link in the app
    Then the signature verifies successfully
    And the user is not shown the unsigned link warning modal

  Scenario: user opens a signed deep link with empty sig_params
    Given a signed deep link with sig_params= (empty)
    And UTM parameters are appended after signing

    When user opens the deep link in the app
    Then the signature verifies successfully
    And only sig_params is used for verification (UTMs ignored)

  Scenario: user opens a signed deep link without sig_params (legacy)
    Given a signed deep link without any sig_params parameter

    When user opens the deep link in the app
    Then all parameters (except sig) are included in verification
    And the signature verifies successfully (backward compatibility)
```

## **Screenshots/Recordings**

### **Before**

Signed marketing links showed the "unsigned link" warning modal due to
signature verification failure.

### **After**

Signed marketing links verify correctly and open without the warning
modal.

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---

**Labels to add:** `team-mobile-platform`
---
 .../utils/verifySignature.test.ts             | 70 +++++++++++++------
 .../DeeplinkManager/utils/verifySignature.ts  | 67 ++++++++++--------
 2 files changed, 83 insertions(+), 54 deletions(-)

diff --git a/app/core/DeeplinkManager/utils/verifySignature.test.ts b/app/core/DeeplinkManager/utils/verifySignature.test.ts
index eb4527a368c..302ad0b8e49 100644
--- a/app/core/DeeplinkManager/utils/verifySignature.test.ts
+++ b/app/core/DeeplinkManager/utils/verifySignature.test.ts
@@ -157,6 +157,30 @@ describe('verifySignature', () => {
       expect(result).toBe(INVALID);
     });
 
+    it('sorts parameters alphabetically regardless of input order', async () => {
+      const validSignature = Buffer.from(new Array(64).fill(0)).toString(
+        'base64',
+      );
+      // Parameters in REVERSE alphabetical order
+      const url = new URL(
+        `https://link.metamask.io/perps?utm_source=carousel&utm_medium=in-product&utm_campaign=cmp123&sig_params=utm_campaign,utm_medium,utm_source&sig=${validSignature}`,
+      );
+
+      mockSubtle.verify.mockResolvedValue(true);
+      await verifyDeeplinkSignature(url);
+
+      const verifyCall = mockSubtle.verify.mock.calls[0];
+      const canonicalUrl = new TextDecoder().decode(
+        verifyCall[3] as Uint8Array,
+      );
+
+      // sig_params (s) should come BEFORE utm_* (u) alphabetically
+      // This is the exact bug that broke the marketing links!
+      expect(canonicalUrl).toBe(
+        'https://link.metamask.io/perps?sig_params=utm_campaign%2Cutm_medium%2Cutm_source&utm_campaign=cmp123&utm_medium=in-product&utm_source=carousel',
+      );
+    });
+
     it('canonicalizes URL by removing sig parameter and sorting others', async () => {
       const validSignature = Buffer.from(new Array(64).fill(0)).toString(
         'base64',
@@ -264,6 +288,29 @@ describe('verifySignature', () => {
       );
     });
 
+    it('includes only sig_params when sig_params is empty string', async () => {
+      const validSignature = Buffer.from(new Array(64).fill(0)).toString(
+        'base64',
+      );
+      // sig_params is EMPTY - means "sign only the base path"
+      // UTMs are added AFTER signing and should be ignored
+      const url = new URL(
+        `https://link.metamask.io/perps?sig_params=&sig=${validSignature}&utm_source=carousel&utm_medium=in-product`,
+      );
+
+      mockSubtle.verify.mockResolvedValue(true);
+      await verifyDeeplinkSignature(url);
+
+      const verifyCall = mockSubtle.verify.mock.calls[0];
+      const canonicalUrl = new TextDecoder().decode(
+        verifyCall[3] as Uint8Array,
+      );
+
+      // ONLY sig_params should be in canonical URL
+      // UTMs should be EXCLUDED (they were added after signing)
+      expect(canonicalUrl).toBe('https://link.metamask.io/perps?sig_params=');
+    });
+
     describe('with sig_params', () => {
       it('includes only parameters listed in sig_params for verification', async () => {
         const validSignature = Buffer.from(new Array(64).fill(0)).toString(
@@ -424,29 +471,6 @@ describe('verifySignature', () => {
         );
       });
 
-      it('handles parameters with special characters in sig_params', async () => {
-        const validSignature = Buffer.from(new Array(64).fill(0)).toString(
-          'base64',
-        );
-        const url = new URL(
-          `https://example.com?param%20name=value%20here&other=test&sig_params=param%20name&sig=${validSignature}`,
-        );
-
-        mockSubtle.verify.mockResolvedValue(true);
-
-        const result = await verifyDeeplinkSignature(url);
-
-        expect(result).toBe(VALID);
-        const verifyCall = mockSubtle.verify.mock.calls[0];
-        const dataBuffer = verifyCall[3] as Uint8Array;
-        const canonicalUrl = new TextDecoder().decode(dataBuffer);
-
-        // Should handle URL encoding properly
-        expect(canonicalUrl).toBe(
-          'https://example.com/?param+name=value+here&sig_params=param+name',
-        );
-      });
-
       it('handles sig_params with trailing commas', async () => {
         const validSignature = Buffer.from(new Array(64).fill(0)).toString(
           'base64',
diff --git a/app/core/DeeplinkManager/utils/verifySignature.ts b/app/core/DeeplinkManager/utils/verifySignature.ts
index a76d9ca8115..c97bcd381fe 100644
--- a/app/core/DeeplinkManager/utils/verifySignature.ts
+++ b/app/core/DeeplinkManager/utils/verifySignature.ts
@@ -32,42 +32,47 @@ function getKeyData() {
 }
 
 function canonicalize(url: URL): string {
-  const params = new URLSearchParams(url.searchParams);
-
-  const canonicalParams = new URLSearchParams();
-
-  // If sig_params is present, only include the
-  // parameters listed in it for sig verification
-  if (params.has('sig_params')) {
-    const stringifiedSigParams = params.get('sig_params') || '';
-
-    // Filter to only valid, existing params with non-null values
-    stringifiedSigParams.split(',').forEach((paramName) => {
-      if (!paramName) return; // Skip empty strings
-
-      const value = params.get(paramName); // can be string or null
-      if (value !== null) {
-        // remove null
-        canonicalParams.set(paramName, value);
+  const sigParams = url.searchParams.get('sig_params');
+
+  let params;
+  if (sigParams === '') {
+    // Explicitly empty: sign only sig_params itself (no other params)
+    params = new URLSearchParams();
+    params.append('sig_params', '');
+  } else if (sigParams) {
+    const allowedParams = sigParams.split(',');
+    params = new URLSearchParams();
+
+    for (const allowedParam of allowedParams) {
+      const values = url.searchParams.getAll(allowedParam);
+      for (const value of values) {
+        params.append(allowedParam, value);
       }
-    });
-
-    canonicalParams.set('sig_params', stringifiedSigParams);
-    canonicalParams.sort();
+    }
 
-    const queryString = canonicalParams.toString();
-    return url.origin + url.pathname + (queryString ? `?${queryString}` : '');
+    params.append('sig_params', sigParams);
+  } else {
+    params = new URLSearchParams(url.searchParams);
+    params.delete('sig');
   }
 
-  // Fallback to old behavior for URLs without sig_params
-  params.delete('sig');
-  params.sort();
-
-  const queryString = params.toString();
-  const fullUrl =
+  const paramsArray = Array.from(params.entries());
+  paramsArray.sort((a, b) => {
+    if (a[0] < b[0]) return -1;
+    if (a[0] > b[0]) return 1;
+    return 0;
+  });
+
+  const queryString = paramsArray
+    .map(
+      ([key, value]) =>
+        `${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
+    )
+    .join('&');
+
+  const result =
     url.origin + url.pathname + (queryString ? `?${queryString}` : '');
-
-  return fullUrl;
+  return result;
 }
 
 export const MISSING = 'MISSING' as const;

From 74a5b2e4c148cee54ec965c655614f09f44803e2 Mon Sep 17 00:00:00 2001
From: VGR <VanGulckRik@gmail.com>
Date: Wed, 26 Nov 2025 02:38:30 +0100
Subject: [PATCH 3/5] feat: no point estimation when no active season (#23244)

## **Description**

When there's no active season, we shouldn't show point estimations.

## **Changelog**

CHANGELOG entry: no point estimation when no active season

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Introduce RewardsController:hasActiveSeason and update hooks to stop
showing rewards/estimating points when no active season, with extensive
tests and minor controller refactors.
>
> - **Controller (RewardsController)**:
> - **New API**: Add `RewardsController:hasActiveSeason` with
date-window check via `getSeasonMetadata('current')`; register action
and types.
> - **Behavior**: Gate `estimatePoints` behind `hasActiveSeason` (return
`{ pointsEstimate: 0, bonusBips: 0 }` when inactive).
> - **Refactor**: Add `setActiveAccountFromCandidate` and use it in
`handleAuthenticationTrigger`.
> - **Tests**: Add comprehensive tests for `hasActiveSeason`,
`estimatePoints` gating, and new helper.
> - **Hooks/UI**:
> - **Bridge/Perps/Predict hooks**: Replace `isRewardsFeatureEnabled`
checks with `hasActiveSeason`; short-circuit UI (no row, no estimation)
when inactive.
> - **Tests**: Update all related tests to use `hasActiveSeason` and
cover inactive-season paths.
> - **Types**:
> - Add `RewardsControllerHasActiveSeasonAction` and include in
`RewardsControllerActions`.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
861008a7beceeb13950a588005707e0bfdb72091. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---
 .../hooks/useRewards/useRewards.test.ts       |  34 +-
 .../UI/Bridge/hooks/useRewards/useRewards.ts  |   8 +-
 .../usePerpsRewardAccountOptedIn.test.ts      |  50 +-
 .../hooks/usePerpsRewardAccountOptedIn.ts     |   8 +-
 .../Predict/hooks/usePredictRewards.test.ts   |  18 +-
 .../UI/Predict/hooks/usePredictRewards.ts     |   8 +-
 .../RewardsController.test.ts                 | 589 +++++++++++++++++-
 .../rewards-controller/RewardsController.ts   |  72 ++-
 .../controllers/rewards-controller/types.ts   |   9 +
 9 files changed, 717 insertions(+), 79 deletions(-)

diff --git a/app/components/UI/Bridge/hooks/useRewards/useRewards.test.ts b/app/components/UI/Bridge/hooks/useRewards/useRewards.test.ts
index 7a9b0536e75..da8bc2d0e20 100644
--- a/app/components/UI/Bridge/hooks/useRewards/useRewards.test.ts
+++ b/app/components/UI/Bridge/hooks/useRewards/useRewards.test.ts
@@ -197,10 +197,10 @@ describe('useRewards', () => {
     mockUnsubscribe.mockClear();
   });
 
-  describe('when rewards feature is disabled', () => {
-    it('should return default state when rewards feature is disabled', async () => {
+  describe('when there is no active season', () => {
+    it('should return default state when there is no active season', async () => {
       mockCall.mockImplementation((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
+        if (method === 'RewardsController:hasActiveSeason') {
           return Promise.resolve(false);
         }
         return Promise.resolve(null);
@@ -235,7 +235,7 @@ describe('useRewards', () => {
       });
 
       expect(mockCall).toHaveBeenCalledWith(
-        'RewardsController:isRewardsFeatureEnabled',
+        'RewardsController:hasActiveSeason',
       );
     });
   });
@@ -243,7 +243,7 @@ describe('useRewards', () => {
   describe('when user has not opted in', () => {
     it('should return default state when user has not opted in and opt-in is not supported', async () => {
       mockCall.mockImplementation((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
+        if (method === 'RewardsController:hasActiveSeason') {
           return Promise.resolve(true);
         }
         if (method === 'RewardsController:getCandidateSubscriptionId') {
@@ -301,7 +301,7 @@ describe('useRewards', () => {
 
     it('should show rewards row when user has not opted in but opt-in is supported', async () => {
       mockCall.mockImplementation((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
+        if (method === 'RewardsController:hasActiveSeason') {
           return Promise.resolve(true);
         }
         if (method === 'RewardsController:getCandidateSubscriptionId') {
@@ -361,7 +361,7 @@ describe('useRewards', () => {
   describe('when rewards estimation is successful', () => {
     it('should return estimated points when all conditions are met', async () => {
       mockCall.mockImplementation((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
+        if (method === 'RewardsController:hasActiveSeason') {
           return Promise.resolve(true);
         }
         if (method === 'RewardsController:getCandidateSubscriptionId') {
@@ -432,7 +432,7 @@ describe('useRewards', () => {
 
     it('should handle source token without exchange rate', async () => {
       mockCall.mockImplementation((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
+        if (method === 'RewardsController:hasActiveSeason') {
           return Promise.resolve(true);
         }
         if (method === 'RewardsController:getCandidateSubscriptionId') {
@@ -603,7 +603,7 @@ describe('useRewards', () => {
   describe('when subscription ID is missing', () => {
     it('should return default state when there is no subscription', async () => {
       mockCall.mockImplementation((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
+        if (method === 'RewardsController:hasActiveSeason') {
           return Promise.resolve(true);
         }
         if (method === 'RewardsController:getCandidateSubscriptionId') {
@@ -641,7 +641,7 @@ describe('useRewards', () => {
       });
 
       expect(mockCall).toHaveBeenCalledWith(
-        'RewardsController:isRewardsFeatureEnabled',
+        'RewardsController:hasActiveSeason',
       );
       expect(mockCall).toHaveBeenCalledWith(
         'RewardsController:getCandidateSubscriptionId',
@@ -656,7 +656,7 @@ describe('useRewards', () => {
   describe('error handling', () => {
     it('should handle rewards estimation error gracefully', async () => {
       mockCall.mockImplementation((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
+        if (method === 'RewardsController:hasActiveSeason') {
           return Promise.resolve(true);
         }
         if (method === 'RewardsController:getCandidateSubscriptionId') {
@@ -700,10 +700,10 @@ describe('useRewards', () => {
       });
     });
 
-    it('should set hasError to true when isRewardsFeatureEnabled throws an error', async () => {
+    it('should set hasError to true when hasActiveSeason throws an error', async () => {
       mockCall.mockImplementation((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
-          throw new Error('Feature check failed');
+        if (method === 'RewardsController:hasActiveSeason') {
+          throw new Error('Active season check failed');
         }
         return Promise.resolve(null);
       });
@@ -739,7 +739,7 @@ describe('useRewards', () => {
 
     it('should set hasError to true when getHasAccountOptedIn throws an error', async () => {
       mockCall.mockImplementation((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
+        if (method === 'RewardsController:hasActiveSeason') {
           return Promise.resolve(true);
         }
         if (method === 'RewardsController:getCandidateSubscriptionId') {
@@ -783,7 +783,7 @@ describe('useRewards', () => {
     it('should reset hasError to false when estimation succeeds after previous error', async () => {
       // First mock returns error
       mockCall.mockImplementationOnce((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
+        if (method === 'RewardsController:hasActiveSeason') {
           return Promise.resolve(true);
         }
         if (method === 'RewardsController:getCandidateSubscriptionId') {
@@ -822,7 +822,7 @@ describe('useRewards', () => {
 
       // Now mock successful response
       mockCall.mockImplementation((method) => {
-        if (method === 'RewardsController:isRewardsFeatureEnabled') {
+        if (method === 'RewardsController:hasActiveSeason') {
           return Promise.resolve(true);
         }
         if (method === 'RewardsController:getCandidateSubscriptionId') {
diff --git a/app/components/UI/Bridge/hooks/useRewards/useRewards.ts b/app/components/UI/Bridge/hooks/useRewards/useRewards.ts
index d0300dff234..73a0ed0bc1d 100644
--- a/app/components/UI/Bridge/hooks/useRewards/useRewards.ts
+++ b/app/components/UI/Bridge/hooks/useRewards/useRewards.ts
@@ -140,12 +140,12 @@ export const useRewards = ({
     setHasError(false);
 
     try {
-      // Check if rewards feature is enabled
-      const isRewardsEnabled = await Engine.controllerMessenger.call(
-        'RewardsController:isRewardsFeatureEnabled',
+      // Check if there is an active season
+      const hasActiveSeason = await Engine.controllerMessenger.call(
+        'RewardsController:hasActiveSeason',
       );
 
-      if (!isRewardsEnabled) {
+      if (!hasActiveSeason) {
         setEstimatedPoints(null);
         setShouldShowRewardsRow(false);
         setAccountOptedIn(null);
diff --git a/app/components/UI/Perps/hooks/usePerpsRewardAccountOptedIn.test.ts b/app/components/UI/Perps/hooks/usePerpsRewardAccountOptedIn.test.ts
index 845457b4986..da3540bc4e7 100644
--- a/app/components/UI/Perps/hooks/usePerpsRewardAccountOptedIn.test.ts
+++ b/app/components/UI/Perps/hooks/usePerpsRewardAccountOptedIn.test.ts
@@ -138,7 +138,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
     });
 
     it('returns selected account when available', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockEngineCall.mockResolvedValueOnce(true); // getHasAccountOptedIn
 
@@ -150,9 +150,9 @@ describe('usePerpsRewardAccountOptedIn', () => {
     });
   });
 
-  describe('Rewards feature enabled check', () => {
-    it('returns null when rewards feature is disabled', async () => {
-      mockEngineCall.mockResolvedValueOnce(false); // isRewardsFeatureEnabled
+  describe('Active season check', () => {
+    it('returns null when there is no active season', async () => {
+      mockEngineCall.mockResolvedValueOnce(false); // hasActiveSeason
 
       const { result } = renderHook(() => usePerpsRewardAccountOptedIn());
 
@@ -161,15 +161,15 @@ describe('usePerpsRewardAccountOptedIn', () => {
       });
 
       expect(mockEngineCall).toHaveBeenCalledWith(
-        'RewardsController:isRewardsFeatureEnabled',
+        'RewardsController:hasActiveSeason',
       );
       expect(mockEngineCall).not.toHaveBeenCalledWith(
         'RewardsController:getCandidateSubscriptionId',
       );
     });
 
-    it('proceeds to check subscription when rewards feature is enabled', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+    it('proceeds to check subscription when there is an active season', async () => {
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockEngineCall.mockResolvedValueOnce(true); // getHasAccountOptedIn
 
@@ -177,7 +177,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
 
       await waitFor(() => {
         expect(mockEngineCall).toHaveBeenCalledWith(
-          'RewardsController:isRewardsFeatureEnabled',
+          'RewardsController:hasActiveSeason',
         );
         expect(mockEngineCall).toHaveBeenCalledWith(
           'RewardsController:getCandidateSubscriptionId',
@@ -188,7 +188,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
 
   describe('Subscription check', () => {
     it('returns null when no subscription exists', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce(null); // getCandidateSubscriptionId
 
       const { result } = renderHook(() => usePerpsRewardAccountOptedIn());
@@ -206,7 +206,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
     });
 
     it('proceeds to check opt-in when subscription exists', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockEngineCall.mockResolvedValueOnce(true); // getHasAccountOptedIn
 
@@ -226,7 +226,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
 
   describe('CAIP account formatting', () => {
     it('returns null when CAIP formatting fails', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockFormatAccountToCaipAccountId.mockReturnValue(null);
 
@@ -248,7 +248,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
 
     it('uses formatted CAIP account for opt-in check', async () => {
       const customCaipAccount = 'eip155:1:0xCustomAddress';
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockFormatAccountToCaipAccountId.mockReturnValue(customCaipAccount);
       mockEngineCall.mockResolvedValueOnce(true); // getHasAccountOptedIn
@@ -266,7 +266,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
 
   describe('Account opt-in status', () => {
     it('returns true when account has opted in', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockEngineCall.mockResolvedValueOnce(true); // getHasAccountOptedIn
 
@@ -278,7 +278,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
     });
 
     it('returns false when account has not opted in and opt-in is supported', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockEngineCall.mockResolvedValueOnce(false); // getHasAccountOptedIn
       mockEngineCall.mockResolvedValueOnce(true); // isOptInSupported
@@ -296,7 +296,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
     });
 
     it('returns null when account has not opted in and opt-in is not supported', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockEngineCall.mockResolvedValueOnce(false); // getHasAccountOptedIn
       mockEngineCall.mockResolvedValueOnce(false); // isOptInSupported
@@ -315,8 +315,10 @@ describe('usePerpsRewardAccountOptedIn', () => {
   });
 
   describe('Error handling', () => {
-    it('returns null when isRewardsFeatureEnabled throws error', async () => {
-      mockEngineCall.mockRejectedValueOnce(new Error('Feature check failed'));
+    it('returns null when hasActiveSeason throws error', async () => {
+      mockEngineCall.mockRejectedValueOnce(
+        new Error('Active season check failed'),
+      );
 
       const { result } = renderHook(() => usePerpsRewardAccountOptedIn());
 
@@ -326,7 +328,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
     });
 
     it('returns null when getCandidateSubscriptionId throws error', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockRejectedValueOnce(
         new Error('Subscription check failed'),
       );
@@ -339,7 +341,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
     });
 
     it('returns null when getHasAccountOptedIn throws error', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockEngineCall.mockRejectedValueOnce(new Error('Opt-in check failed'));
 
@@ -351,7 +353,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
     });
 
     it('returns null when isOptInSupported throws error', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockEngineCall.mockResolvedValueOnce(false); // getHasAccountOptedIn
       mockEngineCall.mockRejectedValueOnce(
@@ -368,7 +370,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
 
   describe('Account linked event subscription', () => {
     it('subscribes to account linked event on mount', () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockEngineCall.mockResolvedValueOnce(true); // getHasAccountOptedIn
 
@@ -381,7 +383,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
     });
 
     it('unsubscribes from account linked event on unmount', () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-id'); // getCandidateSubscriptionId
       mockEngineCall.mockResolvedValueOnce(true); // getHasAccountOptedIn
 
@@ -467,7 +469,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
 
   describe('Integration scenarios', () => {
     it('handles complete flow from account selection to opt-in check', async () => {
-      mockEngineCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockEngineCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockEngineCall.mockResolvedValueOnce('subscription-123'); // getCandidateSubscriptionId
       mockEngineCall.mockResolvedValueOnce(true); // getHasAccountOptedIn
 
@@ -479,7 +481,7 @@ describe('usePerpsRewardAccountOptedIn', () => {
       });
 
       expect(mockEngineCall).toHaveBeenCalledWith(
-        'RewardsController:isRewardsFeatureEnabled',
+        'RewardsController:hasActiveSeason',
       );
       expect(mockEngineCall).toHaveBeenCalledWith(
         'RewardsController:getCandidateSubscriptionId',
diff --git a/app/components/UI/Perps/hooks/usePerpsRewardAccountOptedIn.ts b/app/components/UI/Perps/hooks/usePerpsRewardAccountOptedIn.ts
index 94c0d4a27d8..5b3193c9cde 100644
--- a/app/components/UI/Perps/hooks/usePerpsRewardAccountOptedIn.ts
+++ b/app/components/UI/Perps/hooks/usePerpsRewardAccountOptedIn.ts
@@ -40,12 +40,12 @@ export const usePerpsRewardAccountOptedIn = (
     }
 
     try {
-      // Check if rewards feature is enabled
-      const isRewardsEnabled = await Engine.controllerMessenger.call(
-        'RewardsController:isRewardsFeatureEnabled',
+      // Check if there is an active season
+      const hasActiveSeason = await Engine.controllerMessenger.call(
+        'RewardsController:hasActiveSeason',
       );
 
-      if (!isRewardsEnabled) {
+      if (!hasActiveSeason) {
         setAccountOptedIn(null);
         return;
       }
diff --git a/app/components/UI/Predict/hooks/usePredictRewards.test.ts b/app/components/UI/Predict/hooks/usePredictRewards.test.ts
index eed884f2750..662543c810b 100644
--- a/app/components/UI/Predict/hooks/usePredictRewards.test.ts
+++ b/app/components/UI/Predict/hooks/usePredictRewards.test.ts
@@ -136,7 +136,7 @@ describe('usePredictRewards', () => {
       // Arrange
       const mockEstimatedPoints = 100;
       mockControllerMessengerCall
-        .mockResolvedValueOnce(true) // isRewardsFeatureEnabled
+        .mockResolvedValueOnce(true) // hasActiveSeason
         .mockResolvedValueOnce('subscription-1') // getCandidateSubscriptionId
         .mockResolvedValueOnce(true) // getHasAccountOptedIn
         .mockResolvedValueOnce({
@@ -168,7 +168,7 @@ describe('usePredictRewards', () => {
 
       // Verify controller calls
       expect(mockControllerMessengerCall).toHaveBeenCalledWith(
-        'RewardsController:isRewardsFeatureEnabled',
+        'RewardsController:hasActiveSeason',
       );
       expect(mockControllerMessengerCall).toHaveBeenCalledWith(
         'RewardsController:getCandidateSubscriptionId',
@@ -201,7 +201,7 @@ describe('usePredictRewards', () => {
     });
   });
 
-  describe('when rewards feature is not enabled', () => {
+  describe('when there is no active season', () => {
     it('returns enabled false and stops checking', async () => {
       // Arrange
       mockControllerMessengerCall.mockResolvedValueOnce(false);
@@ -221,7 +221,7 @@ describe('usePredictRewards', () => {
       expect(result.current.rewardsAccountScope).toEqual(mockInternalAccount);
       expect(mockControllerMessengerCall).toHaveBeenCalledTimes(1);
       expect(mockControllerMessengerCall).toHaveBeenCalledWith(
-        'RewardsController:isRewardsFeatureEnabled',
+        'RewardsController:hasActiveSeason',
       );
     });
   });
@@ -230,7 +230,7 @@ describe('usePredictRewards', () => {
     it('returns enabled false when getCandidateSubscriptionId returns null', async () => {
       // Arrange
       mockControllerMessengerCall
-        .mockResolvedValueOnce(true) // isRewardsFeatureEnabled
+        .mockResolvedValueOnce(true) // hasActiveSeason
         .mockResolvedValueOnce(null); // getCandidateSubscriptionId
 
       // Act
@@ -255,7 +255,7 @@ describe('usePredictRewards', () => {
     it('returns enabled based on opt-in support and does not estimate points', async () => {
       // Arrange
       mockControllerMessengerCall
-        .mockResolvedValueOnce(true) // isRewardsFeatureEnabled
+        .mockResolvedValueOnce(true) // hasActiveSeason
         .mockResolvedValueOnce('subscription-1') // getCandidateSubscriptionId
         .mockResolvedValueOnce(false) // getHasAccountOptedIn
         .mockResolvedValueOnce(true); // isOptInSupported
@@ -288,7 +288,7 @@ describe('usePredictRewards', () => {
     it('returns enabled false when opt-in is not supported', async () => {
       // Arrange
       mockControllerMessengerCall
-        .mockResolvedValueOnce(true) // isRewardsFeatureEnabled
+        .mockResolvedValueOnce(true) // hasActiveSeason
         .mockResolvedValueOnce('subscription-1') // getCandidateSubscriptionId
         .mockResolvedValueOnce(false) // getHasAccountOptedIn
         .mockResolvedValueOnce(false); // isOptInSupported
@@ -338,7 +338,7 @@ describe('usePredictRewards', () => {
       mockParseCaipChainId.mockImplementation(() => {
         throw mockError;
       });
-      mockControllerMessengerCall.mockResolvedValueOnce(true); // isRewardsFeatureEnabled
+      mockControllerMessengerCall.mockResolvedValueOnce(true); // hasActiveSeason
       mockControllerMessengerCall.mockResolvedValueOnce('subscription-1'); // getCandidateSubscriptionId
 
       // Act
@@ -378,7 +378,7 @@ describe('usePredictRewards', () => {
       // Arrange
       const mockError = new Error('Network error');
       mockControllerMessengerCall
-        .mockResolvedValueOnce(true) // isRewardsFeatureEnabled
+        .mockResolvedValueOnce(true) // hasActiveSeason
         .mockResolvedValueOnce('subscription-1') // getCandidateSubscriptionId
         .mockResolvedValueOnce(true) // getHasAccountOptedIn
         .mockRejectedValueOnce(mockError); // estimatePoints
diff --git a/app/components/UI/Predict/hooks/usePredictRewards.ts b/app/components/UI/Predict/hooks/usePredictRewards.ts
index 4dd4ac50929..e1d2d908957 100644
--- a/app/components/UI/Predict/hooks/usePredictRewards.ts
+++ b/app/components/UI/Predict/hooks/usePredictRewards.ts
@@ -106,12 +106,12 @@ export const usePredictRewards = (
     setHasError(false);
 
     try {
-      // Check if rewards feature is enabled
-      const isRewardsEnabled = await Engine.controllerMessenger.call(
-        'RewardsController:isRewardsFeatureEnabled',
+      // Check if there is an active season
+      const hasActiveSeason = await Engine.controllerMessenger.call(
+        'RewardsController:hasActiveSeason',
       );
 
-      if (!isRewardsEnabled) {
+      if (!hasActiveSeason) {
         setEstimatedPoints(null);
         setEnabled(false);
         setShouldShowRewardsRow(false);
diff --git a/app/core/Engine/controllers/rewards-controller/RewardsController.test.ts b/app/core/Engine/controllers/rewards-controller/RewardsController.test.ts
index 2cd012b7856..c8fb768f467 100644
--- a/app/core/Engine/controllers/rewards-controller/RewardsController.test.ts
+++ b/app/core/Engine/controllers/rewards-controller/RewardsController.test.ts
@@ -792,7 +792,37 @@ describe('RewardsController', () => {
         bonusBips: 200,
       };
 
-      mockMessenger.call.mockResolvedValue(mockResponse);
+      const now = Date.now();
+      const mockSeasonId = 'season123';
+      const mockSeasonMetadata = {
+        id: mockSeasonId,
+        name: 'Test Season',
+        startDate: new Date(now - 86400000), // 1 day ago
+        endDate: new Date(now + 86400000), // 1 day from now
+        tiers: createTestTiers(),
+      };
+
+      mockMessenger.call.mockImplementation(
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: {
+                id: mockSeasonId,
+                startDate: new Date(now - 86400000),
+                endDate: new Date(now + 86400000),
+              },
+              next: null,
+            });
+          }
+          if (method === 'RewardsDataService:getSeasonMetadata') {
+            return Promise.resolve(mockSeasonMetadata);
+          }
+          if (method === 'RewardsDataService:estimatePoints') {
+            return Promise.resolve(mockResponse);
+          }
+          return Promise.resolve(null);
+        },
+      );
 
       const result = await controller.estimatePoints(mockRequest);
 
@@ -810,7 +840,38 @@ describe('RewardsController', () => {
         activityContext: {},
       };
 
-      mockMessenger.call.mockRejectedValue(new Error('API error'));
+      const now = Date.now();
+      const mockSeasonId = 'season123';
+      const mockSeasonMetadata = {
+        id: mockSeasonId,
+        name: 'Test Season',
+        startDate: new Date(now - 86400000), // 1 day ago
+        endDate: new Date(now + 86400000), // 1 day from now
+        tiers: createTestTiers(),
+      };
+
+      mockMessenger.call.mockImplementation(
+        // @ts-expect-error TODO: Resolve type mismatch
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: {
+                id: mockSeasonId,
+                startDate: new Date(now - 86400000),
+                endDate: new Date(now + 86400000),
+              },
+              next: null,
+            });
+          }
+          if (method === 'RewardsDataService:getSeasonMetadata') {
+            return Promise.resolve(mockSeasonMetadata);
+          }
+          if (method === 'RewardsDataService:estimatePoints') {
+            return Promise.reject(new Error('API error'));
+          }
+          return Promise.resolve(null);
+        },
+      );
 
       await expect(controller.estimatePoints(mockRequest)).rejects.toThrow(
         'API error',
@@ -838,7 +899,122 @@ describe('RewardsController', () => {
       };
       const mockResponse = { pointsEstimate: 200, bonusBips: 100 };
 
-      mockMessenger.call.mockResolvedValue(mockResponse);
+      const now = Date.now();
+      const mockSeasonId = 'season123';
+      const mockSeasonMetadata = {
+        id: mockSeasonId,
+        name: 'Test Season',
+        startDate: new Date(now - 86400000), // 1 day ago
+        endDate: new Date(now + 86400000), // 1 day from now
+        tiers: createTestTiers(),
+      };
+
+      mockMessenger.call.mockImplementation(
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: {
+                id: mockSeasonId,
+                startDate: new Date(now - 86400000),
+                endDate: new Date(now + 86400000),
+              },
+              next: null,
+            });
+          }
+          if (method === 'RewardsDataService:getSeasonMetadata') {
+            return Promise.resolve(mockSeasonMetadata);
+          }
+          if (method === 'RewardsDataService:estimatePoints') {
+            return Promise.resolve(mockResponse);
+          }
+          return Promise.resolve(null);
+        },
+      );
+
+      const result = await controller.estimatePoints(mockRequest);
+
+      expect(mockMessenger.call).toHaveBeenCalledWith(
+        'RewardsDataService:estimatePoints',
+        mockRequest,
+      );
+      expect(result).toEqual(mockResponse);
+    });
+
+    it('should return default response when there is no active season', async () => {
+      const mockRequest = {
+        activityType: 'SWAP' as const,
+        account: CAIP_ACCOUNT_1,
+        activityContext: {},
+      };
+
+      // Mock getSeasonMetadata to return null (no active season)
+      // This simulates getSeasonMetadata('current') returning null
+      mockMessenger.call.mockImplementation(
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: null,
+              next: null,
+            });
+          }
+          return Promise.resolve(null);
+        },
+      );
+
+      const result = await controller.estimatePoints(mockRequest);
+
+      expect(result).toEqual({ pointsEstimate: 0, bonusBips: 0 });
+      expect(mockMessenger.call).not.toHaveBeenCalledWith(
+        'RewardsDataService:estimatePoints',
+        expect.anything(),
+      );
+    });
+
+    it('should proceed with API call when rewards are enabled and there is an active season', async () => {
+      const mockRequest = {
+        activityType: 'SWAP' as const,
+        account: CAIP_ACCOUNT_1,
+        activityContext: {},
+      };
+
+      const mockResponse = {
+        pointsEstimate: 100,
+        bonusBips: 200,
+      };
+
+      const now = Date.now();
+      const mockSeasonId = 'season123';
+      const mockSeasonMetadata = {
+        id: mockSeasonId,
+        name: 'Test Season',
+        startDate: new Date(now - 86400000), // 1 day ago
+        endDate: new Date(now + 86400000), // 1 day from now
+        tiers: createTestTiers(),
+      };
+
+      // Mock getSeasonMetadata to return valid season metadata
+      // This simulates getSeasonMetadata('current') returning a valid season
+      mockMessenger.call.mockImplementation(
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: {
+                id: mockSeasonId,
+                startDate: new Date(now - 86400000),
+                endDate: new Date(now + 86400000),
+              },
+              next: null,
+            });
+          }
+          if (method === 'RewardsDataService:getSeasonMetadata') {
+            return Promise.resolve(mockSeasonMetadata);
+          }
+          if (method === 'RewardsDataService:estimatePoints') {
+            return Promise.resolve(mockResponse);
+          }
+          return Promise.resolve(null);
+        },
+      );
 
       const result = await controller.estimatePoints(mockRequest);
 
@@ -850,6 +1026,216 @@ describe('RewardsController', () => {
     });
   });
 
+  describe('hasActiveSeason', () => {
+    it('should return false when rewards feature is disabled', async () => {
+      const isDisabled = () => true;
+      const disabledController = new RewardsController({
+        messenger: mockMessenger,
+        state: getRewardsControllerDefaultState(),
+        isDisabled,
+      });
+
+      const result = await disabledController.hasActiveSeason();
+
+      expect(result).toBe(false);
+      expect(mockMessenger.call).not.toHaveBeenCalled();
+    });
+
+    it('should return false when getSeasonMetadata returns null', async () => {
+      // Mock getSeasonMetadata to return null by having getDiscoverSeasons return null for current
+      mockMessenger.call.mockImplementation(
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: null,
+              next: null,
+            });
+          }
+          return Promise.resolve(null);
+        },
+      );
+
+      const result = await controller.hasActiveSeason();
+
+      expect(result).toBe(false);
+    });
+
+    it('should return false when current date is before season startDate', async () => {
+      const now = Date.now();
+      const mockSeasonId = 'season123';
+      const mockSeasonMetadata = {
+        id: mockSeasonId,
+        name: 'Test Season',
+        startDate: new Date(now + 86400000), // 1 day from now (future)
+        endDate: new Date(now + 172800000), // 2 days from now
+        tiers: createTestTiers(),
+      };
+
+      mockMessenger.call.mockImplementation(
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: {
+                id: mockSeasonId,
+                startDate: new Date(now + 86400000),
+                endDate: new Date(now + 172800000),
+              },
+              next: null,
+            });
+          }
+          if (method === 'RewardsDataService:getSeasonMetadata') {
+            return Promise.resolve(mockSeasonMetadata);
+          }
+          return Promise.resolve(null);
+        },
+      );
+
+      const result = await controller.hasActiveSeason();
+
+      expect(result).toBe(false);
+    });
+
+    it('should return false when current date is after season endDate', async () => {
+      const now = Date.now();
+      const mockSeasonId = 'season123';
+      const mockSeasonMetadata = {
+        id: mockSeasonId,
+        name: 'Test Season',
+        startDate: new Date(now - 172800000), // 2 days ago
+        endDate: new Date(now - 86400000), // 1 day ago (past)
+        tiers: createTestTiers(),
+      };
+
+      mockMessenger.call.mockImplementation(
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: {
+                id: mockSeasonId,
+                startDate: new Date(now - 172800000),
+                endDate: new Date(now - 86400000),
+              },
+              next: null,
+            });
+          }
+          if (method === 'RewardsDataService:getSeasonMetadata') {
+            return Promise.resolve(mockSeasonMetadata);
+          }
+          return Promise.resolve(null);
+        },
+      );
+
+      const result = await controller.hasActiveSeason();
+
+      expect(result).toBe(false);
+    });
+
+    it('should return true when current date is between season startDate and endDate', async () => {
+      const now = Date.now();
+      const mockSeasonId = 'season123';
+      const mockSeasonMetadata = {
+        id: mockSeasonId,
+        name: 'Test Season',
+        startDate: new Date(now - 86400000), // 1 day ago
+        endDate: new Date(now + 86400000), // 1 day from now
+        tiers: createTestTiers(),
+      };
+
+      mockMessenger.call.mockImplementation(
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: {
+                id: mockSeasonId,
+                startDate: new Date(now - 86400000),
+                endDate: new Date(now + 86400000),
+              },
+              next: null,
+            });
+          }
+          if (method === 'RewardsDataService:getSeasonMetadata') {
+            return Promise.resolve(mockSeasonMetadata);
+          }
+          return Promise.resolve(null);
+        },
+      );
+
+      const result = await controller.hasActiveSeason();
+
+      expect(result).toBe(true);
+    });
+
+    it('should return true when current date equals season startDate', async () => {
+      const now = Date.now();
+      const mockSeasonId = 'season123';
+      const mockSeasonMetadata = {
+        id: mockSeasonId,
+        name: 'Test Season',
+        startDate: new Date(now), // exactly now
+        endDate: new Date(now + 86400000), // 1 day from now
+        tiers: createTestTiers(),
+      };
+
+      mockMessenger.call.mockImplementation(
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: {
+                id: mockSeasonId,
+                startDate: new Date(now),
+                endDate: new Date(now + 86400000),
+              },
+              next: null,
+            });
+          }
+          if (method === 'RewardsDataService:getSeasonMetadata') {
+            return Promise.resolve(mockSeasonMetadata);
+          }
+          return Promise.resolve(null);
+        },
+      );
+
+      const result = await controller.hasActiveSeason();
+
+      expect(result).toBe(true);
+    });
+
+    it('should return true when current date equals season endDate', async () => {
+      const now = Date.now();
+      const mockSeasonId = 'season123';
+      const mockSeasonMetadata = {
+        id: mockSeasonId,
+        name: 'Test Season',
+        startDate: new Date(now - 86400000), // 1 day ago
+        endDate: new Date(now), // exactly now
+        tiers: createTestTiers(),
+      };
+
+      mockMessenger.call.mockImplementation(
+        (method: string, ..._: unknown[]) => {
+          if (method === 'RewardsDataService:getDiscoverSeasons') {
+            return Promise.resolve({
+              current: {
+                id: mockSeasonId,
+                startDate: new Date(now - 86400000),
+                endDate: new Date(now),
+              },
+              next: null,
+            });
+          }
+          if (method === 'RewardsDataService:getSeasonMetadata') {
+            return Promise.resolve(mockSeasonMetadata);
+          }
+          return Promise.resolve(null);
+        },
+      );
+
+      const result = await controller.hasActiveSeason();
+
+      expect(result).toBe(true);
+    });
+  });
+
   describe('getPointsEvents', () => {
     it('should return empty response when disabled via isDisabled callback', async () => {
       const isDisabled = () => true;
@@ -6688,6 +7074,203 @@ describe('RewardsController', () => {
     });
   });
 
+  describe('setActiveAccountFromCandidate', () => {
+    const mockInternalAccount: InternalAccount = {
+      id: 'test-account-id',
+      address: '0x1234567890123456789012345678901234567890',
+      scopes: ['eip155:1'],
+      type: 'eip155:eoa',
+      options: {},
+      methods: [],
+      metadata: {
+        name: 'Test Account',
+        keyring: { type: 'HD Key Tree' },
+        importTime: Date.now(),
+      },
+    };
+
+    const mockAccountState: RewardsAccountState = {
+      account: CAIP_ACCOUNT_1,
+      hasOptedIn: true,
+      subscriptionId: 'sub-123',
+      perpsFeeDiscount: 500,
+      lastPerpsDiscountRateFetched: Date.now(),
+    };
+
+    it('returns early when candidate is null', () => {
+      // Arrange
+      const initialState = {
+        ...getRewardsControllerDefaultState(),
+        activeAccount: null,
+      };
+      controller = new RewardsController({
+        messenger: mockMessenger,
+        state: initialState,
+        isDisabled: () => false,
+      });
+
+      // Act
+      controller.setActiveAccountFromCandidate(null);
+
+      // Assert
+      expect(controller.state.activeAccount).toBeNull();
+    });
+
+    it('returns early when convertInternalAccountToCaipAccountId returns null', () => {
+      // Arrange
+      const initialState = {
+        ...getRewardsControllerDefaultState(),
+        activeAccount: null,
+      };
+      controller = new RewardsController({
+        messenger: mockMessenger,
+        state: initialState,
+        isDisabled: () => false,
+      });
+
+      jest
+        .spyOn(controller, 'convertInternalAccountToCaipAccountId')
+        .mockReturnValue(null);
+
+      // Act
+      controller.setActiveAccountFromCandidate(mockInternalAccount);
+
+      // Assert
+      expect(controller.state.activeAccount).toBeNull();
+      expect(
+        controller.convertInternalAccountToCaipAccountId,
+      ).toHaveBeenCalledWith(mockInternalAccount);
+    });
+
+    it('returns early when account state is not found', () => {
+      // Arrange
+      const initialState = {
+        ...getRewardsControllerDefaultState(),
+        activeAccount: null,
+        accounts: {},
+      };
+      controller = new RewardsController({
+        messenger: mockMessenger,
+        state: initialState,
+        isDisabled: () => false,
+      });
+
+      jest
+        .spyOn(controller, 'convertInternalAccountToCaipAccountId')
+        .mockReturnValue(CAIP_ACCOUNT_1);
+
+      // Act
+      controller.setActiveAccountFromCandidate(mockInternalAccount);
+
+      // Assert
+      expect(controller.state.activeAccount).toBeNull();
+    });
+
+    it('sets activeAccount when candidate is valid and account state exists', () => {
+      // Arrange
+      const initialState = {
+        ...getRewardsControllerDefaultState(),
+        activeAccount: null,
+        accounts: {
+          [CAIP_ACCOUNT_1]: mockAccountState,
+        },
+      };
+      controller = new RewardsController({
+        messenger: mockMessenger,
+        state: initialState,
+        isDisabled: () => false,
+      });
+
+      jest
+        .spyOn(controller, 'convertInternalAccountToCaipAccountId')
+        .mockReturnValue(CAIP_ACCOUNT_1);
+
+      // Act
+      controller.setActiveAccountFromCandidate(mockInternalAccount);
+
+      // Assert
+      expect(controller.state.activeAccount).toEqual(mockAccountState);
+      expect(
+        controller.convertInternalAccountToCaipAccountId,
+      ).toHaveBeenCalledWith(mockInternalAccount);
+    });
+
+    it('updates activeAccount when it already exists', () => {
+      // Arrange
+      const existingActiveAccount: RewardsAccountState = {
+        account: CAIP_ACCOUNT_2,
+        hasOptedIn: false,
+        subscriptionId: null,
+        perpsFeeDiscount: null,
+        lastPerpsDiscountRateFetched: null,
+      };
+
+      const initialState = {
+        ...getRewardsControllerDefaultState(),
+        activeAccount: existingActiveAccount,
+        accounts: {
+          [CAIP_ACCOUNT_1]: mockAccountState,
+        },
+      };
+      controller = new RewardsController({
+        messenger: mockMessenger,
+        state: initialState,
+        isDisabled: () => false,
+      });
+
+      jest
+        .spyOn(controller, 'convertInternalAccountToCaipAccountId')
+        .mockReturnValue(CAIP_ACCOUNT_1);
+
+      // Act
+      controller.setActiveAccountFromCandidate(mockInternalAccount);
+
+      // Assert
+      expect(controller.state.activeAccount).toEqual(mockAccountState);
+      expect(controller.state.activeAccount).not.toEqual(existingActiveAccount);
+    });
+
+    it('handles account state lookup with different CAIP format variations', () => {
+      // Arrange
+      const caipAccountLowercase =
+        'eip155:0:0x1234567890123456789012345678901234567890' as CaipAccountId;
+      const accountStateWithLowercase: RewardsAccountState = {
+        account: caipAccountLowercase,
+        hasOptedIn: true,
+        subscriptionId: 'sub-456',
+        perpsFeeDiscount: 300,
+        lastPerpsDiscountRateFetched: Date.now(),
+      };
+
+      const initialState = {
+        ...getRewardsControllerDefaultState(),
+        activeAccount: null,
+        accounts: {
+          [caipAccountLowercase]: accountStateWithLowercase,
+        },
+      };
+      controller = new RewardsController({
+        messenger: mockMessenger,
+        state: initialState,
+        isDisabled: () => false,
+      });
+
+      // Mock to return a CAIP account that should match via #getAccountState logic
+      const caipAccountWithChainId =
+        'eip155:1:0x1234567890123456789012345678901234567890' as CaipAccountId;
+      jest
+        .spyOn(controller, 'convertInternalAccountToCaipAccountId')
+        .mockReturnValue(caipAccountWithChainId);
+
+      // Act
+      controller.setActiveAccountFromCandidate(mockInternalAccount);
+
+      // Assert
+      // The #getAccountState method should find the account state even with different CAIP format
+      expect(controller.state.activeAccount).toEqual(accountStateWithLowercase);
+    });
+  });
+
   describe('invalidateAccountsAndSubscriptions', () => {
     it('should correctly invalidate accounts and subscriptions', async () => {
       // Arrange
diff --git a/app/core/Engine/controllers/rewards-controller/RewardsController.ts b/app/core/Engine/controllers/rewards-controller/RewardsController.ts
index 762d9870316..72cfe14da88 100644
--- a/app/core/Engine/controllers/rewards-controller/RewardsController.ts
+++ b/app/core/Engine/controllers/rewards-controller/RewardsController.ts
@@ -435,6 +435,10 @@ export class RewardsController extends BaseController<
       'RewardsController:isRewardsFeatureEnabled',
       this.isRewardsFeatureEnabled.bind(this),
     );
+    this.messenger.registerActionHandler(
+      'RewardsController:hasActiveSeason',
+      this.hasActiveSeason.bind(this),
+    );
     this.messenger.registerActionHandler(
       'RewardsController:getSeasonMetadata',
       this.getSeasonMetadata.bind(this),
@@ -644,6 +648,23 @@ export class RewardsController extends BaseController<
     return signature;
   }
 
+  /**
+   * Set the active account from a candidate account
+   */
+  setActiveAccountFromCandidate(candidate: InternalAccount | null): void {
+    if (!candidate) return;
+
+    const caipAccount = this.convertInternalAccountToCaipAccountId(candidate);
+    if (!caipAccount) return;
+
+    const accountState = this.#getAccountState(caipAccount);
+    if (!accountState) return;
+
+    this.update((state: RewardsControllerState) => {
+      state.activeAccount = accountState;
+    });
+  }
+
   /**
    * Handle authentication triggers (account changes, keyring unlock)
    */
@@ -696,19 +717,7 @@ export class RewardsController extends BaseController<
         // Set the active account to the first successful account or the first account in the sorted accounts array
         const activeAccountCandidate: InternalAccount =
           successAccount || sortedAccounts[0];
-        if (activeAccountCandidate) {
-          const caipAccount = this.convertInternalAccountToCaipAccountId(
-            activeAccountCandidate,
-          );
-          if (caipAccount) {
-            const accountState = this.#getAccountState(caipAccount);
-            if (accountState) {
-              this.update((state: RewardsControllerState) => {
-                state.activeAccount = accountState;
-              });
-            }
-          }
-        }
+        this.setActiveAccountFromCandidate(activeAccountCandidate);
       }
     } catch (error) {
       const errorMessage =
@@ -1072,7 +1081,7 @@ export class RewardsController extends BaseController<
       } else if (account?.startsWith('eip155')) {
         coercedAccount = account.toLowerCase() as CaipAccountId;
       } else {
-        coercedAccount = account as CaipAccountId;
+        coercedAccount = account;
       }
 
       this.update((state: RewardsControllerState) => {
@@ -1583,6 +1592,10 @@ export class RewardsController extends BaseController<
   ): Promise<EstimatedPointsDto> {
     const rewardsEnabled = this.isRewardsFeatureEnabled();
     if (!rewardsEnabled) return { pointsEstimate: 0, bonusBips: 0 };
+
+    const activeSeason = await this.hasActiveSeason();
+    if (!activeSeason) return { pointsEstimate: 0, bonusBips: 0 };
+
     try {
       const estimatedPoints = await this.messenger.call(
         'RewardsDataService:estimatePoints',
@@ -1609,6 +1622,37 @@ export class RewardsController extends BaseController<
     return true;
   }
 
+  /**
+   * Check if there is an active season
+   * @returns Promise<boolean> - True if there is an active season, false otherwise
+   * An active season exists when getSeasonMetadata('current') returns a value
+   * and the current date is between the season's startDate and endDate
+   */
+  async hasActiveSeason(): Promise<boolean> {
+    const rewardsEnabled = this.isRewardsFeatureEnabled();
+    if (!rewardsEnabled) {
+      return false;
+    }
+
+    try {
+      const seasonDto = await this.getSeasonMetadata('current');
+      if (!seasonDto) {
+        return false;
+      }
+
+      const now = Date.now();
+      const isActive = now >= seasonDto.startDate && now <= seasonDto.endDate;
+
+      return isActive;
+    } catch (error) {
+      Logger.log(
+        'RewardsController: Failed to check active season:',
+        error instanceof Error ? error.message : String(error),
+      );
+      return false;
+    }
+  }
+
   /**
    * Get season metadata with caching. This fetches and caches the season metadata
    * including id, name, dates, and tiers.
diff --git a/app/core/Engine/controllers/rewards-controller/types.ts b/app/core/Engine/controllers/rewards-controller/types.ts
index bc735e9a539..55ec7244770 100644
--- a/app/core/Engine/controllers/rewards-controller/types.ts
+++ b/app/core/Engine/controllers/rewards-controller/types.ts
@@ -847,6 +847,14 @@ export interface RewardsControllerIsRewardsFeatureEnabledAction {
   handler: () => boolean;
 }
 
+/**
+ * Action for checking if there is an active season
+ */
+export interface RewardsControllerHasActiveSeasonAction {
+  type: 'RewardsController:hasActiveSeason';
+  handler: () => Promise<boolean>;
+}
+
 /**
  * Action for getting season metadata with caching
  */
@@ -1009,6 +1017,7 @@ export type RewardsControllerActions =
   | RewardsControllerEstimatePointsAction
   | RewardsControllerGetPerpsDiscountAction
   | RewardsControllerIsRewardsFeatureEnabledAction
+  | RewardsControllerHasActiveSeasonAction
   | RewardsControllerGetSeasonMetadataAction
   | RewardsControllerGetSeasonStatusAction
   | RewardsControllerGetReferralDetailsAction

From 94f0c3506032d8399784b33de8caa1c653274400 Mon Sep 17 00:00:00 2001
From: abretonc7s <107169956+abretonc7s@users.noreply.github.com>
Date: Wed, 26 Nov 2025 09:54:11 +0800
Subject: [PATCH 4/5] docs(perps): update hyperliquid references (#23236)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Large Hyperliquid docs update: add Info/validation/tick-size docs,
finalize and consolidate HIP‑3 specs (also in HIP‑2), extend HIP‑1, and
adjust exchange API (DEX abstraction rename + validator risk‑free rate
vote).
>
> - **Docs (major additions)**:
> - Add `docs/perps/hyperliquid/info-endpoint.md` with comprehensive
Info API references (mids, orders, fills, books, candles, fees, staking,
vaults, referrals, HIP-3 DEX abstraction state, aligned quote token
status).
> - Add `docs/perps/hyperliquid/frontend-checks.md` outlining
client-side validations for HIP‑1 deployments (decimals, fee share,
genesis, Hyperliquidity limits).
> - Add `docs/perps/hyperliquid/tick-lotsize.md` detailing price/size
precision rules.
> - **HIP specs**:
> - Update `HIP-3.md` to finalized, permissionless builder‑deployed
perps with a consolidated **Spec**, **Settlement**, **Oracle**, and
**Slashing**; remove testnet/MVP language.
> - Replace `HIP-2.md` content with HIP‑3 (builder‑deployed perps) spec
for consistency.
> - Enhance `HIP-1.md` with a new "Deploying existing assets" section
and legacy deployer fee‑share policy; clarify spot dusting text.
> - **API changes (Exchange endpoint)**:
> - Rename DEX abstraction action to `userDexAbstraction` in request
schema.
> - Add validator action: `validatorL1Stream` to vote on risk‑free rate
for aligned quote assets.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
1d29f305f702eec7c2d5feef670d65207cb2ed28. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---
 docs/perps/hyperliquid/HIP-1.md             |   18 +-
 docs/perps/hyperliquid/HIP-2.md             |   63 +-
 docs/perps/hyperliquid/HIP-3.md             |   45 +-
 docs/perps/hyperliquid/exchange-endpoint.md |   28 +-
 docs/perps/hyperliquid/frontend-checks.md   |  231 ++++
 docs/perps/hyperliquid/info-endpoint.md     | 1295 +++++++++++++++++++
 docs/perps/hyperliquid/tick-lotsize.md      |   25 +
 7 files changed, 1660 insertions(+), 45 deletions(-)
 create mode 100644 docs/perps/hyperliquid/frontend-checks.md
 create mode 100644 docs/perps/hyperliquid/info-endpoint.md
 create mode 100644 docs/perps/hyperliquid/tick-lotsize.md

diff --git a/docs/perps/hyperliquid/HIP-1.md b/docs/perps/hyperliquid/HIP-1.md
index 6c1be16c652..7e28add0e92 100644
--- a/docs/perps/hyperliquid/HIP-1.md
+++ b/docs/perps/hyperliquid/HIP-1.md
@@ -28,6 +28,20 @@ The only time-sensitive step of the process is the very first step of deploying
 
 Deployment is a complex multi-stage process, and it is possible to get in a state where your deployment is stuck. For example, Hyperliquidity and total supply may be incompatible. It is the deployer's responsibility to try the exact deployment on testnet first: <https://app.hyperliquid-testnet.xyz/deploySpot>. Gas cannot be refunded if the deployment is stuck.
 
+### Deploying existing assets
+
+One common deployment pattern is to use HyperCore's onchain spot order books for trading an asset that exists externally. For example, this includes assets bridged from other chains or tokenized RWAs like stablecoins. These deployers often use the HyperEVM for minting in order to leverage battle-tested multichain bridging, including the following options:
+
+- LayerZero: <https://docs.layerzero.network/v2/developers/hyperliquid/hyperliquid-concepts>
+- Axelar: <https://axelarscan.io/resources/chains>
+- Chainlink: <https://docs.chain.link/ccip/tools-resources/network-specific/hyperliquid-integration-guide>
+- Debridge: <https://docs.debridge.com/dmp-details/dmp/protocol-overview>
+- Wormhole: <https://wormhole.com/docs/products/messaging/get-started/>
+
+To deploy a HyperEVM minted ERC-20 token for trading on HyperCore, the deployer should first purchase a ticker in the permissionless HIP-1 Dutch auction on HyperCore detailed above. For the simplest setup, during the genesis step, the deployer can put the max supply (or `2^64-1` for maximum flexibility) in the system address. See [here](https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/hyperevm/hypercore-less-than-greater-than-hyperevm-transfers#system-addresses) for how system address is determined based on the HyperCore token index. Usually deployers of bridged assets elect not to use Hyperliquidity, which can be configured with the `noHyperliquidity` field.
+
+Once the HyperCore token and HyperEVM ERC-20 address are linked, transfers to the system address on the HyperEVM will reflect in the sender's HyperCore balance, and vice versa. It's highly recommended to test the exact setup on testnet.&#x20;
+
 ### USDC&#x20;
 
 USDC is currently used for all perps margining. With HIP-1, USDC also becomes a spot token with an atomic transfer between perps and spot wallet USDC. Spot USDC has `szDecimals = weiDecimals = 8` to allow for a wide range of HIP-1 token prices.
@@ -40,8 +54,10 @@ HIP-1 tokens trade on order books parametrized by `base` and `quote` tokens, whe
 
 Native spot and perps order books share the same volume-based fee schedule for each address. Fees collected in non-USDC HIP-1 native tokens are sent to the deployer, i.e. the deployer's fee share defaults to 100%. The base token deployer can set this percentage in the range of \[0, 100%] but only lower than the previous value afterwards. The portion of base token fees that is not redirected to the deployer is burned. For other quote tokens besides USDC, the fees are sent to the Assistance Fund. Quote token deployers cannot configure a trading fee share.
 
+For legacy tokens that were deployed before the deployer fee share was implemented, deployers can increase the fee share once from zero to a positive value. After this one-time change, the fee share can only decrease. The deployer fee share for legacy tokens cannot be set back to exactly zero after being set to a positive value.
+
 ### Spot dust conversion
 
 Spot dusting occurs once a day at 00:00 UTC. All spot balances that are less than 1 lot size with notional value <= 1 USD will be dusted. Here, the notional value is computed as the prevailing mid price of the token against USDC, times the token balance. All users’ dust across a token is aggregated, and a market sell order is automatically submitted to the book. If the aggregate dust is smaller than one lot size, then that dust is burned. Otherwise, the USDC from the successfully converted dust will be allocated back to all dusted users on a weighted basis, where the weighting is equal to the user’s fraction of the aggregate dust.&#x20;
 
-Dusting will not occur if 1) the book is one-sided or 2) the amount of notional dust is too high such that the book would be impacted by this operation. For PURR, this is 10000 USDC; for all other tokens, this is 3000 USDC. Note: the amount of USDC received may be less than the notional amount computed from the mid because of slippage incurred while dusting or if there was insufficient liquidity to convert the total dust across all users.
+Dusting will not occur if 1) the book is one-sided or 2) the amount of notional dust is too high such that the book would be impacted by this operation. For PURR, this is 10000 USDC; for all other tokens, this is 3000 USDC. Note: the amount of USDC received may be less than the notional amount computed from the mid because of slippage incurred while dusting or if there was insufficient liquidity to convert the total dust across all users.&#x20;
diff --git a/docs/perps/hyperliquid/HIP-2.md b/docs/perps/hyperliquid/HIP-2.md
index 1555849ac42..e95337210ef 100644
--- a/docs/perps/hyperliquid/HIP-2.md
+++ b/docs/perps/hyperliquid/HIP-2.md
@@ -1,22 +1,57 @@
-# HIP-2: Hyperliquidity
+# HIP-3: Builder-deployed perpetuals
 
-### Motivation&#x20;
+The Hyperliquid protocol supports permissionless builder-deployed perps (HIP-3), a key milestone toward fully decentralizing the perp listing process.&#x20;
 
-Though HIP-1 is sufficient as a permissionless token standard, in practice it is often crucial to bootstrap liquidity. One of Hyperliquid's core design principles is that liquidity should be democratized. For perps trading, HLP can quote deep and tight liquidity based on CEX perp and spot prices, but a new model is needed for HIP-1 tokens that are in early phases of price discovery.
+The deployer of a perp market is responsible for
 
-Hyperliquidity is inspired by Uniswap, while interoperating with a native onchain order book to support sophisticated order book liquidity from end users. HIP-2 is a fully decentralized onchain strategy that is part of Hyperliquid's block transition logic. Unlike conventional automated order book strategies, there are no operators. The strategy logic is secured by the same consensus that operates the order book itself. Note that Hyperliquidity is currently only available on spot pairs against USDC.&#x20;
+1. Market definition, including the oracle definition and contract specifications
+2. Market operation, including setting oracle prices, leverage limits, and settling the market if needed
 
-Hyperliquidity is parametrized by
+HIP-3 inherits the HyperCore stack including its high performance margining and order books. For example, the API to trade HIP-3 perps is unified with other HyperCore actions. To trade HIP-3 assets, the asset ID simply needs to be set using the schema [here](https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/api/asset-ids).
 
-1. `spot`: a spot order book asset with USDC quote returned by a deployment of HIP-1
-2. `startPx`: the initial price of the range
-3. `nOrders`: the number of orders in the range
-4. `orderSz`: the size of a full order in the range
-5. `nSeededLevels`: the number of levels that begin as bids instead of asks. Note that for each additional bid level added by incrementing `nSeededLevels` the deployer needs to fund Hyperliquidity with `px * sz` worth of USDC. For fixed `nOrders`, increasing seeded levels decreases the total supply because it reduces the genesis supply of Hyperliquidity.
+## Spec
 
-Each Hyperliquidity strategy has a price range defined recursively `px_0 = startPx`, `px_i = round(px_{i-1} * 1.003)`. The strategy updates on every block where the block time is at least 3 seconds since the previous update block. After each update:
+1. The staking requirement for mainnet will be 500k HYPE. This requirement is expected to decrease over time as the infrastructure matures. Any amount staked above the most recent requirement can be unstaked. The staking requirement is maintained for 30 days even after all of the deployer's perps have been halted.
+2. Any deployer that meets the staking requirement can deploy one perp dex. As a reminder, each perp dex features independent margining, order books, and deployer settings. A future upgrade may support multiple dex deployments sharing the same deployer and staking requirement.
+3. Any quote asset can be used as the collateral asset for a dex. As a reminder, assets that fail to meet the permissionless quote asset requirements will lose quote asset status based on onchain validator vote. Such a vote would also disable perp dexs that use this asset as collateral.
+4. HIP-3 deployers are not subject to slashing related to quote assets. On a future upgrade, dexs with disabled quote assets would support migration to a new collateral token. This is not expected to happen on mainnet, as quote token deployers have their separate staking and slashing conditions. In summary, the quote asset choice is important for trading fee and product considerations, but is not an existential risk for HIP-3 deployers.
+5. The first 3 assets deployed in any perp dex do not require auction participation. Additional assets go through a Dutch auction with the same hyperparameters (including frequency and minimum price) as the HIP-1 auction. The HIP-3 auction for additional perps is shared across all perp dexs. Future upgrades will support improved ergonomics around reserving assets for time-sensitive future deployments.
+6. Isolated-only margin mode is required. Cross margin will be supported in a future upgrade.
+7. HIP-3 markets incorporate the usual sources of trading fee discounts, including staking discounts, referral rewards, and aligned collateral discount. From the deployer perspective, the fee share is fixed at 50%. From the user perspective, fees are 2x the usual fees on validator-operated perp markets. The net effect is that the protocol collects the same fee regardless of whether the trade is on an HIP-3 or a validator-operated perp. User rebates are unaffected, and do not interact with the deployer. Deployer configurability of fees will be supported in a future upgrade.
+8. Aligned stablecoin collateral will automatically receive reduced fees once the alignment condition (which is being updated based on user and deployer feedback) is implemented.
 
-1. Strategy targets `nFull = floor(balance / orderSz)` full ask orders and a `balance % orderSz` partial ask order if the partial order is nonzero. To the extent that ALO orders are not rejected, these orders are ensured.
-2. Each fully filled tranche is modified to an order of side `orderSz` on the side with available balance, with the exception of the single partial order from (1) if it exists.
+## Settlement
 
-The resulting strategy guarantees a 0.3% spread every 3 seconds. Like smart-contract based pools on general purpose chains, Hyperliquidity requires no maintenance in the form of user transactions. One key improvement is that Hyperliquidity participates in a general purpose order book. Active liquidity providers can join in liquidity provision alongside Hyperliquidity at any time, allowing markets to adapt to increasing demand for liquidity.
+The deployer may settle an asset using the `haltTrading` action. This cancels all orders and settles positions to the current mark price. The same action can be used to resume trading, effectively recycling the asset. This could be used to list dated contracts without participating in the deployment auction for each new contract.
+
+Once all assets are settled, a deployer's required stake is free to be unstaked.
+
+## Oracle
+
+While the oracle is completely general at the protocol level, perps make the most mathematical sense when there is a well-defined underlying asset or data feed which is difficult to manipulate and has underlying economic significance. Most price indices are not amenable as perp oracle sources. Deployers should consider edge cases carefully before listing markets, as they are subject to slashing for all listed markets on their DEX.
+
+## **Slashing**&#x20;
+
+Note: in all usages below, "slashing" is only in the context of HIP-3.&#x20;
+
+To ensure high quality markets and protect users, deployers must maintain 500k staked HYPE. In the event of malicious market operation, validators have the authority to slash the deployer’s stake by conducting a stake-weighted vote. Even if the deployer has unstaked and initiated a staking withdrawal, the stake is still slashable during the 7-day unstaking queue.&#x20;
+
+While slashing is ultimately by validator quorum, the protocol guidelines have been distilled from careful testnet analysis, user feedback, and deployer feedback. The guiding principle is that slashing is to prevent behavior that jeopardizes protocol correctness, uptime, or performance. A useful rule of thumb is that any slashable behavior should be accompanied by a bug fix in the protocol implementation. Therefore, HIP-3 should not require slashing in its final state. However, slashing is an important safety mechanism for a practical rollout of this large feature set.&#x20;
+
+Slashing is technical and does not distinguish between malicious and incompetent behavior. Relatedly, slashing does not distinguish between
+
+1. A deployer that deviates from a well-designed contract spec
+2. A deployer that faithfully follows a poorly designed contract spec
+3. A deployer whose private keys are compromised
+
+The key factor is the effect of the deployer's actions on the protocol. Note that any bugs discovered are generously covered by the bug bounty program, provided such discoveries meet the terms of that program, including being responsibly disclosed without being exploited. These reports are greatly appreciated.&#x20;
+
+Even attempted malicious deployer inputs that do not cause protocol issues are slashable. Similarly, inputs that do cause protocol issues but that are not irregular are not slashable. In particular, bugs under normal operation that are unrelated to the deployer inputs are not within scope of slashing. The interpretation of "irregular" inputs is to be determined by validator vote, and includes inputs that exploit edge cases or loopholes that circumvent system limits. All deployer transactions are onchain, and can be independently analyzed by any interested parties.&#x20;
+
+Some malicious behavior is valid by protocol definition, but incorrect by certain subjective interpretations. The slashing principle provides that the protocol should not intervene in subjective matters. The motivation is that while proof-of-stake blockchains could hard fork on undesirable state transitions, they very rarely do. Neutrality of the platform is an incredibly important feature to preserve. Relatedly, the slashed stake by the deployer is burned instead of being distributed to affected users. This is again based on proof-of-stake principles and prevents some forms of misaligned incentives between users and deployers. While the protocol layer does not enforce subjective irregularities, the downstream application and social layers can. Ultimately, the deployer's reputation and future success is always at stake.&#x20;
+
+The amount slashed in a given instance is ultimately a stake-weighted median of validator votes. However, as a general guideline, irregular inputs that cause invalid state transitions or prolonged network downtime can be slashed up to 100%. Irregular inputs causing brief network downtime can be partially slashed up to 50%. Invalid inputs that cause network degradation or performance issues can be partially slashed up to 20%.&#x20;
+
+Lastly, the slashing conditions are independent of the staker composition. Therefore, LST operators should carefully diligence deployers. LST operators should also carefully and clearly communicate slashing risks to their users. A self-bonding requirement for deployers could make sense.&#x20;
+
+In the most likely outcome, slashing never happens on mainnet. A large amount of technical work has gone into making HIP-3 a self-contained and technically robust system. Barring implementation issues, HIP-3 inherits Hyperliquid's carefully designed mathematical solvency guarantees.
diff --git a/docs/perps/hyperliquid/HIP-3.md b/docs/perps/hyperliquid/HIP-3.md
index b816b426598..e95337210ef 100644
--- a/docs/perps/hyperliquid/HIP-3.md
+++ b/docs/perps/hyperliquid/HIP-3.md
@@ -1,20 +1,24 @@
 # HIP-3: Builder-deployed perpetuals
 
-The Hyperliquid protocol will support builder-deployed perps (HIP-3), a key milestone toward fully decentralizing the perp listing process. An MVP of this feature is live on testnet. Feedback is appreciated during this testing phase. Note that numbers and specifications below are not finalized. Builder-deployed perps share many features with HyperCore spot deployments:
+The Hyperliquid protocol supports permissionless builder-deployed perps (HIP-3), a key milestone toward fully decentralizing the perp listing process.&#x20;
 
-1. Deployments allocate new performant onchain orderbooks on HyperCore.
-2. Deployment gas in HYPE is paid through a Dutch auction every 31 hours. There is a single Dutch auction across all HIP-3 perp DEXs.
-3. Deployers can set a fee share of up to 50%. A difference is that the deployer can configure additional fees on top of the base fee rate. Fee share applies to the total configured fee. The fee share configuration transaction for deployers will be documented once live on testnet.
-4. Deployments are fully permissionless.
-
-The deployer of a perp market is also responsible for
+The deployer of a perp market is responsible for
 
 1. Market definition, including the oracle definition and contract specifications
 2. Market operation, including setting oracle prices, leverage limits, and settling the market if needed
 
-Perp deployment composes with HyperCore multisig to support protocolized market deployment and operation.&#x20;
+HIP-3 inherits the HyperCore stack including its high performance margining and order books. For example, the API to trade HIP-3 perps is unified with other HyperCore actions. To trade HIP-3 assets, the asset ID simply needs to be set using the schema [here](https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/api/asset-ids).
 
-To ensure high quality markets and protect users, deployers must maintain 500k staked HYPE. In the event of malicious market operation, validators have the authority to slash the deployer’s stake by conducting a stake-weighted vote. Even if the deployer has unstaked and initiated a staking withdrawal, the stake is still slashable during the 7-day unstaking queue.&#x20;
+## Spec
+
+1. The staking requirement for mainnet will be 500k HYPE. This requirement is expected to decrease over time as the infrastructure matures. Any amount staked above the most recent requirement can be unstaked. The staking requirement is maintained for 30 days even after all of the deployer's perps have been halted.
+2. Any deployer that meets the staking requirement can deploy one perp dex. As a reminder, each perp dex features independent margining, order books, and deployer settings. A future upgrade may support multiple dex deployments sharing the same deployer and staking requirement.
+3. Any quote asset can be used as the collateral asset for a dex. As a reminder, assets that fail to meet the permissionless quote asset requirements will lose quote asset status based on onchain validator vote. Such a vote would also disable perp dexs that use this asset as collateral.
+4. HIP-3 deployers are not subject to slashing related to quote assets. On a future upgrade, dexs with disabled quote assets would support migration to a new collateral token. This is not expected to happen on mainnet, as quote token deployers have their separate staking and slashing conditions. In summary, the quote asset choice is important for trading fee and product considerations, but is not an existential risk for HIP-3 deployers.
+5. The first 3 assets deployed in any perp dex do not require auction participation. Additional assets go through a Dutch auction with the same hyperparameters (including frequency and minimum price) as the HIP-1 auction. The HIP-3 auction for additional perps is shared across all perp dexs. Future upgrades will support improved ergonomics around reserving assets for time-sensitive future deployments.
+6. Isolated-only margin mode is required. Cross margin will be supported in a future upgrade.
+7. HIP-3 markets incorporate the usual sources of trading fee discounts, including staking discounts, referral rewards, and aligned collateral discount. From the deployer perspective, the fee share is fixed at 50%. From the user perspective, fees are 2x the usual fees on validator-operated perp markets. The net effect is that the protocol collects the same fee regardless of whether the trade is on an HIP-3 or a validator-operated perp. User rebates are unaffected, and do not interact with the deployer. Deployer configurability of fees will be supported in a future upgrade.
+8. Aligned stablecoin collateral will automatically receive reduced fees once the alignment condition (which is being updated based on user and deployer feedback) is implemented.
 
 ## Settlement
 
@@ -26,29 +30,12 @@ Once all assets are settled, a deployer's required stake is free to be unstaked.
 
 While the oracle is completely general at the protocol level, perps make the most mathematical sense when there is a well-defined underlying asset or data feed which is difficult to manipulate and has underlying economic significance. Most price indices are not amenable as perp oracle sources. Deployers should consider edge cases carefully before listing markets, as they are subject to slashing for all listed markets on their DEX.
 
-## Open interest caps
-
-Builder-deployed perp markets are subject to two types of open interest caps: notional (sum of absolute position size times mark price) and size (sum of absolute position sizes).&#x20;
-
-Notional open interest caps are enforced on the total open interest summed over all assets within the DEX, as well as per-asset. Perp deployers can set a custom open interest cap per asset, which is documented in <https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/api/hip-3-deployer-actions>.
-
-Size-denominated open interest caps are only enforced per-asset. Size-denominated open interest caps are currently a constant 1B per asset, so a reasonable default would be to set `szDecimals` such that the minimal size increment is $1-10 at the initial mark price.
-
-## Initial mainnet spec
-
-1. The staking requirement for mainnet will be 500k HYPE. This requirement is expected to decrease over time as the infrastructure matures. Any amount staked above the most recent requirement can be unstaked. The staking requirement is maintained for 30 days even after all of the deployer's perps have been halted.
-2. Any deployer that meets the staking requirement can deploy one perp dex. As a reminder, each perp dex features independent margining, order books, and deployer settings. A future upgrade may support multiple dex deployments sharing the same deployer and staking requirement.
-3. Any quote asset can be used as the collateral asset for a dex. As a reminder, assets that fail to meet the permissionless quote asset requirements will lose quote asset status based on onchain validator vote. Such a vote would also disable perp dexs that use this asset as collateral.
-4. HIP-3 deployers are not subject to slashing related to quote assets. On a future upgrade, dexs with disabled quote assets would support migration to a new collateral token. This is not expected to happen on mainnet, as quote token deployers have their separate staking and slashing conditions. In summary, the quote asset choice is important for trading fee and product considerations, but is not an existential risk for HIP-3 deployers.
-5. The first 3 assets deployed in any perp dex do not require auction participation. Additional assets go through a Dutch auction with the same hyperparameters (including frequency and minimum price) as the HIP-1 auction. The HIP-3 auction for additional perps is shared across all perp dexs. Future upgrades will support improved ergonomics around reserving assets for time-sensitive future deployments.
-6. Isolated-only margin mode is required. Cross margin will be supported in a future upgrade.
-7. HIP-3 markets incorporate the usual sources of trading fee discounts, including staking discounts, referral rewards, and aligned collateral discount. From the deployer perspective, the fee share is fixed at 50%. From the user perspective, fees are 2x the usual fees on validator-operated perp markets. The net effect is that the protocol collects the same fee regardless of whether the trade is on an HIP-3 or a validator-operated perp. User rebates are unaffected, and do not interact with the deployer. Deployer configurability of fees will be supported in a future upgrade.
-8. Aligned stablecoin collateral will automatically receive reduced fees once the alignment condition (which is being updated based on user and deployer feedback) is implemented.
-
-## **HIP-3 Slashing**&#x20;
+## **Slashing**&#x20;
 
 Note: in all usages below, "slashing" is only in the context of HIP-3.&#x20;
 
+To ensure high quality markets and protect users, deployers must maintain 500k staked HYPE. In the event of malicious market operation, validators have the authority to slash the deployer’s stake by conducting a stake-weighted vote. Even if the deployer has unstaked and initiated a staking withdrawal, the stake is still slashable during the 7-day unstaking queue.&#x20;
+
 While slashing is ultimately by validator quorum, the protocol guidelines have been distilled from careful testnet analysis, user feedback, and deployer feedback. The guiding principle is that slashing is to prevent behavior that jeopardizes protocol correctness, uptime, or performance. A useful rule of thumb is that any slashable behavior should be accompanied by a bug fix in the protocol implementation. Therefore, HIP-3 should not require slashing in its final state. However, slashing is an important safety mechanism for a practical rollout of this large feature set.&#x20;
 
 Slashing is technical and does not distinguish between malicious and incompetent behavior. Relatedly, slashing does not distinguish between
diff --git a/docs/perps/hyperliquid/exchange-endpoint.md b/docs/perps/hyperliquid/exchange-endpoint.md
index bbb0cb60db7..6763c89092e 100644
--- a/docs/perps/hyperliquid/exchange-endpoint.md
+++ b/docs/perps/hyperliquid/exchange-endpoint.md
@@ -922,7 +922,7 @@ If set, actions on HIP-3 perps will automatically transfer collateral from valid
 
 #### Request Body
 
-<table><thead><tr><th width="106.30859375">Name</th><th width="159.5078125">Type</th><th>Description</th></tr></thead><tbody><tr><td>action<mark style="color:red;">*</mark></td><td>Object</td><td><p>{</p><p>  "type": "userEnableDexAbstraction",</p><p>  "hyperliquidChain": "Mainnet" (on testnet use "Testnet" instead),</p><p>  "signatureChainId": the id of the chain used when signing in hexadecimal format; e.g. "0xa4b1" for Arbitrum,</p><p>  "user": address in 42-character hexadecimal format. Can be a sub-account of the user,</p><p>  "enabled": boolean,</p><p>  "nonce": current timestamp in milliseconds as a Number, should match nonce</p><p>}</p></td></tr><tr><td>nonce<mark style="color:red;">*</mark></td><td>Number</td><td>Recommended to use the current timestamp in milliseconds</td></tr><tr><td>signature<mark style="color:red;">*</mark></td><td>Object</td><td></td></tr></tbody></table>
+<table><thead><tr><th width="106.30859375">Name</th><th width="159.5078125">Type</th><th>Description</th></tr></thead><tbody><tr><td>action<mark style="color:red;">*</mark></td><td>Object</td><td><p>{</p><p>  "type": "userDexAbstraction",</p><p>  "hyperliquidChain": "Mainnet" (on testnet use "Testnet" instead),</p><p>  "signatureChainId": the id of the chain used when signing in hexadecimal format; e.g. "0xa4b1" for Arbitrum,</p><p>  "user": address in 42-character hexadecimal format. Can be a sub-account of the user,</p><p>  "enabled": boolean,</p><p>  "nonce": current timestamp in milliseconds as a Number, should match nonce</p><p>}</p></td></tr><tr><td>nonce<mark style="color:red;">*</mark></td><td>Number</td><td>Recommended to use the current timestamp in milliseconds</td></tr><tr><td>signature<mark style="color:red;">*</mark></td><td>Object</td><td></td></tr></tbody></table>
 
 {% tabs %}
 {% tab title="200: OK Successful Response" %}
@@ -961,3 +961,29 @@ Same effect as UserDexAbstraction above, but only works if setting the value fro
 
 {% endtab %}
 {% endtabs %}
+
+## Validator vote on risk-free rate for aligned quote asset
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                        | Type   | Description                                                                                               |
+| ------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------- |
+| action<mark style="color:red;">\*</mark>    | Object | <p>{</p><p> "type": "validatorL1Stream",</p><p> "riskFreeRate": String // e.g. "0.04" for 4% </p><p>}</p> |
+| nonce<mark style="color:red;">\*</mark>     | Number | Recommended to use the current timestamp in milliseconds                                                  |
+| signature<mark style="color:red;">\*</mark> | Object |                                                                                                           |
+
+{% tabs %}
+{% tab title="200: OK Successful Response" %}
+
+```
+{'status': 'ok', 'response': {'type': 'default'}}
+```
+
+{% endtab %}
+{% endtabs %}
diff --git a/docs/perps/hyperliquid/frontend-checks.md b/docs/perps/hyperliquid/frontend-checks.md
new file mode 100644
index 00000000000..c74b8cd99be
--- /dev/null
+++ b/docs/perps/hyperliquid/frontend-checks.md
@@ -0,0 +1,231 @@
+# Frontend checks
+
+There are many ways to reach invalid configurations during the spot deploy process. To avoid this, deployers can try intended deployments on testnet first. For automated deployment integrations, the following is a list of client-side checks that may be helpful.
+
+### Token Deployment
+
+```typescript
+if (szDecimals === undefined || weiDecimals === undefined) {
+  displayAlert('Size decimals and Wei decimals must be specified.', 'error');
+  return;
+}
+if (szDecimals > 2 || szDecimals < 0) {
+  displayAlert('Size decimals must be between 0 and 2.', 'error');
+  return;
+}
+if (weiDecimals > 8 || weiDecimals < 0) {
+  displayAlert('Wei decimals must be between 0 and 8.', 'error');
+  return;
+}
+if (szDecimals + 5 > weiDecimals) {
+  displayAlert('weiDecimals must be at least szDecimals + 5.', 'error');
+  return;
+}
+```
+
+### Set Deployer Trading Fee Share
+
+```typescript
+if (deployerTradingFeeShare === undefined) {
+  displayAlert('Deployer trading fee share must be specified.', 'error');
+  return;
+}
+
+if (deployerTradingFeeShare < 0 || deployerTradingFeeShare > 100) {
+  displayAlert(
+    'Deployer trading fee share must be between 0 and 100.',
+    'error',
+  );
+  return;
+}
+```
+
+### User and Anchor Token Genesis
+
+```typescript
+if (blacklistUser !== '') {
+  if (amount !== '' || user !== '' || existingToken !== undefined) {
+    displayAlert('Can only specify blacklist user by itself.', 'error');
+    return;
+  }
+} else {
+  if (amount.toString().length > 19) {
+    displayAlert(`Can only enter up to 19 digits for Amount.`, 'error');
+    return;
+  }
+
+  const hypotheticalTotalSupply =
+    BigInt(activeTokenDeployState?.totalGenesisBalanceWei ?? 0) +
+    BigInt(amount);
+
+  if (hypotheticalTotalSupply > MAX_UINT_64 / BigInt(2)) {
+    displayAlert('Total supply would be too large with this addition', 'error');
+    return;
+  }
+
+  const minStartPrice = getMinStartPrice(szDecimals);
+  if (
+    minStartPrice * Number(formatUnits(hypotheticalTotalSupply, weiDecimals)) >
+    MAX_MARKET_CAP_MILLIONS_START * 1e6
+  ) {
+    displayAlert(
+      'Total supply would be too large even at smallest possible Hyperliquidity initial price',
+      'error',
+    );
+    return;
+  }
+
+  if (
+    (!isAddress(user) && existingToken === undefined) ||
+    (isAddress(user) && existingToken !== undefined)
+  ) {
+    displayAlert(
+      'Exactly one of user or existing token must be specified.',
+      'error',
+    );
+    return;
+  }
+
+  if (user.toLowerCase() === HYPERLIQUIDITY_USER) {
+    displayAlert(
+      'Cannot assign genesis balance to hyperliquidity user',
+      'error',
+    );
+    return;
+  }
+}
+
+if (!activeTokenDeployState || activeTokenDeployState.token === undefined) {
+  displayAlert('Need to handle fetching previously created token.', 'error');
+  return;
+}
+
+const minWei = getWei(100000, activeTokenDeployState.spec.weiDecimals);
+if (
+  existingToken !== undefined &&
+  !isAddress(user) &&
+  BigInt(amount) < BigInt(minWei)
+) {
+  displayAlert(
+    `Using an existing token as anchor token for genesis requires a minimum amount of 100,000 ${activeTokenDeployState.spec.name} (wei=${minWei}).`,
+    'error',
+  );
+  return;
+}
+```
+
+### Hyperliquidity
+
+<pre class="language-typescript"><code class="lang-typescript">    const PX_GAP = 0.003;
+    const MAX_N_ORDERS = 4000;
+    const MAX_MARKET_CAP_BILLIONS_END = 100;
+    const MIN_MARKET_CAP_BILLIONS_END = 1;
+<strong>    const MAX_MARKET_CAP_MILLIONS_START = 10;
+</strong><strong>    const MAX_UINT_64 = BigInt("18446744073709551615");
+</strong>
+    if (
+      startPx === undefined ||
+      orderSz === undefined ||
+      orderCount === undefined ||
+      nSeededLevels === undefined
+    ) {
+      displayAlert(
+        "Lowest price, order size, number of orders and number of seeded levels must be specified.",
+        "error"
+      );
+      return;
+    }
+
+    const minStartPx = getMinStartPx(szDecimals);
+    if (startPx &#x3C; minStartPx) {
+      displayAlert(
+        `First order price must be at least ${roundPx(
+          minStartPx,
+          szDecimals,
+          true
+        )}`,
+        "error"
+      );
+      return;
+    }
+
+    if (startPx * orderSz &#x3C; 1) {
+      displayAlert("First order size must be at least 1 USDC", "error");
+      return;
+    }
+
+    if (!activeTokenDeployState || activeTokenDeployState.spots.length === 0) {
+      displayAlert(
+        "Unexpected error: spot and token should already be registered.",
+        "error"
+      );
+      return;
+    }
+
+    const pxRange = Math.ceil(Math.pow(1 + PX_GAP, orderCount));
+    const endPx = startPx * pxRange;
+    // 1e9 instead of 1e8 because backend checks against u64::MAX / 10
+    if (
+      pxRange > 1_000_000 ||
+      hyperliquidityTotalWei > MAX_UINT_64 ||
+      endPx * orderSz * 1e9 > MAX_UINT_64
+    ) {
+      displayAlert(
+        "Total Hyperliquidity token allocation is too large.",
+        "error"
+      );
+      return;
+    }
+
+    const minTotalGenesisBalanceSz = 100_000_000;
+    if (totalSupply * Math.pow(10, szDecimals) &#x3C; minTotalGenesisBalanceSz) {
+      displayAlert(
+        `Total genesis balance must be at least ${minTotalGenesisBalanceSz} lots (minimal tradeable units, i.e. one lot is 0.01 if szDecimals is 2)`,
+        "error"
+      );
+      return;
+    }
+
+    const endMarketCap = totalSupply * endPx;
+    if (endMarketCap > MAX_MARKET_CAP_BILLIONS_END * 1e9) {
+      displayAlert(
+        `Market cap must be &#x3C;${MAX_MARKET_CAP_BILLIONS_END}B USDC at Hyperliquidity end price`,
+        "error"
+      );
+      return;
+    }
+
+    if (endMarketCap &#x3C; MIN_MARKET_CAP_BILLIONS_END * 1e9) {
+      displayAlert(
+        `Market cap must be >${MIN_MARKET_CAP_BILLIONS_END}B USDC at Hyperliquidity end price`,
+        "error"
+      );
+      return;
+    }
+
+    if (totalSupply * startPx > MAX_MARKET_CAP_MILLIONS_START * 1e6) {
+      displayAlert(
+        `Market cap must be &#x3C;${MAX_MARKET_CAP_MILLIONS_START}M USDC at Hyperliquidity start price`,
+        "error"
+      );
+      return;
+    }
+
+    if (orderCount &#x3C; 10) {
+      displayAlert("Hyperliquidity must have at least 10 orders", "error");
+      return;
+    }
+
+    if ((orderSz * orderCount) / totalSupply &#x3C;= 0.01) {
+      displayAlert("Hyperliquidity must be >1% of total supply", "error");
+      return;
+    }
+    
+    if (usdcNeeded > webData.clearinghouseState.withdrawable) {
+      displayAlert(
+        "Insufficient perps USDC to deploy seeded levels",
+        "error"
+      );
+      return;
+    }
+</code></pre>
diff --git a/docs/perps/hyperliquid/info-endpoint.md b/docs/perps/hyperliquid/info-endpoint.md
new file mode 100644
index 00000000000..0293f738741
--- /dev/null
+++ b/docs/perps/hyperliquid/info-endpoint.md
@@ -0,0 +1,1295 @@
+# Info endpoint
+
+### Pagination
+
+Responses that take a time range will only return 500 elements or distinct blocks of data. To query larger ranges, use the last returned timestamp as the next `startTime` for pagination.
+
+### Perpetuals vs Spot
+
+The endpoints in this section as well as websocket subscriptions work for both Perpetuals and Spot. For perpetuals `coin` is the name returned in the `meta` response. For Spot, coin should be `PURR/USDC` for PURR, and `@{index}` e.g. `@1` for all other spot tokens where index is the index of the spot pair in the `universe` field of the `spotMeta` response. For example, the spot index for HYPE on mainnet is `@107` because the token index of HYPE is 150 and the spot pair `@107` has tokens `[150, 0]`. Note that some assets may be remapped on user interfaces. For example, `BTC/USDC` on app.hyperliquid.xyz corresponds to `UBTC/USDC` on mainnet HyperCore. The L1 name on the [token details page](https://app.hyperliquid.xyz/explorer/token/0x8f254b963e8468305d409b33aa137c67) can be used to detect remappings.
+
+### User address
+
+To query the account data associated with a master or sub-account, you must pass in the actual address of that account. A common pitfall is to use an agent wallet's address which leads to an empty result.
+
+## Retrieve mids for all coins
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+Note that if the book is empty, the last trade price will be used as a fallback
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                                                                                            |
+| -------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "allMids"                                                                                                                              |
+| dex                                    | String | Perp dex name. Defaults to the empty string which represents the first perp dex. Spot mids are only included with the first perp dex.. |
+
+{% tabs %}
+{% tab title="200: OK Successful Response" %}
+
+```json
+{
+  "APE": "4.33245",
+  "ARB": "1.21695"
+}
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Retrieve a user's open orders
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+See a user's open orders
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                                                                                                  |
+| -------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "openOrders"                                                                                                                                 |
+| user<mark style="color:red;">\*</mark> | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000.                                                 |
+| dex                                    | String | Perp dex name. Defaults to the empty string which represents the first perp dex. Spot open orders are only included with the first perp dex. |
+
+{% tabs %}
+{% tab title="200: OK Successful R" %}
+
+```json
+[
+  {
+    "coin": "BTC",
+    "limitPx": "29792.0",
+    "oid": 91490942,
+    "side": "A",
+    "sz": "0.0",
+    "timestamp": 1681247412573
+  }
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Retrieve a user's open orders with additional frontend info
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                                                                                                  |
+| -------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "frontendOpenOrders"                                                                                                                         |
+| user<mark style="color:red;">\*</mark> | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000.                                                 |
+| dex                                    | String | Perp dex name. Defaults to the empty string which represents the first perp dex. Spot open orders are only included with the first perp dex. |
+
+{% tabs %}
+{% tab title="200: OK " %}
+
+```json
+[
+  {
+    "coin": "BTC",
+    "isPositionTpsl": false,
+    "isTrigger": false,
+    "limitPx": "29792.0",
+    "oid": 91490942,
+    "orderType": "Limit",
+    "origSz": "5.0",
+    "reduceOnly": false,
+    "side": "A",
+    "sz": "5.0",
+    "timestamp": 1681247412573,
+    "triggerCondition": "N/A",
+    "triggerPx": "0.0"
+  }
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Retrieve a user's fills
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+Returns at most 2000 most recent fills
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                                                                                                                                                               |
+| -------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "userFills"                                                                                                                                                                                               |
+| user<mark style="color:red;">\*</mark> | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000.                                                                                                              |
+| aggregateByTime                        | bool   | When true, partial fills are combined when a crossing order gets filled by multiple different resting orders. Resting orders filled by multiple crossing orders are only aggregated if in the same block. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+[
+  // Perp fill
+  {
+    "closedPnl": "0.0",
+    "coin": "AVAX",
+    "crossed": false,
+    "dir": "Open Long",
+    "hash": "0xa166e3fa63c25663024b03f2e0da011a00307e4017465df020210d3d432e7cb8",
+    "oid": 90542681,
+    "px": "18.435",
+    "side": "B",
+    "startPosition": "26.86",
+    "sz": "93.53",
+    "time": 1681222254710,
+    "fee": "0.01", // the total fee, inclusive of builderFee below
+    "feeToken": "USDC",
+    "builderFee": "0.01", // this is optional and will not be present if 0
+    "tid": 118906512037719
+  },
+  // Spot fill - note the difference in the "coin" format. Refer to
+  // https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/api/asset-ids
+  // for more information on how spot asset IDs work
+  {
+    "coin": "@107",
+    "px": "18.62041381",
+    "sz": "43.84",
+    "side": "A",
+    "time": 1735969713869,
+    "startPosition": "10659.65434798",
+    "dir": "Sell",
+    "closedPnl": "8722.988077",
+    "hash": "0x2222138cc516e3fe746c0411dd733f02e60086f43205af2ae37c93f6a792430b",
+    "oid": 59071663721,
+    "crossed": true,
+    "fee": "0.304521",
+    "tid": 907359904431134,
+    "feeToken": "USDC"
+  }
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Retrieve a user's fills by time
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+Returns at most 2000 fills per response and only the 10000 most recent fills are available
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                        | Type   | Description                                                                                                                                                                                               |
+| ------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark>      | String | userFillsByTime                                                                                                                                                                                           |
+| user<mark style="color:red;">\*</mark>      | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000.                                                                                                              |
+| startTime<mark style="color:red;">\*</mark> | int    | Start time in milliseconds, inclusive                                                                                                                                                                     |
+| endTime                                     | int    | End time in milliseconds, inclusive. Defaults to current time.                                                                                                                                            |
+| aggregateByTime                             | bool   | When true, partial fills are combined when a crossing order gets filled by multiple different resting orders. Resting orders filled by multiple crossing orders are only aggregated if in the same block. |
+
+{% tabs %}
+{% tab title="200: OK Number of fills is limited to 2000" %}
+
+```json
+[
+  // Perp fill
+  {
+    "closedPnl": "0.0",
+    "coin": "AVAX",
+    "crossed": false,
+    "dir": "Open Long",
+    "hash": "0xa166e3fa63c25663024b03f2e0da011a00307e4017465df020210d3d432e7cb8",
+    "oid": 90542681,
+    "px": "18.435",
+    "side": "B",
+    "startPosition": "26.86",
+    "sz": "93.53",
+    "time": 1681222254710,
+    "fee": "0.01", // the total fee, inclusive of builderFee below
+    "feeToken": "USDC",
+    "builderFee": "0.01", // this is optional and will not be present if 0
+    "tid": 118906512037719
+  },
+  // Spot fill - note the difference in the "coin" format. Refer to
+  // https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/api/asset-ids
+  // for more information on how spot asset IDs work
+  {
+    "coin": "@107",
+    "px": "18.62041381",
+    "sz": "43.84",
+    "side": "A",
+    "time": 1735969713869,
+    "startPosition": "10659.65434798",
+    "dir": "Sell",
+    "closedPnl": "8722.988077",
+    "hash": "0x2222138cc516e3fe746c0411dd733f02e60086f43205af2ae37c93f6a792430b",
+    "oid": 59071663721,
+    "crossed": true,
+    "fee": "0.304521",
+    "tid": 907359904431134,
+    "feeToken": "USDC"
+  }
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query user rate limits
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Request Body
+
+| Name | Type   | Description                                                                                 |
+| ---- | ------ | ------------------------------------------------------------------------------------------- |
+| user | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000 |
+| type | String | userRateLimit                                                                               |
+
+{% tabs %}
+{% tab title="200: OK A successful response" %}
+
+```json
+{
+  "cumVlm": "2854574.593578",
+  "nRequestsUsed": 2890, // max(0, cumulative_used minus reserved)
+  "nRequestsCap": 2864574,
+  "nRequestsSurplus": 0 // max(0, reserved minus cumulative_used)
+}
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query order status by oid or cloid
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Request Body
+
+| Name                                   | Type             | Description                                                                                  |
+| -------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------- |
+| user<mark style="color:red;">\*</mark> | String           | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+| type<mark style="color:red;">\*</mark> | String           | "orderStatus"                                                                                |
+| oid<mark style="color:red;">\*</mark>  | uint64 or string | Either u64 representing the order id or 16-byte hex string representing the client order id  |
+
+The \<status> string returned has the following possible values:
+
+| Order status                              | Explanation                                                                       |
+| ----------------------------------------- | --------------------------------------------------------------------------------- |
+| open                                      | Placed successfully                                                               |
+| filled                                    | Filled                                                                            |
+| canceled                                  | Canceled by user                                                                  |
+| triggered                                 | Trigger order triggered                                                           |
+| rejected                                  | Rejected at time of placement                                                     |
+| marginCanceled                            | Canceled because insufficient margin to fill                                      |
+| vaultWithdrawalCanceled                   | Vaults only. Canceled due to a user's withdrawal from vault                       |
+| openInterestCapCanceled                   | Canceled due to order being too aggressive when open interest was at cap          |
+| selfTradeCanceled                         | Canceled due to self-trade prevention                                             |
+| reduceOnlyCanceled                        | Canceled reduced-only order that does not reduce position                         |
+| siblingFilledCanceled                     | TP/SL only. Canceled due to sibling ordering being filled                         |
+| delistedCanceled                          | Canceled due to asset delisting                                                   |
+| liquidatedCanceled                        | Canceled due to liquidation                                                       |
+| scheduledCancel                           | API only. Canceled due to exceeding scheduled cancel deadline (dead man's switch) |
+| tickRejected                              | Rejected due to invalid tick price                                                |
+| minTradeNtlRejected                       | Rejected due to order notional below minimum                                      |
+| perpMarginRejected                        | Rejected due to insufficient margin                                               |
+| reduceOnlyRejected                        | Rejected due to reduce only                                                       |
+| badAloPxRejected                          | Rejected due to post-only immediate match                                         |
+| iocCancelRejected                         | Rejected due to IOC not able to match                                             |
+| badTriggerPxRejected                      | Rejected due to invalid TP/SL price                                               |
+| marketOrderNoLiquidityRejected            | Rejected due to lack of liquidity for market order                                |
+| positionIncreaseAtOpenInterestCapRejected | Rejected due to open interest cap                                                 |
+| positionFlipAtOpenInterestCapRejected     | Rejected due to open interest cap                                                 |
+| tooAggressiveAtOpenInterestCapRejected    | Rejected due to price too aggressive at open interest cap                         |
+| openInterestIncreaseRejected              | Rejected due to open interest cap                                                 |
+| insufficientSpotBalanceRejected           | Rejected due to insufficient spot balance                                         |
+| oracleRejected                            | Rejected due to price too far from oracle                                         |
+| perpMaxPositionRejected                   | Rejected due to exceeding margin tier limit at current leverage                   |
+
+{% tabs %}
+{% tab title="200: OK A successful response" %}
+
+```json
+{
+  "status": "order",
+  "order": {
+    "order": {
+      "coin": "ETH",
+      "side": "A",
+      "limitPx": "2412.7",
+      "sz": "0.0",
+      "oid": 1,
+      "timestamp": 1724361546645,
+      "triggerCondition": "N/A",
+      "isTrigger": false,
+      "triggerPx": "0.0",
+      "children": [],
+      "isPositionTpsl": false,
+      "reduceOnly": true,
+      "orderType": "Market",
+      "origSz": "0.0076",
+      "tif": "FrontendMarket",
+      "cloid": null
+    },
+    "status": <status>,
+    "statusTimestamp": 1724361546645
+  }
+}
+```
+
+{% endtab %}
+
+{% tab title="200: OK Missing Order" %}
+
+```json
+{
+  "status": "unknownOid"
+}
+```
+
+{% endtab %}
+{% endtabs %}
+
+## L2 book snapshot
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+Returns at most 20 levels per side
+
+**Headers**
+
+| Name                                           | Value              |
+| ---------------------------------------------- | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | "application/json" |
+
+**Body**
+
+| Name                                   | Type   | Description                                                                                                                               |
+| -------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "l2Book"                                                                                                                                  |
+| coin<mark style="color:red;">\*</mark> | String | coin                                                                                                                                      |
+| nSigFigs                               | Number | Optional field to aggregate levels to `nSigFigs` significant figures. Valid values are 2, 3, 4, 5, and `null`, which means full precision |
+| mantissa                               | Number | Optional field to aggregate levels. This field is only allowed if nSigFigs is 5. Accepts values of 1, 2 or 5.                             |
+
+**Response**
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+{
+  "coin": "BTC",
+  "time": 1754450974231,
+  "levels": [
+    [
+      {
+        "px": "113377.0",
+        "sz": "7.6699",
+        "n": 17 // number of levels
+      },
+      {
+        "px": "113376.0",
+        "sz": "4.13714",
+        "n": 8
+      }
+    ],
+    [
+      {
+        "px": "113397.0",
+        "sz": "0.11543",
+        "n": 3
+      }
+    ]
+  ]
+}
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Candle snapshot
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+Only the most recent 5000 candles are available
+
+Supported intervals: "1m", "3m", "5m", "15m", "30m", "1h", "2h", "4h", "8h", "12h", "1d", "3d", "1w", "1M"
+
+**Headers**
+
+| Name                                           | Value              |
+| ---------------------------------------------- | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | "application/json" |
+
+**Body**
+
+| Name                                   | Type   | Description                                                                                    |
+| -------------------------------------- | ------ | ---------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "candleSnapshot"                                                                               |
+| req<mark style="color:red;">\*</mark>  | Object | {"coin": \<coin>, "interval": "15m", "startTime": \<epoch millis>, "endTime": \<epoch millis>} |
+
+**Response**
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+[
+  {
+    "T": 1681924499999,
+    "c": "29258.0",
+    "h": "29309.0",
+    "i": "15m",
+    "l": "29250.0",
+    "n": 189,
+    "o": "29295.0",
+    "s": "BTC",
+    "t": 1681923600000,
+    "v": "0.98639"
+  }
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Check builder fee approval
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+**Headers**
+
+| Name                                           | Value              |
+| ---------------------------------------------- | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | "application/json" |
+
+**Body**
+
+| Name                                      | Type   | Description                                                                                  |
+| ----------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark>    | String | "maxBuilderFee"                                                                              |
+| user<mark style="color:red;">\*</mark>    | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+| builder<mark style="color:red;">\*</mark> | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+**Response**
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+1 // maximum fee approved in tenths of a basis point i.e. 1 means 0.001%
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Retrieve a user's historical orders
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+Returns at most 2000 most recent historical orders
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                                                  |
+| -------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "historicalOrders"                                                                           |
+| user<mark style="color:red;">\*</mark> | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+[
+  {
+    "order": {
+      "coin": "ETH",
+      "side": "A",
+      "limitPx": "2412.7",
+      "sz": "0.0",
+      "oid": 1,
+      "timestamp": 1724361546645,
+      "triggerCondition": "N/A",
+      "isTrigger": false,
+      "triggerPx": "0.0",
+      "children": [],
+      "isPositionTpsl": false,
+      "reduceOnly": true,
+      "orderType": "Market",
+      "origSz": "0.0076",
+      "tif": "FrontendMarket",
+      "cloid": null
+    },
+    "status": "filled" | "open" | "canceled" | "triggered" | "rejected" | "marginCanceled",
+    "statusTimestamp": 1724361546645
+  }
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Retrieve a user's TWAP slice fills
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+Returns at most 2000 most recent TWAP slice fills
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                                                  |
+| -------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "userTwapSliceFills"                                                                         |
+| user<mark style="color:red;">\*</mark> | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+[
+  {
+    "fill": {
+      "closedPnl": "0.0",
+      "coin": "AVAX",
+      "crossed": true,
+      "dir": "Open Long",
+      "hash": "0x0000000000000000000000000000000000000000000000000000000000000000", // TWAP fills have a hash of 0
+      "oid": 90542681,
+      "px": "18.435",
+      "side": "B",
+      "startPosition": "26.86",
+      "sz": "93.53",
+      "time": 1681222254710,
+      "fee": "0.01",
+      "feeToken": "USDC",
+      "tid": 118906512037719
+    },
+    "twapId": 3156
+  }
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Retrieve a user's subaccounts
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                                                  |
+| -------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "subAccounts"                                                                                |
+| user<mark style="color:red;">\*</mark> | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+[
+  {
+    "name": "Test",
+    "subAccountUser": "0x035605fc2f24d65300227189025e90a0d947f16c",
+    "master": "0x8c967e73e6b15087c42a10d344cff4c96d877f1d",
+    "clearinghouseState": {
+      "marginSummary": {
+        "accountValue": "29.78001",
+        "totalNtlPos": "0.0",
+        "totalRawUsd": "29.78001",
+        "totalMarginUsed": "0.0"
+      },
+      "crossMarginSummary": {
+        "accountValue": "29.78001",
+        "totalNtlPos": "0.0",
+        "totalRawUsd": "29.78001",
+        "totalMarginUsed": "0.0"
+      },
+      "crossMaintenanceMarginUsed": "0.0",
+      "withdrawable": "29.78001",
+      "assetPositions": [],
+      "time": 1733968369395
+    },
+    "spotState": {
+      "balances": [
+        {
+          "coin": "USDC",
+          "token": 0,
+          "total": "0.22",
+          "hold": "0.0",
+          "entryNtl": "0.0"
+        }
+      ]
+    }
+  }
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Retrieve details for a vault
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                           | Type   | Description                                                                                  |
+| ---------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark>         | String | "vaultDetails"                                                                               |
+| vaultAddress<mark style="color:red;">\*</mark> | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+| user                                           | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+{
+  "name": "Test",
+  "vaultAddress": "0xdfc24b077bc1425ad1dea75bcb6f8158e10df303",
+  "leader": "0x677d831aef5328190852e24f13c46cac05f984e7",
+  "description": "This community-owned vault provides liquidity to Hyperliquid through multiple market making strategies, performs liquidations, and accrues platform fees.",
+  "portfolio": [
+    [
+      "day",
+      {
+        "accountValueHistory": [
+          [
+            1734397526634,
+            "329265410.90790099"
+          ]
+        ],
+        "pnlHistory": [
+          [
+            1734397526634,
+            "0.0"
+          ],
+        ],
+        "vlm": "0.0"
+      }
+    ],
+    [
+      "week" | "month" | "allTime" | "perpDay" | "perpWeek" | "perpMonth" | "perpAllTime",
+      {...}
+    ]
+  ],
+  "apr": 0.36387129259090006,
+  "followerState": null,
+  "leaderFraction": 0.0007904828725729887,
+  "leaderCommission": 0,
+  "followers": [
+    {
+      "user": "0x005844b2ffb2e122cf4244be7dbcb4f84924907c",
+      "vaultEquity": "714491.71026243",
+      "pnl": "3203.43026143",
+      "allTimePnl": "79843.74476743",
+      "daysFollowing": 388,
+      "vaultEntryTime": 1700926145201,
+      "lockupUntil": 1734824439201
+    }
+  ],
+  "maxDistributable": 94856870.164485,
+  "maxWithdrawable": 742557.680863,
+  "isClosed": false,
+  "relationship": {
+    "type": "parent",
+    "data": {
+      "childAddresses": [
+        "0x010461c14e146ac35fe42271bdc1134ee31c703a",
+        "0x2e3d94f0562703b25c83308a05046ddaf9a8dd14",
+        "0x31ca8395cf837de08b24da3f660e77761dfb974b"
+      ]
+    }
+  },
+  "allowDeposits": true,
+  "alwaysCloseOnWithdraw": false
+}
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Retrieve a user's vault deposits
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                                                  |
+| -------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "userVaultEquities"                                                                          |
+| user<mark style="color:red;">\*</mark> | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+[
+  {
+    "vaultAddress": "0xdfc24b077bc1425ad1dea75bcb6f8158e10df303",
+    "equity": "742500.082809"
+  }
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query a user's role
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                                                  |
+| -------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "userRole"                                                                                   |
+| user<mark style="color:red;">\*</mark> | String | Address in 42-character hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="User" %}
+
+```
+{"role":"user"} # "missing", "user", "agent", "vault", or "subAccount"
+```
+
+{% endtab %}
+
+{% tab title="Agent" %}
+
+```
+{"role":"agent", "data": {"user": "0x..."}}
+```
+
+{% endtab %}
+
+{% tab title="Vault" %}
+
+```
+{"role":"vault"}
+```
+
+{% endtab %}
+
+{% tab title="Subaccount" %}
+
+```
+{"role":"subAccount", "data":{"master":"0x..."}}
+```
+
+{% endtab %}
+
+{% tab title="Missing" %}
+
+```
+{"role":"missing"}
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query a user's portfolio
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                          |
+| -------------------------------------- | ------ | -------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "portfolio"                                                          |
+| user<mark style="color:red;">\*</mark> | String | hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+[
+  [
+    "day",
+    {
+      "accountValueHistory": [
+        [
+          1741886630493,
+          "0.0"
+        ],
+        [
+          1741895270493,
+          "0.0"
+        ],
+        ...
+      ],
+      "pnlHistory": [
+        [
+          1741886630493,
+          "0.0"
+        ],
+        [
+          1741895270493,
+          "0.0"
+        ],
+        ...
+      ],
+      "vlm": "0.0"
+    }
+  ],
+  ["week", { ... }],
+  ["month", { ... }],
+  ["allTime", { ... }],
+  ["perpDay", { ... }],
+  ["perpWeek", { ... }],
+  ["perpMonth", { ... }],
+  ["perpAllTime", { ... }]
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query a user's referral information
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                          |
+| -------------------------------------- | ------ | -------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "referral"                                                           |
+| user<mark style="color:red;">\*</mark> | String | hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+{
+  "referredBy": {
+    "referrer": "0x5ac99df645f3414876c816caa18b2d234024b487",
+    "code": "TESTNET"
+  },
+  "cumVlm": "149428030.6628420055", // USDC Only
+  "unclaimedRewards": "11.047361", // USDC Only
+  "claimedRewards": "22.743781", // USDC Only
+  "builderRewards": "0.027802", // USDC Only
+  "tokenToState": [
+    0,
+    {
+      "cumVlm": "149428030.6628420055",
+      "unclaimedRewards": "11.047361",
+      "claimedRewards": "22.743781",
+      "builderRewards": "0.027802"
+    }
+  ],
+  "referrerState": {
+    "stage": "ready",
+    "data": {
+      "code": "TEST",
+      "referralStates": [
+        {
+          "cumVlm": "960652.017122",
+          "cumRewardedFeesSinceReferred": "196.838825",
+          "cumFeesRewardedToReferrer": "19.683748",
+          "timeJoined": 1679425029416,
+          "user": "0x11af2b93dcb3568b7bf2b6bd6182d260a9495728"
+        },
+        {
+          "cumVlm": "438278.672653",
+          "cumRewardedFeesSinceReferred": "97.628107",
+          "cumFeesRewardedToReferrer": "9.762562",
+          "timeJoined": 1679423947882,
+          "user": "0x3f69d170055913103a034a418953b8695e4e42fa"
+        }
+      ]
+    }
+  },
+  "rewardHistory": []
+}
+```
+
+{% endtab %}
+{% endtabs %}
+
+Note that rewardHistory is for legacy rewards. Claimed rewards are now returned in nonFundingLedgerUpdate
+
+## Query a user's fees
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                          |
+| -------------------------------------- | ------ | -------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "userFees"                                                           |
+| user<mark style="color:red;">\*</mark> | String | hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+{
+  "dailyUserVlm": [
+    {
+      "date": "2025-05-23",
+      "userCross": "0.0",
+      "userAdd": "0.0",
+      "exchange": "2852367.0770729999"
+    },
+    ...
+  ],
+  "feeSchedule": {
+    "cross": "0.00045",
+    "add": "0.00015",
+    "spotCross": "0.0007",
+    "spotAdd": "0.0004",
+    "tiers": {
+      "vip": [
+        {
+          "ntlCutoff": "5000000.0",
+          "cross": "0.0004",
+          "add": "0.00012",
+          "spotCross": "0.0006",
+          "spotAdd": "0.0003"
+        },
+        ...
+      ],
+      "mm": [
+        {
+          "makerFractionCutoff": "0.005",
+          "add": "-0.00001"
+        },
+        ...
+      ]
+    },
+    "referralDiscount": "0.04",
+    "stakingDiscountTiers": [
+      {
+        "bpsOfMaxSupply": "0.0",
+        "discount": "0.0"
+      },
+      {
+        "bpsOfMaxSupply": "0.0001",
+        "discount": "0.05"
+      },
+      ...
+    ]
+  },
+  "userCrossRate": "0.000315",
+  "userAddRate": "0.000105",
+  "userSpotCrossRate": "0.00049",
+  "userSpotAddRate": "0.00028",
+  "activeReferralDiscount": "0.0",
+  "trial": null,
+  "feeTrialReward": "0.0",
+  "nextTrialAvailableTimestamp": null,
+  "stakingLink": {
+    "type": "tradingUser",
+    "stakingUser": "0x54c049d9c7d3c92c2462bf3d28e083f3d6805061"
+  },
+  "activeStakingDiscount": {
+    "bpsOfMaxSupply": "4.7577998927",
+    "discount": "0.3"
+  }
+}
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query a user's staking delegations
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                          |
+| -------------------------------------- | ------ | -------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "delegations"                                                        |
+| user<mark style="color:red;">\*</mark> | String | hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+[
+    {
+        "validator":"0x5ac99df645f3414876c816caa18b2d234024b487",
+        "amount":"12060.16529862",
+        "lockedUntilTimestamp":1735466781353
+    },
+    ...
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query a user's staking summary
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                          |
+| -------------------------------------- | ------ | -------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "delegatorSummary"                                                   |
+| user<mark style="color:red;">\*</mark> | String | hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+{
+  "delegated": "12060.16529862",
+  "undelegated": "0.0",
+  "totalPendingWithdrawal": "0.0",
+  "nPendingWithdrawals": 0
+}
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query a user's staking history
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                          |
+| -------------------------------------- | ------ | -------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "delegatorHistory"                                                   |
+| user<mark style="color:red;">\*</mark> | String | hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+[
+    {
+        "time": 1735380381353,
+        "hash": "0x55492465cb523f90815a041a226ba90147008d4b221a24ae8dc35a0dbede4ea4",
+        "delta": {
+            "delegate": {
+                "validator": "0x5ac99df645f3414876c816caa18b2d234024b487",
+                "amount": "10000.0",
+                "isUndelegate": false
+            }
+        }
+    },
+    ...
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query a user's staking rewards
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                          |
+| -------------------------------------- | ------ | -------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "delegatorRewards"                                                   |
+| user<mark style="color:red;">\*</mark> | String | hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+[
+    {
+        "time": 1736726400073,
+        "source": "delegation",
+        "totalAmount": "0.73117184"
+    },
+    {
+        "time": 1736726400073,
+        "source": "commission",
+        "totalAmount": "130.76445876"
+    },
+    ...
+]
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query a user's HIP-3 DEX abstraction state
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                   | Type   | Description                                                          |
+| -------------------------------------- | ------ | -------------------------------------------------------------------- |
+| type<mark style="color:red;">\*</mark> | String | "userDexAbstraction"                                                 |
+| user<mark style="color:red;">\*</mark> | String | hexadecimal format; e.g. 0x0000000000000000000000000000000000000000. |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+true
+```
+
+{% endtab %}
+{% endtabs %}
+
+## Query aligned quote token status
+
+<mark style="color:green;">`POST`</mark> `https://api.hyperliquid.xyz/info`
+
+#### Headers
+
+| Name                                           | Type   | Description        |
+| ---------------------------------------------- | ------ | ------------------ |
+| Content-Type<mark style="color:red;">\*</mark> | String | "application/json" |
+
+#### Request Body
+
+| Name                                    | Type   | Description             |
+| --------------------------------------- | ------ | ----------------------- |
+| type<mark style="color:red;">\*</mark>  | String | "alignedQuoteTokenInfo" |
+| token<mark style="color:red;">\*</mark> | Number | token index             |
+
+{% tabs %}
+{% tab title="200: OK" %}
+
+```json
+{
+    "isAligned": true,
+    "firstAlignedTime": 1758949452538,
+    "evmMintedSupply": "0.0",
+    "dailyAmountOwed": [
+        [
+            "2025-10-04",
+            "0.0"
+        ],
+        [
+            "2025-10-05",
+            "0.0"
+        ],
+        ...
+    ],
+    "predictedRate": "0.01"
+}
+
+```
+
+{% endtab %}
+{% endtabs %}
diff --git a/docs/perps/hyperliquid/tick-lotsize.md b/docs/perps/hyperliquid/tick-lotsize.md
new file mode 100644
index 00000000000..ad34ffbe64e
--- /dev/null
+++ b/docs/perps/hyperliquid/tick-lotsize.md
@@ -0,0 +1,25 @@
+# Tick and lot size
+
+Both Price (px) and Size (sz) have a maximum number of decimals that are accepted.&#x20;
+
+Prices can have up to 5 significant figures, but no more than `MAX_DECIMALS - szDecimals` decimal places where `MAX_DECIMALS` is 6 for perps and 8 for spot. Integer prices are always allowed, regardless of the number of significant figures. E.g. `123456` is a valid price even though `12345.6` is not.
+
+Sizes are rounded to the `szDecimals` of that asset. For example, if `szDecimals = 3` then `1.001` is a valid size but `1.0001` is not.&#x20;
+
+`szDecimals` for an asset is found in the meta response to the info endpoint
+
+### Perp price examples
+
+`1234.5` is valid but `1234.56` is not (too many significant figures)
+
+`0.001234` is valid, but `0.0012345` is not (more than 6 decimal places)
+
+If `szDecimals = 1` , `0.01234` is valid but `0.012345` is not (more than `6 - szDecimals` decimal places)
+
+### Spot price examples
+
+`0.0001234` is valid if `szDecimals` is 0 or 1, but not if `szDecimals` is greater than 2 (more than 8-2 decimal places).&#x20;
+
+### Signing
+
+Note that if implementing signing, trailing zeroes should be removed. See [Signing](https://hyperliquid.gitbook.io/hyperliquid-docs/for-developers/api/signing) for more details.

From 92b606df9542d69f35d42c7d6295201b2a97c69d Mon Sep 17 00:00:00 2001
From: jiexi <jiexiluan@gmail.com>
Date: Tue, 25 Nov 2025 19:22:29 -0800
Subject: [PATCH 5/5] fix: Fix MM Connect resuming of sessions before
 NetworkController state is available for BackgroundBridge (#22749)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Fixes an issue where MM Connect deeplinks do not result in an approval
being shown to the user from app cold start AND (?) if the app is an
expo build that gets delayed by bundling.

~~1. For some reason we do not restore connections the first ReactNative
AppState "active" event, which is the only one we receive. Guard has
been removed~~ Tamas has clarified why this is the case. I have reverted
this change
2. Our check to ensure the store is fully initialized is not complete
enough and was resulting in BackgroundBridge throwing when trying to
access state from the NetworkController that was not ready.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
3. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null


No changelog as MetaMask Connect has not been released to public yet

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.




<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds store readiness check (including NetworkController state) to RPC
bridge init and increases readiness polling intervals; updates tests
accordingly.
>
> - **SDKConnectV2 readiness**:
> - `when-store-ready`: New util ensuring `store.dispatch` and
`engine.backgroundState.NetworkController` exist before proceeding.
> - `when-engine-ready`/`when-store-ready`: Increase polling interval
from 10ms to 100ms.
> - **RPC bridge initialization**:
> - `RPCBridgeAdapter` tests updated to wait for `whenEngineReady`,
`whenOnboardingComplete`, and new `whenStoreReady` before creating
`BackgroundBridge` and subscribing to unlock events; ensure idempotent
init and queuing behavior.
> - **Tests**:
> - Update timer advances to match slower polling (milliseconds →
seconds) in `when-engine-ready.test.ts` and `when-store-ready.test.ts`.
> - `connection-registry.test.ts`: Mock store state to include
`NetworkController` for initialization-dependent flows.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
570282b3f9ec8033ee14da5d2de77e4e0a699120. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: aphex <52055541+wenfix@users.noreply.github.com>
---
 .../adapters/rpc-bridge-adapter.test.ts       | 10 ++++
 .../services/connection-registry.test.ts      |  3 ++
 .../utils/when-engine-ready.test.ts           |  4 +-
 .../SDKConnectV2/utils/when-engine-ready.ts   |  2 +-
 .../utils/when-store-ready.test.ts            | 51 +++++++++++++++++--
 .../SDKConnectV2/utils/when-store-ready.ts    | 14 +++--
 6 files changed, 71 insertions(+), 13 deletions(-)

diff --git a/app/core/SDKConnectV2/adapters/rpc-bridge-adapter.test.ts b/app/core/SDKConnectV2/adapters/rpc-bridge-adapter.test.ts
index 383dc4a6ea4..984c9043045 100644
--- a/app/core/SDKConnectV2/adapters/rpc-bridge-adapter.test.ts
+++ b/app/core/SDKConnectV2/adapters/rpc-bridge-adapter.test.ts
@@ -5,6 +5,7 @@ import { ConnectionInfo } from '../types/connection-info';
 import { RPCBridgeAdapter } from './rpc-bridge-adapter';
 import { whenEngineReady } from '../utils/when-engine-ready';
 import { whenOnboardingComplete } from '../utils/when-onboarding-complete';
+import { whenStoreReady } from '../utils/when-store-ready';
 
 jest.mock('../../BackgroundBridge/BackgroundBridge');
 jest.mock('../utils/when-engine-ready', () => ({
@@ -13,6 +14,9 @@ jest.mock('../utils/when-engine-ready', () => ({
 jest.mock('../utils/when-onboarding-complete', () => ({
   whenOnboardingComplete: jest.fn(),
 }));
+jest.mock('../utils/when-store-ready', () => ({
+  whenStoreReady: jest.fn(),
+}));
 jest.mock('../../Engine', () => ({
   controllerMessenger: {
     subscribe: jest.fn(),
@@ -28,6 +32,7 @@ jest.mock('../../Engine', () => ({
 const MockedBackgroundBridge = BackgroundBridge as any;
 const mockedWhenEngineReady = whenEngineReady as jest.Mock;
 const mockedWhenOnboardingComplete = whenOnboardingComplete as jest.Mock;
+const mockedWhenStoreReady = whenStoreReady as jest.Mock;
 const mockedEngine = Engine as any;
 
 describe('RPCBridgeAdapter', () => {
@@ -62,6 +67,7 @@ describe('RPCBridgeAdapter', () => {
     mockedEngine.controllerMessenger = mockMessenger;
     mockedWhenEngineReady.mockResolvedValue(undefined);
     mockedWhenOnboardingComplete.mockResolvedValue(undefined);
+    mockedWhenStoreReady.mockResolvedValue(undefined);
 
     // Capture the instance and sendMessage callback from the mock constructor
     MockedBackgroundBridge.mockImplementation((args: any) => {
@@ -89,6 +95,8 @@ describe('RPCBridgeAdapter', () => {
       await new Promise(process.nextTick);
 
       expect(mockedWhenEngineReady).toHaveBeenCalledTimes(1);
+      expect(mockedWhenOnboardingComplete).toHaveBeenCalledTimes(1);
+      expect(mockedWhenStoreReady).toHaveBeenCalledTimes(1);
       expect(mockMessenger.subscribe).toHaveBeenCalledWith(
         'KeyringController:unlock',
         expect.any(Function),
@@ -112,6 +120,8 @@ describe('RPCBridgeAdapter', () => {
       await new Promise(process.nextTick);
 
       expect(mockedWhenEngineReady).toHaveBeenCalledTimes(1);
+      expect(mockedWhenOnboardingComplete).toHaveBeenCalledTimes(1);
+      expect(mockedWhenStoreReady).toHaveBeenCalledTimes(1);
       expect(mockMessenger.subscribe).toHaveBeenCalledTimes(1);
       expect(MockedBackgroundBridge).toHaveBeenCalledTimes(1);
     });
diff --git a/app/core/SDKConnectV2/services/connection-registry.test.ts b/app/core/SDKConnectV2/services/connection-registry.test.ts
index 83221bb9eed..6574b47e006 100644
--- a/app/core/SDKConnectV2/services/connection-registry.test.ts
+++ b/app/core/SDKConnectV2/services/connection-registry.test.ts
@@ -17,6 +17,9 @@ jest.mock('../../Permissions');
 jest.mock('../../../store', () => ({
   store: {
     dispatch: jest.fn(),
+    getState: jest.fn().mockImplementation(() => ({
+      engine: { backgroundState: { NetworkController: {} } },
+    })),
   },
 }));
 
diff --git a/app/core/SDKConnectV2/utils/when-engine-ready.test.ts b/app/core/SDKConnectV2/utils/when-engine-ready.test.ts
index e2736794f67..215ea905298 100644
--- a/app/core/SDKConnectV2/utils/when-engine-ready.test.ts
+++ b/app/core/SDKConnectV2/utils/when-engine-ready.test.ts
@@ -43,7 +43,7 @@ describe('when-engine-ready', () => {
       const promise = whenEngineReady();
 
       // Fast-forward time to trigger the check intervals
-      await jest.advanceTimersByTimeAsync(200);
+      await jest.advanceTimersByTimeAsync(2000);
 
       await expect(promise).resolves.toBeUndefined();
     });
@@ -65,7 +65,7 @@ describe('when-engine-ready', () => {
       const promise = whenEngineReady();
 
       // Fast-forward time to trigger the check intervals
-      await jest.advanceTimersByTimeAsync(300);
+      await jest.advanceTimersByTimeAsync(3000);
 
       await expect(promise).resolves.toBeUndefined();
     });
diff --git a/app/core/SDKConnectV2/utils/when-engine-ready.ts b/app/core/SDKConnectV2/utils/when-engine-ready.ts
index 0d34d066d09..107f24984c0 100644
--- a/app/core/SDKConnectV2/utils/when-engine-ready.ts
+++ b/app/core/SDKConnectV2/utils/when-engine-ready.ts
@@ -13,6 +13,6 @@ const isEngineReady = (): boolean => {
 
 export async function whenEngineReady() {
   while (!isEngineReady()) {
-    await new Promise((resolve) => setTimeout(resolve, 10));
+    await new Promise((resolve) => setTimeout(resolve, 100));
   }
 }
diff --git a/app/core/SDKConnectV2/utils/when-store-ready.test.ts b/app/core/SDKConnectV2/utils/when-store-ready.test.ts
index df5519ea145..f2d762a4157 100644
--- a/app/core/SDKConnectV2/utils/when-store-ready.test.ts
+++ b/app/core/SDKConnectV2/utils/when-store-ready.test.ts
@@ -21,7 +21,9 @@ describe('when-store-ready', () => {
     it('should resolve immediately if the store is already ready', async () => {
       const mockStore = {
         dispatch: jest.fn(),
-        getState: jest.fn(),
+        getState: jest.fn().mockImplementation(() => ({
+          engine: { backgroundState: { NetworkController: true } },
+        })),
       };
 
       // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -41,7 +43,9 @@ describe('when-store-ready', () => {
       let callCount = 0;
       const mockStore = {
         dispatch: jest.fn(),
-        getState: jest.fn(),
+        getState: jest.fn().mockImplementation(() => ({
+          engine: { backgroundState: { NetworkController: true } },
+        })),
       };
 
       // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -60,7 +64,7 @@ describe('when-store-ready', () => {
       const promise = whenStoreReady();
 
       // Fast-forward time to trigger the check intervals
-      await jest.advanceTimersByTimeAsync(200);
+      await jest.advanceTimersByTimeAsync(2000);
 
       await expect(promise).resolves.toBeUndefined();
     });
@@ -70,7 +74,9 @@ describe('when-store-ready', () => {
       let callCount = 0;
       const mockStore = {
         dispatch: jest.fn(),
-        getState: jest.fn(),
+        getState: jest.fn().mockImplementation(() => ({
+          engine: { backgroundState: { NetworkController: true } },
+        })),
       };
 
       // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -89,7 +95,42 @@ describe('when-store-ready', () => {
       const promise = whenStoreReady();
 
       // Fast-forward time to trigger the check intervals
-      await jest.advanceTimersByTimeAsync(200);
+      await jest.advanceTimersByTimeAsync(2000);
+
+      await expect(promise).resolves.toBeUndefined();
+    });
+
+    it('should wait if NetworkController is not available in store state', async () => {
+      let callCount = 0;
+      const mockReadyStore = {
+        dispatch: jest.fn(),
+        getState: jest.fn().mockImplementation(() => ({
+          engine: { backgroundState: { NetworkController: true } },
+        })),
+      };
+
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const storeModule = require('../../../store');
+      Object.defineProperty(storeModule, 'store', {
+        get: () => {
+          callCount++;
+          if (callCount < 3) {
+            return {
+              dispatch: jest.fn(),
+              getState: jest.fn().mockImplementation(() => ({
+                engine: { backgroundState: {} }, // NetworkController not set
+              })),
+            };
+          }
+          return mockReadyStore;
+        },
+        configurable: true,
+      });
+
+      const promise = whenStoreReady();
+
+      // Fast-forward time to trigger the check intervals
+      await jest.advanceTimersByTimeAsync(2000);
 
       await expect(promise).resolves.toBeUndefined();
     });
diff --git a/app/core/SDKConnectV2/utils/when-store-ready.ts b/app/core/SDKConnectV2/utils/when-store-ready.ts
index 81ddaba281c..f18b48d71c5 100644
--- a/app/core/SDKConnectV2/utils/when-store-ready.ts
+++ b/app/core/SDKConnectV2/utils/when-store-ready.ts
@@ -2,10 +2,14 @@ import { store } from '../../../store';
 
 const isStoreReady = () => {
   try {
-    if (store && typeof store.dispatch === 'function') {
-      return true;
-    }
-    return false;
+    return Boolean(
+      store &&
+        typeof store.dispatch === 'function' &&
+        // This check is needed because the BackgroundBridge requires the NetworkController state
+        // for initialization. This check is brittle as reliance on other controller state during
+        // resumption would not be accounted for. We should figure out something more robust.
+        store.getState().engine.backgroundState.NetworkController,
+    );
   } catch {
     return false;
   }
@@ -20,6 +24,6 @@ const isStoreReady = () => {
  */
 export const whenStoreReady = async (): Promise<void> => {
   while (!isStoreReady()) {
-    await new Promise((resolve) => setTimeout(resolve, 10));
+    await new Promise((resolve) => setTimeout(resolve, 100));
   }
 };