improve states and validation

Author: juliancwirko

components/home-cards.tsx

@@ -97,6 +97,32 @@ export const HomeCards = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const getPendingVariant = () => {
+    if (dialogContentArgs?.tokenTransfer) return transferPending;
+    if (dialogContentArgs?.multiTokenTransfer) return multiTransferPending;
+    return pending;
+  };
+
+  const getTxHashVariant = () => {
+    if (dialogContentArgs?.tokenTransfer)
+      return transferTransaction?.getHash().toString();
+    if (dialogContentArgs?.multiTokenTransfer)
+      return multiTransferTransaction?.getHash().toString();
+    return transaction?.getHash().toString();
+  };
+
+  const getTxErrorVariant = () => {
+    if (dialogContentArgs?.tokenTransfer) return transferError;
+    if (dialogContentArgs?.multiTokenTransfer) return multiTransferError;
+    return error;
+  };
+
+  const getTxResultVariant = () => {
+    if (dialogContentArgs?.tokenTransfer) return transferTxResult;
+    if (dialogContentArgs?.multiTokenTransfer) return multiTransferTxResult;
+    return txResult;
+  };
+
   return (
     <OperationsStateDialogProvider>
       <div className="flex flex-row gap-6 flex-wrap mb-6">
@@ -598,37 +624,16 @@ export const HomeCards = () => {
 
       {/* TODO: refactor, remove state dialog, reuse the operation dialog for states */}
       <OperationsStateDialogWrapper
-        txPending={
-          dialogContentArgs?.tokenTransfer
-            ? transferPending || multiTransferPending
-            : pending
-        }
-        txHash={
-          dialogContentArgs?.tokenTransfer
-            ? transferTransaction?.getHash().toString() ||
-              multiTransferTransaction?.getHash().toString()
-            : transaction?.getHash().toString()
-        }
-        txError={
-          dialogContentArgs?.tokenTransfer
-            ? transferError || multiTransferError
-            : error
-        }
-        scError={getSmartContractTxError(
-          dialogContentArgs?.tokenTransfer
-            ? transferTxResult || multiTransferTxResult
-            : txResult
-        )}
+        txPending={getPendingVariant()}
+        txHash={getTxHashVariant()}
+        txError={getTxErrorVariant()}
+        scError={getSmartContractTxError(getTxResultVariant())}
         operationsContentsMap={operationsContentsMap}
         setDialogContentArgs={setDialogContentArgs}
         additionalInfo={dialogContentArgs?.additionalInfo}
         tokenId={
           dialogContentArgs?.showTokenId &&
-          getTokenIdAfterIssuingOrCreating(
-            dialogContentArgs?.tokenTransfer
-              ? transferTxResult || multiTransferTxResult
-              : txResult
-          )
+          getTokenIdAfterIssuingOrCreating(getTxResultVariant())
         }
       />
     </OperationsStateDialogProvider>

components/operations/general/multi-transfer.tsx

@@ -33,12 +33,10 @@ const formSchema = z
         'Please provide a number, should be a proper Non-fungible ESDT amount. 1 in case of NFTs.'
       ),
     semiFungibleTokenId: z.string(),
-    semiFungibleAmount: z
-      .string()
-      .refine(
-        (value) => value === '' || !new BigNumber(value).isNaN(),
-        'Please provide a number, should be a proper Semi-fungible ESDT amount for that specific token, bigger than 0.'
-      ),
+    semiFungibleAmount: z.string().refine((value) => {
+      const num = new BigNumber(value);
+      return num.isInteger() && num.isGreaterThan(0);
+    }, 'Please provide an integer number, should be a proper SFT amount for that specific token, bigger than 0.'),
     metaTokenId: z.string(),
     metaAmount: z
       .string()

components/operations/operations-content-map.tsx

@@ -51,6 +51,7 @@ export type OperationsContentMap = Record<
       additionalInfo?: string;
       showTokenId?: boolean;
       tokenTransfer?: boolean;
+      multiTokenTransfer?: boolean;
     }
   >
 >;
@@ -509,7 +510,7 @@ export const getOperationsContentsMap = ({
         <MultiTransfer multiTransfer={multiTransfer} close={closeDialog} />
       ),
       additionalInfo: 'You have sent multiple ESDTs.',
-      tokenTransfer: true,
+      multiTokenTransfer: true,
     },
     signMessage: {
       component: <SignMessage />,

components/operations/operations-status-dialog.tsx

@@ -60,6 +60,7 @@ export type DialogStateContentArgs = {
   showTokenId?: boolean;
   additionalInfo?: string;
   tokenTransfer?: boolean;
+  multiTokenTransfer?: boolean;
 };
 
 type OperationsStateDialogWrapperProps = {

components/operations/semi-fungible-tokens/send.tsx

@@ -20,12 +20,10 @@ import BigNumber from 'bignumber.js';
 const formSchema = z.object({
   tokenId: z.string().min(1, 'The field is required'),
   address: z.string().min(1, 'The field is required'),
-  amount: z
-    .string()
-    .refine(
-      (value) => !new BigNumber(value).isNaN(),
-      'Please provide a number, should be a proper SFT amount for that specific token, bigger than 0.'
-    ),
+  amount: z.string().refine((value) => {
+    const num = new BigNumber(value);
+    return num.isInteger() && num.isGreaterThan(0);
+  }, 'Please provide an integer number, should be a proper SFT amount for that specific token, bigger than 0.'),
 });
 
 export const Send = ({ transfer, close }: OperationContentProps) => {

package-lock.json

@@ -40,7 +40,7 @@
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",
     "keccak": "3.0.4",
-    "lucide-react": "0.303.0",
+    "lucide-react": "0.331.0",
     "next": "14.1.0",
     "next-themes": "0.2.1",
     "qrcode": "1.5.3",