claude:chore: some mobile support, refactor chain/protocol enum mapping

Author: kuco23

.devcontainer/devcontainer.json

@@ -5,7 +5,6 @@
     "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
     "postCreateCommand": "npm install -g @anthropic-ai/claude-code",
     "mounts": [
-        "source=/dev/null,target=${containerWorkspaceFolder}/.env,type=bind,readonly",
         "source=${localEnv:HOME}/.claude,target=/home/node/.claude,type=bind",
         "source=${localEnv:HOME}/.claude.json,target=/home/node/.claude.json,type=bind"
     ],

src/assets/css/custom.css

@@ -214,3 +214,31 @@
   font-size: 12px;
   color: rgba(255, 255, 255, 0.35);
 }
+
+/* MOBILE OVERRIDES */
+
+@media only screen and (max-width: 767px) {
+  /* Tighter reward claim cards */
+  .reward-claim-card {
+    flex: 0 0 190px;
+    padding: 14px;
+    border-radius: 10px;
+  }
+
+  .reward-claim-card-top {
+    margin-bottom: 8px;
+  }
+
+  .reward-claim-amount {
+    font-size: 17px;
+    margin-bottom: 10px;
+  }
+
+  .reward-claim-details {
+    margin-bottom: 8px;
+  }
+
+  .reward-claims-carousel {
+    gap: 10px;
+  }
+}

src/components/ui/delegationUpdates.tsx

@@ -4,59 +4,29 @@ import { ApiResponseDto_PageStatsDto, DelegationDto } from "~/backendApi"
 import { Formatter } from "~/utils/misc/formatter"
 import { HashLink } from "../utils/links"
 import { Diff } from "../pages/diff"
+import { Chain, Protocol } from "~/enums"
 import * as C from "~/constants"
 import avalanche from "../../assets/images/tokens/AVAX.svg"
 import flare from "../../assets/images/tokens/FLR.svg"
 import songbird from "../../assets/images/tokens/SGB.svg"
 
-
-function chainToLogoUrl(chain: DelegationDto.chain): string {
-  if (chain == DelegationDto.chain._0) {
-    return flare
-  } else if (chain == DelegationDto.chain._1) {
-    return songbird
-  } else {
-    return avalanche
-  }
+const CHAIN_LOGO: Record<number, string> = {
+  [Chain.FLARE]: flare,
+  [Chain.SONGBIRD]: songbird,
+  [Chain.AVALANCHE]: avalanche,
 }
 
-function chainToTransactionUrl(
-  chain: DelegationDto.chain,
-  protocol: DelegationDto.protocol,
-  hash: string
-): string {
-  if (chain == DelegationDto.chain._0) {
-    if (protocol == DelegationDto.protocol._0) {
+function chainToTransactionUrl(chain: number, protocol: number, hash: string): string {
+  if (chain == Chain.FLARE) {
+    if (protocol == Protocol.FSP) {
       return C.flareEvmTransactionUrl(hash)
-    } else if (protocol == DelegationDto.protocol._1) {
-      return C.flarePChainTransactionUrl(hash)
     } else {
-      throw Error(`Invalid protocol ${chain}:${protocol}`)
+      return C.flarePChainTransactionUrl(hash)
     }
-  } else if (chain == DelegationDto.chain._1) {
+  } else if (chain == Chain.SONGBIRD) {
     return C.songbirdEvmTransactionUrl(hash)
-  } else if (chain == DelegationDto.chain._2) {
+  } else if (chain == Chain.AVALANCHE) {
     return C.avalanchePChainTransactionUrl(hash)
-  } else {
-    throw Error(`Invalid protocol ${chain}:${protocol}`)
-  }
-}
-
-function chainToSymbol(chain: DelegationDto.chain): string {
-  if (chain == DelegationDto.chain._0) {
-    return 'FLR'
-  } else if (chain == DelegationDto.chain._1) {
-    return 'SGB'
-  } else {
-    return 'AVAX'
-  }
-}
-
-function resolveProtocolName(protocol: DelegationDto.protocol): string {
-  if (protocol == DelegationDto.protocol._0) {
-    return 'FSP'
-  } else if (protocol == DelegationDto.protocol._1) {
-    return 'Validator'
   }
 }
 
@@ -83,14 +53,14 @@ const DelegationUpdates = ({ data, isLoading, error }: {
       <div>Delegated</div>
       <div>Timestamp</div>
       {delegations.map((delegation, i) => {
-        const logo = chainToLogoUrl(delegation.chain)
+        const logo = CHAIN_LOGO[delegation.chain]
         const url = chainToTransactionUrl(delegation.chain, delegation.protocol, delegation.transaction)
         const diff = Formatter.number(delegation.delegated)
         return <React.Fragment key={i}>
           <div><img src={logo} width={25} /></div>
-          <div>{resolveProtocolName(delegation.protocol)}</div>
+          <div>{C.PROTOCOL_NAME[delegation.protocol]}</div>
           <div><HashLink address={delegation.transaction} url={url} length={5} copy={false} /></div>
-          <div style={{ textAlign: 'center' }}><Diff diff={diff} unit={chainToSymbol(delegation.chain)} /></div>
+          <div style={{ textAlign: 'center' }}><Diff diff={diff} unit={C.CHAIN_SYMBOL[delegation.chain]} /></div>
           <div>{Formatter.relativeDate(delegation.timestamp)}</div>
         </React.Fragment>
       })}

src/components/ui/rewardClaims.tsx

@@ -3,81 +3,43 @@ import { SpinnerCircular } from "spinners-react"
 import { ApiResponseDto_PageStatsDto, RewardClaimDto } from "~/backendApi"
 import { Formatter } from "~/utils/misc/formatter"
 import { HashLink } from "../utils/links"
+import { Chain, Protocol } from "~/enums"
 import * as C from "~/constants"
 import avalanche from "../../assets/images/tokens/AVAX.svg"
 import flare from "../../assets/images/tokens/FLR.svg"
 import songbird from "../../assets/images/tokens/SGB.svg"
 
-
-function chainToLogoUrl(chain: RewardClaimDto.chain): string {
-  if (chain == RewardClaimDto.chain._0) {
-    return flare
-  } else if (chain == RewardClaimDto.chain._1) {
-    return songbird
-  } else {
-    return avalanche
-  }
-}
-
-function chainToSymbol(chain: RewardClaimDto.chain): string {
-  if (chain == RewardClaimDto.chain._0) {
-    return 'FLR'
-  } else if (chain == RewardClaimDto.chain._1) {
-    return 'SGB'
-  } else {
-    return 'AVAX'
-  }
+const CHAIN_LOGO: Record<number, string> = {
+  [Chain.FLARE]: flare,
+  [Chain.SONGBIRD]: songbird,
+  [Chain.AVALANCHE]: avalanche,
 }
 
-function chainToTransactionUrl(
-  chain: RewardClaimDto.chain,
-  protocol: RewardClaimDto.protocol,
-  hash: string
-): string {
-  if (chain == RewardClaimDto.chain._0) {
-    if (protocol == RewardClaimDto.protocol._0) {
+function chainToTransactionUrl(chain: number, protocol: number, hash: string): string {
+  if (chain == Chain.FLARE) {
+    if (protocol == Protocol.FSP) {
       return C.flareEvmTransactionUrl(hash)
-    } else if (protocol == RewardClaimDto.protocol._1) {
-      return C.flarePChainTransactionUrl(hash)
     } else {
-      throw Error(`Invalid protocol ${chain}:${protocol}`)
+      return C.flarePChainTransactionUrl(hash)
     }
-  } else if (chain == RewardClaimDto.chain._1) {
+  } else if (chain == Chain.SONGBIRD) {
     return C.songbirdEvmTransactionUrl(hash)
-  } else if (chain == RewardClaimDto.chain._2) {
+  } else if (chain == Chain.AVALANCHE) {
     return C.avalanchePChainTransactionUrl(hash)
-  } else {
-    throw Error(`Invalid protocol ${chain}:${protocol}`)
   }
 }
 
-function chainToAddressUrl(
-  chain: RewardClaimDto.chain,
-  protocol: RewardClaimDto.protocol,
-  address: string
-): string {
-  if (chain == RewardClaimDto.chain._0) {
-    if (protocol == RewardClaimDto.protocol._0) {
+function chainToAddressUrl(chain: number, protocol: number, address: string): string {
+  if (chain == Chain.FLARE) {
+    if (protocol == Protocol.FSP) {
       return C.flareEvmAddressUrl(address)
-    } else if (protocol == RewardClaimDto.protocol._1) {
-      return C.flarePChainAddressUrl(address)
     } else {
-      throw Error(`Invalid protocol ${chain}:${protocol}`)
+      return C.flarePChainAddressUrl(address)
     }
-  } else if (chain == RewardClaimDto.chain._1) {
+  } else if (chain == Chain.SONGBIRD) {
     return C.songbirdEvmAddressUrl(address)
-  } else if (chain == RewardClaimDto.chain._2) {
+  } else if (chain == Chain.AVALANCHE) {
     return C.avalanchePChainAddressUrl(address)
-  } else {
-    throw Error(`Invalid protocol ${chain}:${protocol}`)
-  }
-}
-
-function resolveProtocolName(protocol: RewardClaimDto.protocol): string {
-  if (protocol == RewardClaimDto.protocol._0) {
-    return 'FSP'
-  } else if (protocol == RewardClaimDto.protocol._1) {
-    return 'Validator'
   }
 }
 
@@ -113,26 +75,26 @@ const RewardClaims = ({ data, isLoading, error }: {
     </div>
     <div className="reward-claims-carousel" ref={scrollRef}>
       {rewards.map((reward, i) => {
-        const logo = chainToLogoUrl(reward.chain)
-        const symbol = chainToSymbol(reward.chain)
+        const logo = CHAIN_LOGO[reward.chain]
+        const symbol = C.CHAIN_SYMBOL[reward.chain]
         const txUrl = chainToTransactionUrl(reward.chain, reward.protocol, reward.transaction)
         const addrUrl = chainToAddressUrl(reward.chain, reward.protocol, reward.recipient)
         return <div className="reward-claim-card" key={i}>
           <div className="reward-claim-card-top">
             <img src={logo} width={28} alt={symbol} />
-            <span className="reward-claim-protocol">{resolveProtocolName(reward.protocol)}</span>
+            <span className="reward-claim-protocol">{C.PROTOCOL_NAME[reward.protocol]}</span>
           </div>
           <div className="reward-claim-amount">
             +{Formatter.number(reward.reward)} <span className="reward-claim-symbol">{symbol}</span>
           </div>
           <div className="reward-claim-details">
             <div className="reward-claim-row">
               <span className="reward-claim-label">Tx</span>
-              <HashLink address={reward.transaction} url={txUrl} length={6} copy={true} />
+              <HashLink address={reward.transaction} url={txUrl} length={6} copy={false} />
             </div>
             <div className="reward-claim-row">
               <span className="reward-claim-label">To</span>
-              <HashLink address={reward.recipient} url={addrUrl} length={6} copy={true} />
+              <HashLink address={reward.recipient} url={addrUrl} length={6} copy={false} />
             </div>
           </div>
           <div className="reward-claim-time">{Formatter.relativeDate(reward.timestamp)}</div>

src/constants.ts

@@ -1,6 +1,21 @@
+import { Chain, Protocol } from './enums'
+
 export const MAX_BIPS = 10_000
 export const NUMBER_DISPLAY_LENGTH = 3
 
+// chain & protocol name maps (keyed by API numeric IDs)
+
+export const CHAIN_NAME: Record<number, string> = {
+  [Chain.FLARE]: 'Flare',
+  [Chain.SONGBIRD]: 'Songbird',
+  [Chain.AVALANCHE]: 'Avalanche',
+}
+
+export const PROTOCOL_NAME: Record<number, string> = {
+  [Protocol.FSP]: 'FSP',
+  [Protocol.VALIDATOR]: 'Validator',
+}
+
 // server query
 export const REFRESH_QUERY_FAST_MS = 10_000
 export const REFRESH_QUERY_SLOW_MS = 30_000
@@ -18,6 +33,12 @@ export const WSGB_SYMBOL = 'WSGB'
 export const AVAX_DECIMALS = 18
 export const AVAX_SYMBOL = 'AVAX'
 
+export const CHAIN_SYMBOL: Record<number, string> = {
+  [Chain.FLARE]: FLR_SYMBOL,
+  [Chain.SONGBIRD]: SGB_SYMBOL,
+  [Chain.AVALANCHE]: AVAX_SYMBOL,
+}
+
 // flare fsp
 
 export const wrappedFlrAdr = '0x1D80c49BbBCd1C0911346656B529DF9E5c2F783d'

src/enums.ts

@@ -6,4 +6,6 @@ export enum StatusCode {
 
 export type Status = StatusCode | string
 
-export enum Chain { FLARE, SONGBIRD, AVALANCHE }
+export enum Chain { FLARE, SONGBIRD, AVALANCHE }
+
+export enum Protocol { FSP, VALIDATOR }

src/utils/data/proposals.tsx

@@ -5,10 +5,12 @@ import * as C from "../../constants"
 function structureApyData(apys: ApyDto[]): Map<string, Map<string, number>> {
   const mp = new Map()
   for (const apy of apys) {
-    if (mp.get(apy.chain) == null) {
-      mp.set(apy.chain, new Map())
+    const chain = C.CHAIN_NAME[apy.chain]
+    if (mp.get(chain) == null) {
+      mp.set(chain, new Map())
     }
-    mp.get(apy.chain).set(apy.protocol, apy.apy)
+    const protocol = C.PROTOCOL_NAME[apy.protocol]
+    mp.get(chain).set(protocol, apy.apy)
   }
   return mp
 }