feat(ui): add Stellar Expert explorer link for escrow contracts #44
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
@jahrulezfrancis is attempting to deploy a commit to the Trustless Work Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughAdds a network-aware "View on Stellar Expert" button and tooltip to EscrowDetails, computing and validating a Stellar Expert URL from the contractId and currentNetwork, adjusts layout to place the link above Transaction History, and updates debug logging and minor formatting. Changes
Sequence Diagram(s)Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/components/escrow/EscrowDetails.tsx`:
- Around line 266-276: The JSX currently nests an <a> inside a <button> (in
EscrowDetails, around the stellarExpertUrl block), which is invalid; replace the
outer <button> with an anchor element styled with the same classes so the whole
control is a single interactive element, move the ExternalLink icon inside that
anchor, preserve href={stellarExpertUrl ?? undefined}, target="_blank",
rel="noopener noreferrer" and aria-label="View on Stellar Expert", and ensure
the className and accessible attributes match the original button styling and
behavior.
- Around line 195-221: The DEBUG constant in EscrowDetails is hardcoded to true
causing development console logs (useEffect blocks referencing currentNetwork,
contractId, raw, organized, ledgerBalance, decimals, mismatch) to leak into
production; replace the hardcoded const DEBUG = true with a production-safe
toggle (e.g., derive DEBUG from an environment variable or NODE_ENV such as
const DEBUG = process.env.REACT_APP_DEBUG_ESCROW === 'true' ||
process.env.NODE_ENV !== 'production'), or remove the debug useEffect blocks
entirely, and ensure all console.log calls in those useEffect hooks are gated by
that DEBUG check so they are not executed in production builds.
🧹 Nitpick comments (2)
src/components/escrow/EscrowDetails.tsx (2)
8-8: Inconsistent tooltip imports from different sources.
TooltipContent,TooltipProvider, andTooltipTriggerare imported from@/components/ui/tooltip, butTooltipis imported directly from@radix-ui/react-tooltip. This inconsistency may cause styling or behavior mismatches if the internal tooltip component applies custom styling or props.Suggested fix
-import { TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";import { ExternalLink } from "lucide-react"; -import { Tooltip } from "@radix-ui/react-tooltip";Also applies to: 33-33
82-95: Consider validatingcontractIdformat before building the URL.The URL is constructed directly with
contractIdwithout validating it's a proper Stellar contract ID. WhileisValidStellarExpertUrlguards against invalid networks, a malformed or malicious contract ID could still produce an unexpected URL.Suggested improvement
+// Basic Stellar contract ID validation (56 chars, starts with C) +const isValidContractId = (id: string) => /^C[A-Z0-9]{55}$/.test(id); + const stellarExpertUrl = useMemo(() => { - if (!contractId) return null; + if (!contractId || !isValidContractId(contractId)) return null; const networkPath = currentNetwork === "testnet" ? "testnet" : "public"; return `https://stellar.expert/explorer/${networkPath}/contract/${contractId}`; }, [contractId, currentNetwork]);
Author
|
@techrebelgit , I would appreciate your review |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/components/escrow/EscrowDetails.tsx`:
- Around line 85-98: Render the missing "View on Stellar Expert" link inside the
existing {raw && ...} JSX block (around where the "View Transaction History"
button is rendered) by conditionally outputting an <a> (styled as a button) when
isValidStellarExpertUrl is true; use the computed stellarExpertUrl as the href,
set target="_blank" rel="noopener noreferrer", place it above the "View
Transaction History" control, and add a tooltip and an external-link icon to
match UI conventions (do not wrap an <a> in a <button>, and keep styling
consistent with the other action buttons).
- Around line 35-36: Remove the duplicate ExternalLink import and any unused
Tooltip imports in EscrowDetails.tsx: delete the repeated "ExternalLink" import,
remove the standalone "Tooltip" import from "@radix-ui/react-tooltip", and if
"TooltipContent" and "TooltipTrigger" (from the other import) are not used in
the component JSX, remove them from that import as well so only the actually
used symbols remain.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds a “View on Stellar Expert” button to the Escrow Viewer, linking directly to the currently loaded escrow contract on Stellar Expert.
The button:
Appears only when a valid escrow contract is loaded
Automatically adapts to testnet or mainnet based on the current network
Opens in a new tab for safe external navigation
Includes a tooltip to clarify that the link opens the contract on Stellar Expert
This enhancement improves transparency, reinforces user trust, and aligns the Escrow Viewer with standard Web3 UX expectations.
Screenshot before implementation:
Video after implementation:
Screencast.from.2026-01-21.19-52-00.mp4
Closes #41
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.