Fix MPT icon logo rendering (#1271)

## High Level Overview of Change

Fix a bug where token icon logo isn't rendered correctly when users
provide an icon URL without HTTP/HTTPS protocol in metadata. For
example,
```
{
  "asset_class": "rwa",
  "asset_subclass": "stablecoin",
  "ticker": "RLUSD",
  "name": "MPT RLUSD - Short",
  "desc": "Ripple's RLUSD using the MPT standard - Short",
  "icon": "s1.xrplmeta.org/icon/5CEA036903.png",
  "issuer_name": "Ripple",
  "uris": [
    ...
  ],
  "additional_info": {
    ...
  }
}
```

<!--
Please include a summary/list of the changes.
If too broad, please consider splitting into multiple PRs.
-->

### Context of Change

<!--
Please include the context of a change.
If a bug fix, when was the bug introduced? What was the behavior?
If a new feature, why was this architecture chosen? What were the
alternatives?
If a refactor, how is this better than the previous implementation?

If there is a design document for this feature, please link it here.
-->

### Type of Change

<!--
Please check relevant options, delete irrelevant ones.
-->

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Refactor (non-breaking change that only restructures code)
- [ ] Tests (You added tests for code that already exists, or your new
feature included in this PR)
- [ ] Documentation Updates
- [ ] Translation Updates
- [ ] Release

### Codebase Modernization

<!--
In an effort to modernize the codebase, you should convert the files
that you work with to React Hooks and TypeScript,
and update tests to use the React Testing Library instead of Enzyme. If
this is not possible (e.g. it's too many
changes, touching too many files, etc.) please explain why here.
-->

- [ ] Updated files to React Hooks
- [ ] Updated files to TypeScript
- [ ] Updated tests to React Testing Library

## Before / After
Before -
https://testnet.xrpl.org/mpt/00CB8B1D9A62293225214846706F863B5D1C75CDF1EC0C00
After -
https://testnet.dev.ripplex.io/mpt/00CB8B1D9A62293225214846706F863B5D1C75CDF1EC0C00

<!--
If just refactoring / back-end changes, this can be just an in-English
description of the change at a technical level.
If a UI change, screenshots should be included.
-->

## Test Plan

<!--
Please describe the tests that you ran to verify your changes and
provide instructions so that others can reproduce.
-->

<!--
## Future Tasks
For future tasks related to PR.
-->

Author: kuan121

src/containers/Token/MPT/Header/index.tsx

@@ -8,6 +8,7 @@ import {
   shortenDomain,
   shortenMPTID,
   stripHttpProtocol,
+  convertToHttpURL,
 } from '../../../shared/utils'
 import { CopyableText } from '../../../shared/components/CopyableText'
 import DomainLink from '../../../shared/components/DomainLink'
@@ -102,6 +103,9 @@ export const Header = (props: Props) => {
   // Only show MPT issuance ID if ticker exists (since we show ticker in header, need to show ID somewhere)
   const showMPTIssuanceId = !!ticker
 
+  // Convert logo URL to HTTP/HTTPS format (handles IPFS URLs)
+  const RenderedLogoUrl = logoUrl ? convertToHttpURL(logoUrl) : undefined
+
   // Get all URIs for dropdown, filtering out items without uri
   const allUris = (uris || []).filter((u) => u.uri)
 
@@ -137,11 +141,11 @@ export const Header = (props: Props) => {
       </div>
       <div className="section box-header">
         <div className="token-info-group">
-          {logoUrl ? (
+          {RenderedLogoUrl ? (
             <img
               className="token-logo"
               alt={`${ticker || mptIssuanceId} logo`}
-              src={logoUrl}
+              src={RenderedLogoUrl}
             />
           ) : (
             <DefaultTokenIcon className="token-logo no-logo" />

src/containers/Token/MPT/test/Header/Header.test.tsx

@@ -115,6 +115,21 @@ describe('MPT Header component', () => {
     wrapper.unmount()
   })
 
+  it('displays logo URL without protocol by prefixing https', () => {
+    const dataWithNoProtocolUrl = {
+      ...mockMPTData,
+      parsedMPTMetadata: {
+        ...mockMPTData.parsedMPTMetadata,
+        icon: 'example.com/logo.png',
+      },
+    }
+    const wrapper = createWrapper({ data: dataWithNoProtocolUrl })
+    const logo = wrapper.find('img.token-logo')
+    expect(logo.length).toBe(1)
+    expect(logo.prop('src')).toBe('https://example.com/logo.png')
+    wrapper.unmount()
+  })
+
   it('displays default logo when no icon', () => {
     const wrapper = createWrapper({ data: mockMPTDataNoMetadata })
     expect(wrapper.find('.token-logo.no-logo').length).toBeGreaterThanOrEqual(1)

src/containers/shared/test/utils.test.ts

@@ -13,6 +13,7 @@ import {
   shortenNFTTokenID,
   shortenMPTID,
   stripHttpProtocol,
+  convertToHttpURL,
 } from '../utils'
 
 describe('utils', () => {
@@ -271,4 +272,38 @@ describe('Shorten utils', () => {
       expect(shortenMPTID(shortMPTID)).toBe(shortMPTID)
     })
   })
+
+  describe('convertToHttpUrl', () => {
+    it('converts IPFS URLs to HTTP URLs', () => {
+      expect(
+        convertToHttpURL(
+          'ipfs://QmXhvvWs3HaFkJvDuYvanj2pv31yFQGJewfEhfme1Sv47Y',
+        ),
+      ).toBe(
+        'https://ipfs.io/ipfs/QmXhvvWs3HaFkJvDuYvanj2pv31yFQGJewfEhfme1Sv47Y',
+      )
+    })
+
+    it('preserves https:// URLs as-is', () => {
+      expect(convertToHttpURL('https://example.com/logo.png')).toBe(
+        'https://example.com/logo.png',
+      )
+    })
+
+    it('adds https:// to plain domain URLs', () => {
+      expect(convertToHttpURL('logo.svgcdn.com/logos/openai-icon.png')).toBe(
+        'https://logo.svgcdn.com/logos/openai-icon.png',
+      )
+    })
+
+    it('handles empty strings', () => {
+      expect(convertToHttpURL('')).toBe('')
+    })
+
+    it('handles other protocols', () => {
+      expect(convertToHttpURL('ftp://example.com/file.txt')).toBe(
+        'ftp://example.com/file.txt',
+      )
+    })
+  })
 })

src/containers/shared/utils.js

@@ -557,3 +557,30 @@ export const shortenMPTID = (
 
 export const shortenTxHash = (txHash = '') =>
   txHash.length > 12 ? `${txHash.slice(0, 6)}...${txHash.slice(-6)}` : txHash
+
+/**
+ * Converts URLs to HTTP/HTTPS format, handling IPFS URLs and plain domains
+ * @param {string} url - The URL to convert (can be ipfs://, https://, http://, or plain domain)
+ * @returns {string} The converted HTTP/HTTPS URL
+ */
+export const convertToHttpURL = (url) => {
+  if (!url) {
+    return url
+  }
+
+  // Handle IPFS URLs - convert to HTTP
+  if (url.startsWith('ipfs://')) {
+    return url.replace('ipfs://', 'https://ipfs.io/ipfs/')
+  }
+
+  // Matches a protocol (e.g. 'http://' or 'https://') at the start of a string
+  const PROTOCOL_REGEX = /^([a-z][a-z0-9+\-.]*):\/\//
+
+  // If URL already has a protocol, return as is
+  if (PROTOCOL_REGEX.test(url)) {
+    return url
+  }
+
+  // Otherwise, assume it's a plain domain and add https://
+  return `https://${url}`
+}