feat: Share receipt to social + native sharing by C0mberry · Pull Request #874 · solana-foundation/explorer

C0mberry · 2026-03-10T13:48:16Z

Description

adding share to x btn
adding native sharing
fixing share btn height

Type of change

Bug fix
New feature

Screenshots

Desktop	Mobile

Testing

Open http://localhost:3000/tx/4izwTCUeRGAMGReXeXDumiBzAgXPGz6KzccacCf1WU5YXCCpSDjAQT7J6D6dY45bL1NW9AiqwCuWEnz3hbGtZS2y?view=receipt on desktop
See share popup
Open the same link on mobile
See native sharing menu

Related Issues

HOO-320
HOO-319

Checklist

My code follows the project's style guidelines
All tests pass locally and in CI
I have run build:info script to update build information
CI/CD checks pass
I have included screenshots for protocol screens (if applicable)

* share to X init * init share native * removed native sharing for desctop and fixed btn height * move back native sharing desktop * add sentry error handling * fix tests * add native share for mobile only * codestyle update

vercel · 2026-03-10T13:48:28Z

@C0mberry is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

greptile-apps · 2026-03-10T13:50:30Z

Greptile Summary

This PR adds social and native sharing capabilities to the transaction receipt view. On mobile devices (detected via pointer: coarse + hover: none media queries plus Web Share API presence), a native OS share button is shown. On desktop, a popover expands to offer "Share on X" and "Copy Link" options. It also extracts a server.ts barrel from the receipt feature for use by the OG image route, and updates the route's test suite accordingly.

Key changes:

useCanNativeShare: New hook that correctly gates on both navigator.share and navigator.canShare availability alongside mobile media-query heuristics, preventing broken UX on older iOS versions that lacked canShare.
handleNativeShare: Async share handler with AbortError suppression and re-throw for unexpected errors; includes title metadata for richer share-sheet previews.
ShareOnXShareItem: New component that opens the X intent URL via globalThis.open with noreferrer; the if (win) onShare?.() analytics guard is still at risk of never firing in modern browsers — this was discussed at length in prior review threads and has not yet been fully resolved.
server.ts barrel: Clean separation of server-only exports; fixes test isolation by removing client-bundle dependencies from the OG route mock.
Analytics: Two new tracking events (rcpt_share_native, rcpt_share_on_x) added consistently with the existing pattern and GA4 length enforcement.

Confidence Score: 3/5

Core sharing functionality works correctly, but X analytics tracking reliability remains unresolved from prior review threads.
The feature itself is solid — useCanNativeShare is well-guarded, the server barrel refactor is clean, and tests pass. However, the rcpt_share_on_x analytics event is likely silently dropped in modern Chrome and Firefox because noreferrer in window.open features implies noopener, causing the return value to be null and the if (win) guard to always be false. This was flagged in depth in prior threads but the fix (removing noopener from the original noopener,noreferrer features string) may not fully resolve it in all browsers. The PR is mergeable but the analytics gap should be confirmed before shipping.
app/features/receipt/ui/ShareOnXShareItem.tsx — verify window.open return value behaviour with noreferrer across target browsers to confirm analytics fires correctly.

Important Files Changed

Filename	Overview
app/features/receipt/ui/ReceiptView.tsx	Core share logic added; `handleNativeShare` re-throws non-AbortErrors as unhandled promise rejections with no user feedback, and the `if (!navigator.canShare?.(shareData)) return` silently fails with no user indication — both flagged in previous threads and not yet fully addressed.
app/features/receipt/ui/ShareOnXShareItem.tsx	Opens X intent URL via `window.open` with `noreferrer`; in modern browsers (Chrome 88+, Firefox 79+) `noreferrer` implies `noopener` and causes `window.open` to return `null`, so the `if (win) onShare?.()` analytics guard will never be satisfied — discussed in prior threads.
app/shared/lib/use-can-native-share.ts	Correctly checks both `navigator.share` and `navigator.canShare` (addressing prior iOS 12–15.3 thread), plus media-query heuristics for mobile detection; initialized to `false` for SSR safety.
app/features/receipt/server.ts	New server-only barrel file cleanly re-exports symbols needed by the OG image route; breaks the dependency on the client-safe main barrel and aligns with Next.js edge-runtime constraints.
app/og/receipt/[signature]/route.tsx	Trivial import path change from `@features/receipt` to `@features/receipt/server`; no behavioural changes, correctly aligns with the new server barrel.
app/og/receipt/[signature]/tests/route.spec.ts	Mock target updated to `@features/receipt/server`; Sentry mock added to handle transitive imports from `createReceipt`; removed unused mock entries for deleted exports; tests remain comprehensive.
app/shared/lib/analytics/receipt.ts	Two new analytics events added (`rcpt_share_native`, `rcpt_share_on_x`) with correct GA4 length enforcement; clean and consistent with existing patterns.
app/features/receipt/ui/PopoverButton.tsx	Added optional `className` prop correctly typed and forwarded to the inner `Button`; non-breaking change.
app/features/receipt/ui/icons/XIcon.tsx	Correctly sized inline SVG of the X logo with `aria-hidden` for accessibility; no issues.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[ReceiptView mounts] --> B{useCanNativeShare}
    B -->|navigator.share + canShare + isMobileDevice| C[canNativeShare = true]
    B -->|otherwise| D[canNativeShare = false]

    C --> E[Render native Share button]
    D --> F[Render PopoverButton]

    E -->|onClick| G[handleNativeShare]
    G --> H{navigator.canShare shareData ?}
    H -->|false / undefined| I[silent return]
    H -->|true| J[navigator.share url + title]
    J -->|resolved| K[trackShareNative]
    J -->|AbortError| L[silent return]
    J -->|other error| M[throw → unhandled rejection]

    F --> N[Share Popover opens]
    N --> O[ShareOnXShareItem]
    N --> P[CopyLinkShareItem]

    O -->|handleClick| Q[globalThis.open x.com intent noreferrer]
    Q -->|win != null| R[trackShareOnX]
    Q -->|win == null popup blocked or noopener| S[analytics skipped]

    P -->|onCopy| T[trackShareCopyLink]

_{Last reviewed commit: 284783b}

app/features/receipt/ui/PopoverButton.tsx

app/features/receipt/ui/ShareOnXShareItem.tsx

app/features/receipt/ui/ReceiptView.tsx

rogaldh · 2026-03-10T14:05:54Z

@greptile-apps issue was addressed

app/features/receipt/ui/ShareOnXShareItem.tsx

app/features/receipt/ui/ReceiptView.tsx

C0mberry · 2026-03-10T18:00:05Z

@greptile-apps issue was addressed

rogaldh · 2026-03-10T18:01:58Z

app/features/receipt/ui/ReceiptView.tsx

+
+    useEffect(() => {
+        const hasCoarsePointer = window.matchMedia('(pointer: coarse)').matches;
+        const hasNoHover = window.matchMedia('(hover: none)').matches;


WDYT about moving this code into a separate hook? That should allow using it at other palces

suggestion: I agree that this should at least be extracted to a local hook, like useCanNativeShare, because having raw implementation details in a UI component is inappropriate. Additionally, the heuristic itself is undocumented. It would be better to include either comments or meaningful helper function names, such as isMobileDevice

app/features/receipt/ui/ShareOnXShareItem.tsx

app/features/receipt/ui/ReceiptView.tsx

askov · 2026-03-11T07:28:53Z

app/features/receipt/ui/ReceiptView.tsx

+
+    useEffect(() => {
+        const hasCoarsePointer = window.matchMedia('(pointer: coarse)').matches;
+        const hasNoHover = window.matchMedia('(hover: none)').matches;


suggestion: I agree that this should at least be extracted to a local hook, like useCanNativeShare, because having raw implementation details in a UI component is inappropriate. Additionally, the heuristic itself is undocumented. It would be better to include either comments or meaningful helper function names, such as isMobileDevice

askov · 2026-03-11T07:31:14Z

app/features/receipt/ui/ReceiptView.tsx

+            receiptAnalytics.trackShareNative(signature);
+        } catch (e) {
+            if (e instanceof Error && e.name === 'AbortError') return;
+            Sentry.captureException(e);


thought: I don't think this kind of error deserves sentry logging, but the decision is yours. Wdyt @rogaldh?

Agreed. Too harsh for the inability to share. To inform the user would be enough. We have a toast for that

askov · 2026-03-11T07:50:41Z

app/og/receipt/[signature]/__tests__/route.spec.ts

 import { NextRequest } from 'next/server';
 import { beforeEach, describe, expect, it, vi } from 'vitest';

+vi.mock('@sentry/nextjs', () => ({


thougth: This isn't really an issue, but it might not be clear for everyone. According to FSD, everything is correct; however, barrel imports can leak unwanted elements in the development environment. Perhaps, in addition to the index, we could have something like server.ts to support separate feature API surfaces. Then, the import for server routes could look like this: import { X } from "@features/receipt/server"

Wdyt @rogaldh ?

I also agree. Having everything exported to a single place mixes client and server code. That's why we have to mock something that is not even used.
Let's split the backend endpoint code into a separate file, server.ts.

I do not like barrel files very much, but according to the FSD, it seems reasonable and also allows us to expose a "public" API for the feature.

TY @askov for noticing this.

Now we can remove this sentry mock, it does nothing

askov · 2026-03-11T07:53:27Z

app/features/receipt/ui/icons/XIcon.tsx

@@ -0,0 +1,10 @@
+export function XIcon() {


nit: Typically, such icons should have aria-hidden attributes since they're purely decorative. However, I'm not sure if the other icons in our project follow this recommendation.

That is fair, but AFAIK, event react-feathers icons do not have this attribute. Pure SVGs, same as this. So this should be applied to each icon specifically.
I do like the suggestions. Let's maybe implement a wrapper or similar solution to apply this attribute to make icons a11y-friendly. @C0mberry @askov thoughts?

C0mberry · 2026-03-11T17:01:19Z

@greptile-apps issue was addressed

app/features/receipt/ui/ReceiptView.tsx

C0mberry · 2026-03-11T17:25:43Z

@greptile-apps issue was addressed

feat: Share receipt to social

414c341

* share to X init * init share native * removed native sharing for desctop and fixed btn height * move back native sharing desktop * add sentry error handling * fix tests * add native share for mobile only * codestyle update

greptile-apps bot reviewed Mar 10, 2026

View reviewed changes

app/features/receipt/ui/PopoverButton.tsx Outdated Show resolved Hide resolved

app/features/receipt/ui/ShareOnXShareItem.tsx Outdated Show resolved Hide resolved

app/features/receipt/ui/ReceiptView.tsx Show resolved Hide resolved

resolve comments

b1c20eb

greptile-apps bot reviewed Mar 10, 2026

View reviewed changes

app/features/receipt/ui/ShareOnXShareItem.tsx Show resolved Hide resolved

app/features/receipt/ui/ReceiptView.tsx Show resolved Hide resolved

rogaldh and others added 2 commits March 10, 2026 14:09

chore: optimize icon with svgo

c84504c

resolve more comments

d02a658

rogaldh reviewed Mar 10, 2026

View reviewed changes

greptile-apps bot reviewed Mar 10, 2026

View reviewed changes

app/features/receipt/ui/ShareOnXShareItem.tsx Outdated Show resolved Hide resolved

app/features/receipt/ui/ReceiptView.tsx Outdated Show resolved Hide resolved

format fix

e39b3bc

askov reviewed Mar 11, 2026

View reviewed changes

resolve comments

623dd0c

greptile-apps bot reviewed Mar 11, 2026

View reviewed changes

app/features/receipt/ui/ReceiptView.tsx Show resolved Hide resolved

resolve comments

284783b

C0mberry requested review from askov and rogaldh March 12, 2026 12:18

Conversation

C0mberry commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Screenshots

Testing

Related Issues

Checklist

Uh oh!

vercel bot commented Mar 10, 2026

Uh oh!

greptile-apps bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Flowchart

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rogaldh commented Mar 10, 2026

Uh oh!

Uh oh!

Uh oh!

C0mberry commented Mar 10, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rogaldh Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rogaldh Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

C0mberry commented Mar 11, 2026

Uh oh!

Uh oh!

C0mberry commented Mar 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

C0mberry commented Mar 10, 2026 •

edited

Loading

greptile-apps bot commented Mar 10, 2026 •

edited

Loading

rogaldh Mar 11, 2026 •

edited

Loading

rogaldh Mar 11, 2026 •

edited

Loading