working logo in svg

Author: brendan-defi

src/internal/components/QrCode/QrCode.tsx

@@ -1,11 +1,10 @@
-// import { useIsSmallScreen } from ':rn/shared/hooks/useIsSmallScreen';
-
 import { QRCodeSVG, type QRCodeSVGProps } from './QrCodeSvg';
-
-export const QR_CODE_SIZE = 237;
-export const QR_CODE_SMALL_SIZE = 150;
-export const QR_LOGO_SIZE = 50;
-export const QR_LOGO_RADIUS = 25;
+import {
+  QR_CODE_SIZE,
+  QR_LOGO_SIZE,
+  QR_LOGO_RADIUS,
+  QR_LOGO_BACKGROUND_COLOR,
+} from './gradientConstants';
 
 export function QRCodeComponent({
   color = '#000000',
@@ -14,13 +13,13 @@ export function QRCodeComponent({
   isAsyncDataFetched,
   gradientType,
 }: QRCodeSVGProps) {
-  // const isSmallScreen = useIsSmallScreen();
 
   return (
     <QRCodeSVG
       size={QR_CODE_SIZE}
       logo={logo}
       logoSize={QR_LOGO_SIZE}
+      logoBackgroundColor={QR_LOGO_BACKGROUND_COLOR}
       logoBorderRadius={QR_LOGO_RADIUS}
       value={value}
       color={color}

src/internal/components/QrCode/QrCodeSvg.tsx

@@ -1,8 +1,4 @@
 import { useEffect, useMemo, useState } from 'react';
-// import { Animated, Easing } from 'react-native';
-// import Svg, { Defs, G, LinearGradient, Path, RadialGradient, Rect, Stop } from 'react-native-svg';
-// import { curves, durations } from '@cbhq/cds-common/motion/tokens';
-
 import {
   GRADIENT_END_COORDINATES,
   GRADIENT_START_COORDINATES,
@@ -36,10 +32,6 @@ export type QRCodeSVGProps = {
   gradientType?: 'radial' | 'linear';
 };
 
-// const A = {
-//   RadialGradient: Animated.createAnimatedComponent(RadialGradient),
-// };
-
 export function QRCodeSVG({
   value,
   size = 100,
@@ -65,9 +57,7 @@ export function QRCodeSVG({
   const gradientRadiusMax = size * 0.55;
   const gradientRadiusMin = logoSize / 2;
   const gradientCenterPoint = size / 2;
-  // const gradientAnim = useRef(
-  //   new Animated.Value(isAsyncDataFetched ? gradientRadiusMax : gradientRadiusMin),
-  // ).current;
+
   const [gradientRadius, setGradientRadius] = useState(
     isAsyncDataFetched ? gradientRadiusMax : gradientRadiusMin,
   );

src/internal/components/QrCode/gradientConstants.ts

@@ -1,5 +1,7 @@
-// import { MiamiThemeColorPreference } from 'cb-wallet-data/stores/ThemeColors/themeColorConfigs';
-
+export const QR_CODE_SIZE = 237;
+export const QR_LOGO_SIZE = 50;
+export const QR_LOGO_RADIUS = 10;
+export const QR_LOGO_BACKGROUND_COLOR = 'white';
 export const GRADIENT_START_COORDINATES = { x: 0, y: 0 };
 export const GRADIENT_END_COORDINATES = { x: 1, y: 0 };
 export const GRADIENT_END_STYLE = { borderRadius: 32 };

src/internal/components/QrCode/useLogo.tsx

@@ -1,14 +1,21 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
+import { cbwSvg } from '../../svg/cbwSvg';
+import ReactDOMServer from 'react-dom/server';
 
 type RenderLogoProps = {
   size: number;
-  logo: React.ReactNode | undefined;
+  logo: { uri: string } | React.ReactNode | undefined;
   logoSize: number;
   logoBackgroundColor: string;
   logoMargin: number;
   logoBorderRadius: number;
 };
 
+const defaultSvgString = ReactDOMServer.renderToString(cbwSvg);
+const defaultSvgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+  defaultSvgString,
+)}`;
+
 export function useLogo({
   size,
   logo,
@@ -18,25 +25,18 @@ export function useLogo({
   logoBorderRadius,
 }: RenderLogoProps) {
   const svgLogo = useMemo(() => {
-    if (!logo) {
-      return;
+    let logoUri = defaultSvgDataUri;
+    if (React.isValidElement(logo)) {
+      logoUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+        ReactDOMServer.renderToString(logo),
+      )}`;
     }
     const logoPosition = (size - logoSize - logoMargin * 2) / 2;
     const logoBackgroundSize = logoSize + logoMargin * 2;
-    const logoBackgroundBorderRadius =
-      logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius;
 
     return (
       <g transform={`translate(${logoPosition}, ${logoPosition})`}>
         <defs>
-          <clipPath id="clip-logo-background">
-            <rect
-              width={logoBackgroundSize}
-              height={logoBackgroundSize}
-              rx={logoBackgroundBorderRadius}
-              ry={logoBackgroundBorderRadius}
-            />
-          </clipPath>
           <clipPath id="clip-logo">
             <rect
               width={logoSize}
@@ -50,18 +50,19 @@ export function useLogo({
           <rect
             width={logoBackgroundSize}
             height={logoBackgroundSize}
+            rx={logoBorderRadius}
+            ry={logoBorderRadius}
             fill={logoBackgroundColor}
-            clipPath="url(#clip-logo-background)"
           />
         </g>
-        <g x={logoMargin} y={logoMargin}>
-          <g
+        <g transform={`translate(${logoMargin}, ${logoMargin})`}>
+          <image
             width={logoSize}
             height={logoSize}
+            preserveAspectRatio="xMidYMid slice"
+            href={logoUri}
             clipPath="url(#clip-logo)"
-          >
-            {logo}
-          </g>
+          />
         </g>
       </g>
     );

src/internal/svg/cbwSvg.tsx

@@ -1,14 +1,12 @@
-import { background, icon } from '../../styles/theme';
-
-export const cbwSvg = (width: number, height: number) => (
+export const cbwSvg = (
   <svg
-    width={width}
-    height={height}
+    width={24}
+    height={24}
     viewBox="0 0 1024 1024"
     xmlns="http://www.w3.org/2000/svg"
   >
     <title>Wallet Icon</title>
-    <rect width="1024" height="1024" fill="#0052FF" />
+    <rect width="100%" height="100%" fill="#0052FF" />
     <path
       fillRule="evenodd"
       clipRule="evenodd"

src/wallet/components/island/WalletIslandQrReceive.tsx

@@ -5,7 +5,6 @@ import { copySvg } from '../../../internal/svg/copySvg';
 import { border, cn, color, pressable, text } from '../../../styles/theme';
 import { useWalletContext } from '../WalletProvider';
 import { useWalletIslandContext } from './WalletIslandProvider';
-import { cbwSvg } from '../../../internal/svg/cbwSvg';
 
 export function WalletIslandQrReceive() {
   const { address } = useWalletContext();
@@ -46,10 +45,7 @@ export function WalletIslandQrReceive() {
         </button>
       </div>
 
-      <QRCodeComponent
-        value={address ? `ethereum:${address}` : ''}
-        logo={cbwSvg(24, 24)}
-      />
+      <QRCodeComponent value={address ? `ethereum:${address}` : ''} />
 
       <button
         type="button"