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 = ({
accounts,
isDataReceived,
onAccountChange,
}: {
accounts: string[];
isDataReceived: boolean;
onAccountChange: (selectedAccount: string) => void;
}) => {
return (
<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">
<p className="text-gray-700 dark:text-gray-300 mb-4">
No accounts found. Please visit{' '}
@ -40,6 +43,11 @@ const AccountsDropdown = ({
))}
</Select>
</div>
)
) : (
<div className="flex items-center justify-center h-12">
<Spinner className="h-6 w-6" />
</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 [isPaymentDone, setIsPaymentDone] = useState(false);
const [isFrameVisible, setIsFrameVisible] = useState(false);
const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
const [searchParams] = useSearchParams();
const templateId = searchParams.get('templateId');
@ -573,9 +574,10 @@ const Configure = () => {
</div>
) : (
<>
<AccountsDropdown accounts={accounts} onAccountChange={onAccountChange} />
<AccountsDropdown accounts={accounts} onAccountChange={onAccountChange} isDataReceived={isAccountsDataReceived} />
<IFrameModal
setAccounts={setAccounts}
setIsDataReceived={setIsAccountsDataReceived}
isVisible={isFrameVisible}
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 = ({
setAccounts,
setIsDataReceived,
isVisible,
toggleModal,
}: {
setAccounts: (accounts: string[]) => void;
setIsDataReceived: (isReceived: boolean) => void;
isVisible: boolean;
toggleModal: () => void;
}) => {
@ -18,6 +20,7 @@ const IFrameModal = ({
// TODO: Use env for origin URL
if (event.origin !== VITE_WALLET_IFRAME_URL) return;
setIsDataReceived(true);
if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
setAccounts(event.data.data);
} else if (event.data.type === 'ERROR') {