← بازگشت به صفحه اصلی

Overview

All CDN URLs for coin images are now centrally managed through the .env file, allowing easy changes to CDN location and image format without modifying code.

Configuration

.env Variables

CDN_XPAY_URL=https://cdn.xpay.co/coins/webp/
CDN_XPAY_FORMAT=webp

Change CDN URL or format: Edit these values in .env and the entire site will use the new configuration.

Usage

PHP Templates

Use the cdn_url() helper function:

<!-- Single coin -->
<img src="<?php echo cdn_url('BTC'); ?>" alt="Bitcoin">

<!-- Dynamic symbol -->
<img src="<?php echo cdn_url($coin_symbol); ?>" alt="<?php echo $coin_name; ?>">

<!-- With esc_attr -->
<img src="<?php echo cdn_url(esc_attr($item['symbol'])); ?>" alt="coin">

React/JavaScript Components

Use the getCdnUrl() function (automatically defined in components):

// The config is available via window.xpayConfig
const { cdnBaseUrl, cdnFormat } = window.xpayConfig;

// Helper function (already added to components)
const getCdnUrl = (coinSymbol) => {
  const base = cdnBaseUrl.replace(/\/$/, "");
  return `${base}/${coinSymbol.toUpperCase()}.${cdnFormat}`;
};

// Usage in JSX
<img src={getCdnUrl(coin.symbol)} alt={coin.name} />

Implementation Details

Backend (PHP)

1. Env Class (app/Support/Env.php)

public static function getCdnBaseUrl(): string
{
    return self::get('CDN_XPAY_URL', 'https://cdn.xpay.co/coins/webp/');
}

public static function getCdnFormat(): string
{
    return self::get('CDN_XPAY_FORMAT', 'webp');
}

public static function getCdnUrl(string $symbol, bool $uppercase = true): string
{
    $baseUrl = rtrim(self::getCdnBaseUrl(), '/');
    $format = self::getCdnFormat();
    $coinSymbol = $uppercase ? strtoupper($symbol) : $symbol;
    
    return "{$baseUrl}/{$coinSymbol}.{$format}";
}

2. Global Helper Function (functions.php)

function cdn_url(string $symbol, bool $uppercase = true): string
{
    return Env::getCdnUrl($symbol, $uppercase);
}

3. JavaScript Configuration (app/Support/Assets.php)

wp_localize_script('main-script', 'xpayConfig', array(
    'cdnBaseUrl' => Env::getCdnBaseUrl(),
    'cdnFormat'  => Env::getCdnFormat(),
));

Frontend (JavaScript/React)

The CDN configuration is automatically exposed to JavaScript via window.xpayConfig:

window.xpayConfig = {
    cdnBaseUrl: "https://cdn.xpay.co/coins/webp/",
    cdnFormat: "webp"
}

Updated Files

Configuration Files

PHP Template Files (19 replacements)

React JSX Components (11 replacements)

Compiled JavaScript Files

⚠️ Action Required: After JSX changes, rebuild React components:

npm run build

This will update the compiled files:

Migration Path

Old Format

<img src="https://cdn.xpay.co/coins/webp/BTC.webp" alt="Bitcoin">

New Format

<img src="<?php echo cdn_url('BTC'); ?>" alt="Bitcoin">

Benefits

  1. Centralized Configuration - Change CDN URL in one place
  2. Format Flexibility - Switch from webp to png or svg easily
  3. Environment Support - Different CDNs for dev/staging/production
  4. Consistency - Same API for PHP and JavaScript
  5. Type Safety - Helper functions ensure correct URL generation

Testing

Test CDN Configuration Change

  1. Change format to PNG: 
    CDN_XPAY_URL=https://cdn.xpay.co/coins/
CDN_XPAY_FORMAT=png
  2. Clear OPcache: 
    docker exec wp-app php -r "opcache_reset();"
  3. Rebuild React (if changed): 
    npm run build
  4. Verify: All coin images should now load from .../coins/SYMBOL.png

Expected Results

Troubleshooting

Images Not Loading

  1. Check .env file has correct CDN_XPAY_URL
  2. Verify URL ends with / or doesn’t (code handles both)
  3. Clear OPcache: docker exec wp-app php -r "opcache_reset();"
  4. Check browser console for 404 errors

React Components Not Updated

  1. Rebuild with npm run build
  2. Clear browser cache (Ctrl+Shift+R)
  3. Verify window.xpayConfig exists in browser console
  4. Check compiled JS files have getCdnUrl() function

Wrong Image Format

  1. Verify CDN_XPAY_FORMAT in .env
  2. Clear OPcache
  3. Rebuild React components
  4. Check actual URL in browser DevTools

Future Enhancements

Possible improvements: