chore: enhance the graph

- Fix the logic for app call graph where an app can send/receive transactions on behalf of accounts
- Refactor the graph code into a feature

Author: PatrickDinh

src/features/assets/components/asset-link.tsx

@@ -5,7 +5,7 @@ import { PropsWithChildren, useCallback } from 'react'
 import { AssetSummary } from '../models'
 import { AsyncMaybeAtom } from '@/features/common/data/types'
 import { RenderInlineAsyncAtom } from '@/features/common/components/render-inline-async-atom'
-import { CopyButton } from '@/features/common/components/copy-button.tsx'
+import { CopyButton } from '@/features/common/components/copy-button'
 import { toast } from 'react-toastify'
 
 type CommonProps = {

src/features/common/components/copy-button.tsx

@@ -1,6 +1,6 @@
 import { CopyIcon } from 'lucide-react'
 import { Button } from './button'
-import { cn } from '@/features/common/utils.ts'
+import { cn } from '@/features/common/utils'
 
 type Props = {
   onClick: () => void

src/features/explore/pages/explore-page.test.tsx

@@ -2,7 +2,7 @@ import { executeComponentTest } from '@/tests/test-component'
 import { getAllByRole, getByRole, queryAllByRole, render, waitFor } from '@/tests/testing-library'
 import { Atom, createStore } from 'jotai'
 import { describe, expect, it } from 'vitest'
-import { ExplorePage } from './explore-page.tsx'
+import { ExplorePage } from './explore-page'
 import { latestBlocksTitle } from '@/features/blocks/components/latest-blocks'
 import { latestTransactionsTitle } from '@/features/transactions/components/latest-transactions'
 import { blockResultsAtom, syncedRoundAtom } from '@/features/blocks/data'

src/features/groups/components/group-details.tsx

@@ -59,8 +59,8 @@ export function GroupDetails({ group }: Props) {
       <Card className={cn('p-4')}>
         <CardContent className={cn('text-sm space-y-2')}>
           <h1 className={cn('text-2xl text-primary font-bold')}>{transactionsLabel}</h1>
+          <GroupTransactionsViewTabs group={group} />
         </CardContent>
-        <GroupTransactionsViewTabs group={group} />
       </Card>
     </div>
   )

src/features/groups/components/group-transactions-view-tabs.tsx

@@ -1,9 +1,11 @@
 import { cn } from '@/features/common/utils'
 import { OverflowAutoTabsContent, Tabs, TabsList, TabsTrigger } from '@/features/common/components/tabs'
 import { Group } from '../models'
-import { TransactionsGraph } from '@/features/transactions/components/transactions-graph'
+import { TransactionsGraph } from '@/features/transactions-graph'
 import { TransactionsTable } from '@/features/transactions/components/transactions-table'
 import { transactionsTableColumnsWithoutRound } from '@/features/transactions/components/transactions-table-columns'
+import { useMemo } from 'react'
+import { asTransactionsGraphData } from '@/features/transactions-graph/mappers'
 
 type Props = {
   group: Group
@@ -16,6 +18,8 @@ export const groupVisualGraphLabel = 'Graph'
 export const groupVisualTableLabel = 'Table'
 
 export function GroupTransactionsViewTabs({ group }: Props) {
+  const transactionsGraph = useMemo(() => asTransactionsGraphData(group.transactions), [group.transactions])
+
   return (
     <Tabs defaultValue={graphTabId}>
       <TabsList aria-label={groupVisual}>
@@ -27,7 +31,7 @@ export function GroupTransactionsViewTabs({ group }: Props) {
         </TabsTrigger>
       </TabsList>
       <OverflowAutoTabsContent value={graphTabId}>
-        <TransactionsGraph transactions={group.transactions} />
+        <TransactionsGraph transactionsGraphData={transactionsGraph} />
       </OverflowAutoTabsContent>
       <OverflowAutoTabsContent value={tableTabId}>
         <TransactionsTable transactions={group.transactions} columns={transactionsTableColumnsWithoutRound} subRowsExpanded={false} />

src/features/search/components/search.tsx

@@ -15,7 +15,7 @@ import { useSearch } from '../data'
 import { Loader } from 'lucide-react'
 import { Badge } from '@/features/common/components/badge'
 import { useLocationChange } from '@/features/common/hooks/use-location-change'
-import { isMacOs } from '@/utils/is-mac-platform.ts'
+import { isMacOs } from '@/utils/is-mac-platform'
 
 export const searchPlaceholderLabel = `Search by ID or Address ${isMacOs ? '(⌘K)' : '(Ctrl+K)'}`
 export const noSearchResultsMessage = 'No results.'