Display message for checking balance

packages/frontend/src/components/projects/create/Configure.tsx

@@ -52,6 +52,7 @@ const Configure = () => {
   const [isPaymentDone, setIsPaymentDone] = useState(false);
   const [isFrameVisible, setIsFrameVisible] = useState(false);
   const [isAccountsDataReceived, setIsAccountsDataReceived] = useState(false);
+  const [balanceMessage, setBalanceMessage] = useState<string>();
 
   const [searchParams] = useSearchParams();
   const templateId = searchParams.get('templateId');
@@ -626,7 +627,7 @@ const Configure = () => {
                   (!selectedAccount || !isBalanceSufficient) ? (
                     <div className="flex items-center gap-4">
 
-                      <Button {...buttonSize} shape="default">
+                      <Button {...buttonSize} shape="default" onClick={() => setBalanceMessage('Waiting for balance to get updated')}>
                         <a
                           href="https://store.laconic.com"
                           target="_blank"
@@ -636,10 +637,14 @@ const Configure = () => {
                         </a>
                       </Button>
                       <p className="text-gray-700 dark:text-gray-300">
-                        {!selectedAccount ? 'No accounts found. Create a wallet.' : 'Insufficient funds.'}
+                        {balanceMessage !== undefined ? (
+                          <div className="flex items-center gap-2 text-white">
+                            <LoadingIcon className="animate-spin w-5 h-5" />
+                            <p>{balanceMessage}</p>
+                          </div>
+                        ) : !selectedAccount ? 'No accounts found. Create a wallet.' : 'Insufficient funds.'}
                       </p>
                     </div>
-
                   ) : null
                 ) : null}
               </div>