Integrate wallet IFrame for payments #42
@ -1,59 +1,61 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
// import {
|
||||
// VITE_LACONICD_CHAIN_ID,
|
||||
// } from 'utils/constants';
|
||||
|
||||
const IframeComponent: React.FC = () => {
|
||||
const [localStorageData, setLocalStorageData] = useState<string | null>(null);
|
||||
const iframeRef = useRef<HTMLIFrameElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Listen for messages from the iframe
|
||||
const getDataFromWallet = () => {
|
||||
const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
|
||||
|
||||
if (!iframe.contentWindow) {
|
||||
console.error('Iframe not found or not loaded');
|
||||
return;
|
||||
}
|
||||
|
||||
// Request data from wallet
|
||||
iframe.contentWindow.postMessage({
|
||||
type: 'REQUEST_WALLET_ACCOUNTS'
|
||||
}, 'http://localhost:3001');
|
||||
};
|
||||
|
||||
// Listen for response from wallet
|
||||
const handleMessage = (event: MessageEvent) => {
|
||||
if (event.origin !== 'https://wallet.laconic.com') return; // Ensure it's from the iframe
|
||||
// Always verify origin for security
|
||||
if (event.origin !== 'http://localhost:3001') return;
|
||||
|
||||
const { action, key, value } = event.data;
|
||||
|
||||
if (action === 'localStorageDataResponse' && key === 'accountIndices/cosmos:laconic-testnet-2') {
|
||||
setLocalStorageData(value); // Update state with the value from localStorage
|
||||
if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
|
||||
console.log('Received data:', event.data.data);
|
||||
// Handle the received data here
|
||||
} else if (event.data.type === 'ERROR') {
|
||||
console.error('Error from wallet:', event.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('message', handleMessage);
|
||||
|
||||
// Cleanup listener on unmount
|
||||
// Request data once iframe is loaded
|
||||
const iframe = document.getElementById('walletIframe');
|
||||
if (iframe) {
|
||||
iframe.onload = getDataFromWallet;
|
||||
}
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
window.removeEventListener('message', handleMessage);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Send a message to the iframe to get data from localStorage
|
||||
const requestLocalStorageData = (key: string) => {
|
||||
if (iframeRef.current && iframeRef.current.contentWindow) {
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{ action: 'getLocalStorageData', key }, // Send key to request data
|
||||
'https://wallet.laconic.com'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Call to request localStorage data when component mounts
|
||||
useEffect(() => {
|
||||
requestLocalStorageData('accountIndices/cosmos:laconic-testnet-2');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<iframe
|
||||
// ref={iframeRef}
|
||||
id="walletIframe"
|
||||
src="https://wallet.laconic.com"
|
||||
width="500" height="300"
|
||||
src="http://localhost:3001"
|
||||
width="500" height="300"
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
></iframe>
|
||||
|
||||
{localStorageData ? (
|
||||
<p>LocalStorage Data: {localStorageData}</p>
|
||||
) : (
|
||||
<p>Loading localStorage data...</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -23,48 +23,6 @@ const Projects = () => {
|
||||
fetchProjects();
|
||||
}, [orgSlug]);
|
||||
|
||||
useEffect(() => {
|
||||
const getDataFromWallet = () => {
|
||||
const iframe = document.getElementById('walletIframe') as HTMLIFrameElement;
|
||||
|
||||
if (!iframe.contentWindow) {
|
||||
console.error('Iframe not found or not loaded');
|
||||
return;
|
||||
}
|
||||
|
||||
// Request data from wallet
|
||||
iframe.contentWindow.postMessage({
|
||||
type: 'REQUEST_WALLET_ACCOUNTS'
|
||||
}, 'http://localhost:3001');
|
||||
};
|
||||
|
||||
// Listen for response from wallet
|
||||
const handleMessage = (event: MessageEvent) => {
|
||||
// Always verify origin for security
|
||||
if (event.origin !== 'http://localhost:3001') return;
|
||||
|
||||
if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
|
||||
console.log('Received data:', event.data.data);
|
||||
// Handle the received data here
|
||||
} else if (event.data.type === 'ERROR') {
|
||||
console.error('Error from wallet:', event.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('message', handleMessage);
|
||||
|
||||
// Request data once iframe is loaded
|
||||
const iframe = document.getElementById('walletIframe');
|
||||
if (iframe) {
|
||||
iframe.onload = getDataFromWallet;
|
||||
}
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
window.removeEventListener('message', handleMessage);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="px-4 md:px-6 py-6 flex flex-col gap-6">
|
||||
{/* Header */}
|
||||
@ -91,13 +49,6 @@ const Projects = () => {
|
||||
return <ProjectCard project={project} key={key} />;
|
||||
})}
|
||||
</div>
|
||||
<iframe
|
||||
id="walletIframe"
|
||||
src="http://localhost:3001"
|
||||
style={{ display: 'none' }}
|
||||
title="Wallet iframe"
|
||||
sandbox="allow-same-origin allow-scripts"
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user