MetaMask
diff --git a/‎app/components/Views/SocialLeaderboard/TraderPositionView/TraderPositionView.test.tsx‎
Lines changed: 74 additions & 8 deletions b/‎app/components/Views/SocialLeaderboard/TraderPositionView/TraderPositionView.test.tsx‎
Lines changed: 74 additions & 8 deletions
diff --git a/‎app/components/Views/SocialLeaderboard/TraderPositionView/TraderPositionView.testIds.ts‎
Lines changed: 3 additions & 0 deletions b/‎app/components/Views/SocialLeaderboard/TraderPositionView/TraderPositionView.testIds.ts‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎app/components/Views/SocialLeaderboard/TraderPositionView/TraderPositionView.tsx‎
Lines changed: 97 additions & 61 deletions b/‎app/components/Views/SocialLeaderboard/TraderPositionView/TraderPositionView.tsx‎
Lines changed: 97 additions & 61 deletions
@@ -80,6 +80,27 @@ jest.mock('@metamask/controller-utils', () => ({
   handleFetch: jest.fn().mockResolvedValue({}),
 }));
 
+// New hooks added for deep-link self-sufficiency. Existing tests pass `position`
+// via route params, so these are effectively no-ops in the existing flow.
+jest.mock('./hooks/useTraderPosition', () => ({
+  useTraderPosition: jest.fn(() => ({
+    position: undefined,
+    isLoading: false,
+    error: null,
+  })),
+}));
+
+jest.mock('../TraderProfileView/hooks/useTraderProfile', () => ({
+  useTraderProfile: jest.fn(() => ({
+    profile: null,
+    isLoading: false,
+    error: null,
+    isFollowing: false,
+    toggleFollow: jest.fn(),
+    refresh: jest.fn(),
+  })),
+}));
+
 jest.mock('../../../hooks/useAnalytics/useAnalytics', () => {
   const { createMockUseAnalyticsHook } = jest.requireActual(
     '../../../../util/test/analyticsMock',
@@ -184,25 +205,70 @@ describe('TraderPositionView', () => {
     expect(mockGoBack).toHaveBeenCalledTimes(1);
   });
 
-  it('falls back to the route tokenSymbol when position is undefined', () => {
+  it('renders the fallback when position is undefined and no positionId is provided', () => {
     mockRouteParams.position = undefined;
     mockRouteParams.tokenSymbol = 'DOGE';
 
     renderWithProvider(<TraderPositionView />, { state: mockState });
 
-    expect(screen.getAllByText('DOGE').length).toBeGreaterThanOrEqual(1);
+    expect(
+      screen.getByTestId(TraderPositionViewSelectorsIDs.FALLBACK),
+    ).toBeOnTheScreen();
+    // Price chart should not be rendered in the fallback state
+    expect(screen.queryByTestId('price-chart-mock')).toBeNull();
   });
 
-  it('does not leave price chart in loading state when position is undefined', async () => {
+  it('renders the skeleton while a positionId fetch is in flight', () => {
+    const { useTraderPosition } = jest.requireMock('./hooks/useTraderPosition');
+    (useTraderPosition as jest.Mock).mockReturnValue({
+      position: undefined,
+      isLoading: true,
+      error: null,
+    });
+
     mockRouteParams.position = undefined;
-    mockRouteParams.tokenSymbol = 'DOGE';
+    (mockRouteParams as { positionId?: string }).positionId = 'position-uuid-1';
 
     renderWithProvider(<TraderPositionView />, { state: mockState });
 
-    await waitFor(() => {
-      const lastCall =
-        mockPriceChart.mock.calls[mockPriceChart.mock.calls.length - 1]?.[0];
-      expect(lastCall).toMatchObject({ isLoading: false });
+    expect(
+      screen.getByTestId(TraderPositionViewSelectorsIDs.SKELETON),
+    ).toBeOnTheScreen();
+
+    (useTraderPosition as jest.Mock).mockReturnValue({
+      position: undefined,
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  it('renders content when position is fetched via positionId', () => {
+    const { useTraderPosition } = jest.requireMock('./hooks/useTraderPosition');
+    (useTraderPosition as jest.Mock).mockReturnValue({
+      position: makeDefaultPosition(),
+      isLoading: false,
+      error: null,
+    });
+
+    mockRouteParams.position = undefined;
+    (mockRouteParams as { positionId?: string }).positionId = 'position-uuid-1';
+
+    renderWithProvider(<TraderPositionView />, { state: mockState });
+
+    expect(
+      screen.getByTestId(TraderPositionViewSelectorsIDs.CONTAINER),
+    ).toBeOnTheScreen();
+    expect(
+      screen.queryByTestId(TraderPositionViewSelectorsIDs.SKELETON),
+    ).toBeNull();
+    expect(
+      screen.queryByTestId(TraderPositionViewSelectorsIDs.FALLBACK),
+    ).toBeNull();
+
+    (useTraderPosition as jest.Mock).mockReturnValue({
+      position: undefined,
+      isLoading: false,
+      error: null,
     });
   });
 
 
@@ -2,4 +2,7 @@ export const TraderPositionViewSelectorsIDs = {
   CONTAINER: 'trader-position-view-container',
   CLOSE_BUTTON: 'trader-position-view-close-button',
   BUY_BUTTON: 'trader-position-view-buy-button',
+  SKELETON: 'trader-position-skeleton',
+  FALLBACK: 'trader-position-fallback',
+  FALLBACK_PRIMARY_ACTION: 'trader-position-fallback-primary-action',
 };
@@ -23,22 +23,43 @@ import TraderPositionChartSection from './components/TraderPositionChartSection'
 import TraderTimePeriodSelector from './components/TraderTimePeriodSelector';
 import TraderPositionPnLCard from './components/TraderPositionPnLCard';
 import TraderTradesSection from './components/TraderTradesSection';
+import TraderPositionSkeleton from './components/TraderPositionSkeleton';
+import TraderPositionFallback from './components/TraderPositionFallback';
 import { useTraderPositionData } from './useTraderPositionData';
+import { useTraderPosition } from './hooks/useTraderPosition';
+import { useTraderProfile } from '../TraderProfileView/hooks/useTraderProfile';
 
 const TraderPositionView = () => {
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const route = useRoute<RouteProp<RootStackParamList, 'TraderPositionView'>>();
   const tw = useTailwind();
 
   const {
-    traderName,
-    traderImageUrl,
+    traderId,
+    traderName: traderNameParam,
+    traderImageUrl: traderImageUrlParam,
     tokenSymbol,
     position: positionParam,
+    positionId,
   } = route.params;
 
   const [isQuickBuyVisible, setIsQuickBuyVisible] = useState(false);
 
+  // Position resolution: prefer the row-tap snapshot; fetch via UUID only when
+  // it isn't there (deep link / out-of-app entry).
+  const { position: fetchedPosition, isLoading: isPositionLoading } =
+    useTraderPosition(positionParam ? undefined : positionId);
+  const resolvedPosition = positionParam ?? fetchedPosition;
+
+  // Trader profile: fetch only if name/image weren't passed in nav params.
+  const needsProfile = !traderNameParam || !traderImageUrlParam;
+  const { profile: fetchedProfile, isLoading: isProfileLoading } =
+    useTraderProfile(needsProfile ? traderId : '');
+  const traderName = traderNameParam ?? fetchedProfile?.profile?.name ?? '';
+  const traderImageUrl =
+    traderImageUrlParam ?? fetchedProfile?.profile?.imageUrl ?? undefined;
+
+  const positionData = useTraderPositionData(resolvedPosition, tokenSymbol);
   const {
     symbol,
     marketCap,
@@ -55,15 +76,17 @@ const TraderPositionView = () => {
     activeTimePeriod,
     setActiveTimePeriod,
     timePeriods,
-  } = useTraderPositionData(positionParam, tokenSymbol);
+  } = positionData;
 
   const handleClose = useCallback(() => {
     navigation.goBack();
   }, [navigation]);
 
   const handleBuyPress = useCallback(() => {
-    setIsQuickBuyVisible(true);
-  }, []);
+    if (resolvedPosition) {
+      setIsQuickBuyVisible(true);
+    }
+  }, [resolvedPosition]);
 
   const handleQuickBuyClose = useCallback(() => {
     setIsQuickBuyVisible(false);
@@ -73,6 +96,11 @@ const TraderPositionView = () => {
     // Future: update displayed price on scrub
   }, []);
 
+  const isInitialLoading =
+    !resolvedPosition && (isPositionLoading || isProfileLoading);
+  const hasFailed =
+    !resolvedPosition && !isPositionLoading && !isProfileLoading;
+
   return (
     <SafeAreaView
       style={tw.style('flex-1 bg-default')}
@@ -84,62 +112,70 @@ const TraderPositionView = () => {
         closeButtonTestID={TraderPositionViewSelectorsIDs.CLOSE_BUTTON}
       />
 
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={tw.style('pb-6')}
-      >
-        <TraderTokenInfoRow
-          symbol={symbol}
-          position={positionParam}
-          marketCap={marketCap}
-          pricePercentChange={pricePercentChange}
-          activeTimePeriodLabel={activeTimePeriod}
-        />
-
-        <TraderPositionChartSection
-          historicalPrices={historicalPrices}
-          priceDiff={priceDiff}
-          isPricesLoading={isPricesLoading}
-          onChartIndexChange={handleChartIndexChange}
-        />
-
-        <TraderTimePeriodSelector
-          timePeriods={timePeriods}
-          activeTimePeriod={activeTimePeriod}
-          onSelectPeriod={setActiveTimePeriod}
-        />
-
-        <TraderPositionPnLCard
-          isClosed={isClosed}
-          positionValue={positionValue}
-          pnlValue={pnlValue}
-          pnlPercent={pnlPercent}
-          isPnlPositive={isPnlPositive}
-        />
-
-        <TraderTradesSection
-          trades={trades}
-          traderName={traderName}
-          traderImageUrl={traderImageUrl}
-        />
-      </ScrollView>
-
-      <Box twClassName="px-4 py-3">
-        <Button
-          variant={ButtonVariant.Secondary}
-          isFullWidth
-          onPress={handleBuyPress}
-          testID={TraderPositionViewSelectorsIDs.BUY_BUTTON}
-        >
-          {strings('social_leaderboard.trader_position.buy')}
-        </Button>
-      </Box>
-
-      <QuickBuyBottomSheet
-        isVisible={isQuickBuyVisible}
-        position={positionParam ?? null}
-        onClose={handleQuickBuyClose}
-      />
+      {isInitialLoading ? (
+        <TraderPositionSkeleton />
+      ) : hasFailed ? (
+        <TraderPositionFallback traderId={traderId} traderName={traderName} />
+      ) : (
+        <>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={tw.style('pb-6')}
+          >
+            <TraderTokenInfoRow
+              symbol={symbol}
+              position={resolvedPosition}
+              marketCap={marketCap}
+              pricePercentChange={pricePercentChange}
+              activeTimePeriodLabel={activeTimePeriod}
+            />
+
+            <TraderPositionChartSection
+              historicalPrices={historicalPrices}
+              priceDiff={priceDiff}
+              isPricesLoading={isPricesLoading}
+              onChartIndexChange={handleChartIndexChange}
+            />
+
+            <TraderTimePeriodSelector
+              timePeriods={timePeriods}
+              activeTimePeriod={activeTimePeriod}
+              onSelectPeriod={setActiveTimePeriod}
+            />
+
+            <TraderPositionPnLCard
+              isClosed={isClosed}
+              positionValue={positionValue}
+              pnlValue={pnlValue}
+              pnlPercent={pnlPercent}
+              isPnlPositive={isPnlPositive}
+            />
+
+            <TraderTradesSection
+              trades={trades}
+              traderName={traderName}
+              traderImageUrl={traderImageUrl}
+            />
+          </ScrollView>
+
+          <Box twClassName="px-4 py-3">
+            <Button
+              variant={ButtonVariant.Secondary}
+              isFullWidth
+              onPress={handleBuyPress}
+              testID={TraderPositionViewSelectorsIDs.BUY_BUTTON}
+            >
+              {strings('social_leaderboard.trader_position.buy')}
+            </Button>
+          </Box>
+
+          <QuickBuyBottomSheet
+            isVisible={isQuickBuyVisible}
+            position={resolvedPosition ?? null}
+            onClose={handleQuickBuyClose}
+          />
+        </>
+      )}
     </SafeAreaView>
   );
 };