diff --git a/docs/EXPERIMENTS.md b/docs/EXPERIMENTS.md new file mode 100644 index 0000000..23a1f71 --- /dev/null +++ b/docs/EXPERIMENTS.md @@ -0,0 +1,26 @@ +# Bridgelet Frontend Experiments + +This document records experimental features built for the Bridgelet reference UI. + +--- + +## Experiment 1: WhatsApp Share Button for Claim Links (Issue #150) +- **Goal**: Enable direct messaging sharing of payment claim URLs via WhatsApp (`wa.me`). +- **Target Markets**: Primary communication channel for African and LatAm disbursement flows. +- **Implementation**: `frontend/components/share-prompt.tsx` and `ConfirmStep` render deep links: + ```text + https://wa.me/?text=Send%20and%20claim%20crypto%20payments%3A%20 + ``` + +--- + +## Experiment 2: Multi-Chain Support UI Stubs (Issue #152) +- **Goal**: Provide UI placeholders for future EVM & Soroban multi-chain payment flows while maintaining active Stellar functionality. +- **Implementation**: `ChainSelector` (`frontend/components/chain-selector.tsx`) displays Stellar (active) alongside disabled options for Ethereum, Polygon, and Soroban with `[Coming Soon]` badges. + +--- + +## Experiment 3: Web NFC Tap to Share (Issue #154) +- **Goal**: Allow event organizers and community leaders to write claim URLs directly onto NFC cards/tags via mobile devices. +- **Browser Compatibility**: Utilizes the Web NFC API (`NDEFReader`). Supported natively on Android Chrome. +- **Implementation**: `NfcShareButton` (`frontend/components/nfc-share-button.tsx`) detects browser support, requests NFC write permissions, and writes URL records to nearby tags upon user interaction. diff --git a/frontend/components/send-form/steps/confirm-step.tsx b/frontend/components/send-form/steps/confirm-step.tsx index 390507d..cc33f3d 100644 --- a/frontend/components/send-form/steps/confirm-step.tsx +++ b/frontend/components/send-form/steps/confirm-step.tsx @@ -149,32 +149,50 @@ export function ConfirmStep({ state, onBack }: ConfirmStepProps) { } if (submitted) { + const claimLink = claimUrl || (typeof window !== 'undefined' ? `${window.location.origin}/claim` : 'https://bridgelet.org/claim'); + const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(`Here is your payment claim link via Bridgelet: ${claimLink}`)}`; + return (
-

Payment sent!

-

- {state.recipientEmail ? ( - <> - A claim link has been sent to {state.recipientEmail}. - - ) : ( - <>Your claim link is ready to share with your recipient. - )}{' '} - They have {formatExpiryLabel(state.expiresIn || DEFAULT_EXPIRES_IN_SECONDS)} to claim - their funds. -

+
+

Payment sent!

+

+ {state.recipientEmail ? ( + <> + A claim link has been sent to {state.recipientEmail}. + + ) : ( + <>Your claim link is ready to share with your recipient. + )}{' '} + They have {formatExpiryLabel(state.expiresIn || DEFAULT_EXPIRES_IN_SECONDS)} to claim + their funds. +

+
{signingModeUsed === 'freighter-client' && (

Account creation was authorised with Freighter client-side signing.

)} + {claimUrl && ( +
+ + Share via WhatsApp + +
+ )} + {isSupported && claimUrl && ( -
+
-
- - Share on X - - - Share on LinkedIn - + +
+ + +
);