feat: add error banner

apps/browser-extension-wallet/package.json

@@ -52,6 +52,7 @@
     "@lace/cardano": "0.1.0",
     "@lace/common": "0.1.0",
     "@lace/core": "0.1.0",
+    "@lace/icons": "workspace:^",
     "@lace/staking": "0.1.0",
     "@lace/ui": "^0.1.0",
     "@react-rxjs/core": "^0.9.8",

apps/browser-extension-wallet/src/hooks/useInitializeTx.ts

@@ -1,3 +1,4 @@
+/* eslint-disable consistent-return */
 import { useEffect, useCallback } from 'react';
 import { Wallet } from '@lace/cardano';
 import { BuiltTxData, OutputsMap } from '../views/browser-view/features/send-transaction/types';
@@ -29,7 +30,11 @@ export const coinSelectionErrors = new Map<COIN_SELECTION_ERRORS, TranslationKey
 
 export const getErrorMessage =
   (t: UseTranslationResponse<'translation'>['t']) =>
-  (key: COIN_SELECTION_ERRORS): string => {
+  (key: COIN_SELECTION_ERRORS): string | undefined => {
+    if (key === COIN_SELECTION_ERRORS.FULLY_DEPLETED_ERROR) {
+      return;
+    }
+
     if (coinSelectionErrors.has(key)) {
       return t(coinSelectionErrors.get(key));
     }

apps/browser-extension-wallet/src/lib/translations/en.json

@@ -453,6 +453,7 @@
   "browserView.transaction.send.advancedTransaction": "Advanced transaction",
   "browserView.transaction.send.confirmationTitle": "Transaction confirmation",
   "browserView.transaction.send.customSubmitApiBannerText": "Custom submit API enabled to send transactions. To disable, go to Settings >> Custom submit API",
+  "browserView.transaction.send.utxoDepletedBannerText": "Due to the minUTXO requirement for native assets, some ADA in your portfolio cannot be spent.",
   "browserView.transaction.send.drawer.addBundle": "Add bundle",
   "browserView.transaction.send.drawer.addressBook": "Address book",
   "browserView.transaction.send.drawer.addressBookEmpty": "You don't have saved addresses yet",

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

@@ -2,11 +2,11 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Skeleton } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { Tokens } from '@src/types';
-import { PriceResult, useCustomSubmitApi } from '@hooks';
+import { COIN_SELECTION_ERRORS, PriceResult, useCustomSubmitApi } from '@hooks';
 import { useCurrencyStore } from '@providers';
 import { Wallet } from '@lace/cardano';
 import { SendTransactionCost } from '@lace/core';
-import { Button, useObservable, WarningBanner } from '@lace/common';
+import { Banner, Button, useObservable, WarningBanner } from '@lace/common';
 import { useWalletStore } from '@src/stores';
 import { useMaxAda } from '@hooks/useMaxAda';
 import BundleIcon from '../../../../../../assets/icons/bundle-icon.component.svg';
@@ -16,6 +16,8 @@ import { getReachedMaxAmountList } from '../../helpers';
 import { MetadataInput } from './MetadataInput';
 import { BundlesList } from './BundlesList';
 import { formatAdaAllocation, getNextBundleCoinId } from './util';
+import { Text } from '@lace/ui';
+import { ReactComponent as WarningIconCircle } from '@lace/icons/dist/WarningIconCircleComponent';
 import styles from './Form.module.scss';
 
 export interface Props {
@@ -42,7 +44,7 @@ export const Form = ({
     environmentName
   } = useWalletStore();
   const balance = useObservable(inMemoryWallet.balance.utxo.total$);
-  const { builtTxData: { totalMinimumCoins, uiTx } = {} } = useBuiltTxState();
+  const { builtTxData: { totalMinimumCoins, uiTx, error } = {} } = useBuiltTxState();
 
   const [isBundle, setIsBundle] = useState(false);
   const tokensUsed = useSpentBalances();
@@ -109,6 +111,17 @@ export const Form = ({
       {getCustomSubmitApiForNetwork(environmentName).status && (
         <WarningBanner message={t('browserView.transaction.send.customSubmitApiBannerText')} />
       )}
+      {error === COIN_SELECTION_ERRORS.FULLY_DEPLETED_ERROR && (
+        <Banner
+          withIcon
+          message={<Text.Button>{t('browserView.transaction.send.utxoDepletedBannerText')}</Text.Button>}
+          customIcon={
+            <Text.Label color="warning">
+              <WarningIconCircle />
+            </Text.Label>
+          }
+        />
+      )}
       <BundlesList
         isPopupView={isPopupView}
         coinBalance={coinBalance}

packages/ui/src/design-system/text/text.css.ts

@@ -44,6 +44,7 @@ export const typography = recipe({
       highlight: sx({ color: '$data_blue' }),
       success: sx({ color: '$data_green' }),
       error: sx({ color: '$data_pink' }),
+      warning: sx({ color: '$data_orange' }),
     },
   },
 });

packages/ui/src/design-system/text/text.stories.tsx

@@ -86,6 +86,7 @@ const colors: TypographyVariants['color'][] = [
   'error',
   'success',
   'accent',
+  'warning',
 ];
 
 export const Overview = (): JSX.Element => (

yarn.lock

@@ -10720,6 +10720,7 @@ __metadata:
     "@lace/cardano": 0.1.0
     "@lace/common": 0.1.0
     "@lace/core": 0.1.0
+    "@lace/icons": "workspace:^"
     "@lace/staking": 0.1.0
     "@lace/ui": ^0.1.0
     "@react-rxjs/core": ^0.9.8
@@ -10927,7 +10928,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@lace/icons@0.1.0, @lace/icons@^0.1.0, @lace/icons@workspace:packages/icons":
+"@lace/icons@0.1.0, @lace/icons@^0.1.0, @lace/icons@workspace:^, @lace/icons@workspace:packages/icons":
   version: 0.0.0-use.local
   resolution: "@lace/icons@workspace:packages/icons"
   dependencies: