Add a shareable portfolio performance card that generates an image summary for social sharing

[Chucks1093]

Summary

Users who want to share their portfolio performance on social media have no easy way to do so. A Share Performance button on the portfolio page that generates a styled image card with total value, PnL, and top holdings would enable organic social promotion.

Scope

• Add a Share Performance button on the portfolio page PnL summary card
• Use html2canvas or a similar library to render a styled snapshot of the PnL summary into a PNG
• Include: wallet address (truncated), total value, unrealised PnL, top 3 holdings by value, and the AccessLayer logo
• Open a modal with a preview of the image and a Download PNG button and a Copy Image button
• Generate the image client-side without sending portfolio data to a third-party service

Acceptance Criteria

• Image generated client-side with correct PnL and holdings data
• Wallet address truncated correctly in the image
• Download PNG triggers a file download
• Copy Image copies the image to the clipboard
• No portfolio data sent to external services during generation

ETA: 12 hours

---

Coordinate on Telegram

[oyinade247]

Can I work on this pleaseeee

[ZacLou]

I'd like to work on this issue. I have relevant experience with this tech stack and can deliver a clean, well-tested PR. I can submit within 1-2 days.

[Ranjeet2063]

Hi maintainers, I would love to take up this issue.

I am a senior Web3 frontend engineer (#1 contributor on Mova Store with 28 successfully merged PRs), specializing in Next.js, React, TypeScript, Tailwind CSS, and Freighter/Stellar wallet integrations.

🎯 Technical Execution Plan for Add a shareable portfolio performance card that generates an image summary for social sharing:

1. Component Design & UI State: Implement Add a shareable portfolio performance card that generates an image summary for social sharing with clean component decoupling, responsive layouts, accessible forms/modals, and robust loading/skeleton/error boundaries.
2. Web3 & Client Logic: Wire real-time state streams, optimistic UI updates, and seamless Freighter wallet transaction signatures with user-friendly error alerts for rejections/timeouts.
3. Comprehensive Test Suite: Add component and unit tests (Vitest / Jest + React Testing Library) verifying state changes, input sanitization, and edge-case rendering.
4. Production Verification: Confirm zero TypeScript errors (noImplicitAny), zero ESLint/Prettier warnings, and clean production build (pnpm build).

💡 Why Assigning Me Directly Benefits You:

• Zero Maintenance Burden: Pixel-perfect UI with strict typing and responsive states that work out of the box.
• Rapid Turnaround: Ready to deliver a production-ready PR within 12–24 hours, clearing this task quickly.
• Track Record: 28 merged Web3 PRs — zero review ping-pong and immediate alignment with your conventions.

[uche102]

Hi maintainer please I would like to work on this

[Iker2522]

Hi! I'd like to take on the Share Performance task.

Approach: off-screen component rendered with html2canvas to generate the PNG fully client-side. Truncated wallet (0x1234...abcd), preview modal, Download PNG (canvas.toBlob) and Copy Image (Clipboard API). No calls to external services.

I can meet the 12h ETA and can start right away. Is there a Figma or brand assets for the card styling?

[guptakumarranjeet150]

Hi maintainers,

I would love to take this on. My planned approach:

• Build Add a shareable portfolio performance card that generates an image summary for social sharing with clean React/Next.js components, responsive styling, and proper loading/error boundaries.
• Add component unit tests and ensure zero TypeScript/ESLint warnings.

Ready to deliver a clean, tested PR within 12–24 hours. Please assign!

[shobhamerabacha-star]

Hello @maintainers,

I would like to resolve this issue. Here is my proposed execution plan:

• Implementation: Build Add a shareable portfolio performance card that generates an image summary for social sharing with clean React/Next.js components, responsive styling, and proper loading/error boundaries.
• Testing & Verification: Add component unit tests and ensure zero TypeScript/ESLint warnings.
• Delivery: Ready to ship a thoroughly tested PR within 12–24 hours with passing CI.

Looking forward to contributing—please feel free to assign!

[ranjeet150]

Hello! I'd like to work on this issue.

I can tackle Add a shareable portfolio performance card that generates an image summary for social sharing. Proposed implementation roadmap:

• Analysis: Inspect current behavior and edge cases in accesslayerorg/accesslayer-client
• Implementation: Build Add a shareable portfolio performance card that generates an image summary for social sharing with clean React/Next.js components, responsive styling, and proper loading/error boundaries.
• Testing: Add component unit tests and ensure zero TypeScript/ESLint warnings.
• PR: Atomic commit with clean git hygiene and passing CI

Excited to work on this—please assign to me and I'll submit a clean PR shortly!