…radient

Made-with: Cursor

Made-with: Cursor

Made-with: Cursor

…stroke

Made-with: Cursor

Made-with: Cursor

- Add onSlideStart to SlidingTextCarousel; wire entry card border key bump
- Extend border trail opacity fade-in end fraction
- Cover onSlideStart in unit tests

Made-with: Cursor

…p ci]

Made-with: Cursor

- Use smoothstep for trail opacity fade-in
- Tune fade-in/fade-out timing (plateau before fade-out)

Made-with: Cursor

Made-with: Cursor

…ntry card (#28047)

<!--
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?
-->

Adds an animated gradient border to the Market Insights entry card on
Asset Overview: a dashed stroke that sweeps around the card with a soft
trailing gradient aligned to the path. The carousel that cycles trend
descriptions now exposes `onSlideStart` so the border animation
retriggers when each slide begins (not only when it finishes). Constants
and easing were tuned for a smoother trail (fade-in/fade-out fractions,
sweep path end). Includes `SlidingTextCarousel`, polyline helpers for
the rounded rect, skeleton/test updates, and wiring from
`AssetOverviewContent`.

## **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: Improved the Market Insights card on the asset overview
with an animated gradient border that highlights the card as trend
descriptions rotate.

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Market Insights entry card animated border

  Scenario: User views asset overview with Market Insights
    Given the user is on the asset overview for a token that shows Market Insights
    When the screen loads and trend descriptions rotate in the entry card
    Then the card border shows a sweeping gradient animation aligned with slide changes
```

## **Screenshots/Recordings**

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

### **Before**

N/A

### **After**

N/A

## **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.

<!-- Generated with the help of the pr-description AI skill -->

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> UI-only changes but with non-trivial `react-native-reanimated`/SVG
worklet math and new polyline sampling that could impact animation
correctness/performance across devices.
> 
> **Overview**
> Adds a new sweeping dashed border animation to the Market Insights
entry card, using a **trail-aligned SVG gradient** (tail→head) and tuned
sweep/opacity behavior (elastic trail length, eased timing, configurable
fade-in/hold/fade-out).
> 
> Refactors the border implementation to compute a rounded-rect
**polyline + arc-length lookup** (`roundedRectBorderPolyline.ts`) so the
gradient endpoints track the moving dash segment, and centralizes shared
chrome gradient tokens in `constants.ts` for the border, title, sparkle,
and arrow.
> 
> Updates the carousel/card wiring so the border re-triggers when each
description slide *starts* (`onSlideStart`), switches the card wrapper
to `TouchableOpacity` + inner `View` for viewport tracking, hardens
analytics to only include `digest_id` when present, and adjusts/adds
tests for the new layout/slide-start behavior.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ba52e22. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

…aMask/metamask-mobile into TSA-324-mrkt-insights-card-ui-update