From 8fb016757a88b72d6a6b62734b6c22c7390e2735 Mon Sep 17 00:00:00 2001 From: John Oshalusi Date: Tue, 16 Apr 2024 18:27:45 +0100 Subject: [PATCH] feat: add banner to transaction failure screen --- .../CustomSubmitApiWarningBanner.module.scss | 7 +++++++ .../CustomSubmitApiWarningBanner.tsx | 21 +++++++++++++++++++ .../CustomSubmitApiWarningBanner/index.ts | 1 + .../components/Form/Form.module.scss | 4 ---- .../send-transaction/components/Form/Form.tsx | 15 ++++--------- .../components/TransactionFail.tsx | 6 +++++- .../TransactionSuccessView.module.scss | 4 ++++ .../components/CustomSubmitApiDrawer.tsx | 5 +++-- .../browser-extension-wallet/webpack-utils.js | 4 ++-- 9 files changed, 47 insertions(+), 20 deletions(-) create mode 100644 apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/CustomSubmitApiWarningBanner.module.scss create mode 100644 apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/CustomSubmitApiWarningBanner.tsx create mode 100644 apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/index.ts diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/CustomSubmitApiWarningBanner.module.scss b/apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/CustomSubmitApiWarningBanner.module.scss new file mode 100644 index 0000000000..d8ec83a21d --- /dev/null +++ b/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; +} diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/CustomSubmitApiWarningBanner.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/CustomSubmitApiWarningBanner.tsx new file mode 100644 index 0000000000..a3a6dbe373 --- /dev/null +++ b/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 && ( + {t('browserView.transaction.send.customSubmitApiBannerText')}} + withIcon + customIcon={} + /> + ) + ); +}; diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/index.ts b/apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/index.ts new file mode 100644 index 0000000000..6686982ae8 --- /dev/null +++ b/apps/browser-extension-wallet/src/views/browser-view/components/CustomSubmitApiWarningBanner/index.ts @@ -0,0 +1 @@ +export * from './CustomSubmitApiWarningBanner'; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.module.scss index 5d44d27d6c..0986ccf624 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.module.scss +++ b/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; -} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.tsx index bcd319a1f0..bb44980bd8 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/Form.tsx +++ b/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; @@ -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 ( - {isCustomSubmitApiEnabled && ( - } - /> - )} + { const { t } = useTranslation(); @@ -34,7 +35,10 @@ export const TransactionFail = (): React.ReactElement => {
{t('browserView.transaction.fail.problemSubmittingYourTransaction')}
-
{t('browserView.transaction.fail.clickBackAndTryAgain')}
+
+ {t('browserView.transaction.fail.clickBackAndTryAgain')} +
+ } /> diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionSuccessView.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionSuccessView.module.scss index 8ba1776784..998e8cae27 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/TransactionSuccessView.module.scss +++ b/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; +} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/settings/components/CustomSubmitApiDrawer.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/settings/components/CustomSubmitApiDrawer.tsx index 04a1caa84a..871ec36c07 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/settings/components/CustomSubmitApiDrawer.tsx +++ b/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(); + const [customSubmitTxUrl, setCustomSubmitTxUrl] = useState(DEFAULT_SUBMIT_API); const [isValidationError, setIsValidationError] = useState(false); useEffect(() => { getBackgroundStorage() .then((storage) => { - setCustomSubmitTxUrl(storage.customSubmitTxUrl); + setCustomSubmitTxUrl(storage.customSubmitTxUrl || DEFAULT_SUBMIT_API); }) .catch(console.error); }, []); diff --git a/apps/browser-extension-wallet/webpack-utils.js b/apps/browser-extension-wallet/webpack-utils.js index f3773a27ef..1892f495b6 100644 --- a/apps/browser-extension-wallet/webpack-utils.js +++ b/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) {