@arcblock/ux 3.4.14 → 3.5.0

package/src/Logo/images/logo-light-text.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="99" height="18" viewBox="0 0 99 18">
-    <path fill="#FFF" fill-rule="evenodd" d="M6.5.053h2.864L16.028 18h-2.114l-1.391-3.795H3.504L2.14 18H0L6.5.053zm1.474 1.481L4.04 12.563h7.895L7.975 1.534zm14.44 3.542c1.27 0 2.198.296 2.78.892.58.597.871 1.52.871 2.765v.36c0 .117-.008.245-.026.385h-1.826c.018-.14.027-.292.027-.452v-.48c0-.766-.186-1.283-.551-1.55-.367-.266-.916-.4-1.65-.4-.968 0-1.698.24-2.189.723-.493.48-.738 1.208-.738 2.187v8.308h-1.88V5.341h1.824l-.079 1.443c.376-.614.863-1.053 1.463-1.316a4.868 4.868 0 0 1 1.974-.392zM35.95 15.903c.501-.328.752-1.205.752-2.63h1.852c0 1.924-.403 3.178-1.208 3.765-.806.589-2.158.882-4.055.882-2.65 0-4.24-.538-4.766-1.616-.529-1.076-.793-2.781-.793-5.114 0-2.118.367-3.645 1.102-4.581.732-.934 2.209-1.401 4.43-1.401 1.378 0 2.569.221 3.572.665 1.002.446 1.503 1.497 1.503 3.153v.188a.234.234 0 0 0-.027.106v.106h-1.826c0-1.12-.228-1.851-.685-2.188-.455-.34-1.23-.507-2.322-.507-1.665 0-2.713.259-3.142.782-.43.524-.646 1.67-.646 3.44V12.2c0 1.4.161 2.448.485 3.15.322.7 1.297 1.048 2.926 1.048 1.397 0 2.346-.165 2.848-.495zm15.87-.318c.606-.328.912-1.263.912-2.805 0-.924-.147-1.69-.444-2.302-.294-.611-1.007-.917-2.133-.917H43.065v6.516h5.528c1.543 0 2.617-.165 3.226-.492zm-8.754-13.85v6.036h5.665c1.325 0 2.239-.214 2.737-.643.503-.428.755-1.288.755-2.575 0-1.09-.192-1.834-.577-2.226-.385-.394-1.116-.591-2.19-.591h-6.39zM52 8.466c1.185.322 1.956.816 2.314 1.482.359.67.54 1.581.54 2.739 0 1.6-.325 2.858-.97 3.764-.647.909-1.874 1.363-3.686 1.363H41.05V0h8.62c1.592 0 2.759.312 3.503.934.744.624 1.115 1.78 1.115 3.473 0 1.014-.129 1.855-.386 2.522-.258.669-.89 1.181-1.903 1.536zm5.43 9.348V.001h1.907v17.812H57.43zm13.374-6.168v-.708c0-1.539-.141-2.636-.426-3.297-.284-.658-1.191-.99-2.718-.99h-.401c-1.617 0-2.625.25-3.025.75-.399.5-.599 1.632-.599 3.4V12.822c0 .206.008.407.024.602a9.48 9.48 0 0 0 .216 1.474c.106.465.275.822.505 1.072.196.179.435.302.72.373.283.072.586.116.905.135h1.254c1.083 0 1.914-.151 2.492-.456.577-.302.9-1.043.972-2.22a18.338 18.338 0 0 0 .054-1.447c.015-.233.027-.47.027-.71zm-3.786-6.518c2.399 0 3.956.414 4.672 1.243.717.828 1.074 2.418 1.074 4.766 0 2.048-.219 3.704-.657 4.966C71.668 17.367 70.16 18 67.581 18c-2.237 0-3.782-.347-4.632-1.042-.85-.694-1.275-2.205-1.275-4.54v-1.174c0-2.12.318-3.669.954-4.646.635-.98 2.099-1.471 4.39-1.471zm16.434 10.776c.501-.328.752-1.205.752-2.63h1.853c0 1.924-.403 3.178-1.209 3.765-.804.589-2.157.882-4.054.882-2.648 0-4.24-.538-4.767-1.616-.528-1.076-.79-2.781-.79-5.114 0-2.118.365-3.645 1.1-4.581.732-.934 2.21-1.401 4.43-1.401 1.377 0 2.568.221 3.571.665 1.003.446 1.504 1.497 1.504 3.153v.188a.232.232 0 0 0-.026.106v.106H83.99c0-1.12-.229-1.851-.686-2.188-.455-.34-1.23-.507-2.323-.507-1.665 0-2.712.259-3.142.782-.43.524-.643 1.67-.643 3.44V12.2c0 1.4.16 2.448.482 3.15.324.7 1.298 1.048 2.927 1.048 1.397 0 2.346-.165 2.847-.495zm9.236-4.82L99 17.813h-2.47l-5.317-6.01h-.752v6.01h-1.907V0h1.907v10.362h.752l4.512-5.02h2.309l-5.346 5.741z"/>
-</svg>

package/src/Logo/images/logo-light-top.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="45" height="52" viewBox="0 0 45 52">
-    <g fill="none" fill-rule="evenodd" stroke="#FFF">
-        <path d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25M.5 38.077l43.301-25"/>
-        <path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"/>
-    </g>
-</svg>

package/src/Logo/index.tsx

@@ -1,58 +0,0 @@
-import { type SxProps } from '@mui/material';
-import { styled } from '../Theme';
-
-import LightLogo from './images/logo-light-top.svg?react';
-import LightText from './images/logo-light-text.svg?react';
-import DarkLogo from './images/logo-dark-top.svg?react';
-import DarkText from './images/logo-dark-text.svg?react';
-
-export interface LogoProps extends React.HTMLAttributes<HTMLSpanElement> {
-  mode?: 'light' | 'dark';
-  layout?: 'vertical' | 'horizontal';
-  showText?: true | false;
-  showLogo?: true | false;
-  size?: number;
-  sx?: SxProps;
-}
-
-export default function Logo({
-  showText = true,
-  showLogo = true,
-  mode = 'dark',
-  layout = 'vertical',
-  size = undefined,
-  style = {},
-  ...rest
-}: LogoProps) {
-  const isLight = mode === 'light';
-  const logo = isLight ? <LightLogo /> : <DarkLogo />;
-  const text = isLight ? <LightText className="logo-text" /> : <DarkText className="logo-text" />;
-
-  if (size) {
-    style.width = `${size}px`;
-    style.height = `${size}px`;
-  }
-
-  return (
-    <Container layout={layout} style={style} {...rest}>
-      {showLogo && logo}
-      {showText && text}
-    </Container>
-  );
-}
-
-type ContainerProps = {
-  layout: 'vertical' | 'horizontal';
-};
-
-const Container = styled('span')<ContainerProps>`
-  display: inline-flex;
-  flex-direction: ${(props) => (props.layout === 'horizontal' ? 'row' : 'column')};
-  justify-content: center;
-  align-items: center;
-
-  .logo-text {
-    ${(props) => (props.layout === 'vertical' ? 'margin-top: 8px;' : '')}
-    ${(props) => (props.layout === 'vertical' ? '' : 'margin-left: 8px;')};
-  }
-`;

package/src/Metric/Metric.stories.jsx

@@ -1,29 +0,0 @@
-import { Box, Container } from '@mui/material';
-import { ThemeProvider } from '../Theme';
-import { ThemeModeToggle } from '../Config';
-
-export { default as Basic } from './demo/basic';
-export { default as HtmlValueAndName } from './demo/html-value-and-name';
-
-export default {
-  title: 'Data Display/Metric',
-  parameters: {
-    docs: {
-      description: {
-        component: 'The Metric component is usually used to display statistics on dashboard pages.',
-      },
-    },
-  },
-  decorators: [
-    (StoryFn) => (
-      <ThemeProvider prefer="system">
-        <Container>
-          <Box sx={{ mb: 2 }}>
-            <ThemeModeToggle />
-          </Box>
-          <StoryFn />
-        </Container>
-      </ThemeProvider>
-    ),
-  ],
-};

package/src/Metric/index.tsx

@@ -1,130 +0,0 @@
-/* eslint-disable react/no-danger */
-import { Link } from '@mui/material';
-
-import ImageIcon from '../Icon/image';
-import { styled } from '../Theme';
-
-export interface MetricProps {
-  icon: string;
-  value: string | number;
-  name: React.ReactNode;
-  url?: string;
-  animated?: false | true;
-  LinkComponent?: React.ElementType;
-  prefix?: string;
-  iconColor?: string;
-  iconStyle?: React.CSSProperties;
-}
-
-export default function Metric({
-  icon,
-  value,
-  name,
-  url = '',
-  animated = false,
-  LinkComponent = Link,
-  prefix = '/images',
-  iconColor = '#222222',
-  iconStyle = {},
-}: MetricProps) {
-  const metric = (
-    <>
-      <div className="metric__image">
-        <ImageIcon
-          name={icon}
-          alt={typeof name === 'string' ? name : ''}
-          size={30}
-          prefix={prefix}
-          color={iconColor}
-          style={iconStyle}
-        />
-      </div>
-      <div>
-        <div
-          className={`metric__number ${animated ? 'metric__number--animated' : ''}`}
-          dangerouslySetInnerHTML={{ __html: value as string }}
-        />
-        <div className="metric__name">{name}</div>
-      </div>
-    </>
-  );
-
-  return <Container>{url ? <LinkComponent to={url}>{metric}</LinkComponent> : metric}</Container>;
-}
-
-type ContainerProps = {
-  size?: 'small' | 'large';
-};
-
-const Container = styled('div')<ContainerProps>`
-  border-left: 1px solid ${(props) => props.theme.palette.divider};
-  padding: 10px 0 10px 16px;
-  @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
-    padding: 0 0 0 8px;
-  }
-
-  display: flex;
-  justify-items: center;
-  align-items: flex-start;
-
-  a {
-    display: flex;
-    justify-items: center;
-    align-items: flex-start;
-  }
-
-  .metric__image {
-    margin-right: 8px;
-  }
-
-  .metric__number {
-    margin-bottom: 8px;
-    font-size: ${(props) => (props.size === 'small' ? 32 : 36)}px;
-    font-weight: 600;
-    line-height: 36px;
-    color: ${(props) => props.theme.palette.text.primary};
-
-    small {
-      font-size: 12px;
-      line-height: 12px;
-    }
-
-    @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
-      font-size: ${(props) => (props.size === 'small' ? 24 : 28)}px;
-      line-height: ${(props) => (props.size === 'small' ? 24 : 28)}px;
-      margin-bottom: 2px;
-    }
-  }
-
-  .metric__number--animated {
-    animation-name: blink-opacity;
-    animation-duration: 250ms;
-    animation-timing-function: linear;
-    animation-iteration-count: 1;
-    background-color: transparent !important;
-  }
-
-  .metric__name {
-    font-size: 14px;
-    text-transform: capitalize;
-    line-height: 1.2;
-    font-weight: 500;
-    color: ${(props) => props.theme.palette.text.primary};
-    @media (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
-      font-size: 10px;
-      line-height: 1;
-    }
-  }
-
-  @keyframes blink-opacity {
-    0% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.3;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-`;

package/src/MuiWrap/index.tsx

@@ -1,10 +0,0 @@
-import { Box, BoxProps, Typography, TypographyProps } from '@mui/material';
-import { ElementType } from 'react';
-
-export function TBox<C extends ElementType>({ component, ...rest }: BoxProps<C, { component: C }>) {
-  return <Box component={component} {...rest} />;
-}
-
-export function TTypography<C extends ElementType>({ component, ...rest }: TypographyProps<C, { component: C }>) {
-  return <Typography component={component} {...rest} />;
-}

package/src/NFTDisplay/NFTBroken.svg

@@ -1,34 +0,0 @@
-<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_317_299)">
-<rect x="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
-<rect width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
-<rect x="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
-<rect x="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
-<rect x="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
-<rect y="60" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
-<rect x="60" y="60" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
-<rect x="120" y="60" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
-<rect x="240" y="59.9999" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
-<rect x="180" y="59.9999" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
-<rect y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
-<rect y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
-<rect y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
-<rect x="60" y="120" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
-<rect x="60" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
-<rect x="60" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
-<rect x="120" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
-<rect x="180" y="180" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
-<rect x="120" y="240" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
-<rect x="240" y="120" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
-<rect x="120" y="180" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
-<rect x="180" y="240" width="60" height="60" fill="#E5E7EB" style="fill:#E5E7EB;fill:color(display-p3 0.8980 0.9059 0.9216);fill-opacity:1;"/>
-<rect x="180" y="120" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
-<rect x="240" y="180" width="60" height="60" fill="#F3F4F6" style="fill:#F3F4F6;fill:color(display-p3 0.9529 0.9569 0.9647);fill-opacity:1;"/>
-<rect x="240" y="240" width="60" height="60" fill="#F9FAFB" style="fill:#F9FAFB;fill:color(display-p3 0.9765 0.9804 0.9843);fill-opacity:1;"/>
-</g>
-<defs>
-<clipPath id="clip0_317_299">
-<rect width="300" height="300" fill="white" style="fill:white;fill-opacity:1;"/>
-</clipPath>
-</defs>
-</svg>

package/src/NFTDisplay/NFTDisplay.stories.jsx

@@ -1,30 +0,0 @@
-export { default as Basic } from './demo/basic';
-export { default as FixedSize } from './demo/fixed-size';
-export { default as Inset } from './demo/inset';
-export { default as AspectRatio } from './demo/aspect-ratio';
-export { default as NftTypeUrl } from './demo/nft-type-url';
-export { default as MinimumLoadingTime } from './demo/minimum-loading-time';
-export { default as WithForeignObject } from './demo/with-foreign-object';
-export { default as NftTypeSvg } from './demo/nft-type-svg';
-export { default as CustomLoading } from './demo/custom-loading';
-export { default as SvgValidation } from './demo/svg-validation';
-export { default as BrokenImage } from './demo/broken-image';
-export { default as PreferredSvgEmbedderProp } from './demo/preferred-svg-embedder-prop';
-export { default as ImageFilter } from './demo/image-filter';
-
-/**
- * @type { import('@storybook/react-vite').Story}
- */
-export default {
-  title: 'Data Display/NFTDisplay',
-  argTypes: {
-    imageFilter: {
-      control: 'object',
-      defaultValue: {
-        imageFilter: 'resize',
-        w: '500',
-        f: 'webp',
-      },
-    },
-  },
-};

package/src/NFTDisplay/README.md

@@ -1,59 +0,0 @@
-# NFTDisplay
-
-## 01 使用
-
-### 01.01 默认样式
-
-NFTDisplay 组件默认尺寸为 *150x150*, 可以通过 css 设置 width/height. 固定尺寸的使用场景感觉比较少, 多数情况应该都需要将 NFTDisplay 应用于响应式布局中. 
-
-### 01.02 aspect ratio
-
-可以使用 aspect prop 设置 NFTDisplay 的宽高比, NFTDisplay 包裹一两层 div/span 标签 (用来控制布局, 没有直接把 img 标签渲染出来), 所以这里说的长宽比指的不是 img 的长宽比, 图片的尺寸大小不一, 长宽比也是既定的, aspect prop 控制的是包裹 img 容器的长宽比.
-
-NFTDisplay 宽高比的计算是根据父容器的 width 来确定的 (NFTDisplay 会填充整个宽度), 所以可以通过控制父容器的 width 来控制 NFTDisplay 的大小.
-
-### 01.03 inset
-
-inset 设置为 true 时 NFTDisplay 会镶嵌/填满父容器 (并垂直+水平居中显示图片), 所以父容器必须有明确的宽高 (尤其是高度). 响应式布局中应该会比较常用.
-
-注: inset 比 aspect ratio 优先级高, 如果同时设置了 inset 和 aspect, 则后者不生效.
-
-### 01.04 asset data (prop)
-
-可以为 asset data prop 传入 raw data 或 parsed data, 避免多次解析 asset data.
-
-### 01.05 broken image & error handling
-
-* display 加载失败时会显示一个 broken-image, 可以从外部覆盖 `.nft-display--broken` 的样式来调整尺寸/颜色等样式
-* error handling, 这部分感觉出错原因可能性会很多, 有 json 解析错误、某字段缺失、某 object 指定路径的值缺失、nft type 不支持等等, 暂时没想到如何更合理的捕获和处理这些错误. 
-
-### 02 svg 加载
-
-基于 `img` 标签加载 NFT Display. 几种 nft type 的加载:
-
-- url  
-  直接使用 `<img>`
-- svg_gzipped  
-  content => ungzip => svgToImgUrl => `<img>`
-- svg (未测试, 需要测试数据)  
-  content => svgToImgUrl => `<img>`
-- html (TODO)  
-  基于 `<img>` 的加载方式不适用, 目前没有发现这种 nft type 的测试数据
-
-基于 `<img>` 标签的加载方式没有样式污染问题, 加载、尺寸控制也比较方便, 不过据说有些情况下 svg 可能无法正确显示 (比如 svg 加载了 font|image 资源), 目前没有发现问题, 还需要更多的观察
-
-## 03 iframe 第三方嵌入 (TODO)
-
-需要设计 iframe 的 API (iframe#src 查询参数), 目前想到的参数:
-
-- address : asset address  
-  调用 getAssetState 接口获取 display 数据进行展示
-- 样式控制相关的参数 ?
-
-## 04 参考
-
-* [提供一个 NFT display 组件 · Issue #199 · ArcBlock/ux](https://github.com/ArcBlock/ux/issues/199)
-* [2021徽章出现奇怪的渲染 · Issue #230 · blocklet/nft-marketplace](https://github.com/blocklet/nft-marketplace/issues/230)
-* [Adding vector graphics to the Web - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
-* [The Best Way to Embed SVG on HTML (2021)](https://vecta.io/blog/best-way-to-embed-svg)
-* [javascript - Do I always need to call URL.revokeObjectURL() explicitly? - Stack Overflow](https://stackoverflow.com/questions/49209756/do-i-always-need-to-call-url-revokeobjecturl-explicitly)

package/src/NFTDisplay/aspect-ratio-container.tsx

@@ -1,36 +0,0 @@
-import { styled } from '../Theme';
-
-export interface AspectRatioContainerProps {
-  aspect: number;
-  children: React.ReactNode;
-}
-
-function AspectRatioContainer({ aspect, children, ...rest }: AspectRatioContainerProps) {
-  return (
-    <Root aspect={aspect} {...rest}>
-      <span className="aspect-ratio-container__inner">{children}</span>
-    </Root>
-  );
-}
-
-type RootProps = {
-  aspect: number;
-};
-
-const Root = styled('span')<RootProps>`
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 0;
-  padding-bottom: ${({ aspect }) => (1 / aspect) * 100}%;
-
-  .aspect-ratio-container__inner {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-`;
-
-export default AspectRatioContainer;

package/src/NFTDisplay/broken.tsx

@@ -1,51 +0,0 @@
-import { Box } from '@mui/material';
-import { styled } from '../Theme';
-
-import NFTBroken from './NFTBroken.svg?react';
-
-export interface BrokenProps {
-  children?: React.ReactNode;
-}
-
-export default function Broken({ children = 'Non-publicly accessible NFT' }: BrokenProps = {}) {
-  return (
-    <Root>
-      <NFTBroken className="nft-display-broken-background" />
-      {children && <Box className="nft-display-broken-content">{children}</Box>}
-    </Root>
-  );
-}
-
-const Root = styled(Box)`
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .nft-display-broken-background {
-    width: 100%;
-    height: 100%;
-  }
-
-  .nft-display-broken-content {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    mix-blend-mode: plus-darker;
-    font-size: 13px;
-    color: #9aa3b0;
-    text-align: center;
-    text-shadow:
-      0 0 2px #fff,
-      0 0 2px #fff,
-      0 0 2px #fff;
-    user-select: none;
-  }
-`;

package/src/NFTDisplay/displayApi.ts

@@ -1,43 +0,0 @@
-import axios, { AxiosAdapter, type AxiosResponse } from 'axios';
-// eslint-disable-next-line import/extensions
-import adapter from 'axios/lib/adapters/xhr.js';
-
-const cache = new Map();
-const EXPIRATION_TIME_MS = 10 * 60 * 1000; // 10 minutes
-
-const cacheAdapterEnhancer: AxiosAdapter = (config) => {
-  const { url, method } = config;
-  const cacheKey = JSON.stringify({ url, method });
-
-  if (cache.has(cacheKey)) {
-    const cachedResult = cache.get(cacheKey);
-    if (Date.now() - cachedResult.timestamp < EXPIRATION_TIME_MS) {
-      if (cachedResult.error) {
-        return Promise.reject(cachedResult.error);
-      }
-
-      return Promise.resolve({ headers: cachedResult.headers });
-    }
-
-    cache.delete(cacheKey);
-  }
-
-  return adapter(config)
-    .then((response: AxiosResponse) => {
-      // cache headers
-      cache.set(cacheKey, { headers: response.headers, timestamp: Date.now() });
-      return response;
-    })
-    .catch((error: unknown) => {
-      // cache error
-      cache.set(cacheKey, { error, timestamp: Date.now() });
-      throw error;
-    });
-};
-
-const instance = axios.create({
-  adapter: cacheAdapterEnhancer,
-  timeout: 5000,
-});
-
-export default instance;