Scam tracker

.example.env

@@ -42,3 +42,7 @@ NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=XXX
 
 # Add a Reservoir API key for NFT price information
 RESERVOIR_API_KEY=XXX
+
+
+#Add a GoldRush Api key to use Scam Tracker
+GOLD_RUSH_API_KEY=xxxx

app/[locale]/scam-tracker/[slug]/CustomTransactionNode.tsx

@@ -0,0 +1,39 @@
+// import React from 'react';
+// import { Handle, Position, type NodeProps } from '@xyflow/react';
+// import { formatEther } from 'viem';
+// import Card from 'components/common/Card';
+
+// interface TransactionData {
+//   address: string;
+//   amount?: string;
+//   token?: string;
+//   type: 'sender' | 'receiver';
+//   timestamp?: number;
+// }
+
+// const CustomTransactionNode = ({ data }: NodeProps<TransactionData>) => {
+//   return (
+//     <Card className="p-4 min-w-[200px]">
+//       <Handle type="target" position={Position.Top} />
+//       <div className="flex flex-col gap-2">
+//         <div className="flex items-center justify-between">
+//           <span className={`text-sm font-medium ${data.type === 'sender' ? 'text-red-500' : 'text-green-500'}`}>
+//             {data.type === 'sender' ? 'From' : 'To'}
+//           </span>
+//           <span className="text-xs opacity-50">
+//             {data.timestamp ? new Date(data.timestamp * 1000).toLocaleString() : ''}
+//           </span>
+//         </div>
+//         <div className="text-sm font-mono break-all">{data.address}</div>
+//         {data.amount && (
+//           <div className="text-sm">
+//             {formatEther(BigInt(data.amount))} {data.token}
+//           </div>
+//         )}
+//       </div>
+//       <Handle type="source" position={Position.Bottom} />
+//     </Card>
+//   );
+// };
+
+// export default CustomTransactionNode;

app/[locale]/scam-tracker/[slug]/ScamTrackerChainSelect.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import ChainSelectHref from 'components/common/select/ChainSelectHref';
+import { getChainSlug } from 'lib/utils/chains';
+import { useCallback } from 'react';
+
+interface Props {
+  chainId: number;
+}
+
+// This is a wrapper around ChainSelectHref because we cannot pass the getUrl function as a prop from a server component
+const ScamTrackerChainSelect = ({ chainId }: Props) => {
+  const getUrl = useCallback((chainId: number) => `/scam-tracker/${getChainSlug(chainId)}`, []);
+  return <ChainSelectHref instanceId="scam-tracker-chain-select" selected={chainId} getUrl={getUrl} showNames />;
+};
+
+export default ScamTrackerChainSelect;

app/[locale]/scam-tracker/[slug]/ScamTrackerContent.tsx

@@ -0,0 +1,48 @@
+'use client';
+import { buildGraphData, getTokenTransfers } from 'lib/utils/token-tracking';
+import { useState } from 'react';
+import { usePublicClient } from 'wagmi';
+import TransactionGraph from './TransactionGraph';
+
+interface Props {
+  chainId: number;
+}
+
+const ScamTrackerContent = ({ chainId }: Props) => {
+  const publicClient = usePublicClient();
+
+  const [graphData, setGraphData] = useState<{ nodes: any[]; edges: any[] } | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleTransactionSubmit = async (hash: string) => {
+    try {
+      setIsLoading(true);
+      setError(null);
+
+      const transfers = await getTokenTransfers(publicClient, hash as `0x${string}`);
+      const data = await buildGraphData(transfers);
+
+      setGraphData(data);
+    } catch (err) {
+      console.error('Error fetching transaction data:', err);
+      setError('Failed to fetch transaction data. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center m-auto gap-4 px-4">
+      {error && <div className="text-red-500 mt-2">{error}</div>}
+      {isLoading && (
+        <div className="flex items-center justify-center w-full h-[400px]">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 dark:border-white" />
+        </div>
+      )}
+      {graphData && <TransactionGraph data={graphData} />}
+    </div>
+  );
+};
+
+export default ScamTrackerContent;

app/[locale]/scam-tracker/[slug]/ScamTrackerSearchBox.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { XMarkIcon } from '@heroicons/react/24/solid';
+import Button from 'components/common/Button';
+import Loader from 'components/common/Loader';
+import SearchBox from 'components/common/SearchBox';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import type { FormEventHandler, HTMLAttributes } from 'react';
+
+interface Props extends Omit<HTMLAttributes<HTMLInputElement>, 'onSubmit'> {
+  onSubmit: (hash: string) => void;
+  chainName: string;
+}
+
+const isValidHash = (hash: string) => /^0x([A-Fa-f0-9]{64})$/.test(hash);
+
+const ScamTrackerSearchBox = ({ onSubmit, chainName, ...props }: Props) => {
+  const t = useTranslations();
+  const [value, setValue] = useState('');
+  const [isValidating, setIsValidating] = useState(false);
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+    if (value.trim() && isValidHash(value.trim())) {
+      setIsValidating(true);
+      // Simulate validation delay
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      setIsValidating(false);
+      onSubmit(value.trim());
+    }
+  };
+
+  const isValid = isValidHash(value);
+
+  return (
+    <SearchBox
+      onSubmit={handleSubmit}
+      onChange={(e) => setValue(e.target.value)}
+      value={value}
+      placeholder={t('scam_tracker.placeholder', { chainName })}
+      {...props}
+    >
+      {value && isValidating && <Loader isLoading={true} loadingMessage="Validating..." />}{' '}
+      {value && !isValidating && !isValid && <XMarkIcon className="w-6 h-6 text-red-500" />}
+      {value && !isValidating && isValid && (
+        <Button type="submit" variant="ghost" size="sm" aria-label="Track Funds">
+          {t('buttons.track_funds')}
+        </Button>
+      )}
+    </SearchBox>
+  );
+};
+
+export default ScamTrackerSearchBox;

app/[locale]/scam-tracker/[slug]/TransactionGraph.tsx

@@ -0,0 +1,97 @@
+// 'use client';
+// import { useCallback, useState, useEffect } from 'react';
+// import ReactFlow, {
+//   type Node,
+//   type Edge,
+//   Controls,
+//   Background,
+//   useNodesState,
+//   useEdgesState,
+//   addEdge,
+//   MiniMap,
+// } from '@xyflow/react';
+// import '@xyflow/react/dist/style.css';
+// // import TransactionModal from 'components/scam_tracker/TransactionModal';
+// import CustomTransactionNode from './CustomTransactionNode';
+
+// interface TokenTransfer {
+//   token_address: string;
+//   from_address: string;
+//   to_address: string;
+//   amount: string;
+//   token_symbol: string;
+//   token_decimals: number;
+// }
+
+// interface TransactionData {
+//   from_address: string;
+//   to_address: string;
+//   value: string;
+//   tx_hash: string;
+//   gas_metadata: {
+//     contract_ticker_symbol: string;
+//     contract_name: string;
+//     logo_url: string;
+//   };
+//   block_signed_at: string;
+//   gas_offered: number;
+//   gas_spent: number;
+//   gas_price: number;
+//   fees_paid: string;
+//   tokenTransfers: TokenTransfer[];
+// }
+
+// interface TransactionGraphProps {
+//   data: {
+//     nodes: Node[];
+//     edges: Edge[];
+//   };
+// }
+
+// export default function TransactionGraph({ data }: TransactionGraphProps) {
+//   const [nodes, setNodes, onNodesChange] = useNodesState(data.nodes);
+//   const [edges, setEdges, onEdgesChange] = useEdgesState(data.edges);
+//   const [selectedTransaction, setSelectedTransaction] = useState<TransactionData | null>(null);
+//   const [isModalOpen, setIsModalOpen] = useState(false);
+
+//   useEffect(() => {
+//     setNodes(data.nodes);
+//     setEdges(data.edges);
+//   }, [data, setNodes, setEdges]);
+
+//   const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+//   const onEdgeClick = useCallback((event: React.MouseEvent, edge: Edge) => {
+//     setSelectedTransaction(edge.data as TransactionData);
+//     setIsModalOpen(true);
+//   }, []);
+
+//   const closeModal = () => {
+//     setIsModalOpen(false);
+//     setSelectedTransaction(null);
+//   };
+
+//   const nodeTypes = { customTransaction: CustomTransactionNode };
+
+//   return (
+//     <>
+//       <div style={{ width: '100%', height: '600px' }}>
+//         <ReactFlow
+//           nodes={nodes}
+//           edges={edges}
+//           onNodesChange={onNodesChange}
+//           onEdgesChange={onEdgesChange}
+//           onConnect={onConnect}
+//           onEdgeClick={onEdgeClick}
+//           nodeTypes={nodeTypes}
+//           fitView
+//         >
+//           <Controls />
+//           <Background />
+//           <MiniMap />
+//         </ReactFlow>
+//       </div>
+//       <TransactionModal isOpen={isModalOpen} onClose={closeModal} transaction={selectedTransaction} />
+//     </>
+//   );
+// }

app/[locale]/scam-tracker/[slug]/page.tsx

@@ -0,0 +1,77 @@
+import ChainDescription from 'components/common/ChainDescription';
+import ChainLogo from 'components/common/ChainLogo';
+import Prose from 'components/common/Prose';
+import { locales } from 'lib/i18n/config';
+import { SUPPORTED_CHAINS, getChainIdFromSlug, getChainName, getChainSlug } from 'lib/utils/chains';
+import { getOpenGraphImageUrl } from 'lib/utils/og';
+import type { Metadata, NextPage } from 'next';
+import { useTranslations } from 'next-intl';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import ScamTrackerChainSelect from './ScamTrackerChainSelect';
+import ScamTrackerContent from './ScamTrackerContent';
+import ScamTrackerSearchBox from './ScamTrackerSearchBox';
+
+interface Props {
+  params: {
+    locale: string;
+    slug: string;
+  };
+}
+
+export const dynamic = 'error';
+export const dynamicParams = false;
+
+export const generateStaticParams = () => {
+  const slugs = SUPPORTED_CHAINS.map(getChainSlug);
+  return locales.flatMap((locale) => slugs.map((slug) => ({ locale, slug })));
+};
+
+export const generateMetadata = async ({ params: { locale, slug } }: Props): Promise<Metadata> => {
+  const t = await getTranslations({ locale });
+  const chainId = getChainIdFromSlug(slug);
+  const chainName = getChainName(chainId);
+
+  return {
+    title: t('scam_tracker.meta.title', { chainName }),
+    description: t('common.meta.description', { chainName }),
+    openGraph: {
+      images: getOpenGraphImageUrl(`/scam-tracker/${slug}`, locale),
+    },
+  };
+};
+
+const ScamTrackerPage: NextPage<Props> = ({ params }) => {
+  unstable_setRequestLocale(params.locale);
+  const t = useTranslations();
+
+  const chainId = getChainIdFromSlug(params.slug);
+  const chainName = getChainName(chainId);
+
+  return (
+    <div className="flex flex-col items-center m-auto gap-4 px-4">
+      <div className="flex flex-col items-center w-full">
+        <h1 className="text-4xl md:text-5xl not-prose items-center gap-2 mb-12 text-center">
+          <ChainLogo chainId={chainId} size={56} className="inline align-middle" />{' '}
+          <div className="inline align-middle">{t('scam_tracker.title', { chainName })}</div>
+        </h1>
+      </div>
+      <ScamTrackerSearchBox chainId={chainId} placeholder={t('scam_tracker.placeholder')} />
+      <div className="flex flex-col sm:flex-row items-center gap-2 my-4">
+        <p className="m-0">{t('scam_tracker.different_chain')}:</p>
+        <div className="not-prose shrink-0">
+          <ScamTrackerChainSelect chainId={chainId} />
+        </div>
+      </div>
+      <ScamTrackerContent chainId={chainId} />
+      <Prose className="max-w-3xl">
+        <ChainDescription chainId={chainId} headingElement="h2" />
+        <h2>{t('scam_tracker.what_is_fund_flow.title', { chainName })}</h2>
+        <p>{t('scam_tracker.what_is_fund_flow.content', { chainName })}</p>
+        <h2>{t('scam_tracker.how_to_track.title', { chainName })}</h2>
+        <p>{t('scam_tracker.how_to_track.content', { chainName })}</p>
+      </Prose>
+    </div>
+  );
+};
+
+export default ScamTrackerPage;

i18n.ts

@@ -20,6 +20,7 @@ export default getRequestConfig(async ({ locale }) => {
       networks: (await import(`./locales/${locale}/networks.json`)).default,
       token_approval_checker: (await import(`./locales/${locale}/token_approval_checker.json`)).default,
       merchandise: (await import(`./locales/${locale}/merchandise.json`)).default,
+      scam_tracker: (await import(`./locales/${locale}/scam_tracker.json`)).default,
     },
     defaultTranslationValues,
   };

lib/constants.ts

@@ -31,3 +31,4 @@ export const HARPIE_API_KEY = process.env.HARPIE_API_KEY ?? process.env.NEXT_PUB
 export const WEBACY_API_KEY = process.env.WEBACY_API_KEY ?? process.env.NEXT_PUBLIC_WEBACY_API_KEY;
 export const NEFTURE_API_KEY = process.env.NEFTURE_API_KEY ?? process.env.NEXT_PUBLIC_NEFTURE_API_KEY;
 export const RESERVOIR_API_KEY = process.env.RESERVOIR_API_KEY ?? process.env.NEXT_PUBLIC_RESERVOIR_API_KEY;
+export const GOLD_RUSH_API_KEY = process.env.GOLD_RUSH_API_KEY;