refactor: enhance payment forms with dynamic decimal handling and validation

Author: flopez7

packages/apps/job-launcher/client/src/components/Jobs/Create/CryptoPayForm.tsx

@@ -312,6 +312,15 @@ export const CryptoPayForm = ({
                 setPaymentTokenSymbol(symbol);
                 setPaymentTokenAddress(address);
                 setTokenDecimals(decimals);
+                if (amount) {
+                  const maxDecimals = Math.min(decimals, 6);
+                  const [integerPart, decimalPart] = amount.split('.');
+                  if (decimalPart && decimalPart.length > maxDecimals) {
+                    setAmount(
+                      `${integerPart}.${decimalPart.slice(0, maxDecimals)}`,
+                    );
+                  }
+                }
               }}
             />
             <FormControl fullWidth>
@@ -320,7 +329,8 @@ export const CryptoPayForm = ({
                 type="number"
                 onChange={(e) => {
                   let value = e.target.value;
-                  if (/^\d*\.?\d{0,6}$/.test(value)) {
+                  const regex = new RegExp(`^\\d*\\.?\\d{0,${decimals}}$`);
+                  if (regex.test(value)) {
                     setAmount(value);
                   }
                 }}

packages/apps/job-launcher/client/src/components/Jobs/Create/FiatPayForm.tsx

@@ -330,7 +330,7 @@ export const FiatPayForm = ({
                       type="number"
                       onChange={(e) => {
                         let value = e.target.value;
-                        if (/^\d*\.?\d{0,6}$/.test(value)) {
+                        if (/^\d*\.?\d{0,2}$/.test(value)) {
                           setAmount(value);
                         }
                       }}

packages/apps/job-launcher/client/src/components/TopUpAccount/CryptoTopUpForm.tsx

@@ -60,6 +60,14 @@ export const CryptoTopUpForm = () => {
     setTokenSymbol(symbol);
     setTokenAddress(address);
     setTokenDecimals(decimals);
+
+    if (amount) {
+      const maxDecimals = Math.min(decimals, 6);
+      const [integerPart, decimalPart] = amount.split('.');
+      if (decimalPart && decimalPart.length > maxDecimals) {
+        setAmount(`${integerPart}.${decimalPart.slice(0, maxDecimals)}`);
+      }
+    }
   };
 
   const handleTopUpAccount = async () => {
@@ -148,7 +156,9 @@ export const CryptoTopUpForm = () => {
                 value={amount}
                 onChange={(e) => {
                   let value = e.target.value;
-                  if (/^\d*\.?\d{0,6}$/.test(value)) {
+                  const maxDecimals = Math.min(tokenDecimals, 6);
+                  const regex = new RegExp(`^\\d*\\.?\\d{0,${maxDecimals}}$`);
+                  if (regex.test(value)) {
                     setAmount(value);
                   }
                 }}

packages/apps/job-launcher/client/src/components/TopUpAccount/FiatTopUpForm.tsx

@@ -147,7 +147,7 @@ export const FiatTopUpForm = () => {
                   type="number"
                   onChange={(e) => {
                     let value = e.target.value;
-                    if (/^\d*\.?\d{0,6}$/.test(value)) {
+                    if (/^\d*\.?\d{0,2}$/.test(value)) {
                       setAmount(value);
                     }
                   }}

packages/apps/job-launcher/server/src/common/utils/tokens.ts

@@ -0,0 +1,14 @@
+import { ChainId } from '@human-protocol/sdk';
+import { TOKEN_ADDRESSES } from '../constants/tokens';
+import { EscrowFundToken } from '../enums/job';
+
+export function getTokenDecimals(
+  chainId: ChainId,
+  symbol: EscrowFundToken,
+  defaultDecimals = 6,
+): number {
+  return Math.min(
+    TOKEN_ADDRESSES[chainId]?.[symbol]?.decimals ?? defaultDecimals,
+    defaultDecimals,
+  );
+}

packages/apps/job-launcher/server/src/modules/job/job.service.ts

@@ -117,6 +117,7 @@ import { WhitelistService } from '../whitelist/whitelist.service';
 import { UserEntity } from '../user/user.entity';
 import { RoutingProtocolService } from '../routing-protocol/routing-protocol.service';
 import { TOKEN_ADDRESSES } from '../../common/constants/tokens';
+import { getTokenDecimals } from '../../common/utils/tokens';
 
 @Injectable()
 export class JobService {
@@ -799,21 +800,14 @@ export class JobService {
       dto.escrowFundToken,
     );
 
-    const paymentTokenDecimals = Math.min(
-      (
-        TOKEN_ADDRESSES[chainId]?.[dto.paymentCurrency as EscrowFundToken] ?? {
-          decimals: 6,
-        }
-      ).decimals,
-      6,
+    const paymentTokenDecimals = getTokenDecimals(
+      chainId,
+      dto.paymentCurrency as EscrowFundToken,
     );
-    const fundTokenDecimals = Math.min(
-      (
-        TOKEN_ADDRESSES[chainId]?.[dto.escrowFundToken as EscrowFundToken] ?? {
-          decimals: 6,
-        }
-      ).decimals,
-      6,
+
+    const fundTokenDecimals = getTokenDecimals(
+      chainId,
+      dto.escrowFundToken as EscrowFundToken,
     );
 
     const paymentCurrencyFee = Number(

packages/apps/job-launcher/server/src/modules/payment/payment.controller.ts

@@ -44,9 +44,11 @@ import {
   PaymentFiatConfirmDto,
   PaymentFiatCreateDto,
   PaymentMethodIdDto,
+  TokensResponseDto,
   UserBalanceDto,
 } from './payment.dto';
 import { PaymentService } from './payment.service';
+import { TokenDto } from './payment.dto';
 
 @ApiBearerAuth()
 @UseGuards(JwtAuthGuard)
@@ -440,19 +442,16 @@ export class PaymentController {
   @ApiResponse({
     status: 200,
     description: 'Tokens retrieved successfully',
-    type: [Object],
+    type: [TokenDto],
   })
   @ApiResponse({
     status: 400,
     description: 'Bad Request. Invalid chainId.',
   })
   @Get('/tokens/:chainId')
-  public async getTokens(@Param('chainId') chainId: ChainId): Promise<{
-    [key: string]: {
-      address: string;
-      decimals: number;
-    };
-  }> {
+  public async getTokens(
+    @Param('chainId') chainId: ChainId,
+  ): Promise<TokensResponseDto> {
     const tokens = TOKEN_ADDRESSES[chainId];
     if (!tokens) {
       throw new ControlledError(

packages/apps/job-launcher/server/src/modules/payment/payment.dto.ts

@@ -242,3 +242,21 @@ export class UserBalanceDto {
   @ApiProperty({ name: 'total_usd_amount' })
   totalUsdAmount: number;
 }
+
+export class TokenDto {
+  @ApiProperty({
+    description: 'The address of the token contract',
+    example: '0x1234567890abcdef1234567890abcdef12345678',
+  })
+  address: string;
+
+  @ApiProperty({
+    description: 'The number of decimals used by the token',
+    example: 18,
+  })
+  decimals: number;
+}
+
+export class TokensResponseDto {
+  [key: string]: TokenDto;
+}