transactions - new page

components/Layout/Header/index.js

@@ -157,7 +157,7 @@ export default function Header({
 
   const signinWithWallet = (wallet) => {
     //redirect to account, if user is on the account page
-    setSignRequest(router.pathname === '/account/[[...id]]' ? { wallet, redirect: 'account' } : { wallet })
+    setSignRequest(router.pathname.startsWith('/account') ? { wallet, redirect: 'account' } : { wallet })
   }
 
   const bithomp = server.includes('bithomp')

components/Layout/SearchBlock.js

@@ -298,6 +298,11 @@ export default function SearchBlock({ searchPlaceholderText, tab = null, userDat
         return
       }
 
+      if (tab === 'transactions') {
+        router.push('/account/' + encodeURI(searchFor) + '/transactions' + addParams)
+        return
+      }
+
       router.push('/account/' + encodeURI(searchFor) + addParams)
       return
     }
@@ -337,6 +342,8 @@ export default function SearchBlock({ searchPlaceholderText, tab = null, userDat
       ['amm', 'account', 'nft', 'nfts', 'nft-offer', 'nft-offers', 'transaction', 'nft-volumes', 'object'].includes(tab)
     ) {
       return t('explorer.header.' + tab)
+    } else if (tab === 'transactions') {
+      return t("explorer.menu.transactions")
     }
     return ''
   }

components/Transactions/FiatRateContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react'
+
+export const TxFiatRateContext = createContext(0)
+
+export const useTxFiatRate = () => {
+  return useContext(TxFiatRateContext)
+}
+
+

components/Transactions/TransactionRowAMM.js

@@ -0,0 +1,15 @@
+import { TransactionRowCard } from './TransactionRowCard'
+
+export const TransactionRowAMM = ({ tx, address, index, selectedCurrency}) => {
+
+  return (
+    <TransactionRowCard
+      data={tx}
+      address={address}
+      index={index}
+      selectedCurrency={selectedCurrency}
+    >
+      {/* AMM */}
+    </TransactionRowCard>
+  )
+}

components/Transactions/TransactionRowAccountDelete.js

@@ -0,0 +1,47 @@
+import { TransactionRowCard } from './TransactionRowCard'
+import { addressUsernameOrServiceLink, amountFormat, nativeCurrencyToFiat } from '../../utils/format'
+import { FiDownload, FiUpload } from 'react-icons/fi'
+import { useTxFiatRate } from './FiatRateContext'
+
+export const TransactionRowAccountDelete = ({ tx, address, index, selectedCurrency}) => {
+  const pageFiatRate = useTxFiatRate()
+
+  const { outcome, specification } = tx
+
+  return (
+    <TransactionRowCard
+      data={tx}
+      address={address}
+      index={index}
+      selectedCurrency={selectedCurrency}
+    >
+      <div className="flex items-center gap-1">
+        {specification?.destination?.address === address ? (
+          <>              
+            <FiDownload style={{ stroke: 'green', fontSize: 16 }}/>
+            <span>
+              {addressUsernameOrServiceLink(specification?.source, 'address')}
+            </span>
+          </>
+        ) : (
+          <>
+            <FiUpload style={{ stroke: 'red', fontSize: 16 }}/>
+            <span>
+              {addressUsernameOrServiceLink(specification?.destination, 'address')}
+            </span>
+          </>
+        )}
+      </div>
+      {outcome?.deliveredAmount && (
+      <div>
+        <span className="bold">Delivered amount: </span>
+          <span className="green">{amountFormat(outcome?.deliveredAmount, { precise: 'nice' })}</span>
+          {nativeCurrencyToFiat({
+            amount: outcome?.deliveredAmount,
+            selectedCurrency,
+            fiatRate: pageFiatRate
+          })}
+      </div>)}
+    </TransactionRowCard>
+  )
+}

components/Transactions/TransactionRowAccountSet.js

@@ -0,0 +1,119 @@
+import { TransactionRowCard } from './TransactionRowCard'
+import { nativeCurrency } from '../../utils'
+
+export const TransactionRowAccountSet = ({ tx, address, index, selectedCurrency}) => {
+
+  const { specification } = tx
+
+  return (
+    <TransactionRowCard
+      data={tx}
+      address={address}
+      index={index}
+      selectedCurrency={selectedCurrency}
+    >
+      {specification.defaultRipple !== undefined && (
+        <div>
+          <span>Default ripple: </span>
+          <span className="bold orange">{specification.defaultRipple ? 'enabled' : 'disabled'}</span>
+        </div>
+      )}
+      {specification.disallowXRP !== undefined && (
+        <div>
+          <span>Incoming {nativeCurrency}: </span>
+          <span className="bold">{specification.disallowXRP ? 'disallow' : 'allow'}</span>
+        </div>
+      )}
+      {specification.requireDestTag !== undefined && (
+        <div>
+          <span>Destination tag: </span>
+          <span className="bold orange">{specification.requireDestTag ? 'require' : "don't require"}</span>
+        </div>
+      )}
+      {specification.disableMaster !== undefined && (
+        <div>
+          <span>Master key: </span>
+          <span className="bold red">{specification.disableMaster ? 'disabled' : 'enabled'}</span>
+        </div>
+      )}
+      {specification.noFreeze && (
+        <div>
+          <span>No freeze: </span>
+          <span className="bold">enabled</span>
+        </div>
+      )}
+      {specification.depositAuth !== undefined && (
+        <div>
+          <span>Deposit authorization: </span>
+          <span className="bold">{specification.depositAuth ? 'enabled' : 'disabled'}</span>
+        </div>
+      )}
+      {specification.requireAuth !== undefined && (
+        <div>
+          <span>Require authorization: </span>
+          <span className="bold">{specification.requireAuth ? 'enabled' : 'disabled'}</span>
+        </div>
+      )}
+      {specification.disallowIncomingCheck !== undefined && (
+        <div>
+          <span>Incoming check: </span>
+          <span className="bold">{specification.disallowIncomingCheck ? 'disallow' : 'allow'}</span>
+        </div>
+      )}
+      {specification.disallowIncomingPayChan !== undefined && (
+        <div>
+          <span>Incoming payment channel: </span>
+          <span className="bold">{specification.disallowIncomingPayChan ? 'disallow' : 'allow'}</span>
+        </div>
+      )}
+      {specification.disallowIncomingNFTokenOffer !== undefined && (
+        <div>
+          <span>Incoming NFT offer: </span>
+          <span className="bold">{specification.disallowIncomingNFTokenOffer ? 'disallow' : 'allow'}</span>
+        </div>
+      )}
+      {specification.disallowIncomingTrustline !== undefined && (
+        <div>
+          <span>Incoming trust line: </span>
+          <span className="bold">{specification.disallowIncomingTrustline ? 'disallow' : 'allow'}</span>
+        </div>
+      )}
+      {specification.enableTransactionIDTracking !== undefined && (
+        <div>
+          <span>Transaction ID tracking: </span>
+          <span className="bold">{specification.enableTransactionIDTracking ? 'enabled' : 'disabled'}</span>
+        </div>
+      )}
+      {specification.globalFreeze !== undefined && (
+        <div>
+          <span>Global freeze: </span>
+          <span className="bold">{specification.globalFreeze ? 'enabled' : 'disabled'}</span>
+        </div>
+      )}
+      {specification.authorizedMinter !== undefined && (
+        <div>
+          <span>Authorized minter: </span>
+          <span className="bold">{specification.authorizedMinter ? 'enabled' : 'disabled'}</span>
+        </div>
+      )}
+      {tx.NFTokenMinter !== undefined && (
+        <div>
+          <span>NFT minter: </span>
+          <span className="bold">{specification.nftokenMinter || <span className="orange">removed</span>}</span>
+        </div>
+      )}
+      {specification.allowTrustLineClawback !== undefined && (
+        <div>
+          <span>Trust line Clawback: </span>
+          <span className="bold">{specification.allowTrustLineClawback ? 'allowed' : 'disallow'}</span>
+        </div>
+      )}
+      {specification.disallowIncomingRemit !== undefined && (
+        <div>
+          <span>Incoming Remit: </span>
+          <span className="bold">{specification.disallowIncomingRemit ? 'disallow' : 'allow'}</span>
+        </div>
+      )}
+    </TransactionRowCard>
+  )
+}

components/Transactions/TransactionRowCard.js

@@ -0,0 +1,111 @@
+import { amountFormat, dateFormat, nativeCurrencyToFiat, timeFormat } from '../../utils/format'
+import { useEffect, useState } from 'react'
+import { fetchHistoricalRate } from '../../utils/common'
+import { TxFiatRateContext } from './FiatRateContext'
+import { LinkTx } from '../../utils/links'
+import { errorCodeDescription, shortErrorCode } from '../../utils/transaction'
+import { useWidth } from '../../utils'
+import { FiCalendar, FiClock } from 'react-icons/fi'
+import { FaArrowRightArrowLeft } from 'react-icons/fa6'
+
+export const TransactionRowCard = ({ data, index, txTypeSpecial, children, selectedCurrency }) => {
+  const width = useWidth()
+  const { specification, tx, outcome } = data
+  const date = dateFormat(tx.date + 946684800)
+  const time = timeFormat(tx.date + 946684800)
+  const memos = specification?.memos
+  const isSuccessful = outcome?.result == 'tesSUCCESS'
+
+  const [pageFiatRate, setPageFiatRate] = useState(0)
+
+  useEffect(() => {
+    if (!selectedCurrency || !outcome?.ledgerTimestamp) return
+    fetchHistoricalRate({
+      timestamp: outcome.ledgerTimestamp * 1000,
+      selectedCurrency,
+      setPageFiatRate
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCurrency, outcome?.ledgerTimestamp])
+
+  return (
+    <tr
+      index={index}
+      style={{
+        background: !isSuccessful ? 'repeating-linear-gradient(45deg, #f9e3b9, #f9e3b9 10px, #fff 10px, #fff 20px)' : ''
+      }}
+    >
+      <td className="bold center" style={{ width: 10 }}>
+        {index + 1}
+      </td>
+      <td className="left" style={{ width: 70 }}>
+        <span className="flex items-center gap-1" suppressHydrationWarning>
+          <FiCalendar style={{ stroke: '#666' }} /> {date}
+        </span>
+        <span className="flex items-center gap-1" suppressHydrationWarning>
+          <FiClock style={{ stroke: '#666' }} /> {time}
+        </span>
+      </td>
+      <td className="left" style={{ maxWidth: width > 600 ? 600 : '100%', wordBreak: 'break-word' }}>
+        <span className="flex items-center gap-1">
+          <FaArrowRightArrowLeft style={{ stroke: '#666', color: '#666' }} />
+          {width > 600 ? <LinkTx tx={tx.hash}>{tx.hash}</LinkTx> : <LinkTx tx={tx.hash} short={10} />}
+        </span>
+        <span>Type: </span>
+        <span className="bold">{txTypeSpecial || tx?.TransactionType}</span>
+        <br />
+        <TxFiatRateContext.Provider value={pageFiatRate}>{children}</TxFiatRateContext.Provider>
+        {outcome && !isSuccessful && (
+          <>
+            <span className="bold">Failure: </span>
+            <span className="red bold">{shortErrorCode(outcome.result)}</span>
+            <br />
+            <span className="bold">Description: </span>
+            <span className="orange bold">{errorCodeDescription(outcome.result)}</span>
+            <br />
+          </>
+        )}
+        <span>Fee:</span>
+        <span className="bold">{amountFormat(tx.Fee)}</span>
+        <span>
+          {nativeCurrencyToFiat({ amount: tx.Fee, selectedCurrency, fiatRate: pageFiatRate })}
+        </span>
+        <br />
+        {tx.DestinationTag && (
+          <>
+            <span className="gray">Destination tag: {tx.DestinationTag}</span>
+            <br />
+          </>
+        )}
+        {tx.SourceTag && (
+          <>
+            <span className="gray">Source tag: {tx.SourceTag}</span>
+            <br />
+          </>
+        )}
+        {memos && memos.length > 0 && (
+          <>
+            {memos.map((memo, idx) => (
+              <div key={idx}>
+                {memo.data ? (
+                  <>
+                    <span className="bold">Memo{memos.length > 1 ? ` (${idx + 1})` : ''}:</span>
+                    <span className="gray"> {memo.data}</span>
+                  </>
+                ) : (
+                  <>
+                    <span className="bold">
+                      {memo.type}
+                      {memos.length > 1 ? ` (${idx + 1})` : ''}:
+                    </span>
+                    <span className="gray"> {memo.format}</span>
+                  </>
+                )}
+              </div>
+            ))}
+          </>
+        )}
+      </td>
+    </tr>
+  )
+}

components/Transactions/TransactionRowCheck.js

@@ -0,0 +1,37 @@
+import { TransactionRowCard } from './TransactionRowCard'
+import { amountFormat, nativeCurrencyToFiat, addressUsernameOrServiceLink } from '../../utils/format'
+import { useTxFiatRate } from './FiatRateContext'
+
+export const TransactionRowCheck = ({ tx, address, index, selectedCurrency}) => {
+  const pageFiatRate = useTxFiatRate()
+
+  const { outcome } = tx
+
+  const checkChanges = outcome?.checkChanges
+
+  return (
+    <TransactionRowCard
+      data={tx}
+      address={address}
+      index={index}
+      selectedCurrency={selectedCurrency}
+    >
+      {checkChanges.sendMax && (
+        <div>
+          <span>Max amount: </span>
+          <span>
+            <span className="bold orange">{amountFormat(checkChanges.sendMax)}</span>
+            {checkChanges.sendMax?.issuer && (
+              <>({addressUsernameOrServiceLink(checkChanges.sendMax, 'issuer', { short: true })})</>
+            )}
+            {nativeCurrencyToFiat({
+              amount: checkChanges.sendMax,
+              selectedCurrency,
+              fiatRate: pageFiatRate
+            })}
+          </span>
+        </div>
+      )}
+    </TransactionRowCard>
+  )
+}

components/Transactions/TransactionRowDID.js

@@ -0,0 +1,10 @@
+import { TransactionRowCard } from './TransactionRowCard'
+
+export const TransactionRowDID = ({ tx, address, index, selectedCurrency}) => {
+
+  return (
+    <TransactionRowCard data={tx} address={address} index={index} selectedCurrency={selectedCurrency}>
+      {/* DID */}
+    </TransactionRowCard>
+  )
+}