feat(synapse-interface): link destination address in transaction (#2353)

* Add destinationAddress prop to pendingBridgeTransaction * Add destinationAddress prop to _TransactionDetails * Use destinationAddress to determine dest explorer link * Rm log * Fix destination address in historical tx * Improve address comparison * Destination address hover
synapsecns · Mar 25, 2024 · fe868cc · fe868cc
1 parent b1df384
commit fe868cc
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 11 deletions.
diff --git a/packages/synapse-interface/components/Activity/Activity.tsx b/packages/synapse-interface/components/Activity/Activity.tsx
@@ -102,7 +102,7 @@ const renderTransaction = (
     <Transaction
       key={transaction?.kappa}
       connectedAddress={viewingAddress}
-      destinationAddress={transaction?.fromInfo?.address as Address}
+      destinationAddress={transaction?.toInfo?.address as Address}
       startedTimestamp={transaction?.fromInfo?.time}
       completedTimestamp={transaction?.toInfo?.time}
       transactionHash={transaction?.fromInfo?.txnHash}

diff --git a/packages/synapse-interface/components/Portfolio/Transaction/components/Completed.tsx b/packages/synapse-interface/components/Portfolio/Transaction/components/Completed.tsx
@@ -2,7 +2,7 @@ import { Address } from 'viem'
 import { shortenAddress } from '@/utils/shortenAddress'
 import { convertUnixTimestampToMonthAndDate } from '@/utils/time'
 import { isTimestampToday } from '@/utils/time'
-import { isValidAddress } from '@/utils/isValidAddress'
+import { isValidAddress, getValidAddress } from '@/utils/isValidAddress'
 
 export const Completed = ({
   transactionCompletedTime,
@@ -22,27 +22,30 @@ export const Completed = ({
   const isToday: boolean = isTimestampToday(transactionCompletedTime)
 
   const isDestinationSender: boolean =
-    String(connectedAddress) === String(destinationAddress)
+    getValidAddress(connectedAddress) === getValidAddress(destinationAddress)
 
   const isDestinationValid: boolean = isValidAddress(destinationAddress)
 
   return (
     <div
       data-test-id="completed"
-      className="flex flex-col text-right text-[#C2C2D6] gap-1 text-sm whitespace-nowrap"
       onClick={handleExplorerClick}
+      className={`
+        flex flex-col text-right gap-1 text-sm whitespace-nowrap
+        ${
+          isToday
+            ? 'text-[#3BDD77] hover:underline cursor-pointer'
+            : 'text-[#C2C2D6] cursor-pointer hover:underline'
+        }
+        `}
     >
       {isDestinationValid && !isDestinationSender && (
         <div>to {shortenAddress(destinationAddress)} </div>
       )}
       {isToday ? (
-        <div className="text-[#3BDD77] hover:underline cursor-pointer">
-          Today
-        </div>
+        <div>Today</div>
       ) : (
-        <div className="cursor-pointer hover:underline">
-          {formattedTime ? formattedTime : 'Completed'}
-        </div>
+        <div>{formattedTime ? formattedTime : 'Completed'}</div>
       )}
     </div>
   )

diff --git a/packages/synapse-interface/components/_Transaction/_Transaction.tsx b/packages/synapse-interface/components/_Transaction/_Transaction.tsx
@@ -20,6 +20,7 @@ import { useIsTxReverted } from './helpers/useIsTxReverted'
 
 interface _TransactionProps {
   connectedAddress: string
+  destinationAddress: Address | null
   originValue: number
   originChain: Chain
   originToken: Token
@@ -37,6 +38,7 @@ interface _TransactionProps {
 /** TODO: Update naming after refactoring existing Activity / Transaction flow */
 export const _Transaction = ({
   connectedAddress,
+  destinationAddress,
   originValue,
   originChain,
   originToken,
@@ -62,7 +64,7 @@ export const _Transaction = ({
   )
   const [destExplorerAddressLink, destExplorerName] = getExplorerAddressLink(
     destinationChain?.id,
-    connectedAddress
+    destinationAddress ?? connectedAddress
   )
 
   const {

diff --git a/packages/synapse-interface/components/_Transaction/_Transactions.tsx b/packages/synapse-interface/components/_Transaction/_Transactions.tsx
@@ -46,6 +46,7 @@ export const _Transactions = ({
             <_Transaction
               key={tx.timestamp}
               connectedAddress={connectedAddress}
+              destinationAddress={tx.destinationAddress}
               originValue={Number(tx.originValue)}
               originChain={originChain}
               originToken={originToken}

diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx
@@ -372,6 +372,7 @@ const StateManagedBridge = () => {
         isSubmitted: false,
         estimatedTime: bridgeQuote.estimatedTime,
         bridgeModuleName: bridgeQuote.bridgeModuleName,
+        destinationAddress: destinationAddress,
       })
     )
     try {

diff --git a/packages/synapse-interface/slices/_transactions/reducer.ts b/packages/synapse-interface/slices/_transactions/reducer.ts
@@ -1,10 +1,12 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit'
+import { Address } from 'viem'
 
 import { Chain, Token } from '@/utils/types'
 
 /** TODO: Rename entire slice once done refactoring prior Activity flow */
 export interface _TransactionDetails {
   address: string
+  destinationAddress: Address | null
   originChain: Chain
   originToken: Token
   destinationChain: Chain

diff --git a/packages/synapse-interface/slices/transactions/actions.ts b/packages/synapse-interface/slices/transactions/actions.ts
@@ -1,4 +1,5 @@
 import { createAction } from '@reduxjs/toolkit'
+import { Address } from 'viem'
 
 import { BridgeTransaction } from '../api/generated'
 import { Chain, Token } from '@/utils/types'
@@ -15,6 +16,7 @@ export interface PendingBridgeTransaction {
   isSubmitted: boolean
   estimatedTime: number
   bridgeModuleName: string
+  destinationAddress: Address | null
 }
 
 export const addPendingBridgeTransaction =

diff --git a/packages/synapse-interface/utils/hooks/use_TransactionsListener.ts b/packages/synapse-interface/utils/hooks/use_TransactionsListener.ts
@@ -42,6 +42,7 @@ export const use_TransactionsListener = () => {
           dispatch(
             addTransaction({
               address,
+              destinationAddress: tx.destinationAddress,
               originTxHash: tx.transactionHash,
               originValue: tx.originValue,
               originChain: tx.originChain,