cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

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
Conversation 0 Commits 27 Files Changed 21 +35 -82
2 changed files with 35 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d58d015c7d - Show all commits

66
packages/frontend/src/components/projects/create/IFrame.tsx
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 IframeComponent: React.FC = () => {
const [localStorageData, setLocalStorageData] = useState<string | null>(null);
const iframeRef = useRef<HTMLIFrameElement | null>(null);
useEffect(() => { 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) => { 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 (event.data.type === 'WALLET_ACCOUNTS_DATA') {
console.log('Received data:', event.data.data);
if (action === 'localStorageDataResponse' && key === 'accountIndices/cosmos:laconic-testnet-2') { // Handle the received data here
setLocalStorageData(value); // Update state with the value from localStorage } else if (event.data.type === 'ERROR') {
console.error('Error from wallet:', event.data.message);
} }
}; };
window.addEventListener('message', handleMessage); 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 () => { return () => {
window.removeEventListener('message', handleMessage); 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 ( return (
<div> <div>
<iframe <iframe
// ref={iframeRef}
id="walletIframe" id="walletIframe"
src="https://wallet.laconic.com" src="http://localhost:3001"
width="500" height="300" width="500" height="300"
sandbox="allow-scripts allow-same-origin" sandbox="allow-scripts allow-same-origin"
></iframe> ></iframe>
{localStorageData ? (
<p>LocalStorage Data: {localStorageData}</p>
) : (
<p>Loading localStorage data...</p>
)}
</div> </div>
); );
}; };

49
packages/frontend/src/pages/org-slug/index.tsx
View File

@ -23,48 +23,6 @@ const Projects = () => {
fetchProjects(); fetchProjects();
}, [orgSlug]); }, [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 ( return (
<section className="px-4 md:px-6 py-6 flex flex-col gap-6"> <section className="px-4 md:px-6 py-6 flex flex-col gap-6">
{/* Header */} {/* Header */}
@ -91,13 +49,6 @@ const Projects = () => {
return <ProjectCard project={project} key={key} />; return <ProjectCard project={project} key={key} />;
})} })}
</div> </div>
<iframe
id="walletIframe"
src="http://localhost:3001"
style={{ display: 'none' }}
title="Wallet iframe"
sandbox="allow-same-origin allow-scripts"
/>
</section> </section>
); );
}; };