Not clear form values on error and show errors directly

Author: Jeet

packages/checkout/widgets-lib/rollup.config.js

@@ -10,54 +10,37 @@ const PRODUCTION = 'production';
 
 const isProduction = process.env.NODE_ENV === PRODUCTION
 
-const defaultPlugins = [
-  json(),
-  replace({
-    preventAssignment: true,
-    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || PRODUCTION),
-  }),
-]
-
-const productionPlugins = [
-  commonjs(),
-]
-
-const getPlugins = () => {
-  if (process.env.NODE_ENV !== PRODUCTION) {
-    return defaultPlugins;
-  }
-
-  return [
-    ...defaultPlugins,
-    ...productionPlugins
-  ];
-}
-
 /**
- * @type {import('rollup').RollupOptions[]}
+ * @type {import('rollup').RollupOptions}
  */
-export default [
+export default 
   // browser bundle
   {
     input: 'src/index.ts',
     treeshake: 'smallest',
     output: {
       dir: 'dist/browser',
       format: 'es',
-      inlineDynamicImports: !isProduction,
+      inlineDynamicImports: true,
     },
     plugins: [
        isProduction ? typescript({customConditions: ["default"], declaration: false, outDir: 'dist/browser'}) 
          : swc.rollup({ jsc: { 
          transform: { react: { development: true, runtime: 'automatic' }},
        } }),
-      resolve({
-        browser: true,
-        dedupe: ['react', 'react-dom'],
-        exportConditions: ['default', 'browser'],
-      }),
+      ...(isProduction ? [
+        resolve({
+          browser: true,
+          dedupe: ['react', 'react-dom'],
+          exportConditions: ['default', 'browser'],
+        })
+      ] : []),
       nodePolyfills(),
-      ...getPlugins(),
+      json(),
+      replace({
+        preventAssignment: true,
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || PRODUCTION),
+      }),
+      commonjs(),
     ],
-  },
-]
+  }

packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.tsx

@@ -3,7 +3,7 @@ import {
   useContext, useEffect, useMemo, useState,
 } from 'react';
 import {
-  Box, ButtCon, Heading, Icon, OptionKey, Tooltip,
+  Box, ButtCon, Heading, Icon, OptionKey, Tooltip, Body,
 } from '@biom3/react';
 import { isAddressSanctioned, TokenInfo, WidgetTheme } from '@imtbl/checkout-sdk';
 
@@ -42,7 +42,6 @@ import { CoinSelectorOptionProps } from '../../../components/CoinSelector/CoinSe
 import { useInterval } from '../../../lib/hooks/useInterval';
 import { NotEnoughImx } from '../../../components/NotEnoughImx/NotEnoughImx';
 import { SharedViews, ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
-import { UnableToSwap } from './UnableToSwap';
 import { ConnectLoaderContext } from '../../../context/connect-loader-context/ConnectLoaderContext';
 import useDebounce from '../../../lib/hooks/useDebounce';
 import { CancellablePromise } from '../../../lib/async/cancellablePromise';
@@ -122,6 +121,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
 
   // Quote
   const [quote, setQuote] = useState<TransactionResponse | null>(null);
+  const [quoteError, setQuoteError] = useState<string>('');
   const [gasFeeValue, setGasFeeValue] = useState<string>('');
   const [gasFeeToken, setGasFeeToken] = useState<TokenInfo | undefined>(undefined);
   const [gasFeeFiatValue, setGasFeeFiatValue] = useState<string>('');
@@ -148,7 +148,6 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
 
   // Drawers
   const [showNotEnoughImxDrawer, setShowNotEnoughImxDrawer] = useState(false);
-  const [showUnableToSwapDrawer, setShowUnableToSwapDrawer] = useState(false);
   const [showNetworkSwitchDrawer, setShowNetworkSwitchDrawer] = useState(false);
 
   const [showTxnRejectedState, setShowTxnRejectedState] = useState(false);
@@ -217,9 +216,8 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
     network,
   ]);
 
-  const openUnableToSwapDrawer = useCallback((error: any) => {
-    setShowNotEnoughImxDrawer(false);
-    setShowUnableToSwapDrawer(true);
+  const onQuoteError = useCallback((error: any) => {
+    setQuoteError(error.message);
     track({
       userJourney: UserJourney.SWAP,
       screen: 'SwapCoins',
@@ -262,6 +260,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
     setFromTokenError('');
     setToAmountError('');
     setToTokenError('');
+    setQuoteError('');
   };
 
   const resetQuote = () => {
@@ -349,7 +348,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
         console.error('Error fetching quote.', error);
 
         resetQuote();
-        openUnableToSwapDrawer(error);
+        onQuoteError(error);
       }
     }
 
@@ -425,7 +424,7 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
     } catch (error: any) {
       if (!error.cancelled) {
         resetQuote();
-        openUnableToSwapDrawer(error);
+        onQuoteError(error);
       }
     }
 
@@ -741,7 +740,6 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
   };
 
   const openNotEnoughImxDrawer = () => {
-    setShowUnableToSwapDrawer(false);
     setShowNotEnoughImxDrawer(true);
   };
 
@@ -766,7 +764,8 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
     if (validateToTokenError) setToTokenError(validateToTokenError);
     let isSwapFormValid = true;
     if (
-      validateFromTokenError
+      quoteError
+      || validateFromTokenError
       || validateToTokenError
       || (validateFromAmountError && direction === SwapDirection.FROM)
       || (validateToAmountError && direction === SwapDirection.TO)) isSwapFormValid = false;
@@ -1083,6 +1082,26 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
         />
         )}
       </Box>
+      {quoteError && (
+        <Box sx={{
+          paddingX: 'base.spacing.x4',
+        }}
+        >
+          <Body
+            size="xSmall"
+            weight="bold"
+            sx={{
+              color: 'base.color.text.status.fatal.primary',
+            }}
+            rc={<div />}
+          >
+            Unable to swap this token
+          </Body>
+          <Body size="xxSmall">
+            This token pairing isn&apos;t available to swap right now. Try another selection.
+          </Body>
+        </Box>
+      )}
       {!autoProceed && (
         <SwapButton
           validator={SwapFormValidator}
@@ -1121,16 +1140,6 @@ export function SwapForm({ data, theme, cancelAutoProceed }: SwapFromProps) {
         }}
         onCloseDrawer={() => setShowNotEnoughImxDrawer(false)}
       />
-      <UnableToSwap
-        visible={showUnableToSwapDrawer}
-        onCloseDrawer={() => {
-          setShowUnableToSwapDrawer(false);
-          setFromToken(undefined);
-          setFromAmount('');
-          setToToken(undefined);
-          setToAmount('');
-        }}
-      />
       <NetworkSwitchDrawer
         visible={showNetworkSwitchDrawer}
         targetChainId={getL2ChainId(checkout?.config!)}