# PR — Liquidity Position Dashboard: Ticker & Exchange Icons

[Paulopk0]

$PLT Liquidity Position Dashboard: Info Box, Ticker Icons & Custom Search

Summary

• New Info Box (Metrics Card) displaying key stats for Plata Token ($PLT) on the Polygon network:
  • Current PLT price in USD and its 24h variation (color-coded green/red based on variation).
  • Real-time Market Capitalization and Total Asset Liquidity (aggregated from all visible providers).
  • Market-to-Book Ratio calculated dynamically against a configurable book value divisor ($50,000).
  • Contract address badge with quick-copy capabilities and MetaMask integration ("Add to MetaMask").
• New Ticker column rendering pair token logos side-by-side (e.g. { PLT-icon : USDT-icon }).
• Exchange column displaying protocol logo + name with a graceful broken-image fallback (rendering an NA pill).
• Custom-styled Search Bar within the DataTables wrapper featuring a pill-shaped input, an inline search lens SVG, Montserrat typography, and smooth focus transition effects.
• 15 local exchange SVG icons under .img/.

Changes

index.php

Change	Detail
Info Box Component	Integrated a premium metadata card at the top displaying PLT token details, logo, Polygon network badge, price row, and a list of secondary metrics.
Metrics Calculations	Merges two JSON contract data sources, sorts them by liquidity, aggregates total asset liquidity, and calculates the Market-to-Book ratio using the USD rate files.
Ticker Column	Added a new <th> for Tickers between the # and Pair columns.
Ticker Cell	<td class="ticker-cell" data-pair="..."> designed to split and render two circular token logos dynamically.
Exchange Cell	<td class="exchange-cell" data-exchange="..."> rendering the exchange's name next to its corresponding SVG icon.
Copy Contract Address	Integrated quick-copy badge displaying truncated address with standard clipboard integration.
MetaMask Integration	Fox icon linked to trigger prompt for watching the custom PLT token asset.

script.liquidity.position.js

Feature	Description
TICKER_ICONS	24 token tickers mapped to typofx.ie CDN URLs.
buildTickerIcon()	Generates <img class="ticker-icon"> or fallback <span> for paired tickers.
renderTickerIcons()	Extracts data-pair string, splits by /, and injects both icons in a { icon : icon } block.
getExchangeIcon()	Resolves exchange name to a local path: ./.img/{lowercase-slug}.svg.
renderExchangeIcons()	Inserts exchange icon + name; if missing (triggering onerror), falls back to rendering an NA badge.
addPLTToken()	Requests wallet_watchAsset via window.ethereum to add PLT to the user's wallet with custom parameters (address, symbol, decimals, logo).
Copy button	Hooks up event listener for copying contract address using navigator.clipboard with a 1.5-second success status (checkmark icon and color shift to green).
DataTables Config	Sets custom layout parameters, hides default elements, delays searches, and maps custom inputs to the search API.

style.css

Class / ID	Purpose
.info-box / .info-header	Glassmorphism card container styling with a clean, structured flex layout.
.network-badge	Custom dark pill for contract address display with embedded links and MetaMask assets.
.price-row / .info-price	Displays current PLT USD price with wide Montserrat styling.
.info-variation	Color-coded status class (.positive as premium green #0E9F6E and .negative as premium red #F05252).
.metrics-list	Neat, border-separated grid alignment for key token analytics.
.dataTables_filter input	Completely custom-designed pill search input. Uses base64 inline search lens SVG, left padding to accommodate the icon, Montserrat semi-bold font, and transition animations.
.dataTables_filter input:focus	Highlighting transition adding a solid white background and soft box shadow.
table#example	Sleek dark-mode styling with rounded corners (12px), subtle alternating row stripes, custom hover states, and relative th positioning.
.ticker-cell / .ticker-icon	Aligns token pair logos seamlessly inside the table cells.
.exchange-icon	20x20px rounded logos with a solid white background to make dark vector SVGs visible on a dark table row.
.exchange-fallback	Clean NA circular badge styled to match the exchange icon.

.img/

• Includes 15 exchange SVG icons + MetaMask-icon.svg.
• Exchange SVGs follow a simple alphanumeric naming standard (uniswapv3.svg, curvefi.svg, sushiswap.svg, etc.).

---