Be able to claim a sponsored name

src/@components/Address/AddressAvatarWithChainName.tsx

@@ -161,13 +161,11 @@ export const AddressAvatarWithChainName = memo(({
         const chainNameClass = variant === 'feed'
           ? [
             'chain-name text-[14px] md:text-sm font-bold',
-            'bg-gradient-to-r from-[var(--neon-teal)] via-[var(--neon-teal)] to-teal-300',
-            'bg-clip-text text-transparent',
+            'text-[var(--standard-font-color)]',
           ].join(' ')
           : [
             'chain-name text-[14px] md:text-[15px] font-bold',
-            'bg-gradient-to-r from-[var(--neon-teal)] via-[var(--neon-teal)] to-teal-300',
-            'bg-clip-text text-transparent',
+            'text-[var(--standard-font-color)]',
           ].join(' ');
         return (
           <div className={cn(contentBaseClass, contentClassName)}>
@@ -179,8 +177,7 @@ export const AddressAvatarWithChainName = memo(({
                     <span
                       className={[
                         'chain-name text-[14px] md:text-[15px] font-bold',
-                        'bg-gradient-to-r from-[var(--neon-teal)] via-[var(--neon-teal)] to-teal-300',
-                        'bg-clip-text text-transparent block truncate w-full',
+                        'text-[var(--standard-font-color)] block truncate w-full',
                       ].join(' ')}
                       title={displayName}
                     >
@@ -192,7 +189,7 @@ export const AddressAvatarWithChainName = memo(({
                 return (
                   <span
                     className={cn(
-                      'text-sm font-bold bg-gradient-to-r from-[var(--neon-teal)] via-[var(--neon-teal)] to-teal-300 bg-clip-text text-transparent leading-tight font-sans',
+                      'text-sm font-bold text-[var(--standard-font-color)] leading-tight font-sans',
                       className,
                     )}
                     title={address}
@@ -210,7 +207,7 @@ export const AddressAvatarWithChainName = memo(({
                         <span className={chainNameClass}>
                           {preferredName}
                         </span>
-                        <span className="text-xs text-white/70 font-mono leading-[0.9] no-gradient-text">
+                        <span className="text-xs text-white/70 font-mono leading-[0.9]">
                           <AddressFormatted
                             address={address}
                             truncate={false}
@@ -226,8 +223,7 @@ export const AddressAvatarWithChainName = memo(({
                     <span
                       className={[
                         'chain-name text-[14px] md:text-[15px] font-bold',
-                        'bg-gradient-to-r from-[var(--neon-teal)] via-[var(--neon-teal)] to-teal-300',
-                        'bg-clip-text text-transparent block truncate w-full',
+                        'text-[var(--standard-font-color)] block truncate w-full',
                       ].join(' ')}
                       title={address}
                     >

src/api/backend.ts

@@ -68,6 +68,40 @@ export type XAttestationResponse = {
   signature_base64: string;
 };
 
+export type ChainNameChallengeResponse = {
+  nonce: string;
+  expires_at: string | number;
+  message: string;
+};
+
+export type ChainNameClaimRequest = {
+  address: string;
+  name: string;
+  challenge_nonce: string;
+  challenge_expires_at: string;
+  signature_hex: string;
+};
+
+export type ChainNameClaimResponse = {
+  status: string;
+  message?: string | null;
+};
+
+export type ChainNameClaimStatusResponse = {
+  status: string;
+  name?: string | null;
+  error?: string | null;
+  preclaim_tx_hash?: string | null;
+  claim_tx_hash?: string | null;
+  update_tx_hash?: string | null;
+  transfer_tx_hash?: string | null;
+  expires_at?: string | number | null;
+  approximate_expire_time?: string | number | null;
+  approximateExpireTime?: string | number | null;
+  expire_time?: string | number | null;
+  expireTime?: string | number | null;
+};
+
 // Superhero API client
 export const SuperheroApi = {
   async fetchJson(path: string, init?: RequestInit) {
@@ -376,6 +410,29 @@ export const SuperheroApi = {
       }),
     }) as Promise<XAttestationResponse>;
   },
+  createChainNameChallenge(address: string) {
+    return this.fetchJson('/api/profile/chain-name/challenge', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        address,
+      }),
+    }) as Promise<ChainNameChallengeResponse>;
+  },
+  claimChainName(payload: ChainNameClaimRequest) {
+    return this.fetchJson('/api/profile/chain-name/claim', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    }) as Promise<ChainNameClaimResponse>;
+  },
+  getChainNameClaimStatus(address: string) {
+    return this.fetchJson(`/api/profile/${encodeURIComponent(address)}/chain-name-claim`) as Promise<ChainNameClaimStatusResponse>;
+  },
   /** Exchange OAuth code (from X redirect) for attestation; backend exchanges code for token and creates attestation. */
   createXAttestationFromCode(
     address: string,

src/components/Trendminer/TokenChat.tsx

@@ -131,12 +131,12 @@ const AddCommentCTA = ({ token }: { token: { name: string; address: string } })
           href={qualiPublicUrl}
           target="_blank"
           rel="noopener noreferrer"
-          className="group no-underline rounded-xl border border-white/15 bg-white/[0.05] p-3 text-left transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/[0.09] focus:outline-none focus:ring-2 focus:ring-white/30 no-gradient-text"
+          className="group no-underline rounded-xl border border-white/15 bg-white/[0.05] p-3 text-left transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/[0.09] focus:outline-none focus:ring-2 focus:ring-white/30"
           title="Open the public chat on Quali.chat"
         >
           <div className="flex items-center gap-2">
             <div className="w-8 h-8 rounded-full bg-white/10 border border-white/20 grid place-items-center">
-              <span className="no-gradient-text">🌐</span>
+              <span>🌐</span>
             </div>
             <div className="flex-1">
               <div className="font-semibold leading-tight">
@@ -152,12 +152,12 @@ const AddCommentCTA = ({ token }: { token: { name: string; address: string } })
           href={qualiPrivateUrl}
           target="_blank"
           rel="noopener noreferrer"
-          className="group no-underline rounded-xl border border-white/15 bg-white/[0.05] p-3 text-left transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/[0.09] focus:outline-none focus:ring-2 focus:ring-white/30 no-gradient-text"
+          className="group no-underline rounded-xl border border-white/15 bg-white/[0.05] p-3 text-left transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/[0.09] focus:outline-none focus:ring-2 focus:ring-white/30"
           title="Open the private chat on Quali.chat (holders only)"
         >
           <div className="flex items-center gap-2">
             <div className="w-8 h-8 rounded-full bg-white/10 border border-white/20 grid place-items-center">
-              <span className="no-gradient-text">🔒</span>
+              <span>🔒</span>
             </div>
             <div className="flex-1">
               <div className="font-semibold leading-tight">

src/components/Truncate.tsx

@@ -87,7 +87,7 @@ export const Truncate = ({
             '--animation-delay': '1s !important',
           } as React.CSSProperties : undefined}
         >
-          <div className="chain-name text-[14px] md:text-sm font-bold bg-gradient-to-r from-[var(--neon-teal)] via-[var(--neon-teal)] to-teal-300 bg-clip-text text-transparent">{nameComponent}</div>
+          <div className="chain-name text-[14px] md:text-sm font-bold text-[var(--standard-font-color)]">{nameComponent}</div>
         </div>
       </div>
       {nameComponent !== str && (

src/components/dex/core/LiquiditySuccessNotification.tsx

@@ -72,7 +72,7 @@ export default function LiquiditySuccessNotification({
           </div>
 
           {/* Title */}
-          <Dialog.Title className="text-xl sm:text-2xl font-bold text-center m-0 mb-2 sh-dex-title">
+          <Dialog.Title className="text-xl sm:text-2xl font-bold text-center m-0 mb-2">
             Liquidity Added Successfully!
           </Dialog.Title>
 

src/components/dex/core/SwapConfirmation.tsx

@@ -69,7 +69,7 @@ export default function SwapConfirmation({
 
           {/* Header */}
           <div className="flex justify-between items-center mb-3">
-            <Dialog.Title className="font-bold text-base m-0 sh-dex-title">
+            <Dialog.Title className="font-bold text-base m-0">
               Confirm Swap
             </Dialog.Title>
             <Dialog.Close asChild>

src/components/dex/core/SwapForm.tsx

@@ -356,7 +356,7 @@ export default function SwapForm({ onPairSelected, onFromTokenSelected }: SwapFo
     <div className="w-full sm:w-[480px] mx-auto bg-transparent border-0 p-0 relative overflow-hidden flex-shrink-0 sm:bg-white/[0.02] sm:border sm:border-white/10 sm:backdrop-blur-[20px] sm:rounded-[24px] sm:p-6 sm:shadow-[0_4px_20px_rgba(0,0,0,0.1)]">
       {/* Header */}
       <div className="flex justify-between items-center mb-2">
-        <h2 className="text-xl font-bold m-0 sh-dex-title">
+        <h2 className="text-xl font-bold m-0">
           {t('swap.title')}
         </h2>
 

src/components/dex/core/TokenSelector.tsx

@@ -138,7 +138,7 @@ export default function TokenSelector({
         <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[rgba(20,20,28,0.98)] text-white border border-white/10 rounded-3xl p-4 sm:p-6 w-[95vw] max-w-md sm:max-w-[520px] max-h-[85vh] overflow-y-auto backdrop-blur-[20px] shadow-[0_20px_60px_rgba(0,0,0,0.6),_0_8px_32px_rgba(255,107,107,0.2)] z-[1001] animate-in slide-in-from-top-4 duration-200 outline-none">
           {/* Header */}
           <div className="flex justify-between items-center mb-4 sm:mb-5">
-            <Dialog.Title className="font-bold text-lg sm:text-xl m-0 sh-dex-title">
+            <Dialog.Title className="font-bold text-lg sm:text-xl m-0">
               Select a token
             </Dialog.Title>
             <Dialog.Close asChild>

src/components/hero-banner/banner.styles.css

@@ -151,10 +151,6 @@ html.ios-webkit .hero-banner--ios-safe .banner-dismiss {
   color: #ffffff !important;
   text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
   animation: fadeUp 0.9s ease both 0.05s;
-  background: none !important;
-  -webkit-background-clip: unset !important;
-  background-clip: unset !important;
-  -webkit-text-fill-color: #ffffff !important;
 }
 
 .mobile-break { 
@@ -260,10 +256,6 @@ html.ios-webkit .hero-banner--ios-safe .banner-dismiss {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   border: none;
-  /* Override global link styles */
-  -webkit-background-clip: unset !important;
-  background-clip: unset !important;
-  -webkit-text-fill-color: unset !important;
   filter: none !important;
 }
 

src/components/layout/app-header/MobileAppHeader.tsx

@@ -203,7 +203,7 @@ const MobileAppHeader = () => {
             </>
           ) : (
             <>
-              <Link to="/" className="text-[var(--standard-font-color)] flex items-center min-h-[44px] min-w-[44px] no-underline hover:no-underline no-gradient-text" style={{ textDecoration: 'none' }} aria-label={t('labels.superheroHome')}>
+              <Link to="/" className="text-[var(--standard-font-color)] flex items-center min-h-[44px] min-w-[44px] no-underline hover:no-underline" style={{ textDecoration: 'none' }} aria-label={t('labels.superheroHome')}>
                 <HeaderLogo className="h-7 w-auto" />
               </Link>
               <div className="flex-grow hidden md:block" />
@@ -268,9 +268,6 @@ const MobileAppHeader = () => {
                 style={{
                   color: 'rgba(255,255,255,0.8)',
                   background: 'transparent',
-                  backgroundImage: 'none',
-                  WebkitTextFillColor: 'rgba(255,255,255,0.8)',
-                  WebkitBackgroundClip: 'initial' as any,
                 }}
               >
                 {t('labels.menu')}
@@ -343,7 +340,7 @@ const MobileAppHeader = () => {
                       target="_blank"
                       rel="noreferrer"
                       className={`${commonClasses} bg-transparent`}
-                      style={{ WebkitTextFillColor: 'white', WebkitBackgroundClip: 'initial' as any, background: 'none' }}
+                      style={{ background: 'none' }}
                       onClick={handleNavigationClick}
                     >
                       <span className="text-lg sm:text-base">{item.label}</span>
@@ -355,7 +352,7 @@ const MobileAppHeader = () => {
                       to={item.path}
                       onClick={handleNavigationClick}
                       className={`${commonClasses} bg-transparent`}
-                      style={{ WebkitTextFillColor: 'white', WebkitBackgroundClip: 'initial' as any, background: 'none' }}
+                      style={{ background: 'none' }}
                     >
                       <span className="text-lg sm:text-base">{item.label}</span>
                     </Link>
@@ -377,7 +374,7 @@ const MobileAppHeader = () => {
                   to="/defi/buy-ae-with-eth"
                   onClick={handleNavigationClick}
                   className="w-full no-underline font-semibold transition-all duration-200 h-[56px] sm:h-[52px] rounded-xl text-white text-base flex items-center justify-center px-5 bg-transparent"
-                  style={{ WebkitTextFillColor: 'white', WebkitBackgroundClip: 'initial' as any, background: 'none' }}
+                  style={{ background: 'none' }}
                 >
                   <span className="text-lg sm:text-base">{t('labels.buyAe')}</span>
                 </Link>

src/components/layout/app-header/WebAppHeader.tsx

@@ -59,7 +59,7 @@ const WebAppHeader = () => {
       <div className="flex items-center h-16 px-6">
         <Link
           to="/"
-          className="flex items-center no-underline hover:no-underline no-gradient-text"
+          className="flex items-center no-underline hover:no-underline"
           style={{ color: 'var(--standard-font-color)', textDecoration: 'none' }}
           aria-label={t('labels.superheroHome')}
         >
@@ -88,7 +88,7 @@ const WebAppHeader = () => {
                 <button
                   key={item.id}
                   type="button"
-                  className={`${commonClass} no-gradient-text text-left`}
+                  className={`${commonClass} text-left`}
                   style={idleStyles}
                   onClick={handleConnect}
                 >
@@ -107,7 +107,7 @@ const WebAppHeader = () => {
                   href={item.path}
                   target="_blank"
                   rel="noreferrer"
-                  className={`${commonClass} no-gradient-text`}
+                  className={commonClass}
                   style={isActive ? activeStyles : idleStyles}
                   onMouseEnter={(e) => {
                     if (!isActive) {
@@ -134,7 +134,7 @@ const WebAppHeader = () => {
               <Link
                 key={item.id}
                 to={item.path}
-                className={`${commonClass} no-gradient-text`}
+                className={commonClass}
                 style={isActive ? activeStyles : idleStyles}
               >
                 <span className="w-6 flex items-center justify-center">