cerc-io/snowballtools-base
11
0
Fork 3
Code Issues 11 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Update iframe modal for auto signin

Browse Source
This commit is contained in:
Shreerang Kale 2025-02-10 10:59:10 +05:30
parent b5b52df06f
commit bf2123cfbc
1 changed files with 14 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/frontend/src/components/shared/auth/AutoSignInIFrameModal.tsx
View File

@ -1,15 +1,12 @@
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
import { Box, Modal } from '@mui/material';
import {
BASE_URL,
VITE_WALLET_IFRAME_URL,
} from 'utils/constants';
import { generateNonce, SiweMessage } from 'siwe'; import { generateNonce, SiweMessage } from 'siwe';
import axios from 'axios'; import axios from 'axios';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Box, Modal } from '@mui/material';
import { BASE_URL, VITE_WALLET_IFRAME_URL } from 'utils/constants';
const axiosInstance = axios.create({ const axiosInstance = axios.create({
baseURL: BASE_URL, baseURL: BASE_URL,
headers: { headers: {
@ -19,23 +16,12 @@ const axiosInstance = axios.create({
withCredentials: true, withCredentials: true,
}); });
const AutoSignInIFrameModal = ( const AutoSignInIFrameModal = () => {
// {
// setAccounts,
// setIsDataReceived,
// isVisible,
// }: {
// setAccounts: (accounts: string[]) => void;
// setIsDataReceived: (isReceived: boolean) => void;
// isVisible: boolean;
// }
) => {
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
const handleMessage = async (event: MessageEvent) => { const handleMessage = async (event: MessageEvent) => {
if (event.origin !== VITE_WALLET_IFRAME_URL) return; if (event.origin !== VITE_WALLET_IFRAME_URL) return;
// setIsDataReceived(true);
if (event.data.type === 'SIGN_IN_RESPONSE') { if (event.data.type === 'SIGN_IN_RESPONSE') {
try { try {
const { success } = ( const { success } = (
@ -46,13 +32,12 @@ const AutoSignInIFrameModal = (
).data; ).data;
if (success) { if (success) {
navigate("/") navigate('/');
} }
return success; return success;
} catch (error) { } catch (error) {
return false; return false;
} }
// setAccounts(event.data.data);
} else if (event.data.type === 'ERROR') { } else if (event.data.type === 'ERROR') {
console.error('Error from wallet:', event.data.message); console.error('Error from wallet:', event.data.message);
} }
@ -70,7 +55,9 @@ const AutoSignInIFrameModal = (
if (event.origin !== VITE_WALLET_IFRAME_URL) return; if (event.origin !== VITE_WALLET_IFRAME_URL) return;
if (event.data.type === 'ACCOUNT_ADDRESS_RESPONSE') { if (event.data.type === 'ACCOUNT_ADDRESS_RESPONSE') {
const iframe = document.getElementById('autoSignInFrame') as HTMLIFrameElement; const iframe = document.getElementById(
'autoSignInFrame',
) as HTMLIFrameElement;
if (!iframe.contentWindow) { if (!iframe.contentWindow) {
console.error('Iframe not found or not loaded'); console.error('Iframe not found or not loaded');
@ -86,7 +73,7 @@ const AutoSignInIFrameModal = (
nonce: generateNonce(), nonce: generateNonce(),
// Human-readable ASCII assertion that the user will sign, and it must not contain `\n`. // Human-readable ASCII assertion that the user will sign, and it must not contain `\n`.
statement: 'Sign in With Ethereum.', statement: 'Sign in With Ethereum.',
}).prepareMessage() }).prepareMessage();
iframe.contentWindow.postMessage( iframe.contentWindow.postMessage(
{ {
@ -96,8 +83,6 @@ const AutoSignInIFrameModal = (
}, },
VITE_WALLET_IFRAME_URL, VITE_WALLET_IFRAME_URL,
); );
// setAccounts(event.data.data);
} else if (event.data.type === 'ERROR') { } else if (event.data.type === 'ERROR') {
console.error('Error from wallet:', event.data.message); console.error('Error from wallet:', event.data.message);
} }
@ -110,9 +95,10 @@ const AutoSignInIFrameModal = (
}; };
}, []); }, []);
// /////////////////////////////////////////////////
const getAddressFromWallet = useCallback(() => { const getAddressFromWallet = useCallback(() => {
const iframe = document.getElementById('autoSignInFrame') as HTMLIFrameElement; const iframe = document.getElementById(
'autoSignInFrame',
) as HTMLIFrameElement;
if (!iframe.contentWindow) { if (!iframe.contentWindow) {
console.error('Iframe not found or not loaded'); console.error('Iframe not found or not loaded');