@daimo/pay/build/src/components/Common/TokenChainLogo/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

import { jsxs, jsx } from 'react/jsx-runtime';
import { motion } from 'framer-motion';
import { chainToLogo } from '../../../assets/chains.js';
import styled from '../../../styles/styled/index.js';

const TokenChainLogo = ({
  token,
  size = 32,
  offset = 0
}) => {
  const chainLogoSize = Math.round(size * 30 / 64);
  return /* @__PURE__ */ jsxs(TokenChainContainer, { $size: size, children: [
    /* @__PURE__ */ jsx(TokenImage, { src: token.logoURI, alt: token.symbol, $size: size }),
    /* @__PURE__ */ jsx(ChainContainer, { $size: chainLogoSize, $offset: offset, children: chainToLogo[token.chainId] })
  ] });
};
const TokenChainContainer = styled(motion.div)`
  position: relative;
  width: ${(props) => props.$size}px;
  height: ${(props) => props.$size}px;
  display: flex;
  align-items: center;
  justify-content: center;
`;
const TokenImage = styled.img`
  width: ${(props) => props.$size}px;
  height: ${(props) => props.$size}px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.2s ease;

  ${(props) => props.$showBorder && `
    border: 2px solid var(--ck-body-background, #fff);
  `}
`;
const ChainContainer = styled(motion.div)`
  position: absolute;
  width: ${(props) => props.$size}px;
  height: ${(props) => props.$size}px;
  min-width: ${(props) => props.$size}px;
  min-height: ${(props) => props.$size}px;
  bottom: 0px;
  right: ${(props) => props.$offset}px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: ${(props) => props.$showBorder ? "var(--ck-body-background, #fff)" : "transparent"};
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  svg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    flex-shrink: 0;
  }
`;

export { TokenChainLogo as default };
//# sourceMappingURL=index.js.map