wip

packages/react-kit/src/components/buttons/commit/CommitView.tsx

@@ -18,8 +18,8 @@ export const CommitView = ({ layout = "horizontal" }: CommitViewProps) => {
       Buy with
       <SvgImage
         src={Logo}
-        width={`${logoWidthPx}px`}
-        height={`${(logoWidthPx * 218) / 947}px`}
+        width={logoWidthPx}
+        height={(logoWidthPx * 218) / 947}
       />
     </Grid>
   );

packages/react-kit/src/components/logo/PortfolioLogo.tsx

@@ -128,7 +128,7 @@ interface PortfolioLogoProps {
   chainId: ChainId;
   currencies?: Array<Currency | undefined>;
   images?: Array<string | undefined>;
-  size?: string;
+  size?: number;
   style?: React.CSSProperties;
 }
 
@@ -145,27 +145,29 @@ function getLogo({
   chainId,
   currencies,
   images,
-  size = "40px"
+  size = 40
 }: PortfolioLogoProps) {
   if (currencies && currencies.length) {
     return (
       <DoubleCurrencyLogo
         chainId={chainId}
         currencies={currencies}
         backupImages={images}
-        size={size}
+        size={`${size}px`}
       />
     );
   }
   if (images?.length === 1) {
-    return <CircleLogoImage size={size} src={images[0] ?? blankTokenUrl} />;
+    return (
+      <CircleLogoImage size={`${size}px`} src={images[0] ?? blankTokenUrl} />
+    );
   }
   if (images && images?.length >= 2) {
     return (
       <DoubleLogo
         logo1={images[0]}
         logo2={images[images.length - 1]}
-        size={size}
+        size={`${size}px`}
       />
     );
   }

packages/react-kit/src/components/modal/components/common/BosonLogo.tsx

@@ -22,7 +22,7 @@ export function BosonLogo({
     >
       <SvgImage
         src={ReactComponent}
-        height="24px"
+        height={24}
         {...svgImageProps}
         style={{ maxWidth: "100%", ...svgImageProps?.style }}
       />

packages/react-kit/src/components/modal/components/common/detail/DetailDisputeResolver.tsx

@@ -21,8 +21,8 @@ export const DetailDisputeResolver = {
     return (
       <SvgImage
         src={ReactComponent}
-        width="100"
-        height="18"
+        width={100}
+        height={18}
         color={getCssVar("--sub-text-color")}
       />
     );

packages/react-kit/src/components/modal/components/common/detail/TokenGatedItem.tsx

@@ -27,6 +27,7 @@ import { useDetailViewContext } from "./DetailViewProvider";
 import { OnClickBuyOrSwapHandler } from "./types";
 import { CONFIG } from "../../../../../lib/config/config";
 import { useRobloxGetItemDetails } from "../../../../../hooks/roblox/useRobloxGetItemDetails";
+import { remToPx } from "../../../../../lib/numbers/numbers";
 
 type TokenGatedItemProps = OnClickBuyOrSwapHandler & {
   offer: Offer;
@@ -41,8 +42,8 @@ const Wrapper = styled(Grid)`
     }
   }
 `;
-
-const imageSize = "2.5rem";
+const imageSizeRem = 2.5;
+const imageSize = `${imageSizeRem}rem`;
 const ErcImage = styled.img`
   border-radius: 9999px;
   background-color: #f1f3f9;
@@ -290,7 +291,7 @@ export const TokenGatedItem = ({
         {chainId && currency ? (
           <PortfolioLogo
             chainId={chainId as ChainId}
-            size={imageSize}
+            size={remToPx(imageSizeRem)}
             currencies={[currency]}
           />
         ) : erc721Image?.[0]?.[0] ? (

packages/react-kit/src/components/ui/SvgImage.tsx

@@ -1,18 +1,60 @@
 import React from "react";
-import { CSSProperties } from "styled-components";
+import { useQuery } from "react-query";
+import styled, { CSSProperties } from "styled-components";
 
-export type SvgImageProps = Pick<
-  CSSProperties,
-  "width" | "height" | "color"
-> & {
+export type SvgImageProps = Pick<CSSProperties, "color"> & {
+  width?: number;
+  height?: number;
   src: string | React.FC | undefined;
   alt?: string;
   style?: CSSProperties;
   id?: string;
 };
 
+const SvgWrapper = styled.div`
+  > * {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
 export const SvgImage: React.FC<SvgImageProps> = ({ src, ...rest }) => {
+  const { data: svgHtml, isLoading } = useQuery(
+    [src],
+    async () => {
+      if (typeof src !== "string") {
+        return;
+      }
+      const response = await fetch(src);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch SVG: ${response.statusText}, svg: ${src}`
+        );
+      }
+      const svgText = await response.text();
+      return svgText;
+    },
+    {
+      enabled: typeof src === "string",
+      staleTime: Infinity
+    }
+  );
   if (typeof src === "string") {
+    if (isLoading) {
+      return <></>;
+    }
+    if (svgHtml) {
+      const { width, height, color, style, ...restProps } = rest;
+      const fixedWidth = width === undefined ? width : `${width}px`;
+      const fixedHeight = height === undefined ? height : `${height}px`;
+      return (
+        <SvgWrapper
+          dangerouslySetInnerHTML={{ __html: svgHtml }}
+          {...restProps}
+          style={{ ...style, width: fixedWidth, height: fixedHeight, color }}
+        />
+      );
+    }
     // eslint-disable-next-line jsx-a11y/alt-text
     return <img src={src} {...rest} />;
   }

packages/react-kit/src/components/wallet2/accountDrawer/miniPortfolio/tokens/index.tsx

@@ -87,7 +87,7 @@ function TokenRow({
   return (
     <PortfolioRow
       left={
-        <PortfolioLogo chainId={chainId} size="40px" currencies={[currency]} />
+        <PortfolioLogo chainId={chainId} size={40} currencies={[currency]} />
       }
       title={<TokenNameText>{name}</TokenNameText>}
       descriptor={

packages/react-kit/src/components/widgets/index.tsx

@@ -1,3 +1,4 @@
+export * from "./BosonThemeProvider";
 export { RedemptionWidgetAction } from "./redemption/provider/RedemptionWidgetContext";
 
 export * from "./finance/FinanceWidget";

packages/react-kit/src/index.tsx

@@ -50,6 +50,7 @@ export * from "./components/queryClient/QueryClientProviderCustom";
 export * from "./components/scroll/ScrollToID";
 export * from "./components/scroll/ScrollToTop";
 export * from "./components/styles/GlobalStyledThemed";
+export * from "./components/styles/ResetStylesForNonWidgets";
 export * from "./components/searchBar/SearchBar";
 export * from "./components/skeleton/CollectionsCardSkeleton";
 export { LoadingBubble } from "./components/skeleton/common";

packages/react-kit/src/lib/numbers/numbers.ts

@@ -43,3 +43,7 @@ export const isNumeric = (strNumber: string) => {
     !isNaN(parseFloat(strNumber))
   ); // ...and ensure strings of whitespace fail
 };
+
+export function remToPx(rem: number, rootFontSize = 16) {
+  return rem * rootFontSize;
+}

packages/react-kit/src/theme.ts

@@ -25,7 +25,7 @@ export const cssVarsKeys = {
   "--modal-border-radius": "--modal-border-radius"
 };
 
-type CssVarKeys = keyof typeof cssVarsKeys;
+export type CssVarKeys = keyof typeof cssVarsKeys;
 export type ThemePalette = Record<CssVarKeys, string>;
 export type Theme = "blackAndWhite" | "dark" | "light";