feat(referral): add hardware records page with new UI components

packages/kit-bg/src/services/ServiceReferralCode.ts

@@ -12,6 +12,7 @@ import type {
   IEarnWalletHistory,
   IExportInviteDataParams,
   IHardwareCumulativeRewards,
+  IHardwareRecordsResponse,
   IHardwareSalesRecord,
   IInviteCodeItem,
   IInviteCodeListResponse,
@@ -550,6 +551,24 @@ class ServiceReferralCode extends ServiceBase {
     return result;
   }
 
+  @backgroundMethod()
+  async getHardwareRecords(cursor?: string): Promise<IHardwareRecordsResponse> {
+    const client = await this.getOneKeyIdClient(EServiceEndpointEnum.Rebate);
+    const params: {
+      limit: number;
+      cursor?: string;
+    } = {
+      limit: 10,
+    };
+    if (cursor) {
+      params.cursor = cursor;
+    }
+    const response = await client.get<{
+      data: IHardwareRecordsResponse;
+    }>('/rebate/v1/invite/hardware-records', { params });
+    return response.data.data;
+  }
+
   @backgroundMethod()
   async bindPerpsWallet({
     action,

packages/kit/src/views/ReferFriends/components/index.ts

@@ -8,3 +8,4 @@ export {
   REFER_FRIENDS_PAGE_MAX_WIDTH,
 } from './ReferFriendsPageContainer';
 export { ReferralBenefitsList } from './ReferralBenefitsList';
+export { SimpleTabs } from './SimpleTabs';

packages/kit/src/views/ReferFriends/pages/HardwareSalesReward/components/HardwareRecordCard.tsx

@@ -0,0 +1,122 @@
+import { useCallback, useState } from 'react';
+
+import { StyleSheet } from 'react-native';
+
+import type { IColorTokens } from '@onekeyhq/components';
+import {
+  Badge,
+  Icon,
+  SizableText,
+  Stack,
+  XStack,
+  YStack,
+} from '@onekeyhq/components';
+import { Currency } from '@onekeyhq/kit/src/components/Currency';
+import type { IHardwareRecordItem } from '@onekeyhq/shared/src/referralCode/type';
+
+import { HardwareRecordStatusBadge } from './HardwareRecordStatusBadge';
+import {
+  HardwareRecordTimeline,
+  formatTimestamp,
+} from './HardwareRecordTimeline';
+
+type IHardwareRecordStatus =
+  | 'Completed'
+  | 'Pending'
+  | 'Undistributed'
+  | 'Refunded';
+
+const statusToRewardColor: Record<IHardwareRecordStatus, IColorTokens> = {
+  Completed: '$textSuccess',
+  Undistributed: '$textInfo',
+  Refunded: '$textSubdued',
+  Pending: '$textCaution',
+};
+
+interface IHardwareRecordCardProps {
+  item: IHardwareRecordItem;
+}
+
+export function HardwareRecordCard({ item }: IHardwareRecordCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleToggle = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+
+  const formattedDate = formatTimestamp(item.orderPlacedAt);
+
+  const rewardColor =
+    statusToRewardColor[item.status as IHardwareRecordStatus] || '$textSuccess';
+
+  return (
+    <YStack
+      bg="$bgApp"
+      borderWidth={StyleSheet.hairlineWidth}
+      borderColor="$borderSubdued"
+      borderRadius="$3"
+      overflow="hidden"
+    >
+      <YStack
+        p="$4"
+        gap="$3"
+        cursor="pointer"
+        hoverStyle={{ bg: '$bgHover' }}
+        pressStyle={{ bg: '$bgActive' }}
+        onPress={handleToggle}
+      >
+        {/* Header - Status Badge and Amount */}
+        <XStack jc="space-between" ai="center">
+          <HardwareRecordStatusBadge
+            status={item.status}
+            statusLabel={item.statusLabel}
+          />
+          <Currency
+            color={rewardColor}
+            formatter="value"
+            size="$bodyMdMedium"
+            formatterOptions={{
+              showPlusMinusSigns: true,
+            }}
+          >
+            {item.rebateAmountFiatValue}
+          </Currency>
+        </XStack>
+
+        {/* Order Number */}
+        <SizableText size="$bodyLgMedium" color="$text">
+          {item.orderNumber}
+        </SizableText>
+
+        {/* Date, Invite Code, and Expand Icon */}
+        <XStack jc="space-between" ai="center">
+          <XStack gap="$3" ai="center" flex={1}>
+            {/* Date */}
+            {formattedDate ? (
+              <SizableText size="$bodyMd" color="$textSubdued">
+                {formattedDate}
+              </SizableText>
+            ) : null}
+
+            {/* Invite Code */}
+            <Badge badgeType="default" badgeSize="sm">
+              {item.inviteCode}
+            </Badge>
+          </XStack>
+          <Stack animation="quick" rotate={isExpanded ? '-180deg' : '-90deg'}>
+            <Icon
+              name="ChevronDownSmallOutline"
+              size="$5"
+              color="$iconSubdued"
+            />
+          </Stack>
+        </XStack>
+      </YStack>
+
+      {/* Expanded Content - Order History Timeline */}
+      {isExpanded && item.history && item.history.length > 0 ? (
+        <HardwareRecordTimeline history={item.history} />
+      ) : null}
+    </YStack>
+  );
+}

packages/kit/src/views/ReferFriends/pages/HardwareSalesReward/components/HardwareRecordStatusBadge.tsx

@@ -0,0 +1,45 @@
+import type { IBadgeType } from '@onekeyhq/components';
+import { Badge, Stack } from '@onekeyhq/components';
+
+type IHardwareRecordStatus =
+  | 'Completed'
+  | 'Pending'
+  | 'Undistributed'
+  | 'Refunded';
+
+interface IHardwareRecordStatusBadgeProps {
+  status: string;
+  statusLabel?: string;
+}
+
+const statusToBadgeType: Record<IHardwareRecordStatus, IBadgeType> = {
+  Completed: 'success',
+  Pending: 'warning',
+  Undistributed: 'info',
+  Refunded: 'default',
+};
+
+const badgeTypeToIconColor: Record<IBadgeType, string> = {
+  success: '$iconSuccess',
+  warning: '$iconCaution',
+  info: '$iconInfo',
+  critical: '$iconCritical',
+  default: '$iconSubdued',
+};
+
+export function HardwareRecordStatusBadge({
+  status,
+  statusLabel,
+}: IHardwareRecordStatusBadgeProps) {
+  const badgeType =
+    statusToBadgeType[status as IHardwareRecordStatus] || 'default';
+  const displayLabel = statusLabel || status;
+  const iconColor = badgeTypeToIconColor[badgeType] || '$iconSubdued';
+
+  return (
+    <Badge badgeType={badgeType} badgeSize="sm">
+      <Stack w={6} h={6} borderRadius="$full" bg={iconColor} mr="$1.5" />
+      <Badge.Text>{displayLabel}</Badge.Text>
+    </Badge>
+  );
+}