feat(portfolio): add shareable performance card with canvas-rendered PNG (closes #881) - #908
Open
guptakumarranjeet150 wants to merge 2 commits into
Conversation
…PNG (closes accesslayerorg#881) - New SharePortfolioModal component (src/components/common/SharePortfolioModal.tsx) * Client-side 1200x675 canvas card with dark gradient background, metric tiles (Total Invested, Current Value, Unrealised PnL with color-coded green/red), top-3 creator holdings table, and branded AccessLayer footer * Wallet address auto-truncated for privacy via wallet.utils.ts * Download PNG action (anchor click, zero external dependencies) * Copy to Clipboard (ClipboardItem API with toast fallback) - New src/utils/wallet.utils.ts with truncateWallet helper (extracted to separate file per react-refresh/only-export-components rule) - Integrate SharePortfolioModal into LandingPage.tsx with Share Performance button - Unit tests in SharePortfolioModal.test.tsx: * truncateWallet: empty, short address, full 56-char Stellar address cases * Modal renders title/description/buttons when open=true * Close button fires onOpenChange(false) - Fix usePrefersReducedMotion.ts: typeof window guard for SSR safety Closes accesslayerorg#881
… LandingPage (closes accesslayerorg#881)
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
Closes #881 — Implements a fully client-side shareable portfolio performance card that generates a branded 1200×675 PNG image showing key portfolio metrics, ready to download or copy to clipboard for social sharing.
Changes
New:
src/components/common/SharePortfolioModal.tsx<canvas>-based card renderer (zero external image-generation service)GBZXN7...ABCD) for privacyaccesslayer-portfolio-<timestamp>.pngClipboardItemAPI withreact-hot-toastfallbackNew:
src/utils/wallet.utils.tstruncateWallet(address)helper extracted to a dedicated filereact-refresh/only-export-componentsESLint ruleModified:
src/pages/LandingPage.tsxisShareModalOpen+topHoldingsstate addedSharePortfolioModalNew:
src/components/common/__tests__/SharePortfolioModal.test.tsxtruncateWalletunit tests: empty, short, full 56-char Stellar addressopen=trueonOpenChange(false)Modified:
src/hooks/usePrefersReducedMotion.tstypeof window === "undefined"guard for SSR/test-environment safetyNo External Dependencies Added
Pure HTML5 Canvas + existing UI primitives (
Dialog,Button, lucide icons,react-hot-toast).Closes #881