0xtrails 0.13.2 → 0.14.0

package/src/widget/components/TransactionDetails.tsx

@@ -1,534 +0,0 @@
-import type React from "react"
-import {
-  type IntentTransaction,
-  isDisplayableTransactionHash,
-} from "../../transactions.js"
-import { TokenImage } from "./TokenImage.js"
-import { ChainImage } from "./ChainImage.js"
-import { getExplorerUrlForAddress, getExplorerUrl } from "../../explorer.js"
-import {
-  isNativeToken,
-  isZeroAccount,
-  truncateAddress,
-} from "../../utils/address.js"
-import { formatRawAmount } from "../../utils/format.js"
-import { useTrails } from "../providers/TrailsProvider.js"
-
-interface TransactionDetailsProps {
-  transaction: IntentTransaction
-  className?: string
-}
-
-export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
-  transaction,
-  className = "",
-}) => {
-  const { trailsAppUrl } = useTrails()
-
-  return (
-    <div className={`space-y-2 text-sm ${className}`}>
-      {/* Intent ID */}
-      {transaction.intentId && (
-        <div className="flex justify-between items-center">
-          <span className="text-xs text-gray-600 dark:text-gray-400">
-            Intent ID:
-          </span>
-          <a
-            href={`${trailsAppUrl}/intent/${transaction.intentId}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-xs font-mono text-gray-900 dark:text-gray-100 hover:underline flex items-center gap-1"
-            title="View on Trails"
-          >
-            {truncateAddress(transaction.intentId)}
-            <svg
-              aria-hidden="true"
-              className="w-3 h-3"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-              />
-            </svg>
-          </a>
-        </div>
-      )}
-
-      {/* Deposit Transaction Hash */}
-      {isDisplayableTransactionHash(transaction.depositTransactionHash) &&
-        transaction.originChainId && (
-          <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600 dark:text-gray-400">
-              Deposit Tx:
-            </span>
-            <a
-              href={getExplorerUrl({
-                txHash: transaction.depositTransactionHash,
-                chainId: transaction.originChainId,
-              })}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
-            >
-              <ChainImage chainId={transaction.originChainId} size={16} />
-              {truncateAddress(transaction.depositTransactionHash)}
-              <svg
-                aria-hidden="true"
-                className="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
-          </div>
-        )}
-
-      {/* Refund Transaction Hash */}
-      {isDisplayableTransactionHash(transaction.refundTransactionHash) &&
-        (transaction.refundTransactionChainId || transaction.originChainId) && (
-          <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600 dark:text-gray-400">
-              Refund Tx:
-            </span>
-            <a
-              href={getExplorerUrl({
-                txHash: transaction.refundTransactionHash,
-                chainId:
-                  transaction.refundTransactionChainId ||
-                  transaction.originChainId ||
-                  0,
-              })}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
-            >
-              <ChainImage
-                chainId={
-                  transaction.refundTransactionChainId ||
-                  transaction.originChainId ||
-                  0
-                }
-                size={16}
-              />
-              {truncateAddress(transaction.refundTransactionHash)}
-              <svg
-                aria-hidden="true"
-                className="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
-          </div>
-        )}
-
-      {/* Origin Token - Moved before Origin Intent */}
-      {transaction.originToken && (
-        <div className="flex justify-between items-start">
-          <span className="text-xs text-gray-600 dark:text-gray-400">
-            Origin Token:
-          </span>
-          <div className="text-right">
-            {transaction.originTokenAddress &&
-            !isNativeToken(transaction.originTokenAddress) ? (
-              <a
-                href={getExplorerUrlForAddress({
-                  address: transaction.originTokenAddress,
-                  chainId: transaction.originToken.chainId,
-                })}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-1 justify-end hover:underline text-xs font-mono text-gray-900 dark:text-gray-100"
-              >
-                <TokenImage
-                  symbol={transaction.originToken.symbol}
-                  imageUrl={transaction.originToken.imageUrl}
-                  chainId={transaction.originToken.chainId}
-                  size={16}
-                />
-                <span className="font-mono">
-                  {formatRawAmount(
-                    transaction.originTokenAmount || "0",
-                    transaction.originToken.decimals,
-                  )}{" "}
-                  {transaction.originToken.symbol}
-                </span>
-                <svg
-                  aria-hidden="true"
-                  className="w-3 h-3"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                  />
-                </svg>
-              </a>
-            ) : (
-              <div className="flex items-center gap-1 justify-end text-xs font-mono text-gray-900 dark:text-gray-100">
-                <TokenImage
-                  symbol={transaction.originToken.symbol}
-                  imageUrl={transaction.originToken.imageUrl}
-                  chainId={transaction.originToken.chainId}
-                  size={16}
-                />
-                <span className="font-mono">
-                  {formatRawAmount(
-                    transaction.originTokenAmount || "0",
-                    transaction.originToken.decimals,
-                  )}{" "}
-                  {transaction.originToken.symbol}
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Origin Intent Deposit Tx Hash */}
-      {isDisplayableTransactionHash(transaction.originIntentDepositTxHash) &&
-        transaction.originIntentDepositTxExplorerUrl &&
-        transaction.originChainId && (
-          <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600 dark:text-gray-400">
-              Origin Intent Deposit Tx:
-            </span>
-            <a
-              href={transaction.originIntentDepositTxExplorerUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
-            >
-              <ChainImage chainId={transaction.originChainId} size={16} />
-              {truncateAddress(transaction.originIntentDepositTxHash)}
-              <svg
-                aria-hidden="true"
-                className="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
-          </div>
-        )}
-
-      {/* Destination Intent Deposit Tx Hash */}
-      {isDisplayableTransactionHash(
-        transaction.destinationIntentDepositTxHash,
-      ) &&
-        transaction.destinationIntentDepositTxExplorerUrl &&
-        transaction.destinationChainId && (
-          <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600 dark:text-gray-400">
-              Destination Deposit Tx:
-            </span>
-            <a
-              href={transaction.destinationIntentDepositTxExplorerUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
-            >
-              <ChainImage chainId={transaction.destinationChainId} size={16} />
-              {truncateAddress(transaction.destinationIntentDepositTxHash)}
-              <svg
-                aria-hidden="true"
-                className="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
-          </div>
-        )}
-
-      {/* Origin Intent - Moved after Origin Token */}
-      {transaction.originIntentAddress && (
-        <div className="flex justify-between items-center">
-          <span className="text-xs text-gray-600 dark:text-gray-400">
-            Origin Intent:
-          </span>
-          <a
-            href={getExplorerUrlForAddress({
-              address: transaction.originIntentAddress,
-              chainId:
-                transaction.originChainId ||
-                transaction.originToken?.chainId ||
-                1,
-            })}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
-          >
-            {transaction.originChainId && (
-              <ChainImage chainId={transaction.originChainId} size={16} />
-            )}
-            {truncateAddress(transaction.originIntentAddress)}
-            <svg
-              aria-hidden="true"
-              className="w-3 h-3"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-              />
-            </svg>
-          </a>
-        </div>
-      )}
-
-      {/* Origin Intent Action Tx Hash */}
-      {isDisplayableTransactionHash(transaction.originIntentTxHash) &&
-        transaction.originIntentTxExplorerUrl &&
-        transaction.originChainId && (
-          <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600 dark:text-gray-400">
-              Origin Intent Tx:
-            </span>
-            <a
-              href={transaction.originIntentTxExplorerUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
-            >
-              <ChainImage chainId={transaction.originChainId} size={16} />
-              {truncateAddress(transaction.originIntentTxHash)}
-              <svg
-                aria-hidden="true"
-                className="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
-          </div>
-        )}
-
-      {/* Destination Token - Moved before Destination Intent */}
-      {transaction.destinationToken && (
-        <div className="flex justify-between items-start">
-          <span className="text-xs text-gray-600 dark:text-gray-400">
-            Destination Token:
-          </span>
-          <div className="text-right">
-            {transaction.destinationTokenAddress &&
-            !isNativeToken(transaction.destinationTokenAddress) ? (
-              <a
-                href={getExplorerUrlForAddress({
-                  address: transaction.destinationTokenAddress,
-                  chainId: transaction.destinationToken.chainId,
-                })}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-1 justify-end hover:underline text-xs font-mono text-gray-900 dark:text-gray-100"
-              >
-                <TokenImage
-                  symbol={transaction.destinationToken.symbol}
-                  imageUrl={transaction.destinationToken.imageUrl}
-                  chainId={transaction.destinationToken.chainId}
-                  size={16}
-                />
-                <span className="font-mono">
-                  {formatRawAmount(
-                    transaction.destinationTokenAmount || "0",
-                    transaction.destinationToken.decimals,
-                  )}{" "}
-                  {transaction.destinationToken.symbol}
-                </span>
-                <svg
-                  aria-hidden="true"
-                  className="w-3 h-3"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                  />
-                </svg>
-              </a>
-            ) : (
-              <div className="flex items-center gap-1 justify-end text-xs font-mono text-gray-900 dark:text-gray-100">
-                <TokenImage
-                  symbol={transaction.destinationToken.symbol}
-                  imageUrl={transaction.destinationToken.imageUrl}
-                  chainId={transaction.destinationToken.chainId}
-                  size={16}
-                />
-                <span className="font-mono">
-                  {formatRawAmount(
-                    transaction.destinationTokenAmount || "0",
-                    transaction.destinationToken.decimals,
-                  )}{" "}
-                  {transaction.destinationToken.symbol}
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Destination Intent - Moved after Destination Token */}
-      {transaction.destinationIntentAddress &&
-        transaction.destinationChainId && (
-          <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600 dark:text-gray-400">
-              Destination Intent:
-            </span>
-            <a
-              href={getExplorerUrlForAddress({
-                address: transaction.destinationIntentAddress,
-                chainId: transaction.destinationChainId,
-              })}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
-            >
-              <ChainImage chainId={transaction.destinationChainId} size={16} />
-              {truncateAddress(transaction.destinationIntentAddress)}
-              <svg
-                aria-hidden="true"
-                className="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
-          </div>
-        )}
-
-      {/* Destination To Address */}
-      {transaction.destinationToAddress &&
-        !isZeroAccount(transaction.destinationToAddress) && (
-          <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600 dark:text-gray-400">
-              Destination To Address:
-            </span>
-            <a
-              href={getExplorerUrlForAddress({
-                address: transaction.destinationToAddress,
-                chainId: transaction.destinationChainId || 1,
-              })}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
-            >
-              {transaction.destinationChainId && (
-                <ChainImage
-                  chainId={transaction.destinationChainId}
-                  size={16}
-                />
-              )}
-              {truncateAddress(transaction.destinationToAddress)}
-              <svg
-                aria-hidden="true"
-                className="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
-          </div>
-        )}
-
-      {/* Destination Intent Action Tx Hash */}
-      {isDisplayableTransactionHash(transaction.destinationIntentTxHash) &&
-        transaction.destinationIntentTxExplorerUrl &&
-        transaction.destinationChainId && (
-          <div className="flex justify-between items-center">
-            <span className="text-xs text-gray-600 dark:text-gray-400">
-              Destination Intent Tx:
-            </span>
-            <a
-              href={transaction.destinationIntentTxExplorerUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs font-mono hover:underline flex items-center gap-1 text-gray-900 dark:text-gray-100"
-            >
-              <ChainImage chainId={transaction.destinationChainId} size={16} />
-              {truncateAddress(transaction.destinationIntentTxHash)}
-              <svg
-                aria-hidden="true"
-                className="w-3 h-3"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
-          </div>
-        )}
-    </div>
-  )
-}