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

Update UI for buy prepaid service button
All checks were successful
Lint / lint (20.x) (pull_request) Successful in 1m21s
Details

Browse Source
This commit is contained in:
Shreerang Kale 2025-02-10 18:05:27 +05:30
parent d4ffe28f8a
commit 16d307bba6
3 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -129,10 +129,7 @@ const AutoSignInIFrameModal = () => {
height: '600px', height: '600px',
maxHeight: '80vh', maxHeight: '80vh',
overflow: 'auto', overflow: 'auto',
boxShadow: 24,
borderRadius: '8px',
outline: 'none', outline: 'none',
bgcolor: 'background.paper',
}} }}
> >
<iframe <iframe
@ -142,7 +139,6 @@ const AutoSignInIFrameModal = () => {
width="100%" width="100%"
height="100%" height="100%"
sandbox="allow-scripts allow-same-origin" sandbox="allow-scripts allow-same-origin"
className="border rounded-md shadow-sm"
></iframe> ></iframe>
</Box> </Box>
</Modal> </Modal>

20
packages/frontend/src/pages/BuyPrepaidService.tsx
View File

@ -1,20 +1,26 @@
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useMediaQuery } from 'usehooks-ts';
import { Modal } from '@mui/material'; import { Modal } from '@mui/material';
import { Button } from '@snowballtools/material-tailwind-react-fork';
import { VITE_AUTH_SECRET, VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants'; import {
VITE_AUTH_SECRET,
VITE_LACONICD_CHAIN_ID,
VITE_WALLET_IFRAME_URL,
} from 'utils/constants';
import { Button } from 'components/shared';
const BuyPrepaidService = () => { const BuyPrepaidService = () => {
const [isSufficient, setIsSufficient] = useState(null); const [isSufficient, setIsSufficient] = useState(null);
const navigate = useNavigate(); const navigate = useNavigate();
const isTabletView = useMediaQuery('(min-width: 720px)'); // md:
const buttonSize = isTabletView ? { size: 'lg' as const } : {};
const requestForBalance = useCallback(() => { const requestForBalance = useCallback(() => {
const iframe = document.getElementById( const iframe = document.getElementById('checkBalance') as HTMLIFrameElement;
'checkBalance',
) as HTMLIFrameElement;
if (!iframe.contentWindow) { if (!iframe.contentWindow) {
console.error('Iframe not found or not loaded'); console.error('Iframe not found or not loaded');
@ -37,7 +43,6 @@ const BuyPrepaidService = () => {
if (event.origin !== VITE_WALLET_IFRAME_URL) return; if (event.origin !== VITE_WALLET_IFRAME_URL) return;
if (event.data.type === 'IS_SUFFICIENT') { if (event.data.type === 'IS_SUFFICIENT') {
console.log("event.data.data", event.data.data)
setIsSufficient(event.data.data); setIsSufficient(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);
@ -55,12 +60,11 @@ const BuyPrepaidService = () => {
if (isSufficient === true) { if (isSufficient === true) {
navigate('/'); navigate('/');
} }
}, [isSufficient]); }, [isSufficient]);
return ( return (
<div className="dark:bg-background flex flex-col min-h-screen"> <div className="dark:bg-background flex flex-col min-h-screen">
<div className="pb-12 relative z-10 flex-1 flex-center"> <div className="pb-12 relative z-10 flex-1 flex-center">
<Button> <Button {...buttonSize} shape={'default'}>
<a href="https://store.laconic.com" target="_blank"> <a href="https://store.laconic.com" target="_blank">
Buy prepaid service Buy prepaid service
</a> </a>

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

@ -57,7 +57,6 @@ const Projects = () => {
if (event.origin !== VITE_WALLET_IFRAME_URL) return; if (event.origin !== VITE_WALLET_IFRAME_URL) return;
if (event.data.type === 'IS_SUFFICIENT') { if (event.data.type === 'IS_SUFFICIENT') {
console.log("event.data.data", event.data.data)
setIsSufficient(event.data.data); setIsSufficient(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);