Ziya/app/components/CexAnalysisCard.vue

<template>
  <div
    class="cex-analysis-card relative bg-base-100 hover:bg-base-200/50 transition-all duration-200 cursor-pointer border-b border-base-300 last:border-b-0"
    :class="cardClass"
    @click="$emit('click', token)"
  >
    <!-- Quick actions (visible on hover) -->
    <div class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex gap-1">
      <button
        class="w-6 h-6 bg-base-300/90 hover:bg-error rounded text-base-content/60 hover:text-error-content transition-colors flex items-center justify-center text-xs"
        title="Close token"
        @click.stop="$emit('close', token)"
      >
        <Icon name="heroicons:x-mark" class="w-3 h-3" />
      </button>
      <button
        class="w-6 h-6 bg-base-300/90 hover:bg-base-300 rounded text-base-content/60 hover:text-primary transition-colors flex items-center justify-center text-xs"
        title="Hide token"
        @click.stop="$emit('hide', token)"
      >
        <Icon name="heroicons:eye-slash" class="w-3 h-3" />
      </button>
      <button
        class="w-6 h-6 bg-base-300/90 hover:bg-base-300 rounded text-base-content/60 hover:text-warning transition-colors flex items-center justify-center text-xs"
        title="Watch token"
        @click.stop="$emit('watch', token)"
      >
        <Icon name="heroicons:bookmark" class="w-3 h-3" />
      </button>
    </div>

    <!-- Quick buy button (bottom right) -->
    <div class="absolute bottom-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
      <button
        class="bg-primary hover:bg-primary/80 text-primary-content px-2 py-1 rounded text-xs font-medium flex items-center gap-1 shadow-sm"
        @click.stop="$emit('quick-buy', token)"
      >
        <Icon name="heroicons:bolt" class="w-3 h-3" />
        Quick Buy
      </button>
    </div>

    <!-- Main content -->
    <div class="p-3 group">
      <div class="flex items-start gap-3">
        <!-- Token image/avatar -->
        <div class="flex-shrink-0">
          <div v-if="metadata?.image && !imageError" class="w-10 h-10 rounded-lg overflow-hidden bg-base-300 relative">
            <img 
              :src="metadata.image" 
              :alt="token.name"
              class="w-full h-full object-cover"
              @error="handleImageError"
            >
          </div>
          <div v-else-if="_metadataLoading" class="w-10 h-10 bg-base-300 rounded-lg flex items-center justify-center">
            <div class="loading loading-spinner loading-xs text-primary" />
          </div>
          <div v-else-if="_metadataError" class="w-10 h-10 bg-error/20 rounded-lg flex items-center justify-center" :title="_metadataError">
            <Icon name="heroicons:exclamation-triangle" class="w-4 h-4 text-error" />
          </div>
          <div v-else class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-lg flex items-center justify-center">
            <span class="text-primary-content font-bold text-sm">{{ token.name?.charAt(0) || '?' }}</span>
          </div>
        </div>

        <!-- Token info -->
        <div class="flex-1 min-w-0">
          <!-- Header with name and CEX badge -->
          <div class="flex items-center gap-2 mb-1">
            <h3 class="font-semibold text-sm text-base-content truncate">{{ token.name }}</h3>
            <div class="flex items-center gap-1">
              <!-- CEX badge with icon -->
              <div 
                class="badge badge-xs flex items-center gap-1 px-2 py-1"
                :class="cexBadgeClass"
              >
                <Icon :name="cexIcon" class="w-3 h-3" />
                {{ cexDisplayName }}
              </div>
              <!-- CEX wallet type (if not main exchange name) -->
              <span v-if="cexWalletType" class="text-xs text-base-content/50 font-mono">
                {{ cexWalletType }}
              </span>
            </div>
          </div>

          <!-- Address -->
          <div class="flex items-center gap-2 mb-2">
            <span class="text-xs text-base-content/60 font-mono">{{ truncateAddress(mintAddress) }}</span>
            <button
              class="text-base-content/40 hover:text-primary transition-colors"
              title="Copy address"
              @click.stop="copyToClipboard(mintAddress)"
            >
              <Icon name="heroicons:clipboard-document" class="w-3 h-3" />
            </button>
          </div>

          <!-- Analysis info and creator -->
          <div class="flex items-center justify-between mb-2">
            <div class="flex items-center gap-2">
              <!-- Analysis type badge -->
              <span class="badge badge-info badge-xs">
                CEX ANALYSIS
              </span>
              
              <!-- Dev info (if not unknown_dev) -->
              <div v-if="showDevInfo" class="flex items-center gap-1">
                <Icon name="heroicons:user-circle" class="w-3 h-3 text-warning" />
                <span class="text-xs text-warning font-medium">{{ token.dev_name }}</span>
              </div>
              
              <!-- Creator with graph tooltip -->
              <div 
                class="relative"
                @mouseenter="showGraphTooltip = true"
                @mouseleave="showGraphTooltip = false"
              >
                <a 
                  :href="`https://solscan.io/account/${token.creator}`"
                  target="_blank"
                  class="flex items-center gap-1 text-xs text-base-content/50 hover:text-primary transition-colors"
                  title="View creator on Solscan"
                  @click.stop
                >
                  <Icon name="heroicons:user" class="w-3 h-3" />
                  {{ truncateAddress(token.creator) }}
                </a>
                
                <!-- Graph tooltip -->
                <div 
                  v-if="showGraphTooltip && graphNodes.length > 0"
                  class="absolute bottom-full left-0 mb-2 z-50 bg-base-200 rounded-lg shadow-lg border border-base-300 p-3 min-w-[200px]"
                >
                  <div class="text-xs font-medium text-base-content mb-2">Connection Graph</div>
                  <div class="space-y-1">
                    <div v-for="node in graphNodes.slice(0, 5)" :key="node.id" class="flex items-center gap-2 text-xs">
                      <div class="w-2 h-2 rounded-full bg-primary" />
                      <span class="font-mono text-base-content/70">{{ truncateAddress(node.id) }}</span>
                    </div>
                    <div v-if="graphNodes.length > 5" class="text-xs text-base-content/50 text-center pt-1">
                      +{{ graphNodes.length - 5 }} more nodes
                    </div>
                  </div>
                  <div class="mt-2 pt-2 border-t border-base-300 text-xs text-base-content/60">
                    {{ token.node_count }} nodes, {{ token.edge_count }} edges
                  </div>
                </div>
              </div>
            </div>

            <!-- Analysis duration -->
            <span class="text-xs text-base-content/50">
              {{ analysisDuration }}
            </span>
          </div>

          <!-- Social links (if available) -->
          <div v-if="metadata && hasSocialLinks" class="flex items-center gap-1 mt-2">
            <a
              v-if="metadata.twitter"
              :href="metadata.twitter"
              target="_blank"
              class="w-5 h-5 text-base-content/40 hover:text-info transition-colors"
              title="Twitter"
              @click.stop
            >
              <Icon name="simple-icons:x" class="w-3 h-3" />
            </a>
            <a
              v-if="metadata.telegram"
              :href="metadata.telegram"
              target="_blank"
              class="w-5 h-5 text-base-content/40 hover:text-info transition-colors"
              title="Telegram"
              @click.stop
            >
              <Icon name="simple-icons:telegram" class="w-3 h-3" />
            </a>
            <a
              v-if="metadata.website"
              :href="metadata.website"
              target="_blank"
              class="w-5 h-5 text-base-content/40 hover:text-info transition-colors"
              title="Website"
              @click.stop
            >
              <Icon name="heroicons:globe-alt" class="w-3 h-3" />
            </a>
            <a
              v-if="metadata.discord"
              :href="metadata.discord"
              target="_blank"
              class="w-5 h-5 text-base-content/40 hover:text-info transition-colors"
              title="Discord"
              @click.stop
            >
              <Icon name="simple-icons:discord" class="w-3 h-3" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { truncateAddress as truncateAddr } from '~/utils/address';
import type { MaxDepthReachedData, TokenCexUpdatedData, TokenMetadata } from '../../types/redis-events';
import { fetchTokenMetadata } from '../utils/ipfs';

// Props
interface Props {
  token: TokenCexUpdatedData | MaxDepthReachedData;
}

const props = defineProps<Props>();

// Emits
interface Emits {
  (e: 'click' | 'hide' | 'watch' | 'quick-buy' | 'close', token: TokenCexUpdatedData | MaxDepthReachedData): void;
}

defineEmits<Emits>();

// Reactive data
const imageError = ref(false);
const mintAddress = ref<string>('');
const showGraphTooltip = ref(false);

// Simple metadata state management
const metadata = ref<TokenMetadata | null>(null);
const _metadataLoading = ref(false);
const _metadataError = ref<string | null>(null);

// CEX mapping utilities
const getCexInfo = (cexName: string) => {
  const name = cexName.toLowerCase();
  
  // Extract base exchange name and wallet type
  if (name.includes('coinbase')) {
    const type = name.replace('coinbase_', '').replace('coinbase', '');
    return {
      baseName: 'Coinbase',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-info',
      icon: 'simple-icons:coinbase'
    };
  }
  
  if (name.includes('binance')) {
    const type = name.replace('binance_', '').replace('binance', '');
    return {
      baseName: 'Binance',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-warning',
      icon: 'simple-icons:binance'
    };
  }
  
  if (name.includes('okx')) {
    const type = name.replace('okx_', '').replace('okx', '');
    return {
      baseName: 'OKX',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-primary',
      icon: 'heroicons:building-office'
    };
  }
  
  if (name.includes('kraken')) {
    const type = name.replace('kraken_', '').replace('kraken', '');
    return {
      baseName: 'Kraken',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-secondary',
      icon: 'heroicons:building-office-2'
    };
  }
  
  if (name.includes('mexc')) {
    const type = name.replace('mexc_', '').replace('mexc', '');
    return {
      baseName: 'MEXC',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-accent',
      icon: 'heroicons:building-office'
    };
  }
  
  if (name.includes('bitget')) {
    const type = name.replace('bitget_', '').replace('bitget', '');
    return {
      baseName: 'Bitget',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-info',
      icon: 'heroicons:building-office'
    };
  }
  
  if (name.includes('gateio') || name.includes('gate.io')) {
    const type = name.replace('gateio_', '').replace('gateio', '');
    return {
      baseName: 'Gate.io',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-primary',
      icon: 'heroicons:building-office'
    };
  }
  
  if (name.includes('bybit')) {
    const type = name.replace('bybit_', '').replace('bybit', '');
    return {
      baseName: 'Bybit',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-warning',
      icon: 'heroicons:building-office'
    };
  }
  
  if (name.includes('bitfinex')) {
    const type = name.replace('bitfinex_', '').replace('bitfinex', '');
    return {
      baseName: 'Bitfinex',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-success',
      icon: 'heroicons:building-office'
    };
  }
  
  if (name.includes('kucoin')) {
    const type = name.replace('kucoin_', '').replace('kucoin', '');
    return {
      baseName: 'KuCoin',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-accent',
      icon: 'heroicons:building-office'
    };
  }
  
  if (name.includes('poloniex')) {
    const type = name.replace('poloniex_', '').replace('poloniex', '');
    return {
      baseName: 'Poloniex',
      walletType: type ? type.toUpperCase() : '',
      color: 'badge-neutral',
      icon: 'heroicons:building-office'
    };
  }
  
  if (name.includes('lbank')) {
    return {
      baseName: 'LBank',
      walletType: '',
      color: 'badge-neutral',
      icon: 'heroicons:building-office'
    };
  }
  
  if (name.includes('debridge')) {
    return {
      baseName: 'DeBridge',
      walletType: 'VAULT',
      color: 'badge-secondary',
      icon: 'heroicons:shield-check'
    };
  }
  
  if (name.includes('revolut')) {
    return {
      baseName: 'Revolut',
      walletType: 'HOT',
      color: 'badge-info',
      icon: 'heroicons:credit-card'
    };
  }
  
  if (name.includes('bitstamp')) {
    return {
      baseName: 'BitStamp',
      walletType: 'HOT',
      color: 'badge-success',
      icon: 'heroicons:building-office'
    };
  }
  
  if (name.includes('stakecom')) {
    return {
      baseName: 'Stake.com',
      walletType: 'HOT',
      color: 'badge-warning',
      icon: 'heroicons:fire'
    };
  }
  
  // Default for unknown exchanges
  return {
    baseName: cexName.replace(/_/g, ' ').toUpperCase(),
    walletType: '',
    color: 'badge-neutral',
    icon: 'heroicons:building-office'
  };
};

// Computed properties
const cexInfo = computed(() => getCexInfo(props.token.cex_name));

const cardClass = computed(() => {
  const baseClass = 'h-[140px] min-h-[140px]';
  // Use CEX-specific border color
  if (cexInfo.value.color.includes('info')) {
    return `${baseClass} border-l-2 border-l-info`;
  } else if (cexInfo.value.color.includes('warning')) {
    return `${baseClass} border-l-2 border-l-warning`;
  } else if (cexInfo.value.color.includes('success')) {
    return `${baseClass} border-l-2 border-l-success`;
  } else if (cexInfo.value.color.includes('primary')) {
    return `${baseClass} border-l-2 border-l-primary`;
  } else if (cexInfo.value.color.includes('secondary')) {
    return `${baseClass} border-l-2 border-l-secondary`;
  } else if (cexInfo.value.color.includes('accent')) {
    return `${baseClass} border-l-2 border-l-accent`;
  }
  return `${baseClass} border-l-2 border-l-neutral`;
});

const cexBadgeClass = computed(() => cexInfo.value.color);
const cexDisplayName = computed(() => cexInfo.value.baseName);
const cexWalletType = computed(() => cexInfo.value.walletType);
const cexIcon = computed(() => cexInfo.value.icon);

const showDevInfo = computed(() => {
  return props.token.dev_name && props.token.dev_name !== 'unknown_dev';
});

const analysisDuration = computed(() => {
  const createdAt = typeof props.token.created_at === 'string' 
    ? parseInt(props.token.created_at) 
    : props.token.created_at;
  const updatedAt = typeof props.token.updated_at === 'string' 
    ? parseInt(props.token.updated_at) 
    : props.token.updated_at;
  
  const durationSeconds = updatedAt - createdAt;
  
  if (durationSeconds < 60) {
    return `${durationSeconds}s analysis`;
  } else if (durationSeconds < 3600) {
    const minutes = Math.floor(durationSeconds / 60);
    return `${minutes}m analysis`;
  } else {
    const hours = Math.floor(durationSeconds / 3600);
    const minutes = Math.floor((durationSeconds % 3600) / 60);
    return `${hours}h ${minutes}m analysis`;
  }
});

const graphNodes = computed(() => {
  try {
    if (props.token.graph && typeof props.token.graph === 'object') {
      const graph = props.token.graph as { graph?: { nodes?: Array<{ id: string }> } };
      if (graph.graph && graph.graph.nodes) {
        return graph.graph.nodes;
      }
    }
    return [];
  } catch (error) {
    console.error('Error parsing graph data:', error);
    return [];
  }
});

const hasSocialLinks = computed(() => {
  return metadata.value && (
    metadata.value.twitter || 
    metadata.value.telegram || 
    metadata.value.website || 
    metadata.value.discord
  );
});

// Methods
const truncateAddress = (address: string): string => {
  return truncateAddr(address);
};

const copyToClipboard = async (text: string): Promise<void> => {
  try {
    await navigator.clipboard.writeText(text);
    // You could add a toast notification here
  } catch (err) {
    console.error('Failed to copy to clipboard:', err);
  }
};

const handleImageError = (): void => {
  imageError.value = true;
};

// Load metadata on mount
onMounted(async () => {
  // Set mint address (now it's already a string)
  mintAddress.value = props.token.mint;
  
  // Load metadata if URI exists
  if (props.token.uri) {
    _metadataLoading.value = true;
    _metadataError.value = null;
    
    try {
      const result = await fetchTokenMetadata(props.token.uri);
      metadata.value = result;
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : 'Failed to fetch metadata';
      _metadataError.value = errorMessage;
    } finally {
      _metadataLoading.value = false;
    }
  }
});
</script>

<style scoped>
.cex-analysis-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cex-analysis-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.group:hover .opacity-0 {
  opacity: 1;
}
</style>