Asset Utilities

/**
 * Generate Coinbase Wallet logo SVG data URI
 * @param type - Logo style variant
 * @param width - Logo width in pixels
 * @returns SVG data URI string for use in HTML img src or CSS
 */
function walletLogo(type: LogoType, width: number): string;

type LogoType =
  | 'standard'      // Standard blue square logo
  | 'circle'        // Circular logo variant  
  | 'text'          // Text-only "Coinbase Wallet" wordmark
  | 'textWithLogo'  // Logo with "Coinbase Wallet" text
  | 'textLight'     // Light/white text variant
  | 'textWithLogoLight'; // Light logo with text variant

import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";

const sdk = new CoinbaseWalletSDK({
  appName: "Logo Example App"
});

// Get different logo variants
const standardLogo = sdk.getCoinbaseWalletLogo('standard', 200);
const circleLogo = sdk.getCoinbaseWalletLogo('circle', 150);
const textLogo = sdk.getCoinbaseWalletLogo('text', 300);
const textWithLogo = sdk.getCoinbaseWalletLogo('textWithLogo', 250);

// Use in HTML
document.getElementById('logo')!.innerHTML = 
  `<img src="${standardLogo}" alt="Coinbase Wallet" />`;

// Use in CSS
document.documentElement.style.setProperty(
  '--wallet-logo', 
  `url("${circleLogo}")`
);

const standardLogo = walletLogo('standard', 240);
// Returns: Square aspect ratio (1:1)
// Colors: Blue background (#0052FF), white symbol
// Use case: App icons, general branding, square spaces

const circleLogo = walletLogo('circle', 200);
// Returns: Circular aspect ratio (1:1) 
// Colors: Blue background (#0052FF), white symbol
// Use case: Profile pictures, round buttons, avatars

const textLogo = walletLogo('text', 400);
// Returns: Wide aspect ratio (~5.3:1)
// Colors: Blue text (#0052FF)
// Use case: Headers, footers, text-based layouts

const textWithLogo = walletLogo('textWithLogo', 350);
// Returns: Wide aspect ratio (~4:1)
// Colors: Blue logo and text (#0052FF)  
// Use case: Primary branding, marketing materials, landing pages

const lightTextLogo = walletLogo('textLight', 400);
// Returns: Wide aspect ratio (~5.3:1)
// Colors: White text (#FEFEFE)
// Use case: Dark themes, dark backgrounds, night mode

const lightTextWithLogo = walletLogo('textWithLogoLight', 350);
// Returns: Wide aspect ratio (~4:1)  
// Colors: White logo and text (#FEFEFE)
// Use case: Dark themes with full branding, dark hero sections

/**
 * @deprecated Use walletLogo function directly or createCoinbaseWalletSDK
 */
class CoinbaseWalletSDK {
  /**
   * Get Coinbase Wallet logo SVG data URI
   * @param type - Logo style variant
   * @param width - Logo width in pixels (default: 240)
   * @returns SVG data URI string
   */
  getCoinbaseWalletLogo(type: LogoType, width?: number): string;
}

import { CoinbaseWalletSDK } from "@coinbase/wallet-sdk";

const sdk = new CoinbaseWalletSDK({
  appName: "Legacy Logo App"
});

// Get logo with default width (240px)
const defaultLogo = sdk.getCoinbaseWalletLogo('standard');

// Get logo with custom width
const customLogo = sdk.getCoinbaseWalletLogo('circle', 180);

import React from 'react';
import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';

interface WalletLogoProps {
  type: LogoType;
  size: number;
  className?: string;
}

const WalletLogo: React.FC<WalletLogoProps> = ({ type, size, className }) => {
  const sdk = createCoinbaseWalletSDK({ appName: 'React App' });
  const logoSrc = sdk.getCoinbaseWalletLogo ? 
    sdk.getCoinbaseWalletLogo(type, size) : 
    walletLogo(type, size);

  return (
    <img 
      src={logoSrc}
      alt="Coinbase Wallet"
      width={size}
      height={type.includes('text') ? size * 0.1 : size}
      className={className}
    />
  );
};

// Usage
<WalletLogo type="standard" size={200} className="wallet-logo" />
<WalletLogo type="textWithLogo" size={300} className="header-logo" />

<!-- Standard logo button -->
<button id="connect-wallet" class="wallet-button">
  <img id="wallet-logo" alt="Coinbase Wallet" />
  Connect Wallet
</button>

<script>
import { createCoinbaseWalletSDK } from '@coinbase/wallet-sdk';

const sdk = createCoinbaseWalletSDK({ appName: 'HTML App' });
const logo = sdk.getCoinbaseWalletLogo('circle', 24);

document.getElementById('wallet-logo').src = logo;
</script>

.wallet-branding {
  background-image: var(--wallet-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.dark-theme .wallet-branding {
  background-image: var(--wallet-logo-light);
}

// Set CSS custom properties
const standardLogo = walletLogo('standard', 200);
const lightLogo = walletLogo('textWithLogoLight', 200);

document.documentElement.style.setProperty('--wallet-logo', `url("${standardLogo}")`);
document.documentElement.style.setProperty('--wallet-logo-light', `url("${lightLogo}")`);

function getResponsiveLogo(type: LogoType): string {
  const screenWidth = window.innerWidth;
  
  let size: number;
  if (screenWidth < 480) {
    size = 120; // Mobile
  } else if (screenWidth < 768) {
    size = 160; // Tablet
  } else {
    size = 200; // Desktop
  }
  
  return walletLogo(type, size);
}

// Update logo on resize
window.addEventListener('resize', () => {
  const logoElement = document.getElementById('responsive-logo') as HTMLImageElement;
  if (logoElement) {
    logoElement.src = getResponsiveLogo('standard');
  }
});

// Always include alt text
const logoImg = document.createElement('img');
logoImg.src = walletLogo('standard', 200);
logoImg.alt = 'Coinbase Wallet';
logoImg.setAttribute('role', 'img');

// For decorative usage
logoImg.alt = '';
logoImg.setAttribute('aria-hidden', 'true');