@coinbase/cds-mcp-server 8.28.1 → 8.29.0

package/CHANGELOG.md

@@ -8,6 +8,14 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.29.0 ((12/12/2025, 01:12 PM PST))
+
+This is an artificial version bump with no new change.
+
+## 8.28.2 ((12/12/2025, 06:23 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.28.1 ((12/10/2025, 04:33 PM PST))
 
 This is an artificial version bump with no new change.

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

@@ -38,7 +38,9 @@ Check [here](/components/layout/AccordionItem) for AccordionItem Props.
     media={<CellMedia active type="icon" name="wallet" title="BTC" />}
     onPress={(itemKey) => console.log(itemKey)}
   >
-    <TextBody as="p">{loremIpsum.repeat(20)}</TextBody>
+    <Text as="p" font="body">
+      {loremIpsum.repeat(20)}
+    </Text>
   </AccordionItem>
 </Accordion>
 ```

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

@@ -111,7 +111,9 @@ function AlertOnModalExample() {
       openModal(
         <Modal visible onRequestClose={closeModal}>
           <ModalBody>
-            <TextBody as="p">{loremIpsum}</TextBody>
+            <Text as="p" font="body">
+              {loremIpsum}
+            </Text>
           </ModalBody>
           <ModalFooter
             primaryAction={<Button onPress={closeModal}>Save</Button>}

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

@@ -25,10 +25,10 @@ The global warning banner is used to communicate important alerts or warnings to
   primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
   secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
 >
-  <TextLabel2>
+  <Text font="label2">
     Your funds are safe. We’re looking into it and expect our usual service to return soon.
     <Link to="https://www.coinbase.com">Learn more</Link>
-  </TextLabel2>
+  </Text>
 </Banner>
 ```
 
@@ -46,10 +46,10 @@ The In-line Error Banner is used to display specific error messages directly ben
   primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
   secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
 >
-  <TextLabel2>
+  <Text font="label2">
     Your funds are safe. We’re looking into it and expect our usual service to return soon.
     <Link to="https://www.coinbase.com">Learn more</Link>
-  </TextLabel2>
+  </Text>
 </Banner>
 ```
 
@@ -65,10 +65,10 @@ The Contextual Promotional Banner is used to highlight special offers, promotion
   title="Some features are temporarily unavailable"
   variant="promotional"
 >
-  <TextLabel2>
+  <Text font="label2">
     Your funds are safe. We’re looking into it and expect our usual service to return soon.
     <Link to="https://www.coinbase.com">Learn more</Link>
-  </TextLabel2>
+  </Text>
 </Banner>
 ```
 
@@ -87,10 +87,10 @@ The in-line Informational Banner is used to provide users with additional inform
     primaryAction={<Link to="https://www.coinbase.com">Primary</Link>}
     secondaryAction={<Link to="https://www.coinbase.com">Secondary</Link>}
   >
-    <TextLabel2>
+    <Text font="label2">
       Your funds are safe. We’re looking into it and expect our usual service to return soon.
       <Link to="https://www.coinbase.com">Learn more</Link>
-    </TextLabel2>
+    </Text>
   </Banner>
   <Banner
     startIcon="warning"
@@ -99,9 +99,9 @@ The in-line Informational Banner is used to provide users with additional inform
     title="Some features are temporarily unavailable"
     variant="warning"
   >
-    <TextLabel2>
+    <Text font="label2">
       <Link to="https://www.coinbase.com">Retry</Link>
-    </TextLabel2>
+    </Text>
   </Banner>
 </VStack>
 ```
@@ -120,9 +120,9 @@ Customize `borderRadius` to align contextual or in-line banners with surrounding
     title="Rounded contextual banner"
     variant="informational"
   >
-    <TextLabel2>
+    <Text font="label2">
       Use moderate rounding to soften banners that live within card-based layouts.
-    </TextLabel2>
+    </Text>
   </Banner>
   <Banner
     borderRadius={400}
@@ -134,9 +134,9 @@ Customize `borderRadius` to align contextual or in-line banners with surrounding
     title="Rounded inline banner"
     variant="promotional"
   >
-    <TextLabel2>
+    <Text font="label2">
       Larger radii can help inline banners feel cohesive with pill-shaped buttons or chips nearby.
-    </TextLabel2>
+    </Text>
   </Banner>
 </VStack>
 ```

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

@@ -10,79 +10,222 @@ import { Button } from '@coinbase/cds-mobile/buttons/Button'
 
 ## Examples
 
-### Primary Button
+Buttons allow users to take actions and make choices with a single tap. They communicate what action will occur when the user interacts with them.
 
-Use primary buttons for high emphasis actions. These buttons have the most visual impact and should be reserved for the most important, final actions that complete a flow, like Save, Join now, or Confirm. Try to use one per screen. Multiple primary buttons make it confusing for the user to understand what action they should take.
+### Basics
+
+The only required prop is `children`, which is the button's label. Buttons default to the `primary` variant.
 
 ```jsx
-<Button onPress={console.log} variant="primary">
-  Primary
-</Button>
+<Button onPress={console.log}>Get started</Button>
 ```
 
-### Secondary Button
+### Variants
 
-These buttons have a medium level of emphasis that should be used for non-critical actions. Secondary buttons can be used on pages without restrictions and works well for multiple actions of equal weight. They can be used in conjunction with a Primary Button or independently.
+Use variants to communicate the importance and intent of an action.
+
+- **Primary** — High emphasis for main actions like "Save" or "Confirm". Limit to one per screen.
+- **Secondary** — Medium emphasis for multiple actions of equal weight.
+- **Tertiary** — High contrast with inverted background.
+- **Negative** — Destructive actions that can't be undone. Use sparingly.
 
 ```jsx
-<Button onPress={console.log} variant="secondary">
-  Secondary
-</Button>
+<HStack gap={2} flexWrap="wrap">
+  <Button onPress={console.log} variant="primary">
+    Primary
+  </Button>
+  <Button onPress={console.log} variant="secondary">
+    Secondary
+  </Button>
+  <Button onPress={console.log} variant="tertiary">
+    Tertiary
+  </Button>
+  <Button onPress={console.log} variant="negative">
+    Negative
+  </Button>
+</HStack>
 ```
 
-### Tertiary Button
+#### Transparent
 
-These buttons provide high contrast with the background through the use of the themable inverted background color.
+Use transparent buttons for supplementary actions with lower prominence. The container is only visible on interaction. Works with any variant.
 
 ```jsx
-<Button onPress={console.log} variant="tertiary">
-  Tertiary
-</Button>
+<HStack gap={2}>
+  <Button onPress={console.log} transparent>
+    Primary
+  </Button>
+  <Button onPress={console.log} variant="secondary" transparent>
+    Secondary
+  </Button>
+  <Button onPress={console.log} variant="negative" transparent>
+    Negative
+  </Button>
+</HStack>
 ```
 
-### Negative Button
+### States
+
+#### Loading
 
-Negative buttons should be used sparingly for destructive actions that will result in data loss, can’t be undone, or will have significant consequences. They commonly appear in confirmation dialogs as the final confirmation before deleting.
+Use the `loading` prop to indicate an action is in progress. The button becomes non-interactive and displays a spinner while preserving its width.
 
 ```jsx
-<Button onPress={console.log} variant="negative">
-  Negative
-</Button>
+<HStack gap={2}>
+  <Button onPress={console.log} loading>
+    Save changes
+  </Button>
+  <Button onPress={console.log} variant="secondary" loading>
+    Submit
+  </Button>
+</HStack>
 ```
 
-### Transparent Button
+#### Disabled
 
-Transparent buttons are used for less important actions that are supplementary. These buttons have lower prominence since its container is not visible until the button is interacted with. Transparent buttons are frequently used on Cards and can be placed on a variety of backgrounds.
+Use the `disabled` prop to prevent interaction and indicate the action is unavailable.
 
 ```jsx
 <HStack gap={2}>
-  <Button onPress={console.log} transparent>
+  <Button disabled onPress={console.log}>
     Primary
   </Button>
-  <Button onPress={console.log} variant="secondary" transparent>
+  <Button disabled onPress={console.log} variant="secondary">
     Secondary
   </Button>
-  <Button onPress={console.log} variant="negative" transparent>
+  <Button disabled onPress={console.log} variant="negative">
     Negative
   </Button>
 </HStack>
 ```
 
-### Buttons with end icon
+### Sizing
+
+#### Compact
 
-You can add an icon after the label of a button.
+Use `compact` for smaller buttons with reduced padding. Useful in dense UIs or alongside other compact elements.
 
 ```jsx
-<HStack gap={2}>
-  <Button onPress={console.log} endIcon="add" endIconActive variant="secondary" compact>
-    Select file
+<HStack gap={2} alignItems="center">
+  <Button onPress={console.log} compact>
+    Compact
+  </Button>
+  <Button onPress={console.log}>Default</Button>
+</HStack>
+```
+
+#### Block
+
+Use `block` to make the button expand to fill its container width.
+
+```jsx
+<VStack gap={2}>
+  <Button onPress={console.log} block>
+    Full width button
+  </Button>
+  <Button onPress={console.log} variant="secondary" block>
+    Another full width
   </Button>
+</VStack>
+```
+
+### Icons
+
+#### End Icon
+
+Add an icon after the label to provide additional context or indicate direction.
+
+```jsx
+<HStack gap={2}>
   <Button onPress={console.log} endIcon="forwardArrow" variant="secondary" compact>
     See more
   </Button>
+  <Button onPress={console.log} endIcon="externalLink" variant="secondary" compact>
+    Open link
+  </Button>
+</HStack>
+```
+
+#### Start Icon
+
+Add an icon before the label to reinforce the action.
+
+```jsx
+<HStack gap={2}>
+  <Button onPress={console.log} startIcon="add" startIconActive variant="secondary" compact>
+    Add item
+  </Button>
+  <Button onPress={console.log} startIcon="download" variant="secondary" compact>
+    Download
+  </Button>
+</HStack>
+```
+
+#### Full Width with Icons
+
+When using `block` with icons, the content automatically spreads across the button width.
+
+```jsx
+<Button onPress={console.log} startIcon="wallet" endIcon="forwardArrow" variant="secondary" block>
+  Connect wallet
+</Button>
+```
+
+### Accessibility
+
+Buttons automatically use their `children` as the accessible label. For buttons with only icons or ambiguous labels, provide an `accessibilityLabel`.
+
+```jsx
+<Button onPress={handleClose} accessibilityLabel="Close dialog">
+  ×
+</Button>
+```
+
+### Composed Examples
+
+#### Confirmation Dialog
+
+A common pattern using primary and secondary buttons together.
+
+```jsx
+<HStack gap={2} justifyContent="flex-end">
+  <Button onPress={console.log} variant="secondary" transparent>
+    Cancel
+  </Button>
+  <Button onPress={console.log}>Confirm</Button>
+</HStack>
+```
+
+#### Destructive Confirmation
+
+Use negative buttons with a secondary cancel option for destructive actions.
+
+```jsx
+<HStack gap={2} justifyContent="flex-end">
+  <Button onPress={console.log} variant="secondary" transparent>
+    Cancel
+  </Button>
+  <Button onPress={console.log} variant="negative">
+    Delete
+  </Button>
 </HStack>
 ```
 
+#### Form Actions
+
+A full-width primary action with a compact secondary option.
+
+```jsx
+<VStack gap={2}>
+  <Button onPress={console.log} block>
+    Create account
+  </Button>
+  <Button onPress={console.log} variant="secondary" transparent block>
+    Already have an account? Sign in
+  </Button>
+</VStack>
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |

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

@@ -107,9 +107,9 @@ function DynamicSizingCarousel() {
           action="Start earning"
           dangerouslySetBackground="rgb(var(--purple70))"
           description={
-            <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+            <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
               Earn staking rewards on ETH by holding it on Coinbase
-            </TextLabel2>
+            </Text>
           }
           media={
             <Box left={16} position="relative" top={12}>
@@ -119,9 +119,9 @@ function DynamicSizingCarousel() {
           minWidth="0"
           onActionPress={NoopFn}
           title={
-            <TextHeadline color="fgInverse" as="h3">
+            <Text color="fgInverse" as="h3" font="headline">
               Up to 3.29% APR on ETHs
-            </TextHeadline>
+            </Text>
           }
           width="100%"
         />
@@ -417,9 +417,9 @@ Similar to web, you are provided the `isVisible` render prop, however it is not
         }
         minWidth="0"
         title={
-          <TextHeadline as="h3" id="recurring-buy-label">
+          <Text as="h3" font="headline" id="recurring-buy-label">
             Recurring Buy
-          </TextHeadline>
+          </Text>
         }
         width="100%"
       />
@@ -497,9 +497,9 @@ function CustomComponentsCarousel() {
           carousel: { gap: horizontalGap },
         }}
         title={
-          <TextHeadline as="h3">
+          <Text as="h3" font="headline">
             Learn more
-          </TextHeadline>
+          </Text>
         }
       >
         <CarouselItem id="recurring-buy" width={itemWidth}>
@@ -522,9 +522,9 @@ function CustomComponentsCarousel() {
             action="Start earning"
             dangerouslySetBackground="rgb(var(--purple70))"
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Earn staking rewards on ETH by holding it on Coinbase
-              </TextLabel2>
+              </Text>
             }
             media={
               <Box left={16} position="relative" top={12}>
@@ -534,9 +534,9 @@ function CustomComponentsCarousel() {
             minWidth={0}
             onActionPress={NoopFn}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 Up to 3.29% APR on ETHs
-              </TextHeadline>
+              </Text>
             }
             width="100%"
           />
@@ -546,9 +546,9 @@ function CustomComponentsCarousel() {
             action="Start chatting"
             dangerouslySetBackground="rgb(var(--teal70))"
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Chat with other devs in our Discord community
-              </TextLabel2>
+              </Text>
             }
             media={
               <Box left={16} position="relative" top={4}>
@@ -558,9 +558,9 @@ function CustomComponentsCarousel() {
             minWidth={0}
             onActionPress={NoopFn}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 Join the community
-              </TextHeadline>
+              </Text>
             }
             width="100%"
           />
@@ -570,9 +570,9 @@ function CustomComponentsCarousel() {
             action="Get 60 days free"
             dangerouslySetBackground="rgb(var(--blue80))"
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Use code NOV60 when you  sign up for Coinbase One
-              </TextLabel2>
+              </Text>
             }
             media={
               <Box left={16} position="relative" top={0}>
@@ -582,9 +582,9 @@ function CustomComponentsCarousel() {
             minWidth={0}
             onActionPress={NoopFn}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 Coinbase One offer
-              </TextHeadline>
+              </Text>
             }
             width="100%"
           />
@@ -594,9 +594,9 @@ function CustomComponentsCarousel() {
             action="Get started"
             dangerouslySetBackground="rgb(var(--gray100))"
             description={
-              <TextLabel2 as="p" numberOfLines={3} color="fgInverse">
+              <Text as="p" font="label2" numberOfLines={3} color="fgInverse">
                 Spend USDC to get rewards with our Visa® debit card
-              </TextLabel2>
+              </Text>
             }
             media={
               <Box left={16} position="relative" top={0}>
@@ -606,9 +606,9 @@ function CustomComponentsCarousel() {
             minWidth={0}
             onActionPress={NoopFn}
             title={
-              <TextHeadline color="fgInverse" as="h3">
+              <Text color="fgInverse" as="h3" font="headline">
                 Coinbase Card
-              </TextHeadline>
+              </Text>
             }
             width="100%"
           />