Fix send address bug (#3031)

* remove non-zero and trailing spaces

* update wallet changelog

nym-wallet/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## UNRELEASED
 
+## [nym-wallet-v1.1.10](https://github.com/nymtech/nym/releases/tag/nym-wallet-v1.1.10) (2023-02-21)
+
+- Remove non-zero and trailing white spaces
+- Add error description on failed send txs
+
 ## [nym-wallet-v1.1.9](https://github.com/nymtech/nym/releases/tag/nym-wallet-v1.1.9) (2023-02-14)
 
 - Allow more flexibility for user when setting passwords ([#2993])

nym-wallet/src/components/Send/SendErrorModal.tsx

@@ -1,15 +1,17 @@
 import React from 'react';
-import { SxProps } from '@mui/material';
+import { SxProps, Typography } from '@mui/material';
 import { SimpleModal } from '../Modals/SimpleModal';
 
 export const SendErrorModal = ({
   onClose,
   sx,
   backdropProps,
+  error,
 }: {
   onClose: () => void;
   sx?: SxProps;
   backdropProps?: {};
+  error?: string;
 }) => (
   <SimpleModal
     open
@@ -30,5 +32,7 @@ export const SendErrorModal = ({
     }}
     subHeaderStyles={{ textAlign: 'center', color: 'text.primary', fontSize: 14, fontWeight: 400 }}
     backdropProps={backdropProps}
-  />
+  >
+    <Typography variant="body2">{error}</Typography>
+  </SimpleModal>
 );

nym-wallet/src/components/Send/SendModal.tsx

@@ -22,7 +22,10 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
   const [txDetails, setTxDetails] = useState<TTransactionDetails>();
 
   const { clientDetails, userBalance, network } = useContext(AppContext);
-  const { fee, getFee } = useGetFee();
+  const { fee, getFee, feeError } = useGetFee();
+
+  // removes any zero-width spaces and trailing white space
+  const sanitizeAddress = (address: string) => address.replace(/[\u200B-\u200D\uFEFF]/g, '').trim();
 
   const handleOnNext = async () => {
     if (amount) {
@@ -60,7 +63,7 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
 
   if (isLoading) return <LoadingModal />;
 
-  if (sendError) return <SendErrorModal onClose={onClose} />;
+  if (sendError) return <SendErrorModal onClose={onClose} error={feeError} />;
 
   if (txDetails) return <SendSuccessModal txDetails={txDetails} onClose={onClose} />;
 
@@ -90,7 +93,7 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
       error={error}
       denom={clientDetails?.display_mix_denom}
       onAmountChange={(value) => setAmount(value)}
-      onAddressChange={(value) => setToAddress(value)}
+      onAddressChange={(value) => setToAddress(sanitizeAddress(value))}
       {...hasStorybookStyles}
     />
   );