Integrate wallet IFrame for payments #42

Merged
nabarun merged 27 commits from iv-integrate-frame into main 2024-11-13 13:32:28 +00:00
2 changed files with 35 additions and 82 deletions
Showing only changes of commit d58d015c7d - Show all commits

View File

@ -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>
);
};

View File

@ -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>
);
};