@coinbase/cds-mcp-server 8.47.1 → 8.47.3

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.47.3 ((2/20/2026, 09:16 AM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.47.2 ((2/19/2026, 03:18 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.47.1 ((2/19/2026, 01:18 PM PST))
 
 This is an artificial version bump with no new change.

package/mcp-docs/mobile/components/BarChart.txt

@@ -38,7 +38,7 @@ To start, pass in a series of data to the chart.
 
 You can also provide multiple series of data to the chart. Series will have their bars for each data point rendered side by side.
 
-```jsx
+```tsx
 function MonthlyGainsByAsset() {
   const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
 
@@ -89,7 +89,7 @@ function MonthlyGainsByAsset() {
 
 You can also configure stacking for your chart using the `stacked` prop.
 
-```jsx
+```tsx
 function MonthlyGainsByAsset() {
   const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
 
@@ -155,7 +155,7 @@ function MonthlyGainsByAsset() {
 
 You can also configure multiple stacks by setting the `stackId` prop on each series.
 
-```jsx
+```tsx
 function MonthlyGainsMultipleStacks() {
   const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
 
@@ -225,7 +225,7 @@ function MonthlyGainsMultipleStacks() {
 
 #### Stack Gap
 
-```jsx
+```tsx
 function MonthlyGainsByAsset() {
   const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
 
@@ -284,7 +284,7 @@ function MonthlyGainsByAsset() {
         GridLineComponent: ThinSolidLine,
         tickLabelFormatter: tickFormatter,
         width: 70,
-        domainLimit: 'strict'
+        domainLimit: 'strict',
       }}
     />
   );
@@ -366,7 +366,7 @@ You can also round the baseline of the bars by setting the `roundBaseline` prop
 
 ### Negative Data
 
-```jsx
+```tsx
 function PositiveAndNegativeCashFlow() {
   const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
 
@@ -439,7 +439,7 @@ You can pass in `null` or `0` values to not render a bar for that data point.
 
 You can also use the `BarStackComponent` prop to render an empty circle for zero values.
 
-```jsx
+```tsx
 function MonthlyRewards() {
   const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
   const currentMonth = 7;
@@ -499,7 +499,7 @@ function MonthlyRewards() {
       }}
     />
   );
-};
+}
 ```
 
 ### Customization

package/mcp-docs/mobile/components/CartesianChart.txt

@@ -297,7 +297,7 @@ You can adjust the inset around the entire chart (outside the axes) with the `in
 
 You can also remove the default inset, such as to have a compact line chart.
 
-```jsx
+```tsx
 function Insets() {
   const theme = useTheme();
 
@@ -325,7 +325,6 @@ function Insets() {
             },
           ]}
           yAxis={{ domainLimit: 'strict' }}
-
           showArea
           style={{ border: `2px solid ${theme.color.fgPrimary}` }}
         />
@@ -343,7 +342,6 @@ function Insets() {
             },
           ]}
           yAxis={{ domainLimit: 'strict' }}
-
           showArea
           style={{ border: `2px solid ${theme.color.fgPrimary}` }}
         >
@@ -362,7 +360,6 @@ function Insets() {
             },
           ]}
           yAxis={{ domainLimit: 'strict' }}
-
           showArea
           style={{ border: `2px solid ${theme.color.fgPrimary}` }}
         >
@@ -442,14 +439,12 @@ By default, the scrubber will not allow overflow gestures. You can allow overflo
 
 You can showcase the price and volume of an asset over time within one chart.
 
-```jsx
+```tsx
 function PriceWithVolume() {
   const theme = useTheme();
 
   const [scrubIndex, setScrubIndex] = useState(null);
-  const btcData = btcCandles
-    .slice(0, 180)
-    .reverse()
+  const btcData = btcCandles.slice(0, 180).reverse();
 
   const btcPrices = btcData.map((candle) => parseFloat(candle.close));
   const btcVolumes = btcData.map((candle) => parseFloat(candle.volume));
@@ -484,12 +479,14 @@ function PriceWithVolume() {
   const currentPrice = btcPrices[displayIndex];
   const currentVolume = btcVolumes[displayIndex];
   const currentDate = btcDates[displayIndex];
-  const priceChange = displayIndex > 0
-    ? ((currentPrice - btcPrices[displayIndex - 1]) / btcPrices[displayIndex - 1])
-    : 0;
+  const priceChange =
+    displayIndex > 0
+      ? (currentPrice - btcPrices[displayIndex - 1]) / btcPrices[displayIndex - 1]
+      : 0;
 
   const accessibilityLabel = useMemo(() => {
-    if (scrubIndex === null) return `Current Bitcoin price: ${formatPrice(currentPrice)}, Volume: ${formatVolume(currentVolume)}`;
+    if (scrubIndex === null)
+      return `Current Bitcoin price: ${formatPrice(currentPrice)}, Volume: ${formatVolume(currentVolume)}`;
     return `Bitcoin price at ${formatDate(currentDate)}: ${formatPrice(currentPrice)}, Volume: ${formatVolume(currentVolume)}`;
   }, [scrubIndex, currentPrice, currentVolume, currentDate, formatPrice, formatVolume, formatDate]);
 
@@ -499,7 +496,7 @@ function PriceWithVolume() {
 
   return (
     <VStack gap={2}>
-     <SectionHeader
+      <SectionHeader
         id={headerId}
         style={{ padding: 0 }}
         title={<Text font="title1">Bitcoin</Text>}
@@ -549,9 +546,15 @@ function PriceWithVolume() {
         aria-labelledby={headerId}
         inset={{ top: 8, left: 8, right: 0, bottom: 0 }}
       >
-        <YAxis axisId="price" showGrid tickLabelFormatter={formatPriceInThousands} width={48} GridLineComponent={ThinSolidLine} />
+        <YAxis
+          axisId="price"
+          showGrid
+          tickLabelFormatter={formatPriceInThousands}
+          width={48}
+          GridLineComponent={ThinSolidLine}
+        />
         <BarPlot seriesIds={['volume']} />
-        <Line seriesId="prices"  showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber seriesIds={['prices']} />
       </CartesianChart>
     </VStack>
@@ -563,11 +566,12 @@ function PriceWithVolume() {
 
 You can also create your own type of cartesian chart by using `getSeriesData`, `getXScale`, and `getYScale` directly.
 
-```jsx
+```tsx
 function EarningsHistory() {
   const theme = useTheme();
-  const CirclePlot = memo(({ seriesId, opacity = 1 }: { seriesId: string, opacity?: number }) => {
-    const { drawingArea, getSeries, getSeriesData, getXScale, getYScale } = useCartesianChartContext();
+  const CirclePlot = memo(({ seriesId, opacity = 1 }: { seriesId: string; opacity?: number }) => {
+    const { drawingArea, getSeries, getSeriesData, getXScale, getYScale } =
+      useCartesianChartContext();
     const series = getSeries(seriesId);
     const data = getSeriesData(seriesId);
     const xScale = getXScale();
@@ -646,7 +650,7 @@ function EarningsHistory() {
     [actualEPS, estimatedEPS],
   );
 
-  const LegendEntry = memo(({ opacity = 1, label }: { opacity?: number, label: string }) => {
+  const LegendEntry = memo(({ opacity = 1, label }: { opacity?: number; label: string }) => {
     return (
       <Box alignItems="center" gap={0.5}>
         <LegendDot opacity={opacity} />
@@ -699,7 +703,7 @@ function EarningsHistory() {
 
 You can have multiple axes with different domains and ranges to showcase different pieces of data over the time time period.
 
-```jsx
+```tsx
 function TradingTrends() {
   const theme = useTheme();
 
@@ -712,15 +716,31 @@ function TradingTrends() {
       return `$${value}M`;
     }, []);
 
-    const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} strokeLinecap="butt" />);
-    const ThickSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={2} strokeLinecap="butt" />);
+    const ThinSolidLine = memo((props: SolidLineProps) => (
+      <SolidLine {...props} strokeWidth={1} strokeLinecap="butt" />
+    ));
+    const ThickSolidLine = memo((props: SolidLineProps) => (
+      <SolidLine {...props} strokeWidth={2} strokeLinecap="butt" />
+    ));
 
     return (
       <CartesianChart
         height={150}
         series={[
-          { id: 'gains', data: gains, yAxisId: 'profit', color: theme.color.bgPositive, stackId: 'bars' },
-          { id: 'losses', data: losses, yAxisId: 'profit', color: theme.color.bgNegative, stackId: 'bars' },
+          {
+            id: 'gains',
+            data: gains,
+            yAxisId: 'profit',
+            color: theme.color.bgPositive,
+            stackId: 'bars',
+          },
+          {
+            id: 'losses',
+            data: losses,
+            yAxisId: 'profit',
+            color: theme.color.bgNegative,
+            stackId: 'bars',
+          },
           {
             id: 'revenue',
             data: [128, 118, 122, 116, 120, 114, 118, 122, 126, 130, 134, 138],
@@ -728,17 +748,52 @@ function TradingTrends() {
             color: theme.color.fgMuted,
           },
         ]}
-        xAxis={{ scaleType: 'band', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }}
+        xAxis={{
+          scaleType: 'band',
+          data: [
+            'Jan',
+            'Feb',
+            'Mar',
+            'Apr',
+            'May',
+            'Jun',
+            'Jul',
+            'Aug',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Dec',
+          ],
+        }}
         yAxis={[
-          { id: 'profit', range: ({ min, max }) => ({ min: min, max: max - 64 }), domain: { min: -40, max: 40 } },
-          { id: 'revenue', range: ({ min, max }) => ({ min: max - 64, max }), domain: { min: 100 } },
+          {
+            id: 'profit',
+            range: ({ min, max }) => ({ min: min, max: max - 64 }),
+            domain: { min: -40, max: 40 },
+          },
+          {
+            id: 'revenue',
+            range: ({ min, max }) => ({ min: max - 64, max }),
+            domain: { min: 100 },
+          },
         ]}
       >
-        <YAxis axisId="profit" position="left" showGrid tickLabelFormatter={renderProfit} GridLineComponent={ThinSolidLine} />
+        <YAxis
+          axisId="profit"
+          position="left"
+          showGrid
+          tickLabelFormatter={renderProfit}
+          GridLineComponent={ThinSolidLine}
+        />
         <XAxis />
-        <ReferenceLine LineComponent={ThickSolidLine} dataY={0} yAxisId="profit" stroke={`rgba(${theme.color.gray15.slice(4)})`} />
+        <ReferenceLine
+          LineComponent={ThickSolidLine}
+          dataY={0}
+          yAxisId="profit"
+          stroke={`rgba(${theme.color.gray15.slice(4)})`}
+        />
         <BarPlot seriesIds={['gains', 'losses']} />
-        <Line seriesId="revenue"  showArea />
+        <Line seriesId="revenue" showArea />
       </CartesianChart>
     );
   }

package/mcp-docs/mobile/components/LineChart.txt

@@ -184,7 +184,7 @@ function LiveUpdates() {
 By default, null values in data create gaps in a line. Use `connectNulls` to skip null values and draw a continuous line.
 Note that scrubber beacons and points are still only shown at non-null data values.
 
-```jsx
+```tsx
 function MissingData() {
   const theme = useTheme();
   const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
@@ -359,8 +359,7 @@ function Points() {
 
 Renders are done on JS thread, other code is in UI
 
-```jsx
-
+```tsx
 function Performance() {
   const tabs = useMemo(
     () => [
@@ -557,7 +556,7 @@ By default, charts will not track gestures that go outside of the chart bounds.
 
 You can configure chart transitions using `transition` on LineChart and `beaconTransitions` on [Scrubber](/components/graphs/Scrubber). You can also disable animations by setting the `animate` on LineChart to `false`.
 
-```jsx
+```tsx
 function Transitions() {
   const theme = useTheme();
   const dataCount = 20;
@@ -698,7 +697,7 @@ function Transitions() {
 
 You can use `accessibilityLabel` on the chart to provide a descriptive label.
 
-```jsx
+```tsx
 function BasicAccessible() {
   const [scrubberPosition, setScrubberPosition] = useState<number | undefined>();
   const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
@@ -754,7 +753,7 @@ function BasicAccessible() {
 
 Using `showXAxis` and `showYAxis` allows you to display the axes. For more information, such as adjusting domain and range, see [XAxis](/components/graphs/XAxis) and [YAxis](/components/graphs/YAxis).
 
-```jsx
+```tsx
 <LineChart
   showArea
   showXAxis
@@ -820,7 +819,7 @@ Gradients can be applied to the y-axis (default) or x-axis. Each stop requires a
 
 Values in between stops will be interpolated smoothly using [srgb color space](https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty).
 
-```jsx
+```tsx
 function Gradients() {
   const theme = useTheme();
   const spectrumColors: ThemeVars.SpectrumHue[] = [
@@ -937,7 +936,7 @@ function Gradients() {
 
 You can even pass in a separate gradient for your `Line` and `Area` components.
 
-```jsx
+```tsx
 function GainLossChart() {
   const theme = useTheme();
   const data = useMemo(() => [-40, -28, -21, -5, 48, -5, -28, 2, -29, -46, 16, -30, -29, 8], []);
@@ -1005,7 +1004,7 @@ Using `legend` will add a default [Legend](/components/graphs/Legend) to your ch
 
 You can use `legendPosition` to place the legend at different positions around the chart.
 
-```jsx
+```tsx
 <LineChart
   legend
   showArea
@@ -1035,7 +1034,8 @@ You can use `legendPosition` to place the legend at different positions around t
   }}
   yAxis={{
     showGrid: true,
-    tickLabelFormatter: (value: number) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(value),
+    tickLabelFormatter: (value: number) =>
+      new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(value),
   }}
 />
 ```
@@ -1116,7 +1116,7 @@ You can also add instances of [ReferenceLine](/components/graphs/ReferenceLine)
 
 You can also add instances of [Point](/components/graphs/Point) directly inside of a LineChart.
 
-```jsx
+```tsx
 function HighLowPrice() {
   const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
   const minPrice = Math.min(...data);
@@ -1168,7 +1168,7 @@ You can customize the line used for and which series will render a scrubber beac
 
 You can have scrubber beacon's pulse by either adding `idlePulse` to Scrubber or use Scrubber's ref to dynamically pulse.
 
-```jsx
+```tsx
 function StylingScrubber() {
   const theme = useTheme();
   const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
@@ -1227,7 +1227,7 @@ Charts by default take up `100%` of the `width` and `height` available, but can
 
 You can also have charts in a compact form.
 
-```jsx
+```tsx
 function Compact() {
   const theme = useTheme();
   const dimensions = { width: 62, height: 18 };
@@ -1338,7 +1338,7 @@ function Compact() {
 
 You can use [PeriodSelector](/components/graphs/PeriodSelector) to have a chart where the user can select a time period and the chart automatically animates.
 
-```jsx
+```tsx
 function AssetPriceWithDottedArea() {
   const fontMgr = useMemo(() => {
     const fontProvider = Skia.TypefaceFontProvider.Make();
@@ -1533,7 +1533,7 @@ function AssetPriceWithDottedArea() {
 
 You can adjust [YAxis](/components/graphs/YAxis) and [Scrubber](/components/graphs/Scrubber) to have a chart where the y-axis is overlaid and the beacon is inverted in style.
 
-```jsx
+```tsx
 function MonotoneAssetPrice() {
   const theme = useTheme();
   const prices = sparklineInteractiveData.hour;
@@ -1775,7 +1775,7 @@ function ServiceAvailability() {
 
 You can combine multiple lines within a series to change styles dynamically.
 
-```jsx
+```tsx
 function ForecastAssetPrice() {
   const startYear = 2020;
   const data = [50, 45, 47, 46, 54, 54, 60, 61, 63, 66, 70];

package/mcp-docs/mobile/components/MessagingCard.txt

@@ -87,7 +87,12 @@ Use `mediaPlacement` to control the position of media content.
 
 ### Upsell Card Styles
 
-MessagingCard with `type="upsell"` supports various background colors to match different promotional purposes. Use the `background` prop for semantic tokens, or `dangerouslySetBackground` for custom spectrum colors.
+MessagingCard with `type="upsell"` supports various background colors to match different promotional purposes. Use the `background` prop for semantic tokens.
+
+For **custom background colors**, use the recommended approach:
+
+- **Non-interactive cards** (`renderAsPressable={false}` or omitted): set the background via `styles.root` (e.g. `styles={{ root: { backgroundColor: 'rgb(...)' } }}`).
+- **Interactive cards** (`renderAsPressable` with `onPress`): set the background via `blendStyles.background` (e.g. `blendStyles={{ background: 'rgb(...)' }}`) so press states are handled correctly.
 
 #### General Upsell
 
@@ -152,7 +157,7 @@ function FeatureUpsell() {
         <MessagingCard
           key={i}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" font="headline">
               Up to 3.29% APR on ETH
@@ -194,7 +199,7 @@ function CommunityUpsell() {
         <MessagingCard
           key={i}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" font="headline">
               Join the community
@@ -256,7 +261,7 @@ function ProductUpsell() {
         <MessagingCard
           key={card.title}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" font="headline">
               {card.title}
@@ -303,7 +308,7 @@ function NewsUpsell() {
         <MessagingCard
           key={i}
           type="upsell"
-          dangerouslySetBackground={card.bg}
+          styles={{ root: { backgroundColor: card.bg } }}
           title={
             <Text color="fgInverse" font="headline">
               Help defend crypto in America
@@ -378,7 +383,7 @@ function DismissibleCards() {
     <VStack gap={2}>
       <MessagingCard
         type="upsell"
-        dangerouslySetBackground={`rgb(${spectrum.teal70})`}
+        styles={{ root: { backgroundColor: `rgb(${spectrum.teal70})` } }}
         title="Dismissible Upsell"
         description="Upsell card with dismiss button"
         width={320}
@@ -578,8 +583,10 @@ function DismissibleCardsList() {
           <MessagingCard
             key={card.id}
             type={card.type}
-            dangerouslySetBackground={
-              card.type === 'upsell' ? `rgb(${spectrum.gray100})` : undefined
+            styles={
+              card.type === 'upsell'
+                ? { root: { backgroundColor: `rgb(${spectrum.gray100})` } }
+                : undefined
             }
             title={card.title}
             description={card.description}
@@ -629,7 +636,7 @@ function InteractiveCards() {
         renderAsPressable
         onPress={() => console.log('Card pressed!')}
         type="upsell"
-        dangerouslySetBackground={`rgb(${spectrum.teal70})`}
+        blendStyles={{ background: `rgb(${spectrum.teal70})` }}
         title="Interactive Upsell"
         description="Tap to interact"
         width={320}
@@ -757,7 +764,7 @@ function MultipleCards() {
           renderAsPressable
           onPress={() => console.log('clicked')}
           type="upsell"
-          dangerouslySetBackground={`rgb(${spectrum.purple70})`}
+          blendStyles={{ background: `rgb(${spectrum.purple70})` }}
           title="Card 3"
           description="Card with onPress handler"
           tag="Action"
@@ -832,7 +839,7 @@ When you need both `onDismissButtonPress` and want the entire card to be pressab
 
 #### Color Contrast
 
-MessagingCard supports custom backgrounds via `background` and `dangerouslySetBackground` props. When using custom background colors, ensure sufficient color contrast between text and background:
+MessagingCard supports custom backgrounds via the `background` prop and, for custom colors, `styles.root` (non-interactive) or `blendStyles.background` (interactive). When using custom background colors, ensure sufficient color contrast between text and background:
 
 - Use `fgInverse` text color with dark backgrounds (e.g., `accentBoldPurple`, `bgInverse`)
 - Use `fg` text color with light backgrounds (e.g., `bgPrimaryWash`, `bgAlternate`)

package/mcp-docs/mobile/components/Numpad.txt

@@ -25,7 +25,7 @@ Primary use case for this is when a user is inputing a PIN code. Notice it does
   alt="Pin Numpad"
 />
 
-```jsx
+```tsx
 const PinNumpadExample = () => {
   // localState
   const [visible, { toggleOn, toggleOff }] = useToggler(false);
@@ -100,7 +100,7 @@ Best when used in the context of a transactional scenario. This could range from
   alt="Transactional Numpad"
 />
 
-```jsx
+```tsx
 const VALUE_MAX = 1000000;
 const TransactionalNumpadExample = () => {
   const [visible, { toggleOn, toggleOff }] = useToggler(false);

package/mcp-docs/mobile/components/Point.txt

@@ -81,7 +81,7 @@ function MyChart() {
 
 You can conditionally render points to highlight specific values in your data, such as maximum/minimum values or outliers.
 
-```jsx
+```tsx
 function AssetPriceWithMinMax() {
   const data = sparklineInteractiveData.hour.map((d) => d.value);
 
@@ -121,7 +121,7 @@ function AssetPriceWithMinMax() {
       ]}
     />
   );
-};
+}
 ```
 
 ### Styling