working on qr logo

coinbase · Dec 3, 2024 · 040f9e8 · 040f9e8
1 parent aac49cc
commit 040f9e8
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/src/internal/components/QrCode/QrCodeSvg.tsx b/src/internal/components/QrCode/QrCodeSvg.tsx
@@ -24,7 +24,7 @@ export type QRCodeSVGProps = {
   size?: number;
   color?: string;
   backgroundColor?: string;
-  logo?: { uri: string };
+  logo?: React.ReactNode;
   logoSize?: number;
   logoBackgroundColor?: string;
   logoMargin?: number;
@@ -115,8 +115,6 @@ export function QRCodeSVG({
     gradientRadiusMax,
   ]);
 
-  console.log({ value, path, color, isRadialGradient, bgColor, fillColor });
-
   if (!path) {
     return null;
   }

diff --git a/src/internal/components/QrCode/useLogo.tsx b/src/internal/components/QrCode/useLogo.tsx
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 type RenderLogoProps = {
   size: number;
-  logo: { uri: string } | undefined;
+  logo: React.ReactNode | undefined;
   logoSize: number;
   logoBackgroundColor: string;
   logoMargin: number;
@@ -27,7 +27,7 @@ export function useLogo({
       logoBorderRadius + (logoMargin / logoSize) * logoBorderRadius;
 
     return (
-      <g x={logoPosition} y={logoPosition}>
+      <g transform={`translate(${logoPosition}, ${logoPosition})`}>
         <defs>
           <clipPath id="clip-logo-background">
             <rect
@@ -55,13 +55,13 @@ export function useLogo({
           />
         </g>
         <g x={logoMargin} y={logoMargin}>
-          <image
+          <g
             width={logoSize}
             height={logoSize}
-            preserveAspectRatio="xMidYMid slice"
-            href={logo.uri}
             clipPath="url(#clip-logo)"
-          />
+          >
+            {logo}
+          </g>
         </g>
       </g>
     );

diff --git a/src/internal/svg/cbwSvg.tsx b/src/internal/svg/cbwSvg.tsx
@@ -0,0 +1,19 @@
+import { background, icon } from '../../styles/theme';
+
+export const cbwSvg = (width: number, height: number) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 1024 1024"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Wallet Icon</title>
+    <rect width="1024" height="1024" fill="#0052FF" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M152 512C152 710.823 313.177 872 512 872C710.823 872 872 710.823 872 512C872 313.177 710.823 152 512 152C313.177 152 152 313.177 152 512ZM420 396C406.745 396 396 406.745 396 420V604C396 617.255 406.745 628 420 628H604C617.255 628 628 617.255 628 604V420C628 406.745 617.255 396 604 396H420Z"
+      fill="white"
+    />
+  </svg>
+);
diff --git a/src/wallet/components/island/WalletIslandQrReceive.tsx b/src/wallet/components/island/WalletIslandQrReceive.tsx
@@ -5,6 +5,7 @@ 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();
@@ -45,7 +46,10 @@ export function WalletIslandQrReceive() {
         </button>
       </div>
 
-      <QRCodeComponent value={address ? `ethereum:${address}` : ''} />
+      <QRCodeComponent
+        value={address ? `ethereum:${address}` : ''}
+        logo={cbwSvg(24, 24)}
+      />
 
       <button
         type="button"