@coinbase/cds-mcp-server 8.17.2 → 8.17.3

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

@@ -0,0 +1,190 @@
+# Accordion
+
+A collapsible component for displaying auxiliary content.
+
+## Import
+
+```jsx
+import { Accordion } from '@coinbase/cds-web/accordion/Accordion'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `activeKey` | `string \| null` | No | `-` | - |
+| `defaultActiveKey` | `string` | No | `-` | Default active accordion item key. If not specified or does not exist in the accordion items, all items will be closed on mount |
+| `onChange` | `((activeKey: string \| null) => void)` | No | `-` | Callback function fired when any of accordion items is pressed |
+| `setActiveKey` | `((activeKey: string \| null) => void)` | No | `-` | - |
+| `style` | `CSSProperties` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
+
+## Examples
+
+Check [here](/components/layout/AccordionItem) for AccordionItem Props.
+
+### Simple Accordion
+
+```jsx live
+<Accordion defaultActiveKey="1" onChange={(itemKey) => console.log(itemKey)}>
+  <AccordionItem
+    itemKey="1"
+    title="Accordion #1"
+    subtitle="subtitle1"
+    media={<CellMedia active type="icon" name="wallet" title="BTC" />}
+  >
+    <TextInput
+      compact
+      type="number"
+      step="0.01"
+      label="Amount"
+      placeholder="8293323.23"
+      suffix="USD"
+    />
+  </AccordionItem>
+  <AccordionItem
+    itemKey="2"
+    title="Accordion #2"
+    subtitle="subtitle2"
+    media={<CellMedia active type="icon" name="wallet" title="BTC" />}
+    onClick={(itemKey) => console.log(itemKey)}
+  >
+    <TextBody as="p">{loremIpsum.repeat(20)}</TextBody>
+  </AccordionItem>
+</Accordion>
+```
+
+### Single item
+
+```jsx live
+<Accordion>
+  <AccordionItem
+    itemKey="1"
+    title="Social security number (SSN/TIN)"
+    subtitle="Your information is protected with 256-bit SSL ecnryption"
+  >
+    <VStack gap={3}>
+      <TextInput
+        compact
+        type="number"
+        step="0.01"
+        label="Amount"
+        placeholder="8293323.23"
+        suffix="USD"
+      />
+      <Box>
+        <Text font="label2" as="p" color="primary">
+          Income from crypto is reportable to the IRS. Your funds may be subject to backup
+          withholding if your SSN is missing or incorrect.
+        </Text>
+      </Box>
+      <HStack gap={2}>
+        <Button variant="secondary">Cancel</Button>
+        <Button>Save</Button>
+      </HStack>
+    </VStack>
+  </AccordionItem>
+</Accordion>
+```
+
+### Multiple items (one item open by default)
+
+```jsx live
+<Accordion defaultActiveKey="2">
+  <AccordionItem itemKey="1" title="What is a W-9 form?">
+    <VStack>
+      <Text font="label2" as="p" color="foregroundMuted">
+        A Tax Certification (W-9 form) is a form that certifies a tax payer's information (name,
+        address and social security number). It should also report whether they have been instructed
+        by the IRS that they are subject to backup withholding.
+      </Text>
+      <Text font="label2" as="p" color="foregroundMuted">
+        To assist with completing the W-9, we have created a digital option which allows for the
+        document to be easily and quickly completed online.
+      </Text>
+    </VStack>
+  </AccordionItem>
+  <AccordionItem itemKey="2" title="What is backup witholding?">
+    <VStack>
+      <Text font="label2" as="p" color="foregroundMuted">
+        Backup withholding is federal tax that financial institutions are required to withhold for
+        individuals with the following situations:
+      </Text>
+      <Text font="label2" as="p" color="foregroundMuted">
+        Backup withholding is federal tax that financial institutions are required to withhold for
+        individuals with the following situations:
+      </Text>
+      <Text font="label2" as="p" color="foregroundMuted">
+        Backup withholding is federal tax that financial institutions are required to withhold for
+        individuals with the following situations:
+      </Text>
+      <Text font="label2" as="p" color="foregroundMuted">
+        Backup withholding is federal tax that financial institutions are required to withhold for
+        individuals with the following situations:
+      </Text>
+
+      <ul>
+        <li>
+          <Text font="label2" as="p" color="foregroundMuted">
+            The account holder does not provide their name and tax identification number and certify
+            that the information is correct in the manner required by the IRS prior to receiving
+            reportable payments including dividends, interest, and gross proceeds from sale
+            transactions.
+          </Text>
+        </li>
+        <li>
+          <Text font="label2" as="p" color="foregroundMuted">
+            B or C Notice - You have recieved either notices from IRS indicating that you are
+            subject to backup withholding
+          </Text>
+        </li>
+      </ul>
+    </VStack>
+  </AccordionItem>
+  <AccordionItem itemKey="3" title="What's a US persons?">
+    <VStack>
+      <Text font="label2" as="p" color="foregroundMuted">
+        To be considered a US person for tax purposes, you must either:
+      </Text>
+      <ul>
+        <li>
+          <Text font="label2" as="p" color="foregroundMuted">
+            Be a US citizen, or
+          </Text>
+        </li>
+        <li>
+          <Text font="label2" as="p" color="foregroundMuted">
+            Pass the permanent resident card test, or
+          </Text>
+        </li>
+        <li>
+          <Text font="label2" as="p" color="foregroundMuted">
+            Pass the substantial presence test (in the US for at least 31 days during the current
+            calendar year and at least 183 days during the last 3 years.
+          </Text>
+        </li>
+      </ul>
+      <Text font="label2" as="p" color="foregroundMuted">
+        If none of the above situations apply to you, you are considered a non-US person for tax
+        purposes.
+      </Text>
+      <Link to="/">Learn more</Link>
+    </VStack>
+  </AccordionItem>
+  <AccordionItem itemKey="4" title="What is a FATCA code?">
+    <VStack>
+      <Text font="label2" as="p" color="foregroundMuted">
+        The Foreign Account Tax Compliance Act (FATCA) requires a participating foreign financial
+        institution to report all US account holders that are specified US persons.
+      </Text>
+      <Text font="label2" as="p" color="foregroundMuted">
+        This is not applicable to our customers because Coinbase accounts are US based and no FATCA
+        code is required.
+      </Text>
+    </VStack>
+  </AccordionItem>
+</Accordion>
+```
+
+

package/mcp-docs/web/components/AccordionItem.txt

@@ -0,0 +1,32 @@
+# AccordionItem
+
+An individual collapsible item within an Accordion.
+
+## Import
+
+```jsx
+import { AccordionItem } from '@coinbase/cds-web/accordion/AccordionItem'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Collapsible content |
+| `itemKey` | `string` | Yes | `-` | Key of the accordion item. This should be unique inside the same Accordion unless you want multiple items to be controlled at the same time. |
+| `title` | `string` | Yes | `-` | Title of the accordion item |
+| `headerRef` | `RefObject<HTMLButtonElement>` | No | `-` | - |
+| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
+| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | - |
+| `onClick` | `((key: string) => void)` | No | `-` | Callback function fired when the accordion item is clicked |
+| `panelRef` | `RefObject<HTMLDivElement>` | No | `-` | - |
+| `style` | `CSSProperties` | No | `-` | - |
+| `subtitle` | `string` | No | `-` | Subtitle of the accordion item |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
+
+## Examples
+
+Check [Accordion](/components/layout/Accordion) for usage examples.
+
+

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

@@ -0,0 +1,165 @@
+# Alert
+
+A dialog that communicates critical information and blocks user interaction.
+
+## Import
+
+```jsx
+import { Alert } from '@coinbase/cds-web/overlays/Alert'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `body` | `string` | Yes | `-` | Alert body/description |
+| `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
+| `preferredActionLabel` | `string` | Yes | `-` | Label of the preferred action |
+| `title` | `string` | Yes | `-` | Alert title |
+| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
+| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
+| `actionLayout` | `horizontal \| vertical` | No | `horizontal` | Layout of the actions |
+| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
+| `dismissActionLabel` | `string` | No | `-` | Label of the dismiss action |
+| `key` | `Key \| null` | No | `-` | - |
+| `onDidClose` | `((() => void) & (() => void))` | No | `-` | Callback fired after the component is closed. |
+| `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss action is pressed |
+| `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the preferred action is pressed |
+| `pictogram` | `key \| done \| cardSuccess \| warning \| error \| add \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| derivativesProduct \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| planet \| safe \| securityKey \| settings \| shield \| support \| taxes \| trading \| verifiedPools \| wallet \| 2fa \| accountsNavigation \| accreditedInvestor \| addCard \| addPayment \| addPhone \| addressBook \| addToWatchlist \| addWallet \| advancedTradingDesktop \| advancedTradingNavigation \| advancedTradingRebates \| agent \| alerts \| alertsCoinbaseOne \| analyticsNavigation \| apartOfDropsNft \| applyForHigherLimits \| apyInterest \| assetEncryption \| assetHubNavigation \| assetManagement \| assetManagementNavigation \| assetMeasurements \| assetMovement \| authenticationApp \| authenticator \| authenticatorAlt \| authenticatorProgress \| avatarAa \| avatarAb \| avatarAc \| avatarAd \| avatarAe \| avatarAf \| avatarAg \| avatarAh \| avatarAi \| avatarAj \| avatarBa \| avatarBb \| avatarBc \| avatarBd \| avatarBe \| avatarBf \| avatarBg \| avatarBh \| avatarBi \| avatarBj \| avatarCa \| avatarCb \| avatarCc \| avatarCd \| avatarCe \| avatarCf \| avatarCg \| avatarCh \| avatarCi \| avatarCj \| avatarDa \| avatarDb \| avatarDc \| avatarDd \| avatarDe \| avatarDf \| avatarDg \| avatarDh \| avatarDi \| avatarDj \| avatarEa \| avatarEb \| avatarEc \| avatarEd \| avatarEe \| avatarEf \| avatarEg \| avatarEh \| avatarEi \| avatarEj \| avatarFa \| avatarFb \| avatarFc \| avatarFd \| avatarFe \| avatarFf \| avatarFg \| avatarFh \| avatarFi \| avatarFj \| avatarGa \| avatarGb \| avatarGc \| avatarGd \| avatarGe \| avatarGf \| avatarGg \| avatarGh \| avatarGi \| avatarGj \| avatarHa \| avatarHb \| avatarHc \| avatarHd \| avatarHe \| avatarHf \| avatarHg \| avatarHh \| avatarHi \| avatarHj \| avatarIa \| avatarIb \| avatarIc \| avatarId \| avatarIe \| avatarIf \| avatarIg \| avatarIh \| avatarIi \| avatarIj \| avatarJa \| avatarJb \| avatarJc \| avatarJd \| avatarJe \| avatarJf \| avatarJg \| avatarJh \| avatarJi \| avatarJj \| barChart \| baseChartSmall \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseConnectApps \| baseConnectSmall \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseTargetSmall \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| bundle \| businessProduct \| calendarCaution \| candleSticksGraph \| cardBlocked \| cardDeclined \| cardNavigation \| cb1BankTransfers \| chart \| chat \| cloudNavigation \| coinbaseLogoAdvancedBrand \| coinbaseLogoNavigation \| coinbaseOneAuthenticator \| coinbaseOneChat \| coinbaseOneEarn \| coinbaseOneEarnCoins \| coinbaseOneEarnCoinsLogo \| coinbaseOneFiat \| coinbaseOneProductIcon \| coinbaseOneProductInvestWeekly \| coinbaseOneRefreshed \| coinbaseOneShield \| coinbaseOneTrade \| coinbaseOneTrusted \| coinbaseOneUnlimitedRewards \| coinbaseUnlockOffers \| coinbaseWalletApp \| coinFocus \| coinShare \| coldStorageCheck \| collectionOfAssets \| commerceCheckout \| commerceInvoice \| commerceNavigation \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoFolder \| custodialJourney \| custodyNavigation \| dataMarketplaceNavigation \| decentralizationEverything \| decentralizedExchange \| decentralizedIdentity \| decentralizedWeb3 \| defiEarnMoment \| delegate \| delegateNavigation \| derivativesNavigation \| developerPlatformNavigation \| developerSDKNavigation \| directDepositNavigation \| dollarShowcase \| driversLicense \| driversLicenseWheel \| earnCoins \| earnGraph \| earnNavigation \| easyToUse \| economyGlobal \| emailAndMessages \| enableVoting \| envelope \| ethereumFocus \| ethRewards \| ethStaking \| ethStakingChart \| ethStakingRewards \| ethToken \| exchangeNavigation \| explore \| fast \| faucetNavigation \| feesRestriction \| fiat \| finance \| findYourSelection \| formDownload \| futures \| futuresCoinbaseOne \| gem \| genericCountryIDCard \| getStarted \| giftbox \| globalConnections \| globalPayments \| globalTransactions \| googleAuthenticator \| governance \| hardwareWallet \| helpCenterNavigation \| higherLimits \| holdingCoin \| idBlock \| idError \| idVerification \| increaseLimits \| institutionalNavigation \| institutions \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyEarn \| moneySwift \| monitoringPerformance \| moreThanBitcoin \| multiAccountsAndCards \| multiPlatform \| multipleAssets \| musicAndSounds \| myNumberCard \| newUserChecklistBuyCrypto \| newUserChecklistCompleteAccount \| newUserChecklistVerifyId \| nftAvatar \| nftLibrary \| nftNavigation \| noAnnualFee \| noNftFound \| notificationHubAnalysis \| notificationHubNews \| notificationHubPortfolio \| notificationHubSocial \| notifications \| noVisibility \| noWiFi \| orders \| outage \| partialCoins \| participateNavigation \| passwordWalletLocked \| payNavigation \| peerToPeer \| pieChart \| pizza \| pluginBrowser \| positiveReviews \| predictionMarkets \| premiumInvestor \| priceTracking \| primeMobileApp \| primeNavigation \| privateClientNavigation \| proNavigation \| protectionPlan \| queryTransactNavigation \| receipt \| recurringPurchases \| restaking \| reviewAndAdd \| rewardsNavigation \| riskStaking \| rosettaNavigation \| securedAssets \| security \| securityCoinShield \| seedPhrase \| selectAddNft \| selfCustodyWallet \| selfServe \| sellSendAnytime \| sendPaymentToOthers \| settled \| sideChainSide \| signInNavigation \| smsAuthenticate \| sparkleCoinbaseOne \| ssnCard \| stableCoinMetaphor \| stacking \| stakingGraph \| standWithCryptoLogoNavigation \| startToday \| strongInfo \| strongWarning \| successPhone \| supportChat \| takeQuiz \| target \| taxBeta \| taxCenterNavigation \| taxesArrangement \| taxSeason \| timingCheck \| tokenBaskets \| tokenSales \| transferSend \| transistor \| trendingAssets \| trusted \| tryAgainLater \| twoBonus \| typeScript \| ubiKey \| usaProduct \| usdcEarn \| usdcInterest \| usdcLoan \| usdcLogo \| usdcRewards \| usdcRewardsRibbon \| usdcToken \| venturesNavigation \| videoCalendar \| videoContent \| waiting \| waitingForConsensus \| walletAsServiceNavigation \| walletDeposit \| walletError \| walletExchange \| walletLinkNavigation \| walletLogoNavigation \| walletNavigation \| walletPassword \| walletSuccess \| walletWarning \| winBTC \| worldwide \| wrapEth` | No | `-` | Illustration pictogram name for alert |
+| `preferredActionVariant` | `primary \| negative` | No | `primary` | Button variant of the preferred action |
+| `ref` | `((instance: ModalRefBaseProps \| null) => void) \| RefObject<ModalRefBaseProps> \| null` | No | `-` | - |
+| `stacked` | `boolean` | No | `-` | Indicating if Alert is stacked on top of Modal |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+
+
+## Examples
+
+:::tip Accessibility tip (Web only)
+
+Alerts require an accessibility label, which we set to `title` by default. However, if there's other text that gives the user better context to the alert, then you can pass an element id to `accessibilityLabelledBy`. Alternatively, you may directly provide a contextual label to `accessibilityLabel`.
+
+:::
+
+### Default Alert
+
+Controlled using `visible` and `onRequestClose`.
+
+```jsx live
+function DefaultAlertExample() {
+  const [visible, setVisible] = useState(false);
+
+  const toggleOn = () => setVisible(true);
+  const toggleOff = () => setVisible(false);
+
+  return (
+    <PortalProvider>
+      <ButtonGroup>
+        <Button onClick={toggleOn}>Show Alert</Button>
+      </ButtonGroup>
+      <Alert
+        title="Alert title"
+        body="Alert body type that can run over multiple lines, but should be kept short."
+        pictogram="warning"
+        visible={visible}
+        onRequestClose={toggleOff}
+        preferredActionLabel="Primary"
+        onPreferredActionPress={() => console.log('preferred pressed')}
+        dismissActionLabel="Cancel"
+        onDismissActionPress={() => console.log('dismiss pressed')}
+      />
+    </PortalProvider>
+  );
+}
+```
+
+### Portal Alert
+
+Controlled programmatically using the `useAlert` hook.
+
+:::warning
+
+**Deprecated**: Inserting JSX into the DOM using a function in an event handler is an anti-pattern. This hook will be removed in future version. Use the `visible` and `onRequestClose` props instead
+
+:::
+
+```jsx live
+function PortalAlertExample() {
+  function PortalAlert() {
+    const alert = useAlert();
+
+    const showAlert = () =>
+      alert.open(
+        <Alert
+          title="Alert title"
+          body="Alert body type that can run over multiple lines, but should be kept short."
+          pictogram="warning"
+          visible
+          onRequestClose={alert.close}
+          preferredActionLabel="Save"
+          onPreferredActionPress={() => console.log('Save pressed')}
+        />,
+      );
+
+    return <Button onClick={showAlert}>Show Alert</Button>;
+  }
+
+  return (
+    <PortalProvider>
+      <PortalAlert />
+    </PortalProvider>
+  );
+}
+```
+
+### Alert over Modal
+
+Alert displays on top of a `Modal`. You must pass stacked as a prop to `Alert` when it is used inside of a `Modal`.
+
+```jsx live
+function AlertOnModalExample() {
+  function AlertOnModal() {
+    const { openModal, closeModal } = useModal();
+    const alert = useAlert();
+
+    const showAlert = () =>
+      alert.open(
+        <Alert
+          visible
+          onRequestClose={alert.close}
+          title="Are you sure?"
+          body="Cancel will discard your existing changes, are you sure?"
+          pictogram="warning"
+          preferredActionLabel="Discard"
+          onPreferredActionPress={closeModal}
+          preferredActionVariant="negative"
+          dismissActionLabel="Cancel"
+          stacked
+        />,
+      );
+
+    const handlePress = () => {
+      openModal(
+        <Modal visible onRequestClose={closeModal}>
+          <ModalBody>
+            <TextBody as="p">{loremIpsum}</TextBody>
+          </ModalBody>
+          <ModalFooter
+            primaryAction={<Button onClick={closeModal}>Save</Button>}
+            secondaryAction={<Button onClick={showAlert}>Cancel</Button>}
+          />
+        </Modal>,
+      );
+    };
+
+    return <Button onClick={handlePress}>Open Modal</Button>;
+  }
+
+  return (
+    <PortalProvider>
+      <AlertOnModal />
+    </PortalProvider>
+  );
+}
+```
+
+