@0xsquid/ui 3.0.0 → 3.0.1

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.
Files changed (10) hide show
  1. package/dist/cjs/index.js +20 -10
  2. package/dist/cjs/types/components/buttons/AssetsButton.d.ts +1 -0
  3. package/dist/cjs/types/components/layout/SwapConfiguration.d.ts +1 -0
  4. package/dist/cjs/types/stories/buttons/AssetsButton.stories.d.ts +2 -0
  5. package/dist/esm/index.js +20 -10
  6. package/dist/esm/types/components/buttons/AssetsButton.d.ts +1 -0
  7. package/dist/esm/types/components/layout/SwapConfiguration.d.ts +1 -0
  8. package/dist/esm/types/stories/buttons/AssetsButton.stories.d.ts +2 -0
  9. package/dist/index.d.ts +2 -0
  10. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -28126,6 +28126,10 @@ const outlineWidthMap = {
28126
28126
  function AssetsButton({ chain, token, onClick, variant = "primary", isLoading = false, tooltip, emptyTokenLabel = "Select token", }) {
28127
28127
  var _a, _b, _c, _d;
28128
28128
  const [tokenImageLoadingState, setTokenImageLoadingState] = React$1.useState(ImageLoadingState.LOADING);
28129
+ const [fallbackImageLoadingState, setFallbackImageLoadingState] = React$1.useState(ImageLoadingState.LOADING);
28130
+ const isImgLoadError = tokenImageLoadingState === ImageLoadingState.ERROR;
28131
+ const isFallbackImgLoadError = fallbackImageLoadingState === ImageLoadingState.ERROR;
28132
+ const showTextFallback = (isImgLoadError && !(token === null || token === void 0 ? void 0 : token.fallbackIconUrl)) || isFallbackImgLoadError;
28129
28133
  const fallbackBgColor = useColorFromSeed((_a = token === null || token === void 0 ? void 0 : token.symbol) !== null && _a !== void 0 ? _a : "");
28130
28134
  const state = React$1.useMemo(() => {
28131
28135
  if (chain != null && !isLoading) {
@@ -28142,14 +28146,12 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
28142
28146
  const defaultBgColor = `var(${themeKeysToCssVariables.color[themeKeyVariantMap[variant]].cssVariable})`;
28143
28147
  const outlineWidth = outlineWidthMap[state];
28144
28148
  const chainBgColor = (_b = chain === null || chain === void 0 ? void 0 : chain.bgColor) !== null && _b !== void 0 ? _b : defaultBgColor;
28145
- const tokenTextColor = tokenImageLoadingState === ImageLoadingState.ERROR
28146
- ? "#fff"
28147
- : token === null || token === void 0 ? void 0 : token.textColor;
28149
+ const tokenTextColor = isImgLoadError ? "#fff" : token === null || token === void 0 ? void 0 : token.textColor;
28148
28150
  const tokenBgColor = React$1.useMemo(() => {
28149
28151
  if (state !== AssetsButtonState.FULL) {
28150
28152
  return defaultBgColor;
28151
28153
  }
28152
- if (tokenImageLoadingState === ImageLoadingState.ERROR) {
28154
+ if (showTextFallback) {
28153
28155
  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
28154
28156
  return fallbackBgColor || defaultBgColor;
28155
28157
  }
@@ -28159,7 +28161,7 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
28159
28161
  state,
28160
28162
  token === null || token === void 0 ? void 0 : token.bgColor,
28161
28163
  defaultBgColor,
28162
- tokenImageLoadingState,
28164
+ showTextFallback,
28163
28165
  fallbackBgColor,
28164
28166
  ]);
28165
28167
  const bgGradient = React$1.useMemo(() => {
@@ -28177,13 +28179,22 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
28177
28179
  ? undefined
28178
28180
  : tooltip === null || tooltip === void 0 ? void 0 : tooltip.tooltipContent, children: jsxRuntime.jsxs(ButtonTag, { onClick: state === AssetsButtonState.LOADING ? undefined : onClick, disabled: state === AssetsButtonState.LOADING, "aria-disabled": state === AssetsButtonState.LOADING, className: cn("tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none", buttonTextClassNameMap[variant], state === AssetsButtonState.LOADING
28179
28181
  ? "tw-cursor-not-allowed"
28180
- : "tw-group/assets-button"), children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsxs("svg", { className: "tw-absolute -tw-left-[2px] -tw-top-[2px] tw-z-20 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.inner, height: "44", viewBox: `0 0 ${outlineWidth.inner} 44`, fill: "none", children: [jsxRuntime.jsx("clipPath", { id: "halfClip1", children: jsxRuntime.jsx("rect", { x: "0", y: "0", width: outlineWidth.inner, height: "44" }) }), jsxRuntime.jsx("path", { d: "M59.1506 36.849L59.1508 36.8492C63.2511 40.9496 68.6272 43 74.0001 43H145C156.598 43 166 33.598 166 22C166 10.402 156.598 1 145 1H74.0001C68.6272 0.999977 63.2511 3.05042 59.1508 7.15076C58.6183 7.68325 58.0958 8.22097 57.5842 8.74755L57.5817 8.75009C55.9228 10.4574 54.3925 12.0283 52.8031 13.1834C51.2282 14.3279 49.6791 15 48 15C46.3209 15 44.7718 14.3279 43.1969 13.1834C41.6075 12.0283 40.0772 10.4574 38.4183 8.75009L38.4159 8.74759C37.9042 8.22101 37.3817 7.68327 36.8492 7.15076C32.7489 3.05042 27.3728 0.999977 21.9999 1C16.6271 1.00002 11.251 3.05047 7.15076 7.15076C3.05045 11.2511 1 16.6272 1 22C1 27.3728 3.05045 32.7489 7.15076 36.8492C11.251 40.9495 16.6271 43 21.9999 43C27.3728 43 32.7489 40.9496 36.8492 36.8492L36.8494 36.849C37.3794 36.3188 37.8994 35.7834 38.4088 35.2589L38.4108 35.2569C40.0704 33.5483 41.6019 31.9756 43.1928 30.8191C44.7691 29.6731 46.3197 29 48 29C49.6803 29 51.2309 29.6731 52.8072 30.8191C54.3981 31.9756 55.9296 33.5483 57.5892 35.2569L57.5912 35.2589C58.1006 35.7834 58.6206 36.3188 59.1506 36.849Z", stroke: "currentColor", className: "tw-text-grey-900", strokeWidth: "2", clipPath: "url(#halfClip1)" })] }), jsxRuntime.jsxs("svg", { className: "tw-absolute -tw-left-[4px] -tw-top-[4px] tw-z-10 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.outer, height: "48", viewBox: `0 0 ${outlineWidth.outer} 48`, fill: "none", children: [jsxRuntime.jsx("clipPath", { id: "halfClip2", children: jsxRuntime.jsx("rect", { x: "0", y: "0", width: outlineWidth.outer, height: "48" }) }), jsxRuntime.jsx("path", { d: "M60.4432 39.5559L60.4437 39.5564C64.7391 43.8517 70.3729 46 76.0001 46H147C159.15 46 169 36.1503 169 24C169 11.8497 159.15 2 147 2H76.0001C70.3729 1.99998 64.7391 4.14825 60.4437 8.44365C59.9062 8.98109 59.3797 9.52298 58.8697 10.0479L58.8645 10.0532C57.1905 11.7761 55.7217 13.2796 54.2152 14.3745C52.7378 15.4481 51.3923 16 50 16C48.6077 16 47.2622 15.4481 45.7848 14.3745C44.2783 13.2796 42.8095 11.7761 41.1355 10.0532L41.1305 10.0481C40.6205 9.52314 40.0939 8.98117 39.5563 8.44365C35.2609 4.14825 29.6271 1.99998 23.9999 2C18.3727 2.00002 12.739 4.1483 8.44365 8.44365C4.14827 12.739 2 18.3728 2 24C2 29.6272 4.14827 35.261 8.44365 39.5564C12.739 43.8517 18.3727 46 23.9999 46C29.6271 46 35.2609 43.8517 39.5563 39.5564L39.5568 39.5559C40.0917 39.0207 40.6159 38.481 41.1237 37.9582L41.1281 37.9537C42.8028 36.2295 44.2728 34.7243 45.7808 33.6279C47.2597 32.5528 48.6066 32 50 32C51.3934 32 52.7403 32.5528 54.2192 33.6279C55.7272 34.7243 57.1972 36.2295 58.8719 37.9537L58.8763 37.9582C59.3841 38.481 59.9083 39.0207 60.4432 39.5559Z", stroke: "currentColor", className: "tw-text-material-light-average", strokeWidth: "4", clipPath: "url(#halfClip2)" })] }), jsxRuntime.jsx("div", { className: cn("tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between", state !== AssetsButtonState.FULL && "!tw-w-[72px]"), style: {
28182
+ : "tw-group/assets-button"), children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsxs("svg", { className: "tw-absolute -tw-left-[2px] -tw-top-[2px] tw-z-20 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.inner, height: "44", viewBox: `0 0 ${outlineWidth.inner} 44`, fill: "none", children: [jsxRuntime.jsx("clipPath", { id: "halfClip1", children: jsxRuntime.jsx("rect", { x: "0", y: "0", width: outlineWidth.inner, height: "44" }) }), jsxRuntime.jsx("path", { d: "M59.1506 36.849L59.1508 36.8492C63.2511 40.9496 68.6272 43 74.0001 43H145C156.598 43 166 33.598 166 22C166 10.402 156.598 1 145 1H74.0001C68.6272 0.999977 63.2511 3.05042 59.1508 7.15076C58.6183 7.68325 58.0958 8.22097 57.5842 8.74755L57.5817 8.75009C55.9228 10.4574 54.3925 12.0283 52.8031 13.1834C51.2282 14.3279 49.6791 15 48 15C46.3209 15 44.7718 14.3279 43.1969 13.1834C41.6075 12.0283 40.0772 10.4574 38.4183 8.75009L38.4159 8.74759C37.9042 8.22101 37.3817 7.68327 36.8492 7.15076C32.7489 3.05042 27.3728 0.999977 21.9999 1C16.6271 1.00002 11.251 3.05047 7.15076 7.15076C3.05045 11.2511 1 16.6272 1 22C1 27.3728 3.05045 32.7489 7.15076 36.8492C11.251 40.9495 16.6271 43 21.9999 43C27.3728 43 32.7489 40.9496 36.8492 36.8492L36.8494 36.849C37.3794 36.3188 37.8994 35.7834 38.4088 35.2589L38.4108 35.2569C40.0704 33.5483 41.6019 31.9756 43.1928 30.8191C44.7691 29.6731 46.3197 29 48 29C49.6803 29 51.2309 29.6731 52.8072 30.8191C54.3981 31.9756 55.9296 33.5483 57.5892 35.2569L57.5912 35.2589C58.1006 35.7834 58.6206 36.3188 59.1506 36.849Z", stroke: "currentColor", className: "tw-text-grey-900", strokeWidth: "2", clipPath: "url(#halfClip1)" })] }), jsxRuntime.jsxs("svg", { className: "tw-absolute -tw-left-[4px] -tw-top-[4px] tw-z-10 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.outer, height: "48", viewBox: `0 0 ${outlineWidth.outer} 48`, fill: "none", children: [jsxRuntime.jsx("clipPath", { id: "halfClip2", children: jsxRuntime.jsx("rect", { x: "0", y: "0", width: outlineWidth.outer, height: "48" }) }), jsxRuntime.jsx("path", { d: "M60.4432 39.5559L60.4437 39.5564C64.7391 43.8517 70.3729 46 76.0001 46H147C159.15 46 169 36.1503 169 24C169 11.8497 159.15 2 147 2H76.0001C70.3729 1.99998 64.7391 4.14825 60.4437 8.44365C59.9062 8.98109 59.3797 9.52298 58.8697 10.0479L58.8645 10.0532C57.1905 11.7761 55.7217 13.2796 54.2152 14.3745C52.7378 15.4481 51.3923 16 50 16C48.6077 16 47.2622 15.4481 45.7848 14.3745C44.2783 13.2796 42.8095 11.7761 41.1355 10.0532L41.1305 10.0481C40.6205 9.52314 40.0939 8.98117 39.5563 8.44365C35.2609 4.14825 29.6271 1.99998 23.9999 2C18.3727 2.00002 12.739 4.1483 8.44365 8.44365C4.14827 12.739 2 18.3728 2 24C2 29.6272 4.14827 35.261 8.44365 39.5564C12.739 43.8517 18.3727 46 23.9999 46C29.6271 46 35.2609 43.8517 39.5563 39.5564L39.5568 39.5559C40.0917 39.0207 40.6159 38.481 41.1237 37.9582L41.1281 37.9537C42.8028 36.2295 44.2728 34.7243 45.7808 33.6279C47.2597 32.5528 48.6066 32 50 32C51.3934 32 52.7403 32.5528 54.2192 33.6279C55.7272 34.7243 57.1972 36.2295 58.8719 37.9537L58.8763 37.9582C59.3841 38.481 59.9083 39.0207 60.4432 39.5559Z", stroke: "currentColor", className: "tw-text-material-light-average", strokeWidth: "4", clipPath: "url(#halfClip2)" })] }), jsxRuntime.jsx("div", { className: cn("tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between tw-assets-button-mask", state !== AssetsButtonState.FULL && "!tw-w-[72px]"), style: {
28181
28183
  backgroundImage: bgGradient,
28182
28184
  }, children: jsxRuntime.jsx("div", { className: clsx(imageWrapperClassName), children: state === AssetsButtonState.CHAIN_ONLY ||
28183
28185
  state === AssetsButtonState.FULL ? (jsxRuntime.jsx("img", { src: chain === null || chain === void 0 ? void 0 : chain.iconUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover" })) : (state !== AssetsButtonState.LOADING && (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) }))) }) }), state === AssetsButtonState.FULL ? (jsxRuntime.jsxs("div", { className: clsx(imageWrapperClassName, "tw-absolute tw-left-[54px] tw-z-[5] tw-h-squid-xl tw-overflow-hidden"), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
28184
28186
  backgroundColor: tokenBgColor,
28185
- } }), tokenImageLoadingState === ImageLoadingState.ERROR && (
28186
- // show fallback
28187
+ } }), isImgLoadError && (token === null || token === void 0 ? void 0 : token.fallbackIconUrl) && (
28188
+ // fallback image
28189
+ jsxRuntime.jsx("img", { src: token === null || token === void 0 ? void 0 : token.fallbackIconUrl, alt: token === null || token === void 0 ? void 0 : token.symbol, onLoad: () => {
28190
+ setFallbackImageLoadingState(ImageLoadingState.LOADED);
28191
+ }, onError: () => {
28192
+ setFallbackImageLoadingState(ImageLoadingState.ERROR);
28193
+ }, className: cn(tokenImageClassName,
28194
+ // when image load failed, hide it with opacity: 0 instead of display: none
28195
+ // so new images can load and update the loading state
28196
+ isFallbackImgLoadError && "tw-opacity-0") })), showTextFallback && (
28197
+ // fallback text
28187
28198
  jsxRuntime.jsx("div", { style: { color: tokenTextColor }, className: cn(tokenImageClassName, "tw-flex tw-items-center tw-justify-center tw-text-body-small"), children: (_d = (_c = token === null || token === void 0 ? void 0 : token.symbol) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase() })), jsxRuntime.jsx("img", { onLoad: () => {
28188
28199
  setTokenImageLoadingState(ImageLoadingState.LOADED);
28189
28200
  }, onError: () => {
@@ -28191,8 +28202,7 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
28191
28202
  }, src: token === null || token === void 0 ? void 0 : token.iconUrl, alt: token === null || token === void 0 ? void 0 : token.symbol, className: cn(tokenImageClassName,
28192
28203
  // when image load failed, hide it with opacity: 0 instead of display: none
28193
28204
  // so new images can load and update the loading state
28194
- tokenImageLoadingState === ImageLoadingState.ERROR &&
28195
- "tw-opacity-0") }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxRuntime.jsxs("div", { className: cn("tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-min-w-fit tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border tw-border-l-0 tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs before:tw-absolute before:-tw-inset-[3px] before:tw-z-[1] before:tw-w-[calc(100%+3px)] before:tw-translate-x-[3px] before:tw-rounded-br-full before:tw-rounded-tr-full before:tw-border-2 before:tw-border-l-0 before:tw-border-transparent after:tw-absolute after:-tw-inset-[5px] after:tw-z-0 after:tw-w-[calc(100%+4px)] after:tw-translate-x-[6px] after:tw-rounded-br-full after:tw-rounded-tr-full after:tw-border-4 after:tw-border-l-0 after:tw-border-transparent group-hover/assets-button:before:tw-border-grey-900 group-hover/assets-button:after:tw-border-material-light-average", state === AssetsButtonState.FULL && "tw-pl-[7px]"), style: {
28205
+ isImgLoadError && "tw-opacity-0") }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxRuntime.jsxs("div", { className: cn("tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-min-w-fit tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border tw-border-l-0 tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs before:tw-absolute before:-tw-inset-[3px] before:tw-z-[1] before:tw-w-[calc(100%+3px)] before:tw-translate-x-[3px] before:tw-rounded-br-full before:tw-rounded-tr-full before:tw-border-2 before:tw-border-l-0 before:tw-border-transparent after:tw-absolute after:-tw-inset-[5px] after:tw-z-0 after:tw-w-[calc(100%+4px)] after:tw-translate-x-[6px] after:tw-rounded-br-full after:tw-rounded-tr-full after:tw-border-4 after:tw-border-l-0 after:tw-border-transparent group-hover/assets-button:before:tw-border-grey-900 group-hover/assets-button:after:tw-border-material-light-average", state === AssetsButtonState.FULL && "tw-pl-[7px]"), style: {
28196
28206
  backgroundColor: tokenBgColor,
28197
28207
  color: tokenTextColor,
28198
28208
  }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: cn("tw-leading-[13px]", state === AssetsButtonState.LOADING && "tw-min-w-[135px]"), children: state === AssetsButtonState.FULL
package/dist/cjs/types/components/buttons/AssetsButton.d.ts CHANGED
@@ -3,6 +3,7 @@ import { type TooltipProps } from "../controls";
3
3
  interface AssetsButtonProps {
4
4
  token?: {
5
5
  iconUrl: string;
6
+ fallbackIconUrl?: string;
6
7
  symbol: string;
7
8
  bgColor: string;
8
9
  textColor: string;
package/dist/cjs/types/components/layout/SwapConfiguration.d.ts CHANGED
@@ -26,6 +26,7 @@ interface SwapConfigurationProps {
26
26
  };
27
27
  token?: {
28
28
  iconUrl: string;
29
+ fallbackIconUrl?: string;
29
30
  symbol: string;
30
31
  bgColor: string;
31
32
  textColor: string;
package/dist/cjs/types/stories/buttons/AssetsButton.stories.d.ts CHANGED
@@ -14,3 +14,5 @@ export declare const ChainAndTokenDarkText: Story;
14
14
  export declare const LongTokenSymbol: Story;
15
15
  export declare const Tooltip: Story;
16
16
  export declare const BrokenTokenImage: Story;
17
+ export declare const BrokenTokenImageWithPlaceholder: Story;
18
+ export declare const BrokenTokenImageAndBrokenPlaceholder: Story;
package/dist/esm/index.js CHANGED
@@ -28106,6 +28106,10 @@ const outlineWidthMap = {
28106
28106
  function AssetsButton({ chain, token, onClick, variant = "primary", isLoading = false, tooltip, emptyTokenLabel = "Select token", }) {
28107
28107
  var _a, _b, _c, _d;
28108
28108
  const [tokenImageLoadingState, setTokenImageLoadingState] = useState(ImageLoadingState.LOADING);
28109
+ const [fallbackImageLoadingState, setFallbackImageLoadingState] = useState(ImageLoadingState.LOADING);
28110
+ const isImgLoadError = tokenImageLoadingState === ImageLoadingState.ERROR;
28111
+ const isFallbackImgLoadError = fallbackImageLoadingState === ImageLoadingState.ERROR;
28112
+ const showTextFallback = (isImgLoadError && !(token === null || token === void 0 ? void 0 : token.fallbackIconUrl)) || isFallbackImgLoadError;
28109
28113
  const fallbackBgColor = useColorFromSeed((_a = token === null || token === void 0 ? void 0 : token.symbol) !== null && _a !== void 0 ? _a : "");
28110
28114
  const state = useMemo(() => {
28111
28115
  if (chain != null && !isLoading) {
@@ -28122,14 +28126,12 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
28122
28126
  const defaultBgColor = `var(${themeKeysToCssVariables.color[themeKeyVariantMap[variant]].cssVariable})`;
28123
28127
  const outlineWidth = outlineWidthMap[state];
28124
28128
  const chainBgColor = (_b = chain === null || chain === void 0 ? void 0 : chain.bgColor) !== null && _b !== void 0 ? _b : defaultBgColor;
28125
- const tokenTextColor = tokenImageLoadingState === ImageLoadingState.ERROR
28126
- ? "#fff"
28127
- : token === null || token === void 0 ? void 0 : token.textColor;
28129
+ const tokenTextColor = isImgLoadError ? "#fff" : token === null || token === void 0 ? void 0 : token.textColor;
28128
28130
  const tokenBgColor = useMemo(() => {
28129
28131
  if (state !== AssetsButtonState.FULL) {
28130
28132
  return defaultBgColor;
28131
28133
  }
28132
- if (tokenImageLoadingState === ImageLoadingState.ERROR) {
28134
+ if (showTextFallback) {
28133
28135
  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
28134
28136
  return fallbackBgColor || defaultBgColor;
28135
28137
  }
@@ -28139,7 +28141,7 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
28139
28141
  state,
28140
28142
  token === null || token === void 0 ? void 0 : token.bgColor,
28141
28143
  defaultBgColor,
28142
- tokenImageLoadingState,
28144
+ showTextFallback,
28143
28145
  fallbackBgColor,
28144
28146
  ]);
28145
28147
  const bgGradient = useMemo(() => {
@@ -28157,13 +28159,22 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
28157
28159
  ? undefined
28158
28160
  : tooltip === null || tooltip === void 0 ? void 0 : tooltip.tooltipContent, children: jsxs(ButtonTag, { onClick: state === AssetsButtonState.LOADING ? undefined : onClick, disabled: state === AssetsButtonState.LOADING, "aria-disabled": state === AssetsButtonState.LOADING, className: cn("tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none", buttonTextClassNameMap[variant], state === AssetsButtonState.LOADING
28159
28161
  ? "tw-cursor-not-allowed"
28160
- : "tw-group/assets-button"), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxs("svg", { className: "tw-absolute -tw-left-[2px] -tw-top-[2px] tw-z-20 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.inner, height: "44", viewBox: `0 0 ${outlineWidth.inner} 44`, fill: "none", children: [jsx("clipPath", { id: "halfClip1", children: jsx("rect", { x: "0", y: "0", width: outlineWidth.inner, height: "44" }) }), jsx("path", { d: "M59.1506 36.849L59.1508 36.8492C63.2511 40.9496 68.6272 43 74.0001 43H145C156.598 43 166 33.598 166 22C166 10.402 156.598 1 145 1H74.0001C68.6272 0.999977 63.2511 3.05042 59.1508 7.15076C58.6183 7.68325 58.0958 8.22097 57.5842 8.74755L57.5817 8.75009C55.9228 10.4574 54.3925 12.0283 52.8031 13.1834C51.2282 14.3279 49.6791 15 48 15C46.3209 15 44.7718 14.3279 43.1969 13.1834C41.6075 12.0283 40.0772 10.4574 38.4183 8.75009L38.4159 8.74759C37.9042 8.22101 37.3817 7.68327 36.8492 7.15076C32.7489 3.05042 27.3728 0.999977 21.9999 1C16.6271 1.00002 11.251 3.05047 7.15076 7.15076C3.05045 11.2511 1 16.6272 1 22C1 27.3728 3.05045 32.7489 7.15076 36.8492C11.251 40.9495 16.6271 43 21.9999 43C27.3728 43 32.7489 40.9496 36.8492 36.8492L36.8494 36.849C37.3794 36.3188 37.8994 35.7834 38.4088 35.2589L38.4108 35.2569C40.0704 33.5483 41.6019 31.9756 43.1928 30.8191C44.7691 29.6731 46.3197 29 48 29C49.6803 29 51.2309 29.6731 52.8072 30.8191C54.3981 31.9756 55.9296 33.5483 57.5892 35.2569L57.5912 35.2589C58.1006 35.7834 58.6206 36.3188 59.1506 36.849Z", stroke: "currentColor", className: "tw-text-grey-900", strokeWidth: "2", clipPath: "url(#halfClip1)" })] }), jsxs("svg", { className: "tw-absolute -tw-left-[4px] -tw-top-[4px] tw-z-10 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.outer, height: "48", viewBox: `0 0 ${outlineWidth.outer} 48`, fill: "none", children: [jsx("clipPath", { id: "halfClip2", children: jsx("rect", { x: "0", y: "0", width: outlineWidth.outer, height: "48" }) }), jsx("path", { d: "M60.4432 39.5559L60.4437 39.5564C64.7391 43.8517 70.3729 46 76.0001 46H147C159.15 46 169 36.1503 169 24C169 11.8497 159.15 2 147 2H76.0001C70.3729 1.99998 64.7391 4.14825 60.4437 8.44365C59.9062 8.98109 59.3797 9.52298 58.8697 10.0479L58.8645 10.0532C57.1905 11.7761 55.7217 13.2796 54.2152 14.3745C52.7378 15.4481 51.3923 16 50 16C48.6077 16 47.2622 15.4481 45.7848 14.3745C44.2783 13.2796 42.8095 11.7761 41.1355 10.0532L41.1305 10.0481C40.6205 9.52314 40.0939 8.98117 39.5563 8.44365C35.2609 4.14825 29.6271 1.99998 23.9999 2C18.3727 2.00002 12.739 4.1483 8.44365 8.44365C4.14827 12.739 2 18.3728 2 24C2 29.6272 4.14827 35.261 8.44365 39.5564C12.739 43.8517 18.3727 46 23.9999 46C29.6271 46 35.2609 43.8517 39.5563 39.5564L39.5568 39.5559C40.0917 39.0207 40.6159 38.481 41.1237 37.9582L41.1281 37.9537C42.8028 36.2295 44.2728 34.7243 45.7808 33.6279C47.2597 32.5528 48.6066 32 50 32C51.3934 32 52.7403 32.5528 54.2192 33.6279C55.7272 34.7243 57.1972 36.2295 58.8719 37.9537L58.8763 37.9582C59.3841 38.481 59.9083 39.0207 60.4432 39.5559Z", stroke: "currentColor", className: "tw-text-material-light-average", strokeWidth: "4", clipPath: "url(#halfClip2)" })] }), jsx("div", { className: cn("tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between", state !== AssetsButtonState.FULL && "!tw-w-[72px]"), style: {
28162
+ : "tw-group/assets-button"), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxs("svg", { className: "tw-absolute -tw-left-[2px] -tw-top-[2px] tw-z-20 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.inner, height: "44", viewBox: `0 0 ${outlineWidth.inner} 44`, fill: "none", children: [jsx("clipPath", { id: "halfClip1", children: jsx("rect", { x: "0", y: "0", width: outlineWidth.inner, height: "44" }) }), jsx("path", { d: "M59.1506 36.849L59.1508 36.8492C63.2511 40.9496 68.6272 43 74.0001 43H145C156.598 43 166 33.598 166 22C166 10.402 156.598 1 145 1H74.0001C68.6272 0.999977 63.2511 3.05042 59.1508 7.15076C58.6183 7.68325 58.0958 8.22097 57.5842 8.74755L57.5817 8.75009C55.9228 10.4574 54.3925 12.0283 52.8031 13.1834C51.2282 14.3279 49.6791 15 48 15C46.3209 15 44.7718 14.3279 43.1969 13.1834C41.6075 12.0283 40.0772 10.4574 38.4183 8.75009L38.4159 8.74759C37.9042 8.22101 37.3817 7.68327 36.8492 7.15076C32.7489 3.05042 27.3728 0.999977 21.9999 1C16.6271 1.00002 11.251 3.05047 7.15076 7.15076C3.05045 11.2511 1 16.6272 1 22C1 27.3728 3.05045 32.7489 7.15076 36.8492C11.251 40.9495 16.6271 43 21.9999 43C27.3728 43 32.7489 40.9496 36.8492 36.8492L36.8494 36.849C37.3794 36.3188 37.8994 35.7834 38.4088 35.2589L38.4108 35.2569C40.0704 33.5483 41.6019 31.9756 43.1928 30.8191C44.7691 29.6731 46.3197 29 48 29C49.6803 29 51.2309 29.6731 52.8072 30.8191C54.3981 31.9756 55.9296 33.5483 57.5892 35.2569L57.5912 35.2589C58.1006 35.7834 58.6206 36.3188 59.1506 36.849Z", stroke: "currentColor", className: "tw-text-grey-900", strokeWidth: "2", clipPath: "url(#halfClip1)" })] }), jsxs("svg", { className: "tw-absolute -tw-left-[4px] -tw-top-[4px] tw-z-10 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.outer, height: "48", viewBox: `0 0 ${outlineWidth.outer} 48`, fill: "none", children: [jsx("clipPath", { id: "halfClip2", children: jsx("rect", { x: "0", y: "0", width: outlineWidth.outer, height: "48" }) }), jsx("path", { d: "M60.4432 39.5559L60.4437 39.5564C64.7391 43.8517 70.3729 46 76.0001 46H147C159.15 46 169 36.1503 169 24C169 11.8497 159.15 2 147 2H76.0001C70.3729 1.99998 64.7391 4.14825 60.4437 8.44365C59.9062 8.98109 59.3797 9.52298 58.8697 10.0479L58.8645 10.0532C57.1905 11.7761 55.7217 13.2796 54.2152 14.3745C52.7378 15.4481 51.3923 16 50 16C48.6077 16 47.2622 15.4481 45.7848 14.3745C44.2783 13.2796 42.8095 11.7761 41.1355 10.0532L41.1305 10.0481C40.6205 9.52314 40.0939 8.98117 39.5563 8.44365C35.2609 4.14825 29.6271 1.99998 23.9999 2C18.3727 2.00002 12.739 4.1483 8.44365 8.44365C4.14827 12.739 2 18.3728 2 24C2 29.6272 4.14827 35.261 8.44365 39.5564C12.739 43.8517 18.3727 46 23.9999 46C29.6271 46 35.2609 43.8517 39.5563 39.5564L39.5568 39.5559C40.0917 39.0207 40.6159 38.481 41.1237 37.9582L41.1281 37.9537C42.8028 36.2295 44.2728 34.7243 45.7808 33.6279C47.2597 32.5528 48.6066 32 50 32C51.3934 32 52.7403 32.5528 54.2192 33.6279C55.7272 34.7243 57.1972 36.2295 58.8719 37.9537L58.8763 37.9582C59.3841 38.481 59.9083 39.0207 60.4432 39.5559Z", stroke: "currentColor", className: "tw-text-material-light-average", strokeWidth: "4", clipPath: "url(#halfClip2)" })] }), jsx("div", { className: cn("tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between tw-assets-button-mask", state !== AssetsButtonState.FULL && "!tw-w-[72px]"), style: {
28161
28163
  backgroundImage: bgGradient,
28162
28164
  }, children: jsx("div", { className: clsx(imageWrapperClassName), children: state === AssetsButtonState.CHAIN_ONLY ||
28163
28165
  state === AssetsButtonState.FULL ? (jsx("img", { src: chain === null || chain === void 0 ? void 0 : chain.iconUrl, alt: "", className: "tw-h-squid-xl tw-w-squid-xl tw-rounded-full tw-object-cover" })) : (state !== AssetsButtonState.LOADING && (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) }))) }) }), state === AssetsButtonState.FULL ? (jsxs("div", { className: clsx(imageWrapperClassName, "tw-absolute tw-left-[54px] tw-z-[5] tw-h-squid-xl tw-overflow-hidden"), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
28164
28166
  backgroundColor: tokenBgColor,
28165
- } }), tokenImageLoadingState === ImageLoadingState.ERROR && (
28166
- // show fallback
28167
+ } }), isImgLoadError && (token === null || token === void 0 ? void 0 : token.fallbackIconUrl) && (
28168
+ // fallback image
28169
+ jsx("img", { src: token === null || token === void 0 ? void 0 : token.fallbackIconUrl, alt: token === null || token === void 0 ? void 0 : token.symbol, onLoad: () => {
28170
+ setFallbackImageLoadingState(ImageLoadingState.LOADED);
28171
+ }, onError: () => {
28172
+ setFallbackImageLoadingState(ImageLoadingState.ERROR);
28173
+ }, className: cn(tokenImageClassName,
28174
+ // when image load failed, hide it with opacity: 0 instead of display: none
28175
+ // so new images can load and update the loading state
28176
+ isFallbackImgLoadError && "tw-opacity-0") })), showTextFallback && (
28177
+ // fallback text
28167
28178
  jsx("div", { style: { color: tokenTextColor }, className: cn(tokenImageClassName, "tw-flex tw-items-center tw-justify-center tw-text-body-small"), children: (_d = (_c = token === null || token === void 0 ? void 0 : token.symbol) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase() })), jsx("img", { onLoad: () => {
28168
28179
  setTokenImageLoadingState(ImageLoadingState.LOADED);
28169
28180
  }, onError: () => {
@@ -28171,8 +28182,7 @@ function AssetsButton({ chain, token, onClick, variant = "primary", isLoading =
28171
28182
  }, src: token === null || token === void 0 ? void 0 : token.iconUrl, alt: token === null || token === void 0 ? void 0 : token.symbol, className: cn(tokenImageClassName,
28172
28183
  // when image load failed, hide it with opacity: 0 instead of display: none
28173
28184
  // so new images can load and update the loading state
28174
- tokenImageLoadingState === ImageLoadingState.ERROR &&
28175
- "tw-opacity-0") }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn("tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-min-w-fit tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border tw-border-l-0 tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs before:tw-absolute before:-tw-inset-[3px] before:tw-z-[1] before:tw-w-[calc(100%+3px)] before:tw-translate-x-[3px] before:tw-rounded-br-full before:tw-rounded-tr-full before:tw-border-2 before:tw-border-l-0 before:tw-border-transparent after:tw-absolute after:-tw-inset-[5px] after:tw-z-0 after:tw-w-[calc(100%+4px)] after:tw-translate-x-[6px] after:tw-rounded-br-full after:tw-rounded-tr-full after:tw-border-4 after:tw-border-l-0 after:tw-border-transparent group-hover/assets-button:before:tw-border-grey-900 group-hover/assets-button:after:tw-border-material-light-average", state === AssetsButtonState.FULL && "tw-pl-[7px]"), style: {
28185
+ isImgLoadError && "tw-opacity-0") }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn("tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-min-w-fit tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border tw-border-l-0 tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs before:tw-absolute before:-tw-inset-[3px] before:tw-z-[1] before:tw-w-[calc(100%+3px)] before:tw-translate-x-[3px] before:tw-rounded-br-full before:tw-rounded-tr-full before:tw-border-2 before:tw-border-l-0 before:tw-border-transparent after:tw-absolute after:-tw-inset-[5px] after:tw-z-0 after:tw-w-[calc(100%+4px)] after:tw-translate-x-[6px] after:tw-rounded-br-full after:tw-rounded-tr-full after:tw-border-4 after:tw-border-l-0 after:tw-border-transparent group-hover/assets-button:before:tw-border-grey-900 group-hover/assets-button:after:tw-border-material-light-average", state === AssetsButtonState.FULL && "tw-pl-[7px]"), style: {
28176
28186
  backgroundColor: tokenBgColor,
28177
28187
  color: tokenTextColor,
28178
28188
  }, children: [jsx(BodyText, { size: "small", className: cn("tw-leading-[13px]", state === AssetsButtonState.LOADING && "tw-min-w-[135px]"), children: state === AssetsButtonState.FULL
package/dist/esm/types/components/buttons/AssetsButton.d.ts CHANGED
@@ -3,6 +3,7 @@ import { type TooltipProps } from "../controls";
3
3
  interface AssetsButtonProps {
4
4
  token?: {
5
5
  iconUrl: string;
6
+ fallbackIconUrl?: string;
6
7
  symbol: string;
7
8
  bgColor: string;
8
9
  textColor: string;
package/dist/esm/types/components/layout/SwapConfiguration.d.ts CHANGED
@@ -26,6 +26,7 @@ interface SwapConfigurationProps {
26
26
  };
27
27
  token?: {
28
28
  iconUrl: string;
29
+ fallbackIconUrl?: string;
29
30
  symbol: string;
30
31
  bgColor: string;
31
32
  textColor: string;
package/dist/esm/types/stories/buttons/AssetsButton.stories.d.ts CHANGED
@@ -14,3 +14,5 @@ export declare const ChainAndTokenDarkText: Story;
14
14
  export declare const LongTokenSymbol: Story;
15
15
  export declare const Tooltip: Story;
16
16
  export declare const BrokenTokenImage: Story;
17
+ export declare const BrokenTokenImageWithPlaceholder: Story;
18
+ export declare const BrokenTokenImageAndBrokenPlaceholder: Story;
package/dist/index.d.ts CHANGED
@@ -304,6 +304,7 @@ declare function Switch({ checked, onChange, size, disabled, inputProps, }: Swit
304
304
  interface AssetsButtonProps {
305
305
  token?: {
306
306
  iconUrl: string;
307
+ fallbackIconUrl?: string;
307
308
  symbol: string;
308
309
  bgColor: string;
309
310
  textColor: string;
@@ -1254,6 +1255,7 @@ interface SwapConfigurationProps {
1254
1255
  };
1255
1256
  token?: {
1256
1257
  iconUrl: string;
1258
+ fallbackIconUrl?: string;
1257
1259
  symbol: string;
1258
1260
  bgColor: string;
1259
1261
  textColor: string;
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "git+https://github.com/0xsquid/squid-ui.git"
6
6
  },
7
7
  "description": "Squid's UI components",
8
- "version": "3.0.0",
8
+ "version": "3.0.1",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {