[us2mx][LIG-7118] transaction details frontend. support page to come.…

… (#14270)

GitOrigin-RevId: 1006c392377ab10921bbc199468a6544a91329db

packages/ui/src/components/IconWithCircleBackground.tsx

@@ -13,6 +13,7 @@ type IconWithCircleBackgroundProps = {
   iconWidth?: IconWidth | undefined;
   to?: NewRoutesType | undefined;
   darkBg?: boolean;
+  noBg?: boolean;
   shouldRotate?: boolean;
   onClick?: () => void;
 };
@@ -24,13 +25,15 @@ export function IconWithCircleBackground({
   onClick,
   darkBg = false,
   shouldRotate = false,
+  noBg = false,
 }: IconWithCircleBackgroundProps) {
   const content = (
     <Flex center onClick={onClick}>
       <StyledIconWithCircleBackground
         size={iconWidth}
         darkBg={darkBg}
         shouldRotate={shouldRotate}
+        noBg={noBg}
       >
         <Icon
           name={iconName}
@@ -47,12 +50,15 @@ type StyledIconWithCircleBackgroundProps = {
   size: IconWidth;
   darkBg: boolean;
   shouldRotate: boolean;
+  noBg: boolean;
 };
 
 const StyledIconWithCircleBackground = styled.div<StyledIconWithCircleBackgroundProps>`
-  background: ${({ theme, darkBg }) =>
+  background: ${({ theme, darkBg, noBg }) =>
     darkBg
       ? `linear-gradient(291.4deg, #1C243F 0%, #21283A 100%)`
+      : noBg
+      ? "transparent"
       : getColor(theme, "grayBlue94")};
   border-radius: 50%;
   padding: ${({ size }) => getPadding(size)}px;