Repository navigation
feat(portal): add cross tab session sync token migration bulk export and code tour - #1733
Merged
ayomideadeniran merged 1 commit intoOct 21, 2026
Conversation
|
@Dopezapha is attempting to deploy a commit to the Ayomide Adeniran's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@Dopezapha 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! 🚀 |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| return new TextEncoder().encode(out); | ||
| } | ||
|
|
||
| self.onmessage = async (e: MessageEvent<WorkerStartPayload>) => { |
| error, | ||
| } = useBulkCertificateExport(); | ||
|
|
||
| const [courseFilter, setCourseFilter] = useState('Soroban Smart Contract Developer'); |
| } = useBulkCertificateExport(); | ||
|
|
||
| const [courseFilter, setCourseFilter] = useState('Soroban Smart Contract Developer'); | ||
| const [sampleCount, setSampleCount] = useState<number>(100); |
|
|
||
| import React, { useState } from 'react'; | ||
| import { useWallet } from '@/contexts/WalletContext'; | ||
| import { useTokenMigration, MigrationVoucher } from '@/hooks/useTokenMigration'; |
| selectedVoucherId, | ||
| setSelectedVoucherId, | ||
| currentStep, | ||
| setCurrentStep, |
| currentStep, | ||
| setCurrentStep, | ||
| burnTxHash, | ||
| mintTxHash, |
| mintTxHash, | ||
| latestReceipt, | ||
| isLoading, | ||
| isScanning, |
| @@ -0,0 +1,45 @@ | |||
| import { renderHook, act } from '@testing-library/react'; | |||
|
|
||
| export type MigrationStep = 'select' | 'burn' | 'mint' | 'receipt'; | ||
|
|
||
| const KNOWN_VOUCHERS_TEMPLATE: Omit<MigrationVoucher, 'legacyToken' | 'migratedToken' | 'isExpired'>[] = [ |
| } | ||
|
|
||
| export function useTokenMigration() { | ||
| const { publicKey, activeNetwork, signTransaction } = useWallet(); |
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
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.
Closes #1565
Closes #1567
Closes #1568
Closes #1569
PR Description
In this pull request, I implemented four core frontend improvements covering session state synchronization across browser tabs, token migration for legacy contracts, off thread bulk certificate generation with ZIP archiving, and an interactive onboarding tour for first time students.
Here is the breakdown of what I built and why:
Multi-Tab Session Synchronization ([FE-042] Multi-Tab Synchronized Session State Manager via BroadcastChannel API #1565):
Previously, when a student opened the lab in multiple tabs, logging out or disconnecting a wallet in one tab left other tabs in a broken, desynchronized state. Multiple tabs also opened duplicate WebSocket connections, wasting resources. To fix this, I created a cross tab session synchronization service in
broadcastSync.tsusing theBroadcastChannelAPI, with an automatic fallback tolocalStoragestorage events for environments whereBroadcastChannelis not available. I also implemented a tab leadership election protocol with heartbeats so that only the leader tab connects to the WebSocket server. I integrated this intoAuthContext.tsxandWalletContext.tsxso that logging out or disconnecting a wallet in Tab A instantly logs out or disconnects Tab B.Token Migration Voucher Exchange & Conversion Portal ([FE-044] Token Migration Voucher Exchange & Legacy Contract Conversion Portal #1567):
When smart contracts or testnet tokens are upgraded, students need a direct way to convert their legacy assets into audited v2 equivalents. I built
useTokenMigration.ts,VoucherCard.tsx, andMigrationWizard.tsx. The hook detects legacy token balances by querying the Stellar Horizon REST API for the connected account, with fallback to seeded balances if Horizon is rate limited or unavailable. I built a two-step wizard: Step 1 approves and executes the burn of legacy tokens, and Step 2 mints the new tokens using the voucher conversion ratio. Once complete, the user is presented with a detailed receipt screen that provides transaction hashes for both operations with direct links to the Stellar Expert explorer.Web-Worker Bulk Certificate QR Generator & ZIP Exporter ([FE-045] Web-Worker Driven Bulk Certificate QR-Code Generator and ZIP Exporter #1568):
Instructors generating bulk certificates for entire classes were experiencing UI thread freezes because QR code rendering and file packaging blocked the main browser thread. To solve this, I built a background Web Worker in
bulk-certificate.worker.tsthat runs entirely off the main thread. It generates QR verification codes, watermarks them onto certificate SVGs, encodes valid PDF 1.4 binary documents using exact object offsets and xref tables, and packages everything into a binary ZIP file using the PKWARE specification with CRC-32 checksums. I paired this withuseBulkCertificateExport.tsandBulkExporterModal.tsx, giving instructors a progress bar with live percentage and an estimated time remaining indicator. Generating 100 student packages (300 files) now takes under 3 seconds without dropping any UI frames.Dynamic Code Tour & Onboarding Walkthrough ([FE-046] Dynamic Code Tour & Onboarding Walkthrough Using React-Joyride #1569):
First time learners were getting confused by the three-pane layout consisting of Curriculum, Monaco Editor, and Test Output. To guide them, I added
tourSteps.ts,useTourProgress.ts, andCodeTour.tsxusingreact-joyride. The tour automatically triggers for first time visitors, highlights each panel sequentially, and prompts students to write their first line of Soroban Rust code and run tests. I styled the callout tooltips with custom glassmorphism cards and saved the completed status inlocalStorageso students who finish or skip the tour are never prompted again.Changes Made
frontend/src/services/session/broadcastSync.tsto manage cross tab messages and tab leadership election.frontend/src/hooks/useBroadcastSync.tsto expose session synchronization methods and leadership status to React components.frontend/src/contexts/AuthContext.tsxto broadcast login and logout events and listen for logout and login from sibling tabs.frontend/src/contexts/WalletContext.tsxto broadcast connect and disconnect events and mirror wallet state across tabs.frontend/src/hooks/useWebSocket.tswith apreventDuplicateTabsoption that prevents non leader tabs from establishing redundant WebSocket connections.frontend/src/hooks/useTokenMigration.tsto detect legacy balances via Horizon, compute voucher conversion amounts, and execute the two step burn and mint operations.frontend/src/components/migration/VoucherCard.tsxto display token conversion ratios, deadline countdowns, and balance previews.frontend/src/components/migration/MigrationWizard.tsxto provide an interactive wizard with a burn step, a mint step, and a receipt screen with Stellar Expert transaction links.frontend/src/workers/bulk-certificate.worker.tsto generate QR codes, watermark certificate SVGs, generate valid PDF 1.4 binary documents, and pack binary ZIP files in a Web Worker.frontend/src/hooks/useBulkCertificateExport.tsto manage worker lifecycle, progress updates, and ZIP file downloads.frontend/src/components/admin/BulkExporterModal.tsxto provide instructors with a progress modal showing live percentages and estimated time remaining.frontend/src/constants/tourSteps.tsdefining step targets and copy for the three pane IDE walkthrough.frontend/src/hooks/useTourProgress.tsto handle first time visitor detection andlocalStoragepersistence.frontend/src/components/onboarding/CodeTour.tsxwith custom glassmorphism callout cards and navigation controls.frontend/src/hooks/__tests__/useBroadcastSync.test.ts,frontend/src/hooks/__tests__/useTokenMigration.test.ts,frontend/src/hooks/__tests__/useBulkCertificateExport.test.ts, andfrontend/src/hooks/__tests__/useTourProgress.test.ts.