fix(market): a chain is a name, not a colour

CHAIN_INFO carried a `color` per chain — five hexes lifted wholesale from
GitHub's dark-syntax palette: #7ee787 (entity green), #d2a8ff (entity),
#ffa657 (variable — the literal tan the owner called out), #ff7b72 (keyword),
plus a cyan #55ccff for Lux itself. They were painted as inline
`style={{ color }}` in seven places on a surface whose every other pixel is
achromatic, and an inline hex is unreachable by white-label-by-hostname no
matter what value it holds.

Deleted rather than re-tokenised: the field existed to make five chains
distinguishable and the chain NAME already does that. The active chip in the
header was `text-black` over that hex, which stopped meeting contrast the
moment the fill stopped being a light pastel — it is the accent pair
(bg-primary/text-primary-foreground) now, which flips correctly with the mode.

@luxfi/ui 7.4.5 -> 7.4.9, which is also what un-breaks this app: two physical
copies of @tanstack/react-query left it rendering "Application error: a
client-side exception has occurred" with "No QueryClient set, use
QueryClientProvider to set one" in the console, on every route.

After: warm 0%, tinted-neutral 0.009%, mean chroma 0.448 at 1440x900 and
390x844, light and dark.

Co-authored-by: Hanzo Dev <[email protected]>

package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "@hanzo/gui": "^7.3.0",
     "@hanzo/iam": "^0.13.8",
-    "@luxfi/ui": "7.4.7",
+    "@luxfi/ui": "7.4.9",
     "@radix-ui/react-dialog": "^1.1.0",
     "@radix-ui/react-dropdown-menu": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",

src/app/collections/page.tsx

@@ -25,7 +25,7 @@ export default function CollectionsPage() {
         </div>
         <p className="text-muted-foreground mb-6 text-sm">
           Browse NFT collections on{' '}
-          <span className="font-semibold" style={{ color: chainInfo?.color }}>{chainInfo?.name ?? 'Lux'}</span>.
+          <span className="font-semibold text-foreground">{chainInfo?.name ?? 'Lux'}</span>.
           Collections with LSSVM pools have instant buy/sell liquidity.
         </p>
 

src/app/page.tsx

@@ -71,7 +71,7 @@ export default function Home() {
           <div className="flex justify-between items-center mb-4">
             <h2 className="text-xl font-semibold">
               Collections on{' '}
-              <span style={{ color: chainInfo?.color }}>{chainInfo?.name ?? 'Lux'}</span>
+              <span className="text-foreground">{chainInfo?.name ?? 'Lux'}</span>
             </h2>
             <Link
               href="/collections"

src/app/portfolio/page.tsx

@@ -23,7 +23,7 @@ function ChainPortfolio({ chainId, walletAddress }: { chainId: number; walletAdd
 
   return (
     <section className="mb-8">
-      <h3 className="text-base font-semibold mb-3" style={{ color: chainInfo?.color }}>
+      <h3 className="text-base font-semibold mb-3 text-foreground">
         {chainInfo?.name} ({data.items.length})
       </h3>
       <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3">

src/components/ActivityRow.tsx

@@ -71,10 +71,7 @@ export function ActivityRow({ transfer, chainId }: ActivityRowProps) {
 
       {/* Chain */}
       {chainInfo && (
-        <div
-          className="text-[11px] font-semibold w-10 text-right shrink-0"
-          style={{ color: chainInfo.color }}
-        >
+        <div className="text-[11px] font-semibold w-10 text-right shrink-0">
           {chainInfo.name}
         </div>
       )}

src/components/CollectionCard.tsx

@@ -42,7 +42,7 @@ export function CollectionCard({ token, chainId, rank }: CollectionCardProps) {
           <div className="flex gap-4 mt-1 text-xs text-muted-foreground">
             <span>{token.type}</span>
             {chainInfo && (
-              <span style={{ color: chainInfo.color }}>{chainInfo.name}</span>
+              <span className="text-foreground">{chainInfo.name}</span>
             )}
           </div>
         </div>

src/components/Header.tsx

@@ -45,9 +45,8 @@ function ChainSelector() {
             title={info.name}
             className={cn(
               'cursor-pointer rounded-md border-none px-2.5 py-1.5 text-xs font-semibold transition-colors',
-              isActive ? 'text-black' : 'bg-transparent text-muted-foreground hover:text-foreground',
+              isActive ? 'bg-primary text-primary-foreground' : 'bg-transparent text-muted-foreground hover:text-foreground',
             )}
-            style={isActive ? { background: info.color } : undefined}
           >
             {info.name}
           </button>

src/components/NFTCard.tsx

@@ -48,8 +48,7 @@ export function NFTCard({ contractAddress, tokenId, name, imageUrl, collectionNa
           {/* Chain badge */}
           {chainInfo && (
             <div
-              className="absolute top-2 right-2 px-2 py-0.5 rounded-md bg-black/60 backdrop-blur-sm text-[10px] font-semibold"
-              style={{ color: chainInfo.color }}
+              className="absolute top-2 right-2 px-2 py-0.5 rounded-md bg-foreground/70 text-background backdrop-blur-sm text-[10px] font-semibold"
             >
               {chainInfo.name}
             </div>

src/lib/chains.ts

@@ -68,10 +68,22 @@ export function explorerUrl(chainId: number): string {
   return chain?.blockExplorers?.default.url ?? luxMainnet.blockExplorers!.default.url
 }
 
-export const CHAIN_INFO: Record<number, { name: string; symbol: string; color: string }> = {
-  [luxMainnet.id]: { name: 'Lux', symbol: 'LUX', color: '#55ccff' },
-  [zooMainnet.id]: { name: 'Zoo', symbol: 'ZOO', color: '#7ee787' },
-  [hanzoMainnet.id]: { name: 'Hanzo', symbol: 'HANZO', color: '#d2a8ff' },
-  [spcMainnet.id]: { name: 'SPC', symbol: 'SPC', color: '#ffa657' },
-  [parsMainnet.id]: { name: 'Pars', symbol: 'PARS', color: '#ff7b72' },
+/**
+ * A chain is a NAME and a SYMBOL. It used to carry a `color` too — five hexes
+ * lifted wholesale from GitHub's dark-syntax palette (#7ee787 entity-green,
+ * #d2a8ff entity, #ffa657 variable — a literal tan, #ff7b72 keyword) plus a
+ * cyan #55ccff for Lux itself, painted as inline `style={{ color }}` on a
+ * surface whose every other pixel is achromatic.
+ *
+ * Deleted rather than re-tokenised: the field existed to make five chains
+ * distinguishable, and the chain NAME already does that. Monochrome carries
+ * state by weight and label, never by hue — and an inline hex is unreachable
+ * by white-label-by-hostname no matter what value it holds.
+ */
+export const CHAIN_INFO: Record<number, { name: string; symbol: string }> = {
+  [luxMainnet.id]: { name: 'Lux', symbol: 'LUX' },
+  [zooMainnet.id]: { name: 'Zoo', symbol: 'ZOO' },
+  [hanzoMainnet.id]: { name: 'Hanzo', symbol: 'HANZO' },
+  [spcMainnet.id]: { name: 'SPC', symbol: 'SPC' },
+  [parsMainnet.id]: { name: 'Pars', symbol: 'PARS' },
 }