feat: add banner to transaction failure screen

apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/CustomSubmitApiWarningBanner.module.scss

@@ -0,0 +1,7 @@
+.exclamationIcon {
+  height: 72px !important;
+}
+
+.message {
+  text-align: left;
+}

apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/CustomSubmitApiWarningBanner.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import ExclamationIcon from '@assets/icons/exclamation-triangle-red.component.svg';
+import styles from './CustomSubmitApiWarningBanner.module.scss';
+import { useWalletStore } from '@stores';
+import { useTranslation } from 'react-i18next';
+import { Banner } from '@lace/common';
+
+export const CustomSubmitApiWarningBanner = () => {
+  const { isCustomSubmitApiEnabled } = useWalletStore();
+  const { t } = useTranslation();
+
+  return (
+    isCustomSubmitApiEnabled && (
+      <Banner
+        message={<div className={styles.message}>{t('browserView.transaction.send.customSubmitApiBannerText')}</div>}
+        withIcon
+        customIcon={<ExclamationIcon className={styles.exclamationIcon} />}
+      />
+    )
+  );
+};

apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/index.ts

@@ -0,0 +1 @@
+export * from './CustomSubmitApiWarningBanner';

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.module.scss

@@ -73,7 +73,3 @@
     text-align: center;
   }
 }
-
-.exclamationIcon {
-  height: 72px !important;
-}

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.tsx

@@ -6,7 +6,7 @@ import { PriceResult } from '@hooks';
 import { useCurrencyStore } from '@providers';
 import { Wallet } from '@lace/cardano';
 import { SendTransactionCost } from '@lace/core';
-import { Banner, Button, useObservable } from '@lace/common';
+import { Button, useObservable } from '@lace/common';
 import { useWalletStore } from '@src/stores';
 import { useMaxAda } from '@hooks/useMaxAda';
 import BundleIcon from '../../../../../../assets/icons/bundle-icon.component.svg';
@@ -17,7 +17,7 @@ import { MetadataInput } from './MetadataInput';
 import { BundlesList } from './BundlesList';
 import { formatAdaAllocation, getNextBundleCoinId } from './util';
 import styles from './Form.module.scss';
-import ExclamationIcon from '@assets/icons/exclamation-triangle-red.component.svg';
+import { CustomSubmitApiWarningBanner } from '@views/browser/components/CustomSubmitApiWarningBanner';
 
 export interface Props {
   assets: Map<Wallet.Cardano.AssetId, Wallet.Asset.AssetInfo>;
@@ -39,8 +39,7 @@ export const Form = ({
   const { t } = useTranslation();
   const {
     inMemoryWallet,
-    walletUI: { cardanoCoin },
-    isCustomSubmitApiEnabled
+    walletUI: { cardanoCoin }
   } = useWalletStore();
   const balance = useObservable(inMemoryWallet.balance.utxo.total$);
   const { builtTxData: { totalMinimumCoins, uiTx } = {} } = useBuiltTxState();
@@ -106,13 +105,7 @@ export const Form = ({
 
   return (
     <Skeleton loading={isLoading}>
-      {isCustomSubmitApiEnabled && (
-        <Banner
-          message={t('browserView.transaction.send.customSubmitApiBannerText')}
-          withIcon
-          customIcon={<ExclamationIcon className={styles.exclamationIcon} />}
-        />
-      )}
+      <CustomSubmitApiWarningBanner />
       <BundlesList
         isPopupView={isPopupView}
         coinBalance={coinBalance}

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionFail.tsx

@@ -5,6 +5,7 @@ import { useAnalyticsContext } from '@providers';
 import { PostHogAction, TX_CREATION_TYPE_KEY, TxCreationType } from '@providers/AnalyticsProvider/analyticsTracker';
 import styles from './TransactionSuccessView.module.scss';
 import { useAnalyticsSendFlowTriggerPoint } from '../store';
+import { CustomSubmitApiWarningBanner } from '@views/browser/components/CustomSubmitApiWarningBanner';
 
 export const TransactionFail = (): React.ReactElement => {
   const { t } = useTranslation();
@@ -34,7 +35,10 @@ export const TransactionFail = (): React.ReactElement => {
             <div data-testid="send-error-description">
               {t('browserView.transaction.fail.problemSubmittingYourTransaction')}
             </div>
-            <div data-testid="send-error-description2">{t('browserView.transaction.fail.clickBackAndTryAgain')}</div>
+            <div data-testid="send-error-description2" className={styles.message}>
+              {t('browserView.transaction.fail.clickBackAndTryAgain')}
+            </div>
+            <CustomSubmitApiWarningBanner />
           </>
         }
       />

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionSuccessView.module.scss

@@ -8,3 +8,7 @@
   flex: 1;
   justify-content: center;
 }
+
+.message {
+  margin-bottom: 34px;
+}

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/CustomSubmitApiDrawer.tsx

@@ -23,6 +23,7 @@ interface CustomSubmitApiDrawerProps {
 }
 
 const LEARN_SUBMIT_API_URL = 'https://github.com/IntersectMBO/cardano-node/tree/master/cardano-submit-api';
+const DEFAULT_SUBMIT_API = 'http://localhost:8090/api/submit/tx';
 
 export const CustomSubmitApiDrawer = ({
   visible,
@@ -34,13 +35,13 @@ export const CustomSubmitApiDrawer = ({
   const { isCustomSubmitApiEnabled } = useWalletStore();
   const analytics = useAnalyticsContext();
 
-  const [customSubmitTxUrl, setCustomSubmitTxUrl] = useState<string>();
+  const [customSubmitTxUrl, setCustomSubmitTxUrl] = useState<string>(DEFAULT_SUBMIT_API);
   const [isValidationError, setIsValidationError] = useState<boolean>(false);
 
   useEffect(() => {
     getBackgroundStorage()
       .then((storage) => {
-        setCustomSubmitTxUrl(storage.customSubmitTxUrl);
+        setCustomSubmitTxUrl(storage.customSubmitTxUrl || DEFAULT_SUBMIT_API);
       })
       .catch(console.error);
   }, []);

apps/browser-extension-wallet/webpack-utils.js

@@ -25,8 +25,8 @@ const transformManifest = (content, mode) => {
       .replace(
         '$LOCALHOST_CONNECT_SRC',
         mode === 'development'
-          ? 'http://localhost:* ws://localhost:3000 ws://0.0.0.0:3000/ws wss://localhost:3000  ws://localhost:3001 ws://0.0.0.0:3001/ws wss://localhost:3001'
-          : 'http://localhost:*'
+          ? 'http://localhost:* http://127.0.0.1:* ws://localhost:3000 ws://0.0.0.0:3000/ws wss://localhost:3000  ws://localhost:3001 ws://0.0.0.0:3001/ws wss://localhost:3001'
+          : 'http://localhost:* http://127.0.0.1:*'
       );
 
     if (process.env.LACE_EXTENSION_KEY) {