[Feature] Stellar Explorer Integration (#159)

[Derry255]

Overview

This PR integrates Stellar Explorer links throughout the application to provide users with direct access to blockchain data. It improves transparency and allows quick verification of on-chain activity by adding shortened hashes with copy-to-clipboard functionality, clickable links to contract addresses on Stellar Explorer, wallet addresses with explorer links for verification, and block details with direct explorer references.

Related Issue

Closes #159

Changes

📚 Stellar Explorer Utility Library

• [ADD] lib/stellar/explorer.ts
  • URL generators for transactions, accounts, contracts, ledgers, and assets on stellar.expert
  • truncateHash() and truncateAddress() for shortening hashes and addresses
  • copyToClipboard() for clipboard functionality with fallback support
  • networkFromPassphrase() to convert network passphrases to StellarNetwork type
  • Testnet/Mainnet detection helpers

🧩 Reusable Stellar Explorer Components

• [ADD] components/stellar/ExplorerLink.tsx

  • Base component that opens explorer links in new tabs (target="_blank", rel="noopener noreferrer")
  • Supports network badge display (testnet/mainnet)

• [ADD] components/stellar/TransactionHash.tsx

  • Shortened transaction hashes truncated for readability (6+4 chars)
  • Copy-to-clipboard button with 2-second visual feedback
  • Explorer link to view transaction on Stellar Explorer

• [ADD] components/stellar/ContractAddress.tsx

  • Clickable contract addresses with explorer reference
  • Copy-to-clipboard functionality
  • Optional label prefix

• [ADD] components/stellar/WalletAddress.tsx

  • Wallet addresses with explorer links and copy functionality
  • Shortened display (5+4 chars) with full address on hover

• [ADD] components/stellar/BlockInfo.tsx

  • Block/ledger information with explorer references
  • Optional timestamp display
  • Block icon indicator

• [ADD] components/stellar/index.ts

  • Barrel export for all components

🔗 Integration into Existing Pages

• [MODIFY] components/dashboard/contract-escrow-summary.tsx

  • Replaced plain text escrow_address with ContractAddress component
  • Replaced plain text funding_tx_hash with TransactionHash component
  • Automatic network detection from network_passphrase via networkFromPassphrase()

• [MODIFY] components/wallet-connect.tsx

  • Replaced plain truncated address with WalletAddress component
  • Added explorer link and copy button to wallet display

• [MODIFY] components/wallet-status.tsx

  • Replaced plain truncated address with WalletAddress component
  • Added explorer link and copy button

• [MODIFY] components/freelancer/freelancer-profile.tsx

  • Updated basic static explorer link to use WalletAddress component
  • Added copy-to-clipboard support

Verification Results

Acceptance Criteria	Status
Open Explorer in a New Tab — All links open externally without disrupting the app session	✅
Shortened Hashes — Transaction and address hashes are truncated for readability	✅
Copy-to-Clipboard Functionality — Users can easily copy full hashes and addresses	✅
Testnet/Mainnet Compatibility — Links adapt based on the network environment	✅
npm run lint ✅ completed (existing repo warnings only)	✅
npm run typecheck ✅ passed	✅
npm run build ✅ passed	✅

Notes

• All explorer links use stellar.expert as the explorer service
• Network detection is handled via the networkFromPassphrase() function which maps Stellar network passphrases to the correct explorer URLs
• The components are fully typed with TypeScript and include comprehensive JSDoc documentation

---

[drips-wave]

@Derry255 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits