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

Display spinner till accounts data response is received

Browse Source
This commit is contained in:
Isha 2024-11-08 15:13:31 +05:30 committed by IshaVenikar
parent 49c204affd
commit 88f2cc1117
3 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/components/projects/create/AccountsDropdown.tsx
View File

@ -1,15 +1,18 @@
import { Select, Option } from '@snowballtools/material-tailwind-react-fork'; import { Select, Option, Spinner } from '@snowballtools/material-tailwind-react-fork';
const AccountsDropdown = ({ const AccountsDropdown = ({
accounts, accounts,
isDataReceived,
onAccountChange, onAccountChange,
}: { }: {
accounts: string[]; accounts: string[];
isDataReceived: boolean;
onAccountChange: (selectedAccount: string) => void; onAccountChange: (selectedAccount: string) => void;
}) => { }) => {
return ( return (
<div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md"> <div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md">
{!accounts.length ? ( {isDataReceived ? (
!accounts.length ? (
<div className="text-center"> <div className="text-center">
<p className="text-gray-700 dark:text-gray-300 mb-4"> <p className="text-gray-700 dark:text-gray-300 mb-4">
No accounts found. Please visit{' '} No accounts found. Please visit{' '}
@ -40,6 +43,11 @@ const AccountsDropdown = ({
))} ))}
</Select> </Select>
</div> </div>
)
) : (
<div className="flex items-center justify-center h-12">
<Spinner className="h-6 w-6" />
</div>
)} )}
</div> </div>
); );

4
packages/frontend/src/components/projects/create/Configure.tsx
View File

@ -48,6 +48,7 @@ const Configure = () => {
const [isPaymentLoading, setIsPaymentLoading] = useState(false); const [isPaymentLoading, setIsPaymentLoading] = useState(false);
const [isPaymentDone, setIsPaymentDone] = useState(false); const [isPaymentDone, setIsPaymentDone] = useState(false);
const [isFrameVisible, setIsFrameVisible] = useState(false); const [isFrameVisible, setIsFrameVisible] = useState(false);
const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
const templateId = searchParams.get('templateId'); const templateId = searchParams.get('templateId');
@ -573,9 +574,10 @@ const Configure = () => {
</div> </div>
) : ( ) : (
<> <>
<AccountsDropdown accounts={accounts} onAccountChange={onAccountChange} /> <AccountsDropdown accounts={accounts} onAccountChange={onAccountChange} isDataReceived={isAccountsDataReceived} />
<IFrameModal <IFrameModal
setAccounts={setAccounts} setAccounts={setAccounts}
setIsDataReceived={setIsAccountsDataReceived}
isVisible={isFrameVisible} isVisible={isFrameVisible}
toggleModal={toggleModal} toggleModal={toggleModal}
/> />

3
packages/frontend/src/components/projects/create/IFrameModal.tsx
View File

@ -6,10 +6,12 @@ import { VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants'
const IFrameModal = ({ const IFrameModal = ({
setAccounts, setAccounts,
setIsDataReceived,
isVisible, isVisible,
toggleModal, toggleModal,
}: { }: {
setAccounts: (accounts: string[]) => void; setAccounts: (accounts: string[]) => void;
setIsDataReceived: (isReceived: boolean) => void;
isVisible: boolean; isVisible: boolean;
toggleModal: () => void; toggleModal: () => void;
}) => { }) => {
@ -18,6 +20,7 @@ const IFrameModal = ({
// TODO: Use env for origin URL // TODO: Use env for origin URL
if (event.origin !== VITE_WALLET_IFRAME_URL) return; if (event.origin !== VITE_WALLET_IFRAME_URL) return;
setIsDataReceived(true);
if (event.data.type === 'WALLET_ACCOUNTS_DATA') { if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
setAccounts(event.data.data); setAccounts(event.data.data);
} else if (event.data.type === 'ERROR') { } else if (event.data.type === 'ERROR') {