CU-86a5j1vnw-NEON3 - Transaction List - Implement Link to Swap Detail…

src/renderer/src/components/Clickable.tsx

@@ -12,7 +12,7 @@ export type TCustomClickableProps = {
   loading?: boolean
   flat?: boolean
   wide?: boolean
-  colorSchema?: 'neon' | 'gray' | 'white' | 'error'
+  colorSchema?: 'neon' | 'gray' | 'white' | 'error' | 'blue'
   iconsOnEdge?: boolean
   textClassName?: string
 }
@@ -31,6 +31,7 @@ const Outline = ({ className, ...props }: TClickableProps) => {
           'border-gray-100': props.colorSchema === 'gray',
           'border-white': props.colorSchema === 'white',
           'border-pink': props.colorSchema === 'error',
+          'border-blue': props.colorSchema === 'blue',
         },
         className
       )}
@@ -135,6 +136,7 @@ const Base = ({
           'text-gray-200': colorSchema === 'gray',
           'text-white': colorSchema === 'white',
           'text-pink': colorSchema === 'error',
+          'text-blue': colorSchema === 'blue',
         },
 
         props.className

src/renderer/src/components/TransactionsTable.tsx

@@ -1,13 +1,14 @@
 import { forwardRef, useImperativeHandle, useMemo } from 'react'
 import { MdContentCopy } from 'react-icons/md'
-import { TbChevronRight } from 'react-icons/tb'
+import { TbChevronRight, TbTransform } from 'react-icons/tb'
 import { hasExplorerService } from '@cityofzion/blockchain-service'
 import { AccountHelper } from '@renderer/helpers/AccountHelper'
 import { StringHelper } from '@renderer/helpers/StringHelper'
 import { StyleHelper } from '@renderer/helpers/StyleHelper'
 import { UtilsHelper } from '@renderer/helpers/UtilsHelper'
-import { usePendingTransactionsSelector } from '@renderer/hooks/useAuthSelector'
+import { usePendingTransactionsSelector, useSwapRecordsSelector } from '@renderer/hooks/useAuthSelector'
 import { useInfiniteScroll } from '@renderer/hooks/useInfiniteScroll'
+import { useModalNavigate } from '@renderer/hooks/useModalRouter'
 import { useTokenTransfers } from '@renderer/hooks/useTokenTransfers'
 import { bsAggregator } from '@renderer/libs/blockchainService'
 import { getI18next } from '@renderer/libs/i18next'
@@ -36,6 +37,8 @@ export const TransactionsTable = forwardRef<HTMLDivElement, TTransactionListProp
     const { aggregatedData, fetchNextPage, isLoading } = useTokenTransfers({ accounts })
 
     const { pendingTransactions } = usePendingTransactionsSelector()
+    const { swapRecords } = useSwapRecordsSelector()
+    const { modalNavigate } = useModalNavigate()
 
     const { handleScroll, ref: scrollRef } = useInfiniteScroll<HTMLDivElement>(fetchNextPage)
 
@@ -80,18 +83,45 @@ export const TransactionsTable = forwardRef<HTMLDivElement, TTransactionListProp
               variant="text-slim"
               colorSchema="white"
               clickableProps={{ className: 'text-xs' }}
-              onClick={() => UtilsHelper.copyToClipboard(info.row.original.to ?? '')}
+              onClick={event => {
+                event.stopPropagation()
+                UtilsHelper.copyToClipboard(info.row.original.to ?? '')
+              }}
             />
           ),
           id: 'to',
           header: t('components:transactionsTable.to'),
         }),
         columnHelper.display({
           id: 'actions',
-          cell: () => <TbChevronRight className="w-4 h-4 my-2 text-gray-300" />,
+          cell: info => {
+            const swapRecord = swapRecords.find(
+              swapRecord =>
+                swapRecord.txFrom &&
+                UtilsHelper.normalizeHash(swapRecord.txFrom) === UtilsHelper.normalizeHash(info.row.original.hash)
+            )
+
+            return (
+              <div className="flex gap-5 justify-end">
+                {swapRecord && (
+                  <Button
+                    variant="text-slim"
+                    label="Swap"
+                    colorSchema="blue"
+                    leftIcon={<TbTransform />}
+                    onClick={event => {
+                      event.stopPropagation()
+                      modalNavigate('swap-details', { state: { swapRecord } })
+                    }}
+                  />
+                )}
+                <TbChevronRight className="w-4 h-4 my-2 text-gray-300" />
+              </div>
+            )
+          },
         }),
       ],
-      [showSimplified]
+      [modalNavigate, showSimplified, swapRecords]
     )
 
     const allTransfers = useMemo(
@@ -154,12 +184,11 @@ export const TransactionsTable = forwardRef<HTMLDivElement, TTransactionListProp
                 >
                   {row.getVisibleCells().map(cell => (
                     <Table.Cell
-                      className={StyleHelper.mergeStyles('truncate', {
-                        'cursor-pointer': cell.column.id !== 'to',
+                      className={StyleHelper.mergeStyles('truncate cursor-pointer', {
                         'cursor-not-allowed': row.original.isPending,
                       })}
                       key={cell.id}
-                      onClick={cell.column.id !== 'to' ? handleClick.bind(null, row.original) : undefined}
+                      onClick={handleClick.bind(null, row.original)}
                     >
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </Table.Cell>

src/renderer/src/hooks/useAuthSelector.ts

@@ -15,3 +15,11 @@ export const usePendingTransactionsSelector = () => {
     pendingTransactionsRef: ref,
   }
 }
+
+export const useSwapRecordsSelector = () => {
+  const { ref, value } = useAppSelector(state => state.auth.data.swapRecords)
+  return {
+    swapRecords: value,
+    swapRecordsRef: ref,
+  }
+}