@coinbase/cds-mcp-server 8.47.1 → 8.47.3

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

@@ -13,9 +13,36 @@ import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'
 ### Default usage
 
 ```jsx
-<Box padding={3} width="100%">
-  <SparklineInteractivePrice data={sparklineInteractiveData} strokeColor="#F7931A" />
-</Box>
+() => {
+  const periods = [
+    { label: '1H', value: 'hour' },
+    { label: '1D', value: 'day' },
+    { label: '1W', value: 'week' },
+    { label: '1M', value: 'month' },
+    { label: '1Y', value: 'year' },
+    { label: 'All', value: 'all' },
+  ];
+
+  const formatDate = useCallback((value, period) => {
+    if (period === 'hour' || period === 'day')
+      return value.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' });
+    if (period === 'week' || period === 'month')
+      return value.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' });
+    return value.toLocaleDateString('en-US', { month: 'numeric', year: 'numeric' });
+  }, []);
+
+  return (
+    <Box padding={3} width="100%">
+      <SparklineInteractive
+        data={sparklineInteractiveData}
+        defaultPeriod="day"
+        formatDate={formatDate}
+        periods={periods}
+        strokeColor="#F7931A"
+      />
+    </Box>
+  );
+};
 ```
 
 ### Fill Type
@@ -23,34 +50,110 @@ import { SparklineInteractive } from '@coinbase/cds-mobile-visualization'
 The fill will be added by default with a gradient style. You can set `fillType="dotted"` to get a dotted gradient fill.
 
 ```jsx
-<Box padding={3} width="100%">
-  <SparklineInteractivePrice
-    fill
-    data={sparklineInteractiveData}
-    fillType="dotted"
-    strokeColor="#F7931A"
-  />
-</Box>
+() => {
+  const periods = [
+    { label: '1H', value: 'hour' },
+    { label: '1D', value: 'day' },
+    { label: '1W', value: 'week' },
+    { label: '1M', value: 'month' },
+    { label: '1Y', value: 'year' },
+    { label: 'All', value: 'all' },
+  ];
+
+  const formatDate = useCallback((value, period) => {
+    if (period === 'hour' || period === 'day')
+      return value.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' });
+    if (period === 'week' || period === 'month')
+      return value.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' });
+    return value.toLocaleDateString('en-US', { month: 'numeric', year: 'numeric' });
+  }, []);
+
+  return (
+    <Box padding={3} width="100%">
+      <SparklineInteractive
+        fill
+        data={sparklineInteractiveData}
+        defaultPeriod="day"
+        fillType="dotted"
+        formatDate={formatDate}
+        periods={periods}
+        strokeColor="#F7931A"
+      />
+    </Box>
+  );
+};
 ```
 
 ### Compact
 
 ```jsx
-<Box padding={3} width="100%">
-  <SparklineInteractivePrice data={sparklineInteractiveData} compact strokeColor="#F7931A" />
-</Box>
+() => {
+  const periods = [
+    { label: '1H', value: 'hour' },
+    { label: '1D', value: 'day' },
+    { label: '1W', value: 'week' },
+    { label: '1M', value: 'month' },
+    { label: '1Y', value: 'year' },
+    { label: 'All', value: 'all' },
+  ];
+
+  const formatDate = useCallback((value, period) => {
+    if (period === 'hour' || period === 'day')
+      return value.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' });
+    if (period === 'week' || period === 'month')
+      return value.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' });
+    return value.toLocaleDateString('en-US', { month: 'numeric', year: 'numeric' });
+  }, []);
+
+  return (
+    <Box padding={3} width="100%">
+      <SparklineInteractive
+        compact
+        data={sparklineInteractiveData}
+        defaultPeriod="day"
+        formatDate={formatDate}
+        periods={periods}
+        strokeColor="#F7931A"
+      />
+    </Box>
+  );
+};
 ```
 
 ### Hide period selector
 
 ```jsx
-<Box padding={3} width="100%">
-  <SparklineInteractivePrice
-    data={sparklineInteractiveData}
-    hidePeriodSelector
-    strokeColor="#F7931A"
-  />
-</Box>
+() => {
+  const periods = [
+    { label: '1H', value: 'hour' },
+    { label: '1D', value: 'day' },
+    { label: '1W', value: 'week' },
+    { label: '1M', value: 'month' },
+    { label: '1Y', value: 'year' },
+    { label: 'All', value: 'all' },
+  ];
+
+  const formatDate = useCallback((value, period) => {
+    if (period === 'hour' || period === 'day')
+      return value.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' });
+    if (period === 'week' || period === 'month')
+      return value.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' });
+    return value.toLocaleDateString('en-US', { month: 'numeric', year: 'numeric' });
+  }, []);
+
+  return (
+    <Box padding={3} width="100%">
+      <SparklineInteractive
+        data={sparklineInteractiveData}
+        defaultPeriod="day"
+        formatDate={formatDate}
+        hidePeriodSelector
+        periods={periods}
+        strokeColor="#F7931A"
+      />
+    </Box>
+  );
+};
 ```
 
 ### Scaling Factor
@@ -58,48 +161,131 @@ The fill will be added by default with a gradient style. You can set `fillType="
 The scaling factor is usually used when you want to show less variance in the chart. An example of this is a stable coin that doesn't change price by more than a few cents.
 
 ```jsx
-<Box padding={3} width="100%">
-  <SparklineInteractivePrice
-    data={sparklineInteractiveData}
-    strokeColor="#F7931A"
-    yAxisScalingFactor={0.1}
-  />
-</Box>
-```
+() => {
+  const periods = [
+    { label: '1H', value: 'hour' },
+    { label: '1D', value: 'day' },
+    { label: '1W', value: 'week' },
+    { label: '1M', value: 'month' },
+    { label: '1Y', value: 'year' },
+    { label: 'All', value: 'all' },
+  ];
 
-### With header
+  const formatDate = useCallback((value, period) => {
+    if (period === 'hour' || period === 'day')
+      return value.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' });
+    if (period === 'week' || period === 'month')
+      return value.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' });
+    return value.toLocaleDateString('en-US', { month: 'numeric', year: 'numeric' });
+  }, []);
 
-```jsx
-<Box padding={3} width="100%">
-  <SparklineInteractivePriceWithHeader data={sparklineInteractiveData} fill strokeColor="#F7931A" />
-</Box>
+  return (
+    <Box padding={3} width="100%">
+      <SparklineInteractive
+        data={sparklineInteractiveData}
+        defaultPeriod="day"
+        formatDate={formatDate}
+        periods={periods}
+        strokeColor="#F7931A"
+        yAxisScalingFactor={0.1}
+      />
+    </Box>
+  );
+};
 ```
 
-### Custom hover data
+### With header
 
 ```jsx
 <Box padding={3} width="100%">
-  <SparklineInteractivePrice
+  <SparklineInteractive
     fill
     data={sparklineInteractiveData}
-    hoverData={sparklineInteractiveHoverData}
+    defaultPeriod="day"
+    formatDate={formatDate}
+    headerNode={<SparklineInteractiveHeader ref={headerRef} defaultLabel="Bitcoin Price" ... />}
+    onPeriodChanged={handlePeriodChanged}
+    onScrub={handleScrub}
+    onScrubEnd={handleScrubEnd}
+    periods={periods}
     strokeColor="#F7931A"
   />
 </Box>
 ```
 
+### Custom hover data
+
+```jsx
+() => {
+  const periods = [
+    { label: '1H', value: 'hour' },
+    { label: '1D', value: 'day' },
+    { label: '1W', value: 'week' },
+    { label: '1M', value: 'month' },
+    { label: '1Y', value: 'year' },
+    { label: 'All', value: 'all' },
+  ];
+
+  const formatDate = useCallback((value, period) => {
+    if (period === 'hour' || period === 'day')
+      return value.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' });
+    if (period === 'week' || period === 'month')
+      return value.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' });
+    return value.toLocaleDateString('en-US', { month: 'numeric', year: 'numeric' });
+  }, []);
+
+  return (
+    <Box padding={3} width="100%">
+      <SparklineInteractive
+        fill
+        data={sparklineInteractiveData}
+        defaultPeriod="day"
+        formatDate={formatDate}
+        hoverData={sparklineInteractiveHoverData}
+        periods={periods}
+        strokeColor="#F7931A"
+      />
+    </Box>
+  );
+};
+```
+
 ### Period selector placement
 
 `periodSelectorPlacement` can be used to place the period selector in different positions (`above` or `below`).
 
 ```jsx
-<Box padding={3} width="100%">
-  <SparklineInteractivePrice
-    data={sparklineInteractiveData}
-    strokeColor="#F7931A"
-    periodSelectorPlacement="below"
-  />
-</Box>
+() => {
+  const periods = [
+    { label: '1H', value: 'hour' },
+    { label: '1D', value: 'day' },
+    { label: '1W', value: 'week' },
+    { label: '1M', value: 'month' },
+    { label: '1Y', value: 'year' },
+    { label: 'All', value: 'all' },
+  ];
+
+  const formatDate = useCallback((value, period) => {
+    if (period === 'hour' || period === 'day')
+      return value.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' });
+    if (period === 'week' || period === 'month')
+      return value.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' });
+    return value.toLocaleDateString('en-US', { month: 'numeric', year: 'numeric' });
+  }, []);
+
+  return (
+    <Box padding={3} width="100%">
+      <SparklineInteractive
+        data={sparklineInteractiveData}
+        defaultPeriod="day"
+        formatDate={formatDate}
+        periodSelectorPlacement="below"
+        periods={periods}
+        strokeColor="#F7931A"
+      />
+    </Box>
+  );
+};
 ```
 
 ### Custom styles
@@ -108,9 +294,16 @@ You can also provide custom styles, such as to remove bottom padding from the he
 
 ```jsx
 <Box padding={3} width="100%">
-  <SparklineInteractivePriceWithHeader
-    data={sparklineInteractiveData}
+  <SparklineInteractive
     fill
+    data={sparklineInteractiveData}
+    defaultPeriod="day"
+    formatDate={formatDate}
+    headerNode={<SparklineInteractiveHeader ref={headerRef} defaultLabel="Bitcoin Price" ... />}
+    onPeriodChanged={handlePeriodChanged}
+    onScrub={handleScrub}
+    onScrubEnd={handleScrubEnd}
+    periods={periods}
     strokeColor="#F7931A"
     styles={{ header: { paddingBottom: 0 } }}
   />

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

@@ -14,7 +14,17 @@ import { SparklineInteractiveHeader } from '@coinbase/cds-mobile-visualization'
 
 ```jsx
 <Box padding={3} width="100%">
-  <SparklineInteractivePriceWithHeader data={sparklineInteractiveData} strokeColor="#F7931A" />
+  <SparklineInteractive
+    data={sparklineInteractiveData}
+    defaultPeriod="day"
+    formatDate={formatDate}
+    headerNode={<SparklineInteractiveHeader ref={headerRef} defaultLabel="Bitcoin Price" ... />}
+    onPeriodChanged={handlePeriodChanged}
+    onScrub={handleScrub}
+    onScrubEnd={handleScrubEnd}
+    periods={periods}
+    strokeColor="#F7931A"
+  />
 </Box>
 ```
 
@@ -24,7 +34,18 @@ The fill will be added by default
 
 ```jsx
 <Box padding={3} width="100%">
-  <SparklineInteractivePriceWithHeader data={sparklineInteractiveData} fill strokeColor="#F7931A" />
+  <SparklineInteractive
+    fill
+    data={sparklineInteractiveData}
+    defaultPeriod="day"
+    formatDate={formatDate}
+    headerNode={<SparklineInteractiveHeader ref={headerRef} defaultLabel="Bitcoin Price" ... />}
+    onPeriodChanged={handlePeriodChanged}
+    onScrub={handleScrub}
+    onScrubEnd={handleScrubEnd}
+    periods={periods}
+    strokeColor="#F7931A"
+  />
 </Box>
 ```
 
@@ -32,11 +53,18 @@ The fill will be added by default
 
 ```jsx
 <Box padding={3} width="100%">
-  <SparklineInteractivePriceWithHeader
+  <SparklineInteractive
     compact
     fill
-    strokeColor="#F7931A"
     data={sparklineInteractiveData}
+    defaultPeriod="day"
+    formatDate={formatDate}
+    headerNode={<SparklineInteractiveHeader ref={headerRef} compact defaultLabel="Bitcoin Price" ... />}
+    onPeriodChanged={handlePeriodChanged}
+    onScrub={handleScrub}
+    onScrubEnd={handleScrubEnd}
+    periods={periods}
+    strokeColor="#F7931A"
   />
 </Box>
 ```
@@ -45,17 +73,31 @@ The fill will be added by default
 
 ```jsx
 <Box padding={3} width="100%">
-  <SparklineInteractivePriceWithHeader
+  <SparklineInteractive
     data={sparklineInteractiveData}
-    strokeColor="#F7931A"
-    labelNode={
-      <HStack gap={1} alignItems="center" paddingBottom={0}>
-        <Icon active name="wallet" size="s" />
-        <Text as="span" font="title3">
-          CustomHeader
-        </Text>
-      </HStack>
+    defaultPeriod="day"
+    formatDate={formatDate}
+    headerNode={
+      <SparklineInteractiveHeader
+        ref={headerRef}
+        defaultLabel="CustomHeader"
+        defaultSubHead={generateSubHead(lastPoint, currentPeriod)}
+        defaultTitle={`$${formatPrice(lastPoint.value)}`}
+        labelNode={
+          <HStack gap={1} alignItems="center" paddingBottom={0}>
+            <Icon active name="wallet" size="s" />
+            <Text as="span" font="title3">
+              CustomHeader
+            </Text>
+          </HStack>
+        }
+      />
     }
+    onPeriodChanged={handlePeriodChanged}
+    onScrub={handleScrub}
+    onScrubEnd={handleScrubEnd}
+    periods={periods}
+    strokeColor="#F7931A"
   />
 </Box>
 ```

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

@@ -201,7 +201,7 @@ Properties related to the visual appearance of the XAxis are set on the componen
 
 You can set the position of an axis to `top` or `bottom` (default).
 
-```jsx
+```tsx
 function XAxisPositionExample() {
   const theme = useTheme();
   const lineA = [5, 5, 10, 90, 85, 70, 30, 25, 25];
@@ -253,7 +253,6 @@ function XAxisPositionExample() {
   return (
     <LineChart
       enableScrubbing
-
       height={400}
       series={[
         {
@@ -288,7 +287,7 @@ function XAxisPositionExample() {
       <Scrubber />
     </LineChart>
   );
-};
+}
 ```
 
 #### Grid
@@ -329,7 +328,7 @@ function XAxisGridExample() {
 
 You can also customize the grid lines using the `GridLineComponent` prop.
 
-```jsx
+```tsx
 function CustomGridLineExample() {
   const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
 
@@ -348,7 +347,7 @@ function CustomGridLineExample() {
       }}
     >
       <XAxis showLine showTickMarks showGrid GridLineComponent={ThinSolidLine} />
-      <Line seriesId="prices"  showArea />
+      <Line seriesId="prices" showArea />
       <Scrubber />
     </CartesianChart>
   );

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

@@ -193,7 +193,7 @@ function YAxisGridExample() {
 
 You can also customize the grid lines using the `GridLineComponent` prop.
 
-```jsx
+```tsx
 function CustomGridLineExample() {
   const theme = useTheme();
   const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
@@ -229,7 +229,7 @@ function CustomGridLineExample() {
       <ReferenceLine LineComponent={SolidLine} dataY={0} />
     </CartesianChart>
   );
-};
+}
 ```
 
 #### Line

package/mcp-docs/mobile/getting-started/theming.txt

@@ -270,7 +270,7 @@ You can extend the theme by adding custom theme variables. In this example we'll
 
 Start by overriding interfaces in the `ThemeVarsExtended` namespace to add new theme variables. Only the key names are used, the `void` type is just a necessary placeholder.
 
-```jsx
+```tsx
 declare module '@coinbase/cds-common/core/theme' {
   export namespace ThemeVarsExtended {
     export interface Color {