feat: use swap options from subgraph

apps/subgraph/schema.graphql

@@ -380,7 +380,6 @@ type ClankerToken @entity {
   tokenAddress: Bytes!
   msgSender: Bytes!
   tokenAdmin: Bytes! # The admin address (may or may not be a DAO)
-
   # Token metadata
   tokenImage: String!
   tokenName: String!
@@ -565,6 +564,7 @@ type ZoraDropMintComment @entity {
 # Swap routing entities
 
 enum CoinType {
+  UNKNOWN
   WETH
   CLANKER_TOKEN
   ZORA_COIN
@@ -622,6 +622,8 @@ type PaymentOption @entity {
   # Payment token details
   tokenAddress: Bytes!
   tokenType: CoinType!
+  tokenName: String!
+  tokenSymbol: String!
 
   # Hops from this payment token to the target coin (when buying)
   # Or from target coin to this payment token (when selling)

apps/subgraph/src/utils/coinInfo.ts

@@ -7,6 +7,7 @@ import { CLANKER_TICK_SPACING, DYNAMIC_FEE_FLAG, WETH_ADDRESS } from './constant
  * Coin type constants for routing
  */
 export namespace CoinType {
+  export const UNKNOWN: string = 'UNKNOWN'
   export const WETH: string = 'WETH'
   export const CLANKER_TOKEN: string = 'CLANKER_TOKEN'
   export const ZORA_COIN: string = 'ZORA_COIN'
@@ -18,6 +19,8 @@ export namespace CoinType {
 export class CoinInfo {
   address: Bytes
   type: string
+  name: string
+  symbol: string
   pairedToken: Bytes | null
   poolId: Bytes | null // Uniswap V4 pool identifier (from either poolId or poolKeyHash)
   fee: BigInt | null
@@ -27,6 +30,8 @@ export class CoinInfo {
   constructor(
     address: Bytes,
     type: string,
+    name: string,
+    symbol: string,
     pairedToken: Bytes | null,
     poolId: Bytes | null,
     fee: BigInt | null,
@@ -35,6 +40,8 @@ export class CoinInfo {
   ) {
     this.address = address
     this.type = type
+    this.name = name
+    this.symbol = symbol
     this.pairedToken = pairedToken
     this.poolId = poolId
     this.fee = fee
@@ -55,6 +62,8 @@ export function loadCoinInfo(tokenAddress: Bytes): CoinInfo | null {
     return new CoinInfo(
       tokenAddress,
       CoinType.WETH,
+      'Wrapped Ether',
+      'WETH',
       null, // WETH has no pairedToken
       null, // WETH has no pool
       null,
@@ -69,6 +78,8 @@ export function loadCoinInfo(tokenAddress: Bytes): CoinInfo | null {
     return new CoinInfo(
       zoraCoin.coinAddress,
       CoinType.ZORA_COIN,
+      zoraCoin.name,
+      zoraCoin.symbol,
       zoraCoin.currency,
       zoraCoin.poolKeyHash, // poolKeyHash is the Uniswap V4 pool identifier
       zoraCoin.poolFee,
@@ -83,6 +94,8 @@ export function loadCoinInfo(tokenAddress: Bytes): CoinInfo | null {
     return new CoinInfo(
       clankerToken.tokenAddress,
       CoinType.CLANKER_TOKEN,
+      clankerToken.tokenName,
+      clankerToken.tokenSymbol,
       clankerToken.pairedToken,
       clankerToken.poolId, // poolId is the Uniswap V4 pool identifier
       DYNAMIC_FEE_FLAG,

apps/subgraph/src/utils/swapPath.ts

@@ -240,11 +240,18 @@ export function buildSwapRoute(coinAddress: Bytes, timestamp: BigInt): SwapRoute
       continue
     }
 
-    // Determine token type
-    let tokenType = CoinType.WETH
+    let tokenType = CoinType.UNKNOWN
+    let tokenName = 'Unknown Token'
+    let tokenSymbol = 'UNKNOWN'
     const info = loadCoinInfo(tokenBytes)
-    if (info) {
+    if (!info) {
+      log.warning('Payment option has missing coin info, using UNKNOWN metadata: {}', [
+        tokenAddr,
+      ])
+    } else {
       tokenType = info.type
+      tokenName = info.name
+      tokenSymbol = info.symbol
     }
 
     // Create payment option
@@ -253,6 +260,8 @@ export function buildSwapRoute(coinAddress: Bytes, timestamp: BigInt): SwapRoute
     option.route = routeId
     option.tokenAddress = tokenBytes
     option.tokenType = tokenType
+    option.tokenName = tokenName
+    option.tokenSymbol = tokenSymbol
     option.startHopIndex = startHopIndex
     option.endHopIndex = endHopIndex
     option.isDirectSwap = endHopIndex - startHopIndex == 0 // Single hop = direct swap

packages/dao-ui/src/components/Cards/Cards.css.ts

@@ -3,10 +3,12 @@ import { style } from '@vanilla-extract/css'
 
 export const card = style([
   {
-    transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+    position: 'relative',
+    top: 0,
+    transition: 'top 0.2s ease, box-shadow 0.2s ease',
     border: `2px solid ${color.border}`,
     ':hover': {
-      transform: 'translateY(-2px)',
+      top: -2,
       boxShadow: `0 4px 12px ${theme.colors.ghostHover}`,
     },
   },

packages/hooks/src/index.ts

@@ -51,7 +51,6 @@ export * from './useQueryParams'
 export * from './useScrollDirection'
 export * from './useStreamData'
 export * from './useSwapOptions'
-export * from './useSwapPath'
 export * from './useSwapQuote'
 export * from './useTimeout'
 export * from './useTokenBalances'