Add toast for failed txs

build-webapp.sh

@@ -17,6 +17,7 @@ VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_image
 VITE_GITHUB_NEXT_APP_TEMPLATE_REPO = 'LACONIC_HOSTED_CONFIG_github_next_app_templaterepo'
 VITE_WALLET_CONNECT_ID = 'LACONIC_HOSTED_CONFIG_wallet_connect_id'
 VITE_LACONICD_CHAIN_ID = 'LACONIC_HOSTED_CONFIG_laconicd_chain_id'
+VITE_WALLET_IFRAME_URL = 'LACONIC_HOSTED_CONFIG_wallet_iframe_url'
 VITE_LIT_RELAY_API_KEY = 'LACONIC_HOSTED_CONFIG_lit_relay_api_key'
 VITE_BUGSNAG_API_KEY = 'LACONIC_HOSTED_CONFIG_bugsnag_api_key'
 VITE_PASSKEY_WALLET_RPID = 'LACONIC_HOSTED_CONFIG_passkey_wallet_rpid'

packages/deployer/staging-records/application-deployment-request.yml

@@ -18,6 +18,8 @@ record:
       LACONIC_HOSTED_CONFIG_bugsnag_api_key: 8c480cd5386079f9dd44f9581264a073
       LACONIC_HOSTED_CONFIG_passkey_wallet_rpid: dashboard.staging.apps.snowballtools.com
       LACONIC_HOSTED_CONFIG_turnkey_api_base_url: https://api.turnkey.com
+      LACONIC_HOSTED_CONFIG_laconicd_chain_id: 
+      LACONIC_HOSTED_CONFIG_wallet_iframe_url: 
       LACONIC_HOSTED_CONFIG_turnkey_organization_id: 5049ae99-5bca-40b3-8317-504384d4e591
   meta:
     note: Added by Snowball @ Mon Jun 24 23:51:48 UTC 2024

packages/frontend/.env.example

@@ -15,4 +15,4 @@ VITE_PASSKEY_WALLET_RPID=
 VITE_TURNKEY_API_BASE_URL=
 
 VITE_LACONICD_CHAIN_ID=
-VITE_IFRAME_ORIGIN_URL=
+VITE_WALLET_IFRAME_URL=

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

@@ -7,7 +7,6 @@ const AccountsDropdown = ({
   accounts: string[];
   onAccountChange: (selectedAccount: string) => void;
 }) => {
-
   return (
     <div className="p-6 bg-slate-100 dark:bg-overlay3 rounded-lg mb-6 shadow-md">
       {!accounts.length ? (

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

@@ -23,7 +23,7 @@ import { useGQLClient } from '../../../context/GQLClientContext';
 import IFrameModal from './IFrameModal';
 import EnvironmentVariablesForm from 'pages/org-slug/projects/id/settings/EnvironmentVariablesForm';
 import { EnvironmentVariablesFormValues } from 'types/types';
-import { VITE_LACONICD_CHAIN_ID, VITE_IFRAME_ORIGIN_URL } from 'utils/constants';
+import { VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants';
 import AccountsDropdown from './AccountsDropdown';
 
 type ConfigureDeploymentFormValues = {
@@ -37,7 +37,7 @@ type ConfigureFormValues = ConfigureDeploymentFormValues &
   EnvironmentVariablesFormValues;
 
 const DEFAULT_MAX_PRICE = '10000';
-const TX_APPROVAL_TIMEOUT = 60000;
+const TX_APPROVAL_TIMEOUT_MS = 60000;
 
 const Configure = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -216,6 +216,13 @@ const Configure = () => {
           );
 
           if (!txHash) {
+            console.error('Tx not successful');
+            toast({
+              id: 'unsuccessful-tx',
+              title: 'Transaction rejected',
+              variant: 'error',
+              onDismiss: dismiss,
+            });
             return;
           }
 
@@ -289,6 +296,7 @@ const Configure = () => {
           variant: 'error',
           onDismiss: dismiss,
         });
+        throw new Error('Error deploying app');
       }
     },
     [client, createProject, dismiss, toast],
@@ -318,7 +326,7 @@ const Configure = () => {
   const cosmosSendTokensHandler = useCallback(
     async (selectedAccount: string, amount: string) => {
       if (!selectedAccount) {
-        return;
+        throw new Error('Account not selected');
       }
 
       const senderAddress = selectedAccount;
@@ -330,14 +338,13 @@ const Configure = () => {
 
         await requestTx(senderAddress, snowballAddress, amount);
 
-        const txHash = await new Promise<string>((resolve, reject) => {
+        const txHash = await new Promise<string | null>((resolve, reject) => {
           const handleTxStatus = async (event: MessageEvent) => {
-            if (event.origin !== VITE_IFRAME_ORIGIN_URL) return;
+            if (event.origin !== VITE_WALLET_IFRAME_URL) return;
 
-            if (event.data.type === 'TRANSACTION_SUCCESS') {
+            if (event.data.type === 'TRANSACTION_RESPONSE') {
               const txResponse = event.data.data;
               resolve(txResponse);
-              setIsFrameVisible(false);
             } else if (event.data.type === 'ERROR') {
               console.error('Error from wallet:', event.data.message);
               reject(new Error('Transaction failed'));
@@ -348,6 +355,7 @@ const Configure = () => {
                 onDismiss: dismiss,
               });
             }
+            setIsFrameVisible(false);
 
             window.removeEventListener('message', handleTxStatus);
           };
@@ -364,12 +372,12 @@ const Configure = () => {
               variant: 'error',
               onDismiss: dismiss,
             });
-          }, TX_APPROVAL_TIMEOUT);
+          }, TX_APPROVAL_TIMEOUT_MS);
         });
         return txHash;
       } catch (error) {
         console.error('Error in transaction:', error);
-        return;
+        throw new Error('Error in transaction:');
       } finally {
         setIsPaymentLoading(false);
       }
@@ -393,7 +401,7 @@ const Configure = () => {
         toAddress: recipient,
         amount,
       },
-      VITE_IFRAME_ORIGIN_URL
+      VITE_WALLET_IFRAME_URL
     );
 
     setIsFrameVisible(true);

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

@@ -2,7 +2,7 @@ import { useCallback, useEffect } from 'react';
 
 import { Box, Modal } from '@mui/material';
 
-import { VITE_LACONICD_CHAIN_ID, VITE_IFRAME_ORIGIN_URL } from 'utils/constants';
+import { VITE_LACONICD_CHAIN_ID, VITE_WALLET_IFRAME_URL } from 'utils/constants';
 
 const IFrameModal = ({
   setAccounts,
@@ -16,7 +16,7 @@ const IFrameModal = ({
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
       // TODO: Use env for origin URL
-      if (event.origin !== VITE_IFRAME_ORIGIN_URL) return;
+      if (event.origin !== VITE_WALLET_IFRAME_URL) return;
 
       if (event.data.type === 'WALLET_ACCOUNTS_DATA') {
         setAccounts(event.data.data);
@@ -45,7 +45,7 @@ const IFrameModal = ({
         type: 'REQUEST_WALLET_ACCOUNTS',
         chainId: VITE_LACONICD_CHAIN_ID,
       },
-      VITE_IFRAME_ORIGIN_URL
+      VITE_WALLET_IFRAME_URL
     );
   }, []);
 
@@ -71,7 +71,7 @@ const IFrameModal = ({
         <iframe
           onLoad={getDataFromWallet}
           id="walletIframe"
-          src={`${VITE_IFRAME_ORIGIN_URL}/WalletEmbed`}
+          src={`${VITE_WALLET_IFRAME_URL}/WalletEmbed`}
           width="100%"
           height="100%"
           sandbox="allow-scripts allow-same-origin"

packages/frontend/src/utils/constants.ts

@@ -12,4 +12,4 @@ export const VITE_WALLET_CONNECT_ID = import.meta.env.VITE_WALLET_CONNECT_ID;
 export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY;
 export const VITE_LIT_RELAY_API_KEY = import.meta.env.VITE_LIT_RELAY_API_KEY;
 export const VITE_LACONICD_CHAIN_ID = import.meta.env.VITE_LACONICD_CHAIN_ID;
-export const VITE_IFRAME_ORIGIN_URL = import.meta.env.VITE_IFRAME_ORIGIN_URL;
+export const VITE_WALLET_IFRAME_URL = import.meta.env.VITE_WALLET_IFRAME_URL;