@coinbase/cds-mcp-server 8.73.0 → 8.74.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/mcp-docs/mobile/components/HeroSquare.txt +32 -3
- package/mcp-docs/mobile/components/Pictogram.txt +28 -3
- package/mcp-docs/mobile/components/SpotIcon.txt +28 -3
- package/mcp-docs/mobile/components/SpotRectangle.txt +28 -3
- package/mcp-docs/mobile/components/SpotSquare.txt +28 -3
- package/mcp-docs/web/components/HeroSquare.txt +45 -4
- package/mcp-docs/web/components/Pictogram.txt +39 -4
- package/mcp-docs/web/components/SpotIcon.txt +39 -4
- package/mcp-docs/web/components/SpotRectangle.txt +39 -4
- package/mcp-docs/web/components/SpotSquare.txt +39 -4
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 8.74.0 ((5/13/2026, 01:19 PM PST))
|
|
12
|
+
|
|
13
|
+
This is an artificial version bump with no new change.
|
|
14
|
+
|
|
11
15
|
## 8.73.0 ((5/13/2026, 08:57 AM PST))
|
|
12
16
|
|
|
13
17
|
This is an artificial version bump with no new change.
|
|
@@ -12,13 +12,13 @@ import { HeroSquare } from '@coinbase/cds-mobile/illustrations/HeroSquare'
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
#### Basic example
|
|
16
16
|
|
|
17
17
|
```jsx
|
|
18
18
|
<HeroSquare name="accessToAdvancedCharts" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
#### `scaleMultiplier` prop
|
|
22
22
|
|
|
23
23
|
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
|
|
|
28
28
|
<HeroSquare name="accessToAdvancedCharts" scaleMultiplier={1.5} />
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### Scaling with dimension
|
|
32
32
|
|
|
33
33
|
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
34
34
|
|
|
@@ -36,11 +36,40 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
36
36
|
<HeroSquare name="accessToAdvancedCharts" dimension="200x200" scaleMultiplier={1.5} />
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Theming
|
|
40
|
+
|
|
41
|
+
Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant.
|
|
42
|
+
|
|
43
|
+
To apply a custom brand palette, set `lightIllustrationColor` and `darkIllustrationColor` on your theme and wrap your content in a `ThemeProvider`:
|
|
44
|
+
|
|
45
|
+
```jsx
|
|
46
|
+
const customTheme = {
|
|
47
|
+
...defaultTheme,
|
|
48
|
+
lightIllustrationColor: {
|
|
49
|
+
...defaultTheme.lightIllustrationColor,
|
|
50
|
+
primary: 'rgb(220, 38, 38)',
|
|
51
|
+
accent1: 'rgb(124, 58, 237)',
|
|
52
|
+
},
|
|
53
|
+
darkIllustrationColor: {
|
|
54
|
+
...defaultTheme.darkIllustrationColor,
|
|
55
|
+
primary: 'rgb(248, 113, 113)',
|
|
56
|
+
accent1: 'rgb(167, 139, 250)',
|
|
57
|
+
},
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
<ThemeProvider activeColorScheme="light" theme={customTheme}>
|
|
61
|
+
<HeroSquare applyTheme name="accessToAdvancedCharts" />
|
|
62
|
+
</ThemeProvider>;
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
When `applyTheme` is not set (the default), the illustration uses the standard light or dark variant with hardcoded colors — no theming overhead.
|
|
66
|
+
|
|
39
67
|
## Props
|
|
40
68
|
|
|
41
69
|
| Prop | Type | Required | Default | Description |
|
|
42
70
|
| --- | --- | --- | --- | --- |
|
|
43
71
|
| `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbmega \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| flipStable \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| genniusLaunch \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
|
|
72
|
+
| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
|
|
44
73
|
| `dimension` | `240x240 \| 200x200` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
45
74
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
46
75
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
@@ -12,13 +12,13 @@ import { Pictogram } from '@coinbase/cds-mobile/illustrations/Pictogram'
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
#### Basic example
|
|
16
16
|
|
|
17
17
|
```jsx
|
|
18
18
|
<Pictogram name="shield" dimension="64x64" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
#### `scaleMultiplier` prop
|
|
22
22
|
|
|
23
23
|
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
|
|
|
28
28
|
<Pictogram name="shield" scaleMultiplier={1.5} />
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### Scaling with dimension
|
|
32
32
|
|
|
33
33
|
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
34
34
|
|
|
@@ -36,11 +36,36 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
36
36
|
<Pictogram name="shield" dimension="48x48" scaleMultiplier={2.5} />
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Theming
|
|
40
|
+
|
|
41
|
+
Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant.
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
const customTheme = {
|
|
45
|
+
...defaultTheme,
|
|
46
|
+
lightIllustrationColor: {
|
|
47
|
+
...defaultTheme.lightIllustrationColor,
|
|
48
|
+
primary: 'rgb(220, 38, 38)',
|
|
49
|
+
accent1: 'rgb(124, 58, 237)',
|
|
50
|
+
},
|
|
51
|
+
darkIllustrationColor: {
|
|
52
|
+
...defaultTheme.darkIllustrationColor,
|
|
53
|
+
primary: 'rgb(248, 113, 113)',
|
|
54
|
+
accent1: 'rgb(167, 139, 250)',
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
<ThemeProvider activeColorScheme="light" theme={customTheme}>
|
|
59
|
+
<Pictogram applyTheme name="shield" />
|
|
60
|
+
</ThemeProvider>;
|
|
61
|
+
```
|
|
62
|
+
|
|
39
63
|
## Props
|
|
40
64
|
|
|
41
65
|
| Prop | Type | Required | Default | Description |
|
|
42
66
|
| --- | --- | --- | --- | --- |
|
|
43
67
|
| `name` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| 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 \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| 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 \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| 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 \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| 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 \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| 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 \| 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` | Yes | `-` | Name of illustration as defined in Figma |
|
|
68
|
+
| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
|
|
44
69
|
| `dimension` | `48x48 \| 64x64` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
45
70
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
46
71
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
@@ -12,13 +12,13 @@ import { SpotIcon } from '@coinbase/cds-mobile/illustratations/SpotIcon'
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
#### Basic example
|
|
16
16
|
|
|
17
17
|
```jsx
|
|
18
18
|
<SpotIcon name="shield" dimension="32x32" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
#### `scaleMultiplier` prop
|
|
22
22
|
|
|
23
23
|
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
|
|
|
28
28
|
<SpotIcon name="shield" scaleMultiplier={1.5} />
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### Scaling with dimension
|
|
32
32
|
|
|
33
33
|
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
34
34
|
|
|
@@ -36,11 +36,36 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
36
36
|
<SpotIcon name="shield" dimension="24x24" scaleMultiplier={1.5} />
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Theming
|
|
40
|
+
|
|
41
|
+
Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant.
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
const customTheme = {
|
|
45
|
+
...defaultTheme,
|
|
46
|
+
lightIllustrationColor: {
|
|
47
|
+
...defaultTheme.lightIllustrationColor,
|
|
48
|
+
primary: 'rgb(220, 38, 38)',
|
|
49
|
+
accent1: 'rgb(124, 58, 237)',
|
|
50
|
+
},
|
|
51
|
+
darkIllustrationColor: {
|
|
52
|
+
...defaultTheme.darkIllustrationColor,
|
|
53
|
+
primary: 'rgb(248, 113, 113)',
|
|
54
|
+
accent1: 'rgb(167, 139, 250)',
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
<ThemeProvider activeColorScheme="light" theme={customTheme}>
|
|
59
|
+
<SpotIcon applyTheme name="shield" dimension="32x32" />
|
|
60
|
+
</ThemeProvider>;
|
|
61
|
+
```
|
|
62
|
+
|
|
39
63
|
## Props
|
|
40
64
|
|
|
41
65
|
| Prop | Type | Required | Default | Description |
|
|
42
66
|
| --- | --- | --- | --- | --- |
|
|
43
67
|
| `name` | `done \| warning \| error \| advancedTradeProduct \| arrowsUpDown \| assetHubProduct \| assetManagementProduct \| bank \| base \| borrowProduct \| cloudProduct \| coinbase \| commerceProduct \| custodyProduct \| delegateProduct \| derivativesProduct \| email \| exchangeProduct \| helpCenterProduct \| institutionalProduct \| learningRewardsProduct \| nftProduct \| nodeProduct \| participateProduct \| privateClientProduct \| rewardsProduct \| rosettaProduct \| shield \| venturesProduct \| wallet \| walletLogo \| 2fa \| authenticator \| bonusFivePercent \| bonusTwoPercent \| businessProduct \| chat \| coinbaseOneEarn \| coinbaseOneProductInvestWeekly \| creditCard \| delegate \| fast \| idVerification \| instoDelegate \| outage \| pieChart \| recurringPurchases \| send \| layeredNetworks \| noFees \| assetEmptyStateAa \| assetEmptyStateAb \| assetEmptyStateAc \| assetEmptyStateAd \| assetEmptyStateAe \| assetEmptyStateBa \| assetEmptyStateBb \| assetEmptyStateBc \| assetEmptyStateBd \| assetEmptyStateBe \| assetEmptyStateCa \| assetEmptyStateCb \| assetEmptyStateCc \| assetEmptyStateCd \| assetEmptyStateCe \| assetEmptyStateDa \| assetEmptyStateDb \| assetEmptyStateDc \| assetEmptyStateDd \| assetEmptyStateDe \| assetEmptyStateEa \| assetEmptyStateEb \| assetEmptyStateEc \| assetEmptyStateEd \| assetEmptyStateEe \| cb1Cash \| coinbaseOneChart \| coinbaseOneProduct \| contract \| dataMarketplace \| instantAccess \| instoAdvancedTradeProduct \| instoAssetHubProduct \| instoAuthenticator \| instoBorrowProduct \| instoBusinessProduct \| instoChat \| instoCloudProduct \| instoCoinbaseOneEarn \| instoCommerceProduct \| instoCustodyProduct \| instoDataMarketplace \| instoDerivativesProduct \| instoFast \| instoHelpCenterProduct \| instoIdVerification \| instoLayeredNetworks \| instoLearningRewardsProduct \| instoMultiCoin \| instoPaySDKProduct \| instoPieChart \| instoPrimeProduct \| instoPrivateClientProduct \| instoProductCoinbaseCard \| instoProductCompliance \| instoProductPro \| instoProductWallet \| instoRecurringPurchases \| instoRewardsProduct \| instoShield \| instoSignInProduct \| instoStakingProduct \| instoWalletAsAServiceProduct \| internationalExchangeProduct \| multiCoin \| paySDKProduct \| primeProduct \| productCoinbaseCard \| productCompliance \| productEarn \| productPro \| productWallet \| signInProduct \| stakingProduct \| walletAsAServiceProduct` | Yes | `-` | Name of illustration as defined in Figma |
|
|
68
|
+
| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
|
|
44
69
|
| `dimension` | `32x32 \| 24x24` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
45
70
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
46
71
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
@@ -12,13 +12,13 @@ import { SpotRectangle } from '@coinbase/cds-mobile/illustratations/SpotRectangl
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
#### Basic example
|
|
16
16
|
|
|
17
17
|
```jsx
|
|
18
18
|
<SpotRectangle name="creditCardExcitement" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
#### `scaleMultiplier` prop
|
|
22
22
|
|
|
23
23
|
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
|
|
|
28
28
|
<SpotRectangle name="creditCardExcitement" scaleMultiplier={1.5} />
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### Scaling with dimension
|
|
32
32
|
|
|
33
33
|
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
34
34
|
|
|
@@ -36,11 +36,36 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
36
36
|
<SpotRectangle name="creditCardExcitement" dimension="240x120" scaleMultiplier={1.5} />
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Theming
|
|
40
|
+
|
|
41
|
+
Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant.
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
const customTheme = {
|
|
45
|
+
...defaultTheme,
|
|
46
|
+
lightIllustrationColor: {
|
|
47
|
+
...defaultTheme.lightIllustrationColor,
|
|
48
|
+
primary: 'rgb(220, 38, 38)',
|
|
49
|
+
accent1: 'rgb(124, 58, 237)',
|
|
50
|
+
},
|
|
51
|
+
darkIllustrationColor: {
|
|
52
|
+
...defaultTheme.darkIllustrationColor,
|
|
53
|
+
primary: 'rgb(248, 113, 113)',
|
|
54
|
+
accent1: 'rgb(167, 139, 250)',
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
<ThemeProvider activeColorScheme="light" theme={customTheme}>
|
|
59
|
+
<SpotRectangle applyTheme name="creditCardExcitement" />
|
|
60
|
+
</ThemeProvider>;
|
|
61
|
+
```
|
|
62
|
+
|
|
39
63
|
## Props
|
|
40
64
|
|
|
41
65
|
| Prop | Type | Required | Default | Description |
|
|
42
66
|
| --- | --- | --- | --- | --- |
|
|
43
67
|
| `name` | `margin \| blockchain \| bridging \| calendar \| coinbaseOneLogo \| concierge \| diamond \| earn \| login \| nft \| securityShield \| staking \| tokenSales \| cb1BankTransfers \| ethStakingRewards \| futures \| globalTransactions \| governance \| instoKey \| lightningNetworkSend \| startToday \| usdcLoan \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| cardBoosted \| cbbtc \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOnePhoneLightning \| coinbaseOneRewards \| coinbaseOneSavingFunds \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| exploreDecentralizedApps \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| graphChartTrading \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| leverage \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferYellow \| marginWarning \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| portfolioPerformance \| poweredByEthereum \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| addBank \| advancedTradeCharts \| apiKey \| appUpdate \| borrowLoan \| browserHistory \| cardWaitlist \| cbEth \| clawMachinePig \| coinGateway \| connectWalletTutorial \| creditCardExcitement \| creditCardExcitementCoinbaseOne \| cryptoEconomyCoin \| cryptoEconomyEurc \| cryptoEconomyUSDC \| currency \| derivativesLoop \| downloadCoinbaseWalletArrow \| downloadingStatement \| emptyNfts \| emptyTrading \| eth2SellSend \| eth2SendSell \| eth2SendSellTwo \| ethAddress \| ethStakeOrWrap \| ethStakeOrWrapTwo \| ethStakingMovement \| ethTrading \| ethTradingTwo \| ethWrappedStakingRewards \| faceId \| fiatInterest \| giftBoxRewards \| highFees \| insto \| instoAboutOnchain \| instoApiKey \| instoConsensusWaitingForApprovals \| instoCryptoAndMore \| instoCurrency \| instoDesignateSigner \| instoEmptyTrading \| instoEthStakingMovement \| instoGetStartedInMinutes \| instoMargin \| instoOnchainSetupInProgress \| instoQRCode \| instoRefreshKey \| instoSemiCustodial \| instoSetupComplete \| instoSetupOnchain \| leadingProtocol \| leadingProtocolMorpho \| ledgerFailed \| ledgerSignatureRejected \| lendGraph \| linkCoinbaseWallet \| loanValue \| noTransactions \| portfolioOverview \| portfolioOverviewRelaunch \| primeOrderConfirmation \| primePriceLadder \| primeTradePreferences \| protectedNotes \| ratDashboard \| ratFoundWallet \| ratMigration \| ratMigrationerror \| referralsBonus \| scanCode \| secureAccount \| sendingCrypto \| stakingUpgrade \| trade \| transferCoins \| transferEth \| transferFunds \| trustedContacts \| unauthorizedTransfers \| uob \| update \| uploadDocument \| usdcLoanEth \| walletReconnect \| walletReconnectSuccess \| wrapEthTwo \| yieldHolding` | Yes | `-` | Name of illustration as defined in Figma |
|
|
68
|
+
| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
|
|
44
69
|
| `dimension` | `240x120` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
45
70
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
46
71
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
@@ -12,13 +12,13 @@ import { SpotSquare } from '@coinbase/cds-mobile/illustratations/SpotSquare'
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
#### Basic example
|
|
16
16
|
|
|
17
17
|
```jsx
|
|
18
18
|
<SpotSquare name="yieldCenterUSDC" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
#### `scaleMultiplier` prop
|
|
22
22
|
|
|
23
23
|
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
|
|
|
28
28
|
<SpotSquare name="yieldCenterUSDC" scaleMultiplier={1.5} />
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### Scaling with dimension
|
|
32
32
|
|
|
33
33
|
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
34
34
|
|
|
@@ -36,11 +36,36 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
36
36
|
<SpotSquare name="yieldCenterUSDC" dimension="120x120" scaleMultiplier={1.5} />
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Theming
|
|
40
|
+
|
|
41
|
+
Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is colored by the active `ThemeProvider`'s illustration palette instead of using the hardcoded light or dark variant.
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
const customTheme = {
|
|
45
|
+
...defaultTheme,
|
|
46
|
+
lightIllustrationColor: {
|
|
47
|
+
...defaultTheme.lightIllustrationColor,
|
|
48
|
+
primary: 'rgb(220, 38, 38)',
|
|
49
|
+
accent1: 'rgb(124, 58, 237)',
|
|
50
|
+
},
|
|
51
|
+
darkIllustrationColor: {
|
|
52
|
+
...defaultTheme.darkIllustrationColor,
|
|
53
|
+
primary: 'rgb(248, 113, 113)',
|
|
54
|
+
accent1: 'rgb(167, 139, 250)',
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
<ThemeProvider activeColorScheme="light" theme={customTheme}>
|
|
59
|
+
<SpotSquare applyTheme name="yieldCenterUSDC" />
|
|
60
|
+
</ThemeProvider>;
|
|
61
|
+
```
|
|
62
|
+
|
|
39
63
|
## Props
|
|
40
64
|
|
|
41
65
|
| Prop | Type | Required | Default | Description |
|
|
42
66
|
| --- | --- | --- | --- | --- |
|
|
43
67
|
| `name` | `baseQuickBuy \| blockchain \| bridging \| coinbaseOneLogo \| earn \| nft \| options \| pieChartWithArrow \| priceAlerts \| refresh \| securityShield \| staking \| addCard \| baseCreatorCoin \| bonusFivePercent \| bonusTwoPercent \| cardBlocked \| cardDeclined \| coinbaseOneEarn \| coinbaseUnlockOffers \| ethStaking \| ethStakingRewards \| futures \| globalTransactions \| idError \| inrTrade \| instoAuthenticatorProgress \| lightningNetworkSend \| outage \| pieChartWithArrowBlue \| startToday \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneZeroPortal \| coinFifty \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoEthStakingRewards \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| layerThree \| linkingYourWalletToYourCoinbaseAccount \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| performance \| portfolioPerformance \| poweredByEthereum \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| eth2SendSell \| ethStakeOrWrap \| ethStakeOrWrapTwo \| linkCoinbaseWallet \| addEth \| addMultipleCrypto \| addPasswordProtection \| announcementAdvancedTrading \| assetForward \| assetRefresh \| baseCautionMedium \| baseChartMedium \| baseCheckMedium \| baseCheckTrophyMedium \| baseCoinCryptoMedium \| baseCoinNetworkMedium \| baseConnectMedium \| baseDecentralizationMedium \| baseDiamondMedium \| baseEmptyMedium \| baseErrorButterflyMedium \| baseErrorMedium \| baseIdMedium \| baseLoadingMedium \| baseLocationMedium \| baseMintNftMedium \| baseNetworkMedium \| baseNftMedium \| basePaycoinMedium \| basePeopleMedium \| basePiechartMedium \| baseRewardChest \| baseRewardClam \| baseRewardPlate \| baseRewardPodium \| baseRewardSun \| baseRewardTrophyEmblem \| baseRewardTrophyStars \| baseSecurityMedium \| baseSendMedium \| baseSwitch \| baseTargetMedium \| baseUsdcMedium \| boostedCard \| borrowLimitsAddressed \| bullishCase \| cardAnnouncement \| cardAutoReload \| cardShipped \| cbEthWrappingUnavailable \| checkVerifacation \| coinbaseCardSparkle \| coinbaseLock \| coinbaseOneBoostedCard \| coinbaseOneBoostedCardCB1 \| coinbaseOneConcierge \| coinbaseOneStakeOrWrap \| coinbaseOneStaking \| coinbaseOneStarToken \| coinbaseOneUSDC \| coinbaseOneZero \| confirmAddress \| confirmEmail \| confirmIDCard \| confirmSocialSecurity \| cryptoEconomyArrows \| dappWallet \| darkModeIntroduction \| defiEarnAnnouncement \| defiNfts \| directDepositExcitement \| earnInterestOnCryptocurrency \| fileYourCryptoTaxesCheckOther \| fileYourCryptoTaxesOther \| frameEmpty \| giftBoxCrypto \| gifting \| goldSilverFutures \| guideBullCase \| guideCryptoBeginner \| guideFiveThings \| guideNftDefi \| guideStartInvesting \| instantUnstaking \| instoDappWallet \| instoEthStaking \| instoPixDeposits \| instoSecurityKey \| instoSideChainSide \| instoUbiKey \| instoWaiting \| interestForYou \| miniGift \| moneyRewards \| nftTag \| noPortfolio \| nuxChecklist \| nuxEarnCrypto \| nuxEarnYield \| nuxPopularAssets \| nuxRecurringBuys \| offersEmpty \| phoneNotifications \| pixBankDeposits \| pixDeposits \| recommendInvestments \| referralsPeople \| refreshMobileApp \| rewardExpiring \| saveTheDate \| sparkleToken \| starToken \| swapEth \| switchReward \| taxDocuments \| transferringCrypto \| unsupportedAsset \| waitlistSignup \| walletApp \| walletQuestsChest \| walletQuestsTrophy \| yieldCenter \| yieldCenterUSDC` | Yes | `-` | Name of illustration as defined in Figma |
|
|
68
|
+
| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
|
|
44
69
|
| `dimension` | `96x96` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
45
70
|
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
46
71
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
@@ -12,13 +12,13 @@ import { HeroSquare } from '@coinbase/cds-web/illustrations/HeroSquare'
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
#### Basic example
|
|
16
16
|
|
|
17
17
|
```jsx live
|
|
18
18
|
<HeroSquare name="accessToAdvancedCharts" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
#### `scaleMultiplier` prop
|
|
22
22
|
|
|
23
23
|
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
|
|
|
28
28
|
<HeroSquare name="accessToAdvancedCharts" scaleMultiplier={1.5} />
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### Scaling with dimension
|
|
32
32
|
|
|
33
33
|
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
34
34
|
|
|
@@ -36,14 +36,55 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
36
36
|
<HeroSquare name="accessToAdvancedCharts" dimension="200x200" scaleMultiplier={1.5} />
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Theming
|
|
40
|
+
|
|
41
|
+
Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active `ThemeProvider`'s illustration palette instead of loading a static image from the CDN.
|
|
42
|
+
|
|
43
|
+
This allows the illustration to update automatically when the active color scheme changes, and to reflect a custom brand palette when a non-default theme is provided.
|
|
44
|
+
|
|
45
|
+
```jsx live
|
|
46
|
+
<HeroSquare applyTheme name="accessToAdvancedCharts" />
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
To apply a custom brand palette, set `lightIllustrationColor` and `darkIllustrationColor` on your theme and wrap the illustration in a `ThemeProvider`:
|
|
50
|
+
|
|
51
|
+
```jsx live
|
|
52
|
+
function ThemedHeroSquare() {
|
|
53
|
+
const customTheme = {
|
|
54
|
+
...defaultTheme,
|
|
55
|
+
lightIllustrationColor: {
|
|
56
|
+
...defaultTheme.lightIllustrationColor,
|
|
57
|
+
primary: 'rgb(220, 38, 38)',
|
|
58
|
+
accent1: 'rgb(124, 58, 237)',
|
|
59
|
+
accent2: 'rgb(16, 185, 129)',
|
|
60
|
+
},
|
|
61
|
+
darkIllustrationColor: {
|
|
62
|
+
...defaultTheme.darkIllustrationColor,
|
|
63
|
+
primary: 'rgb(248, 113, 113)',
|
|
64
|
+
accent1: 'rgb(167, 139, 250)',
|
|
65
|
+
accent2: 'rgb(52, 211, 153)',
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
<ThemeProvider activeColorScheme="light" theme={customTheme}>
|
|
71
|
+
<HeroSquare applyTheme name="accessToAdvancedCharts" />
|
|
72
|
+
</ThemeProvider>
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
When `applyTheme` is not set (the default), the illustration loads as a standard `<img>` from the CDN with hardcoded colors — no performance overhead.
|
|
78
|
+
|
|
39
79
|
## Props
|
|
40
80
|
|
|
41
81
|
| Prop | Type | Required | Default | Description |
|
|
42
82
|
| --- | --- | --- | --- | --- |
|
|
43
83
|
| `name` | `margin \| success \| pending \| airdrop \| blockchain \| camera \| cloud \| coinbaseOneLogo \| earn \| instantUnstakingClock \| options \| refresh \| rocket \| securityShield \| smartContract \| staking \| test \| baseCreatorCoin \| borrowCoins \| coinbaseOneEarn \| ethStakingRewards \| fiat \| futures \| globalTransactions \| governance \| lightningNetworkSend \| outage \| startToday \| walletWarning \| phoneNumber \| exchange \| accessToAdvancedCharts \| accountUnderReview \| add2Fa \| addBankAccount \| addCreditCard \| addMoreCrypto \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| alienDonutSystemError \| anonymous \| appTrackingTransparency \| artFrameEmptyState \| automaticPayments \| backedByUsDollar \| baseChartLarge \| baseCheck \| baseCoinCryptoLarge \| baseCoinNetworkLarge \| baseConnectLarge \| baseCreatorCoinEmpty \| baseDecentralizationLarge \| basedInUsa \| baseEmptyLarge \| baseErrorButterfly \| baseErrorLarge \| baseLoadingLarge \| baseLocationLarge \| baseMintNftLarge \| baseNetworkLarge \| baseNftLarge \| basePaycoinLarge \| basePeopleLarge \| basePiechartLarge \| baseRewardsCalmLarge \| baseSecurityLarge \| baseSendLarge \| baseSocial \| baseTargetLarge \| bigBtc \| bigError \| bigWarning \| bitcoinAndOtherCrypto \| bitcoinGlobe \| borrow \| borrowCoinsBtc \| borrowWallet \| brdGift \| bridge \| browseDecentralizedApps \| browserExtension \| buy \| buyFirstCrypto \| cardAndPhone \| cardBoosted \| cardError \| cardErrorCB1 \| cardReloadFunds \| cashExcitement \| catHoldingWalletEmptyState \| catLostSystemError \| cbada \| cbbtc \| cbdoge \| cbltc \| cbmega \| cbxrp \| chickenFishSystemError \| claimCryptoUsername \| cloudBacking \| coinbaseCard \| coinbaseCardIssue \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseCardSpend \| coinbaseCardSpendCrypto \| coinbaseFees \| coinbaseIsDown \| coinbaseIsDownMobile \| coinbaseOneAirdrop \| coinbaseOneCardWarning \| coinbaseOneDiscountedAmount \| coinbaseOneDocWarning \| coinbaseOneInsufficientWallet \| coinbaseOnePercentOff \| coinbaseOnePhoneLightning \| coinbaseOneProtectedCrypto \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneUSDCBig \| coinbaseOneUSDCIncentives \| coinbaseOneWaitlist \| coinbaseOneWalletWarning \| coinbaseOneWelcome \| coinbaseOneZeroPortal \| coinbaseOneZeroPromotion \| coinbaseRedesigned \| coinbaseWalletToTrade \| coinCheckmark \| coinFifty \| coinsInWallet \| collectableNfts \| collectingNfts \| commerceAccounting \| commerceInvoices \| communication \| completeAQuiz \| congratulationsOnEarningCrypto \| connectPeople \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAppsWallet \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoPortfolioUsdc \| cryptoWallet \| currencyPairs \| dappsArts \| dappsFinance \| dappsGaming \| dappsGeneral \| dappsL2Support \| dappsMusic \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiEnrollBoost \| defiHow \| defiRisk \| desktopAuthorized \| desktopUnknown \| developer \| diamondHands \| didDecentralizedIdentity \| digitalCollectibles \| digitalGold \| directDepositPhone \| discardAssets \| docError \| documentCertified \| documentSuccess \| downloadCoinbaseWallet \| earnCryptoCard \| earnCryptoInterest \| earnGlobe \| earnGrowth \| earnIdVerification \| earnInterest \| earnMore \| earnNuxHome \| earnSuccess \| earnToLearn \| emailNotification \| emptyCollection \| emptyStateCheckBackLater \| emptyStateNft404Page \| emptyStateNftSoldOut \| enableBiometrics \| encryptedEverything \| engagement \| ensProfilePic \| error400 \| errorApp500 \| errorMoblie \| errorRefresh \| errorRefreshWeb \| errorWeb \| errorWeb400 \| errorWeb404 \| errorWeb404Mobile \| errorWeb500 \| estimatedAmount \| ethereumToWallet \| ethStakingUpsell \| exchangeEmptyState \| exploreDecentralizedApps \| faceMatchReal \| feeScale \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| flipStable \| focusLimitOrders \| freeBtc \| futuresAndPerps \| futuresExpire \| futuresVsPerps \| gainsAndLosses \| gamer \| gasFeesNetworkFees \| generative \| genniusLaunch \| getStartedInMinutes \| governanceMallet \| graphChartTrading \| hardwareWallets \| hiddenCollection \| holdCrypto \| holdingCrypto \| iceCreamMeltingSystemError \| idAngles \| idBack \| idCard \| idFront \| idIssue \| idVerificationSecure \| indexer \| innovation \| instoAdd2Fa \| instoAddBankAccount \| instoCoinbaseOneProtectedCrypto \| instoDocumentSuccess \| instoEarnGlobe \| instoEnableBiometrics \| instoEthStakingRewards \| instoEthStakingUpsell \| instoGovernance \| instoKeyGenerationComplete \| instoKeyGenerationPending \| instoOnChain \| instoOpenEmail \| instoPhoneUnknown \| instoPrimeStaking \| instoPrivateKey \| instoRequestSent \| instoSecurityKeyAuth \| instoStaking \| instoStakingMissedReturns \| instoWallet \| instoWalletSecurity \| instoWeb3MobileSetupStart \| insufficientBalance \| insuranceProtection \| invest \| invite \| japanVerifyId \| keyGeneration \| layeredNetworks \| layerOne \| layerThree \| layerTwo \| ledgerAccess \| ledgerPlugin \| lend \| leverage \| lightningNetwork \| lightningNetworkInvoice \| lightningNetworkTransfer \| limitOrders \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferRedClose \| liquidationBufferYellow \| lowCost \| marginWarning \| mic \| mining \| minting \| moneyDecentralized \| moreGains \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| multiplePortfolios \| myNameIsSatoshi \| namePortfolio \| networkWarning \| noFees \| noFeesMotion \| noLongAddresses \| notificationsAlt \| notificationsAndUpdates \| offChain \| oilAndGold \| onChain \| onTheList \| openEmail \| optInPushNotificationsEmail \| oracle \| orderBooks \| p2pGifting \| p2pPayments \| paperHands \| payUpFront \| performance \| phoneUnknown \| platform \| polling \| portfolioPerformance \| poweredByEthereum \| powerOfCrypto \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| private \| privateKey \| processing \| protocol \| public \| quest \| quickAndSimple \| quickBuy \| ratingsAndReviews \| readyToTrade \| realToUSDC \| receivedCard \| receiveGift \| recommendInvest \| recurringReward \| referralsAvatars \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| referralsWalletPhones \| remittances \| requestSent \| restrictedCountry \| retailUSDCRewards \| reviewInfo \| rotatingRewards \| routingAccount \| scalable \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selectCorrectCrypto \| selectReward \| selfCustody \| selfCustodyCrypto \| semiCustodial \| sendCryptoFaster \| sendToUsername \| serverCatSystemError \| settlement \| shareOnSocialMedia \| sidechain \| slippageTolerance \| spacedOutSystemError \| squidEmptyState \| stablecoin \| stableValue \| stakingMissedReturns \| stakingMissedReturnsUsdc \| stayInControlSelfHostedWalletsStorage \| stopLimitOrder \| stopLimitOrderDown \| storage \| stressTestedColdStorage \| supportAndMore \| sustainable \| switchAdvancedToSimpleTrading \| taxesDetails \| tools \| tradeGeneral \| tradeHistory \| tradeImmediately \| tradingPerpetualsUsdc \| tradingWithLeverage \| transactionLimit \| trendingHotAssets \| twoIdVerify \| unlockKey \| usdAndUsdc \| usdtToUSDC \| verifyBankTransactions \| verifyCardTransactions \| verifyEmail \| verifyIdDetails \| verifyInfo \| videoRequest \| videoReview \| videoUpload \| vipBadge \| vote \| walletAsset \| walletConfirmation \| walletFlyEmptyState \| walletLoading \| walletNotifications \| walletSecurity \| walletUi \| watchVideos \| web3ActivityError \| web3ActivitySigned \| web3MobileSetupStart \| web3MobileSetupSuccess \| webRAT \| whyNotBoth \| yourContacts` | Yes | `-` | Name of illustration as defined in Figma |
|
|
44
84
|
| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
|
|
85
|
+
| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
|
|
45
86
|
| `dimension` | `240x240 \| 200x200` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
46
|
-
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
87
|
+
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name, or while the themed SVG is loading when applyTheme is set. |
|
|
47
88
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
48
89
|
| `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 |
|
|
49
90
|
|
|
@@ -12,13 +12,13 @@ import { Pictogram } from '@coinbase/cds-web/illustrations/Pictogram'
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
#### Basic example
|
|
16
16
|
|
|
17
17
|
```jsx live
|
|
18
18
|
<Pictogram name="shield" dimension="64x64" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
#### `scaleMultiplier` prop
|
|
22
22
|
|
|
23
23
|
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
|
|
|
28
28
|
<Pictogram name="shield" scaleMultiplier={1.5} />
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### Scaling with dimension
|
|
32
32
|
|
|
33
33
|
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
34
34
|
|
|
@@ -36,14 +36,49 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
36
36
|
<Pictogram name="shield" dimension="48x48" scaleMultiplier={2.5} />
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Theming
|
|
40
|
+
|
|
41
|
+
Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active `ThemeProvider`'s illustration palette.
|
|
42
|
+
|
|
43
|
+
```jsx live
|
|
44
|
+
<Pictogram applyTheme name="shield" />
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
To apply a custom brand palette, set `lightIllustrationColor` and `darkIllustrationColor` on your theme:
|
|
48
|
+
|
|
49
|
+
```jsx live
|
|
50
|
+
function ThemedPictogram() {
|
|
51
|
+
const customTheme = {
|
|
52
|
+
...defaultTheme,
|
|
53
|
+
lightIllustrationColor: {
|
|
54
|
+
...defaultTheme.lightIllustrationColor,
|
|
55
|
+
primary: 'rgb(220, 38, 38)',
|
|
56
|
+
accent1: 'rgb(124, 58, 237)',
|
|
57
|
+
},
|
|
58
|
+
darkIllustrationColor: {
|
|
59
|
+
...defaultTheme.darkIllustrationColor,
|
|
60
|
+
primary: 'rgb(248, 113, 113)',
|
|
61
|
+
accent1: 'rgb(167, 139, 250)',
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<ThemeProvider activeColorScheme="light" theme={customTheme}>
|
|
67
|
+
<Pictogram applyTheme name="shield" />
|
|
68
|
+
</ThemeProvider>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
39
73
|
## Props
|
|
40
74
|
|
|
41
75
|
| Prop | Type | Required | Default | Description |
|
|
42
76
|
| --- | --- | --- | --- | --- |
|
|
43
77
|
| `name` | `key \| done \| loop \| cardSuccess \| warning \| error \| add \| arrowsUpDown \| browser \| calculator \| calendar \| checkmark \| clock \| coinbaseOneLogo \| crystalBallInsight \| derivativesProduct \| download \| email \| gasFees \| identityCard \| instantUnstakingClock \| laptop \| learningRewardsProduct \| lock \| passport \| paypal \| phone \| pieChartData \| pieChartWithArrow \| planet \| robot \| safe \| securityKey \| settings \| shield \| support \| taxes \| tokenSales \| 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 \| baseAscend \| baseCertificateStar \| baseChartSmall \| baseChatBubbleHeart \| baseCheckSmall \| baseCoinCryptoSmall \| baseCoinNetworkSmall \| baseCoinStack \| baseCoinStar \| baseComet \| baseComputer \| baseConfetti \| baseConnectApps \| baseConnectSmall \| baseCreatorCoin \| baseDecentralizationSmall \| baseDiamondSmall \| baseDiamondTrophy \| baseDoor \| baseEarnedBadge \| baseEmptySmall \| baseErrorButterflySmall \| baseErrorSmall \| baseExchange \| baseFire \| baseGem \| baseGlobe \| baseHandStar \| baseLayout \| baseLightningbolt \| baseLoadingSmall \| baseLocationSmall \| baseLogo \| baseLogoNavigation \| baseMedal \| baseMessaging \| baseMintNftSmall \| baseNetworkSmall \| baseNftSmall \| basePaycoinSmall \| basePeopleSmall \| basePiechartSmall \| basePlant \| basePower \| baseRibbon \| baseRocket \| baseRockon \| baseSaved \| baseSecuritySmall \| baseSendSmall \| baseSignin \| baseSmile \| baseStack \| baseStar \| baseTargetSmall \| baseTile \| bigBtcSend \| bitcoin \| bitcoinPizza \| bitcoinRewards \| bitcoinWhitePaper \| blockchainConnection \| bonusFivePercent \| bonusTwoPercent \| borrowCoins \| borrowingLending \| borrowNavigation \| browserMultiPlatform \| browserTransaction \| btcOneHundred \| bundle \| businessProduct \| calendarCaution \| calendarHighlight \| 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 \| commodities \| completeQuiz \| complianceNavigation \| congratulations \| connectNavigation \| contactInfo \| controlWalletStorage \| creative \| creditCard \| crypto101 \| cryptoCard \| cryptoCoins \| 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 \| inrTrade \| institutionalNavigation \| institutions \| instoAccount \| instoAddressBook \| instoAdvancedTradingRebates \| instoApyInterest \| instoAuthenticatorProgress \| instoBorrowCoins \| instoBorrowingLending \| instoCoinbaseOneShield \| instoCoinFocus \| instoCrypto101 \| instoDecentralizationEverything \| instoDecentralizedExchange \| instoDecentralizedWeb3 \| instoDelegate \| instoEarnCoins \| instoEarnGraph \| instoEasyToUse \| instoEth \| instoEthRewards \| instoEthStakingChart \| instoFiat \| instoGem \| instoGlobalConnections \| instoKey \| instoMonitoringPerformance \| instoNftLibrary \| instoPasswordWalletLocked \| instoprimeMobileApp \| instoRestaking \| instoRiskStaking \| instoSecuredAssets \| instoSelfCustodyWallet \| instoStakingGraph \| instoTrading \| instoWalletWarning \| internationalExchangeNavigation \| internet \| investGraph \| laptopCharts \| laptopVideo \| layerNetworks \| leadGraph \| learn \| learningRewardsNavigation \| lightbulbLearn \| lightningNetworkSend \| linkYourAccount \| listingFees \| locationUsa \| lowFees \| manageWeb3SignersAcct \| miningCoins \| mintedNft \| mobileCharts \| mobileError \| mobileNotifcation \| mobileSuccess \| mobileWarning \| moneyCrypto \| 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 \| pieChartWithArrowBlue \| pizza \| pluginBrowser \| podium \| 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 \| 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` | Yes | `-` | Name of illustration as defined in Figma |
|
|
44
78
|
| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
|
|
79
|
+
| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
|
|
45
80
|
| `dimension` | `48x48 \| 64x64` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
46
|
-
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
81
|
+
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name, or while the themed SVG is loading when applyTheme is set. |
|
|
47
82
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
48
83
|
| `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 |
|
|
49
84
|
|
|
@@ -12,13 +12,13 @@ import { SpotIcon } from '@coinbase/cds-web/illustratations/SpotIcon'
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
#### Basic example
|
|
16
16
|
|
|
17
17
|
```jsx live
|
|
18
18
|
<SpotIcon name="shield" dimension="32x32" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
#### `scaleMultiplier` prop
|
|
22
22
|
|
|
23
23
|
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
|
|
|
28
28
|
<SpotIcon name="shield" scaleMultiplier={1.5} />
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### Scaling with dimension
|
|
32
32
|
|
|
33
33
|
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
34
34
|
|
|
@@ -36,14 +36,49 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
36
36
|
<SpotIcon name="shield" dimension="24x24" scaleMultiplier={1.5} />
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Theming
|
|
40
|
+
|
|
41
|
+
Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active `ThemeProvider`'s illustration palette.
|
|
42
|
+
|
|
43
|
+
```jsx live
|
|
44
|
+
<SpotIcon applyTheme name="shield" dimension="32x32" />
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
To apply a custom brand palette, set `lightIllustrationColor` and `darkIllustrationColor` on your theme:
|
|
48
|
+
|
|
49
|
+
```jsx live
|
|
50
|
+
function ThemedSpotIcon() {
|
|
51
|
+
const customTheme = {
|
|
52
|
+
...defaultTheme,
|
|
53
|
+
lightIllustrationColor: {
|
|
54
|
+
...defaultTheme.lightIllustrationColor,
|
|
55
|
+
primary: 'rgb(220, 38, 38)',
|
|
56
|
+
accent1: 'rgb(124, 58, 237)',
|
|
57
|
+
},
|
|
58
|
+
darkIllustrationColor: {
|
|
59
|
+
...defaultTheme.darkIllustrationColor,
|
|
60
|
+
primary: 'rgb(248, 113, 113)',
|
|
61
|
+
accent1: 'rgb(167, 139, 250)',
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<ThemeProvider activeColorScheme="light" theme={customTheme}>
|
|
67
|
+
<SpotIcon applyTheme name="shield" dimension="32x32" />
|
|
68
|
+
</ThemeProvider>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
39
73
|
## Props
|
|
40
74
|
|
|
41
75
|
| Prop | Type | Required | Default | Description |
|
|
42
76
|
| --- | --- | --- | --- | --- |
|
|
43
77
|
| `name` | `done \| warning \| error \| advancedTradeProduct \| arrowsUpDown \| assetHubProduct \| assetManagementProduct \| bank \| base \| borrowProduct \| cloudProduct \| coinbase \| commerceProduct \| custodyProduct \| delegateProduct \| derivativesProduct \| email \| exchangeProduct \| helpCenterProduct \| institutionalProduct \| learningRewardsProduct \| nftProduct \| nodeProduct \| participateProduct \| privateClientProduct \| rewardsProduct \| rosettaProduct \| shield \| venturesProduct \| wallet \| walletLogo \| 2fa \| authenticator \| bonusFivePercent \| bonusTwoPercent \| businessProduct \| chat \| coinbaseOneEarn \| coinbaseOneProductInvestWeekly \| creditCard \| delegate \| fast \| idVerification \| instoDelegate \| outage \| pieChart \| recurringPurchases \| send \| layeredNetworks \| noFees \| assetEmptyStateAa \| assetEmptyStateAb \| assetEmptyStateAc \| assetEmptyStateAd \| assetEmptyStateAe \| assetEmptyStateBa \| assetEmptyStateBb \| assetEmptyStateBc \| assetEmptyStateBd \| assetEmptyStateBe \| assetEmptyStateCa \| assetEmptyStateCb \| assetEmptyStateCc \| assetEmptyStateCd \| assetEmptyStateCe \| assetEmptyStateDa \| assetEmptyStateDb \| assetEmptyStateDc \| assetEmptyStateDd \| assetEmptyStateDe \| assetEmptyStateEa \| assetEmptyStateEb \| assetEmptyStateEc \| assetEmptyStateEd \| assetEmptyStateEe \| cb1Cash \| coinbaseOneChart \| coinbaseOneProduct \| contract \| dataMarketplace \| instantAccess \| instoAdvancedTradeProduct \| instoAssetHubProduct \| instoAuthenticator \| instoBorrowProduct \| instoBusinessProduct \| instoChat \| instoCloudProduct \| instoCoinbaseOneEarn \| instoCommerceProduct \| instoCustodyProduct \| instoDataMarketplace \| instoDerivativesProduct \| instoFast \| instoHelpCenterProduct \| instoIdVerification \| instoLayeredNetworks \| instoLearningRewardsProduct \| instoMultiCoin \| instoPaySDKProduct \| instoPieChart \| instoPrimeProduct \| instoPrivateClientProduct \| instoProductCoinbaseCard \| instoProductCompliance \| instoProductPro \| instoProductWallet \| instoRecurringPurchases \| instoRewardsProduct \| instoShield \| instoSignInProduct \| instoStakingProduct \| instoWalletAsAServiceProduct \| internationalExchangeProduct \| multiCoin \| paySDKProduct \| primeProduct \| productCoinbaseCard \| productCompliance \| productEarn \| productPro \| productWallet \| signInProduct \| stakingProduct \| walletAsAServiceProduct` | Yes | `-` | Name of illustration as defined in Figma |
|
|
44
78
|
| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
|
|
79
|
+
| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
|
|
45
80
|
| `dimension` | `32x32 \| 24x24` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
46
|
-
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
81
|
+
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name, or while the themed SVG is loading when applyTheme is set. |
|
|
47
82
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
48
83
|
| `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 |
|
|
49
84
|
|
|
@@ -12,13 +12,13 @@ import { SpotRectangle } from '@coinbase/cds-web/illustratations/SpotRectangle'
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
#### Basic example
|
|
16
16
|
|
|
17
17
|
```jsx live
|
|
18
18
|
<SpotRectangle name="creditCardExcitement" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
#### `scaleMultiplier` prop
|
|
22
22
|
|
|
23
23
|
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
|
|
|
28
28
|
<SpotRectangle name="creditCardExcitement" scaleMultiplier={1.5} />
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### Scaling with dimension
|
|
32
32
|
|
|
33
33
|
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
34
34
|
|
|
@@ -36,14 +36,49 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
36
36
|
<SpotRectangle name="creditCardExcitement" dimension="240x120" scaleMultiplier={1.5} />
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Theming
|
|
40
|
+
|
|
41
|
+
Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active `ThemeProvider`'s illustration palette.
|
|
42
|
+
|
|
43
|
+
```jsx live
|
|
44
|
+
<SpotRectangle applyTheme name="creditCardExcitement" />
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
To apply a custom brand palette, set `lightIllustrationColor` and `darkIllustrationColor` on your theme:
|
|
48
|
+
|
|
49
|
+
```jsx live
|
|
50
|
+
function ThemedSpotRectangle() {
|
|
51
|
+
const customTheme = {
|
|
52
|
+
...defaultTheme,
|
|
53
|
+
lightIllustrationColor: {
|
|
54
|
+
...defaultTheme.lightIllustrationColor,
|
|
55
|
+
primary: 'rgb(220, 38, 38)',
|
|
56
|
+
accent1: 'rgb(124, 58, 237)',
|
|
57
|
+
},
|
|
58
|
+
darkIllustrationColor: {
|
|
59
|
+
...defaultTheme.darkIllustrationColor,
|
|
60
|
+
primary: 'rgb(248, 113, 113)',
|
|
61
|
+
accent1: 'rgb(167, 139, 250)',
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<ThemeProvider activeColorScheme="light" theme={customTheme}>
|
|
67
|
+
<SpotRectangle applyTheme name="creditCardExcitement" />
|
|
68
|
+
</ThemeProvider>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
39
73
|
## Props
|
|
40
74
|
|
|
41
75
|
| Prop | Type | Required | Default | Description |
|
|
42
76
|
| --- | --- | --- | --- | --- |
|
|
43
77
|
| `name` | `margin \| blockchain \| bridging \| calendar \| coinbaseOneLogo \| concierge \| diamond \| earn \| login \| nft \| securityShield \| staking \| tokenSales \| cb1BankTransfers \| ethStakingRewards \| futures \| globalTransactions \| governance \| instoKey \| lightningNetworkSend \| startToday \| usdcLoan \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| cardBoosted \| cbbtc \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOnePhoneLightning \| coinbaseOneRewards \| coinbaseOneSavingFunds \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| exploreDecentralizedApps \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| graphChartTrading \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| leverage \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferYellow \| marginWarning \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| portfolioPerformance \| poweredByEthereum \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| addBank \| advancedTradeCharts \| apiKey \| appUpdate \| borrowLoan \| browserHistory \| cardWaitlist \| cbEth \| clawMachinePig \| coinGateway \| connectWalletTutorial \| creditCardExcitement \| creditCardExcitementCoinbaseOne \| cryptoEconomyCoin \| cryptoEconomyEurc \| cryptoEconomyUSDC \| currency \| derivativesLoop \| downloadCoinbaseWalletArrow \| downloadingStatement \| emptyNfts \| emptyTrading \| eth2SellSend \| eth2SendSell \| eth2SendSellTwo \| ethAddress \| ethStakeOrWrap \| ethStakeOrWrapTwo \| ethStakingMovement \| ethTrading \| ethTradingTwo \| ethWrappedStakingRewards \| faceId \| fiatInterest \| giftBoxRewards \| highFees \| insto \| instoAboutOnchain \| instoApiKey \| instoConsensusWaitingForApprovals \| instoCryptoAndMore \| instoCurrency \| instoDesignateSigner \| instoEmptyTrading \| instoEthStakingMovement \| instoGetStartedInMinutes \| instoMargin \| instoOnchainSetupInProgress \| instoQRCode \| instoRefreshKey \| instoSemiCustodial \| instoSetupComplete \| instoSetupOnchain \| leadingProtocol \| leadingProtocolMorpho \| ledgerFailed \| ledgerSignatureRejected \| lendGraph \| linkCoinbaseWallet \| loanValue \| noTransactions \| portfolioOverview \| portfolioOverviewRelaunch \| primeOrderConfirmation \| primePriceLadder \| primeTradePreferences \| protectedNotes \| ratDashboard \| ratFoundWallet \| ratMigration \| ratMigrationerror \| referralsBonus \| scanCode \| secureAccount \| sendingCrypto \| stakingUpgrade \| trade \| transferCoins \| transferEth \| transferFunds \| trustedContacts \| unauthorizedTransfers \| uob \| update \| uploadDocument \| usdcLoanEth \| walletReconnect \| walletReconnectSuccess \| wrapEthTwo \| yieldHolding` | Yes | `-` | Name of illustration as defined in Figma |
|
|
44
78
|
| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
|
|
79
|
+
| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
|
|
45
80
|
| `dimension` | `240x120` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
46
|
-
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
81
|
+
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name, or while the themed SVG is loading when applyTheme is set. |
|
|
47
82
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
48
83
|
| `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 |
|
|
49
84
|
|
|
@@ -12,13 +12,13 @@ import { SpotSquare } from '@coinbase/cds-web/illustratations/SpotSquare'
|
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
#### Basic example
|
|
16
16
|
|
|
17
17
|
```jsx live
|
|
18
18
|
<SpotSquare name="yieldCenterUSDC" />
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
#### `scaleMultiplier` prop
|
|
22
22
|
|
|
23
23
|
If no predefined dimensions fit your use case, you can use the `scaleMultiplier` prop to scale the illustration.
|
|
24
24
|
|
|
@@ -28,7 +28,7 @@ Use `scaleMultiplier` sparingly and with caution. We have predefined dimensions
|
|
|
28
28
|
<SpotSquare name="yieldCenterUSDC" scaleMultiplier={1.5} />
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
#### Scaling with dimension
|
|
32
32
|
|
|
33
33
|
If `dimension` and `scaleMultiplier` are both provided the component will scale based on the provided dimension.
|
|
34
34
|
|
|
@@ -36,14 +36,49 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
36
36
|
<SpotSquare name="yieldCenterUSDC" dimension="120x120" scaleMultiplier={1.5} />
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Theming
|
|
40
|
+
|
|
41
|
+
Use the `applyTheme` prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active `ThemeProvider`'s illustration palette.
|
|
42
|
+
|
|
43
|
+
```jsx live
|
|
44
|
+
<SpotSquare applyTheme name="yieldCenterUSDC" />
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
To apply a custom brand palette, set `lightIllustrationColor` and `darkIllustrationColor` on your theme:
|
|
48
|
+
|
|
49
|
+
```jsx live
|
|
50
|
+
function ThemedSpotSquare() {
|
|
51
|
+
const customTheme = {
|
|
52
|
+
...defaultTheme,
|
|
53
|
+
lightIllustrationColor: {
|
|
54
|
+
...defaultTheme.lightIllustrationColor,
|
|
55
|
+
primary: 'rgb(220, 38, 38)',
|
|
56
|
+
accent1: 'rgb(124, 58, 237)',
|
|
57
|
+
},
|
|
58
|
+
darkIllustrationColor: {
|
|
59
|
+
...defaultTheme.darkIllustrationColor,
|
|
60
|
+
primary: 'rgb(248, 113, 113)',
|
|
61
|
+
accent1: 'rgb(167, 139, 250)',
|
|
62
|
+
},
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<ThemeProvider activeColorScheme="light" theme={customTheme}>
|
|
67
|
+
<SpotSquare applyTheme name="yieldCenterUSDC" />
|
|
68
|
+
</ThemeProvider>
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
39
73
|
## Props
|
|
40
74
|
|
|
41
75
|
| Prop | Type | Required | Default | Description |
|
|
42
76
|
| --- | --- | --- | --- | --- |
|
|
43
77
|
| `name` | `baseQuickBuy \| blockchain \| bridging \| coinbaseOneLogo \| earn \| nft \| options \| pieChartWithArrow \| priceAlerts \| refresh \| securityShield \| staking \| addCard \| baseCreatorCoin \| bonusFivePercent \| bonusTwoPercent \| cardBlocked \| cardDeclined \| coinbaseOneEarn \| coinbaseUnlockOffers \| ethStaking \| ethStakingRewards \| futures \| globalTransactions \| idError \| inrTrade \| instoAuthenticatorProgress \| lightningNetworkSend \| outage \| pieChartWithArrowBlue \| startToday \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneZeroPortal \| coinFifty \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoEthStakingRewards \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| layerThree \| linkingYourWalletToYourCoinbaseAccount \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| performance \| portfolioPerformance \| poweredByEthereum \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| eth2SendSell \| ethStakeOrWrap \| ethStakeOrWrapTwo \| linkCoinbaseWallet \| addEth \| addMultipleCrypto \| addPasswordProtection \| announcementAdvancedTrading \| assetForward \| assetRefresh \| baseCautionMedium \| baseChartMedium \| baseCheckMedium \| baseCheckTrophyMedium \| baseCoinCryptoMedium \| baseCoinNetworkMedium \| baseConnectMedium \| baseDecentralizationMedium \| baseDiamondMedium \| baseEmptyMedium \| baseErrorButterflyMedium \| baseErrorMedium \| baseIdMedium \| baseLoadingMedium \| baseLocationMedium \| baseMintNftMedium \| baseNetworkMedium \| baseNftMedium \| basePaycoinMedium \| basePeopleMedium \| basePiechartMedium \| baseRewardChest \| baseRewardClam \| baseRewardPlate \| baseRewardPodium \| baseRewardSun \| baseRewardTrophyEmblem \| baseRewardTrophyStars \| baseSecurityMedium \| baseSendMedium \| baseSwitch \| baseTargetMedium \| baseUsdcMedium \| boostedCard \| borrowLimitsAddressed \| bullishCase \| cardAnnouncement \| cardAutoReload \| cardShipped \| cbEthWrappingUnavailable \| checkVerifacation \| coinbaseCardSparkle \| coinbaseLock \| coinbaseOneBoostedCard \| coinbaseOneBoostedCardCB1 \| coinbaseOneConcierge \| coinbaseOneStakeOrWrap \| coinbaseOneStaking \| coinbaseOneStarToken \| coinbaseOneUSDC \| coinbaseOneZero \| confirmAddress \| confirmEmail \| confirmIDCard \| confirmSocialSecurity \| cryptoEconomyArrows \| dappWallet \| darkModeIntroduction \| defiEarnAnnouncement \| defiNfts \| directDepositExcitement \| earnInterestOnCryptocurrency \| fileYourCryptoTaxesCheckOther \| fileYourCryptoTaxesOther \| frameEmpty \| giftBoxCrypto \| gifting \| goldSilverFutures \| guideBullCase \| guideCryptoBeginner \| guideFiveThings \| guideNftDefi \| guideStartInvesting \| instantUnstaking \| instoDappWallet \| instoEthStaking \| instoPixDeposits \| instoSecurityKey \| instoSideChainSide \| instoUbiKey \| instoWaiting \| interestForYou \| miniGift \| moneyRewards \| nftTag \| noPortfolio \| nuxChecklist \| nuxEarnCrypto \| nuxEarnYield \| nuxPopularAssets \| nuxRecurringBuys \| offersEmpty \| phoneNotifications \| pixBankDeposits \| pixDeposits \| recommendInvestments \| referralsPeople \| refreshMobileApp \| rewardExpiring \| saveTheDate \| sparkleToken \| starToken \| swapEth \| switchReward \| taxDocuments \| transferringCrypto \| unsupportedAsset \| waitlistSignup \| walletApp \| walletQuestsChest \| walletQuestsTrophy \| yieldCenter \| yieldCenterUSDC` | Yes | `-` | Name of illustration as defined in Figma |
|
|
44
78
|
| `alt` | `string` | No | `"" will identify the image as decorative` | Alt tag to apply to the img |
|
|
79
|
+
| `applyTheme` | `boolean` | No | `-` | Apply the theme to the illustration |
|
|
45
80
|
| `dimension` | `96x96` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
46
|
-
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
81
|
+
| `fallback` | `ReactElement<any, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name, or while the themed SVG is loading when applyTheme is set. |
|
|
47
82
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
48
83
|
| `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 |
|
|
49
84
|
|