);
}
// ─── QR rendering helper ────────────────────────────────────────
// `dataUrl` is a base64 PNG generated server-side by the qrcode npm
// package in api/plaid-create-link-token.js / api/plaid-create-idv.js.
// Server-side rendering keeps the Plaid hosted_link / shareable_url
// inside our own infrastructure — earlier iterations either depended on
// a flaky in-browser qrcode UMD build (window.QRCode never loaded) or
// routed the URL through api.qrserver.com (third-party leak). When the
// data URL is missing (server-side QR render failed), show a graceful
// fallback that points at the "Or open the link here" anchor.
function V1PlaidQR({ dataUrl, size = 196 }) {
return (
{dataUrl ? (
) : (
Couldn't render QR — use the link below.
)}
);
}
// ─── V1PlaidLink ─────────────────────────────────────────────────
// Real Plaid Link SDK. Stages:
// intro → opening (SDK overlays our modal) → success
// intro → mobile (QR of hosted_link_url, polling deferred to manual confirm)
function V1PlaidLink({ open, onClose, onSuccess }) {
const [stage, setStage] = React.useState('loading');
const [tokenData, setTokenData] = React.useState(null); // { link_token, hosted_link_url }
const [err, setErr] = React.useState(null);
const [linkedSummary, setLinkedSummary] = React.useState(null); // { institution_name, accounts }
const handlerRef = React.useRef(null);
// Reset on close. Tear down the Plaid SDK handler synchronously so its
// document-level listeners can't swallow clicks on the page behind.
React.useEffect(() => {
if (!open) {
if (handlerRef.current && handlerRef.current.destroy) {
try { handlerRef.current.destroy(); } catch (_) {}
}
handlerRef.current = null;
const t = setTimeout(() => {
setStage('loading'); setTokenData(null); setErr(null); setLinkedSummary(null);
}, 260);
return () => clearTimeout(t);
}
}, [open]);
// Mint a link_token whenever the modal opens.
React.useEffect(() => {
if (!open) return;
setStage('loading'); setErr(null);
window.PlaidIntegration.mintLinkToken('bank')
.then((d) => {
if (!d.link_token) throw new Error('No link_token returned');
setTokenData(d);
setStage('intro');
})
.catch((e) => {
console.error(e);
const code = e && e.plaidCode ? ` (${e.plaidCode})` : '';
const msg = e && e.plaidMessage ? ` — ${e.plaidMessage}` : '';
setErr(`Could not reach Plaid${code}${msg}. Try again.`);
setStage('intro');
});
}, [open]);
if (!open) return null;
const launchHere = () => {
if (!tokenData || !tokenData.link_token || !window.Plaid || !window.Plaid.create) {
setErr('Plaid Link SDK is not available.');
return;
}
setErr(null);
setStage('opening');
handlerRef.current = window.Plaid.create({
token: tokenData.link_token,
onSuccess: async (publicToken /*, metadata */) => {
try {
const result = await window.PlaidIntegration.exchangePublicToken(publicToken);
setLinkedSummary({
institution_name: result.institution_name || 'Your bank',
accounts: result.accounts || [],
});
setStage('success');
setTimeout(() => {
const accountStrs = (result.accounts || []).map((a) =>
a.mask ? `${a.name} ••${a.mask}` : a.name);
onSuccess && onSuccess({
institution: result.institution_name || 'Bank',
accounts: accountStrs,
item_id: result.item_id,
});
}, 900);
} catch (e) {
console.error(e);
const code = e && e.plaidCode ? ` (${e.plaidCode})` : '';
const msg = e && e.plaidMessage ? ` — ${e.plaidMessage}` : '';
setErr(`Could not finish linking${code}${msg}. Try again.`);
setStage('intro');
}
},
onExit: (exitErr /*, metadata */) => {
// User closed Plaid Link. Drop back to our intro so they can retry
// or pick the mobile path.
if (exitErr) {
setErr(exitErr.display_message || exitErr.error_message || 'Plaid Link exited.');
}
setStage('intro');
},
});
handlerRef.current.open();
};
return (
{stage === 'loading' && (
Connecting to Plaid…
)}
{stage === 'intro' && (
Delt uses Plaid to connect your bank
Plaid lets you securely link your account in seconds. Delt sees
balances and 90 days of deposits — never your credentials.