Merge pull request #581 from klever-io/staging

Deploy 10/02/26

Author: samufacanha2

src/components/TransactionForms/CustomForms/AssetTrigger.tsx

@@ -27,6 +27,7 @@ import {
   parseStaking,
   parseURIs,
 } from './utils';
+import { getKDAFeePoolHelperText } from './utils/kdaFeePool';
 import { assetTriggerTooltips as tooltip } from './utils/tooltips';
 
 export interface IMetadataOptions {
@@ -348,30 +349,7 @@ const getAssetTriggerForm = (
       );
     case 15:
       return (
-        <FormSection>
-          <FormInput
-            name="kdaPool.adminAddress"
-            title="Admin Address"
-            dynamicInitialValue={walletAddress}
-            required
-          />
-          <FormInput
-            name="kdaPool.quotient"
-            title="KDA/KLV Quotient"
-            type="number"
-            required
-            tooltip={tooltip.updateKdaPool.quotient}
-          />
-          <FormInput
-            name="kdaPool.active"
-            title="Active"
-            type="checkbox"
-            toggleOptions={['No', 'Yes']}
-            dynamicInitialValue={true}
-            bool
-            tooltip={tooltip.updateKdaPool.active}
-          />
-        </FormSection>
+        <KDAFeePoolForm collection={collection} walletAddress={walletAddress} />
       );
     case 16:
       return null;
@@ -382,6 +360,46 @@ const getAssetTriggerForm = (
   }
 };
 
+const KDAFeePoolForm: React.FC<{
+  collection: ICollectionList;
+  walletAddress: string;
+}> = ({ collection, walletAddress }) => {
+  const { watch } = useFormContext();
+  const quotient = watch('kdaPool.quotient');
+
+  const assetName = collection.label || collection.value || 'KDA';
+
+  const helperText = getKDAFeePoolHelperText(quotient, assetName);
+
+  return (
+    <FormSection>
+      <FormInput
+        name="kdaPool.adminAddress"
+        title="Admin Address"
+        dynamicInitialValue={walletAddress}
+        required
+      />
+      <FormInput
+        name="kdaPool.quotient"
+        title="KDA per KLV Rate"
+        type="number"
+        required
+        tooltip={tooltip.updateKdaPool.quotient}
+        helperText={helperText}
+      />
+      <FormInput
+        name="kdaPool.active"
+        title="Active"
+        type="checkbox"
+        toggleOptions={['No', 'Yes']}
+        dynamicInitialValue={true}
+        bool
+        tooltip={tooltip.updateKdaPool.active}
+      />
+    </FormSection>
+  );
+};
+
 export const AddRoleSection: React.FC<PropsWithChildren> = () => {
   const network = getNetwork();
 

src/components/TransactionForms/CustomForms/utils/kdaFeePool.test.ts

@@ -0,0 +1,67 @@
+import { getKDAFeePoolHelperText } from './kdaFeePool';
+
+describe('getKDAFeePoolHelperText', () => {
+  it('should return helper text for a positive integer quotient', () => {
+    const result = getKDAFeePoolHelperText(2, 'TIKTOK-TSE0');
+    expect(result).toBe(
+      'If a fee costs 10 KLV, users will pay 20 TIKTOK-TSE0',
+    );
+  });
+
+  it('should return helper text for a decimal quotient', () => {
+    const result = getKDAFeePoolHelperText(0.5, 'USDT-23V8');
+    expect(result).toBe('If a fee costs 10 KLV, users will pay 5 USDT-23V8');
+  });
+
+  it('should return helper text for a string quotient', () => {
+    const result = getKDAFeePoolHelperText('3', 'KDA');
+    expect(result).toBe('If a fee costs 10 KLV, users will pay 30 KDA');
+  });
+
+  it('should return undefined for zero quotient', () => {
+    expect(getKDAFeePoolHelperText(0, 'KDA')).toBeUndefined();
+  });
+
+  it('should return undefined for negative quotient', () => {
+    expect(getKDAFeePoolHelperText(-1, 'KDA')).toBeUndefined();
+  });
+
+  it('should return undefined for empty string', () => {
+    expect(getKDAFeePoolHelperText('', 'KDA')).toBeUndefined();
+  });
+
+  it('should return undefined for null', () => {
+    expect(getKDAFeePoolHelperText(null, 'KDA')).toBeUndefined();
+  });
+
+  it('should return undefined for undefined', () => {
+    expect(getKDAFeePoolHelperText(undefined, 'KDA')).toBeUndefined();
+  });
+
+  it('should return undefined for NaN input', () => {
+    expect(getKDAFeePoolHelperText('abc', 'KDA')).toBeUndefined();
+  });
+
+  it('should return undefined for Infinity', () => {
+    expect(getKDAFeePoolHelperText(Infinity, 'KDA')).toBeUndefined();
+  });
+
+  it('should handle small decimal quotients without floating point artifacts', () => {
+    const result = getKDAFeePoolHelperText(0.02, 'TIKTOK-TSE0');
+    expect(result).toContain('If a fee costs 10 KLV, users will pay');
+    expect(result).toContain('TIKTOK-TSE0');
+    expect(result).not.toContain('0.20000000000000001');
+  });
+
+  it('should show less-than text for extremely small quotients', () => {
+    const result = getKDAFeePoolHelperText(1e-10, 'TINY-ABC1');
+    expect(result).toBe(
+      'If a fee costs 10 KLV, users will pay < 0.00000001 TINY-ABC1',
+    );
+  });
+
+  it('should format normally when amount equals MIN_DISPLAYABLE_AMOUNT', () => {
+    const result = getKDAFeePoolHelperText(1e-9, 'KDA');
+    expect(result).toBe('If a fee costs 10 KLV, users will pay 0.00000001 KDA');
+  });
+});

src/components/TransactionForms/CustomForms/utils/kdaFeePool.ts

@@ -0,0 +1,23 @@
+const MIN_DISPLAYABLE_AMOUNT = 1e-8;
+
+export const getKDAFeePoolHelperText = (
+  quotient: unknown,
+  assetName: string,
+): string | undefined => {
+  const numericQuotient = Number(quotient);
+  const amount = 10 * numericQuotient;
+
+  if (!Number.isFinite(amount) || numericQuotient <= 0) {
+    return undefined;
+  }
+
+  if (amount > 0 && amount < MIN_DISPLAYABLE_AMOUNT) {
+    return `If a fee costs 10 KLV, users will pay < 0.00000001 ${assetName}`;
+  }
+
+  const formattedAmount = amount.toLocaleString(undefined, {
+    maximumFractionDigits: 8,
+  });
+
+  return `If a fee costs 10 KLV, users will pay ${formattedAmount} ${assetName}`;
+};

src/components/TransactionForms/CustomForms/utils/tooltips.ts

@@ -93,7 +93,7 @@ export const assetTriggerTooltips = {
   },
   updateKdaPool: {
     quotient:
-      'KDA ratio for each KLV E.g.: when KLV the quotient is 2, the cost is 2 KDA per 1 KLV',
+      'How many units of your token equal 1 KLV for fee payment. Example: if set to 2, users pay 2 of your token for every 1 KLV in fees.',
     active: '"Yes" if the pooling should be active',
   },
   role: {

src/components/TransactionForms/FormInput/index.tsx

@@ -24,6 +24,7 @@ import {
   DropdownCustomLabelSelectStyles,
   ErrorMessage,
   FileInput,
+  HelperText,
   InfoIcon,
   InputLabel,
   RequiredSpan,
@@ -79,6 +80,7 @@ export interface IBaseFormInputProps
   loading?: boolean;
   warning?: boolean;
   propsValidate?: () => any;
+  helperText?: string | React.ReactNode;
 }
 
 export interface IFormInputProps extends IBaseFormInputProps {
@@ -190,6 +192,7 @@ const FormInput: React.FC<
   loading = false,
   warning,
   propsValidate,
+  helperText,
   ...rest
 }) => {
   const areaRef = useRef<HTMLTextAreaElement | null>(null);
@@ -534,6 +537,9 @@ const FormInput: React.FC<
       {logoError && (
         <ErrorMessage warning={!!logoError}>{logoError}</ErrorMessage>
       )}
+      {helperText && !error && !apiError && !logoError && (
+        <HelperText>{helperText}</HelperText>
+      )}
     </Container>
   );
 };

src/components/TransactionForms/FormInput/styles.ts

@@ -407,6 +407,18 @@ export const ErrorMessage = styled.span<{ warning?: boolean }>`
     `}
 `;
 
+export const HelperText = styled.span`
+  && {
+    color: ${({ theme }) => theme.darkText};
+    opacity: 0.6;
+    font-size: 0.8rem;
+    font-weight: 400;
+    position: absolute;
+    bottom: -1.1rem;
+    left: 0;
+  }
+`;
+
 export const MarginRightAutoLabel = styled.span`
   width: 100%;
   margin-right: auto;

src/pages/smart-contract-transaction/[hash].tsx

@@ -20,6 +20,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { smartContractTransactionDetailsCall } from '@/services/requests/smartContracts';
 import dynamic from 'next/dynamic';
 import { isKVMAvailable } from '@/utils/kvm';
+import nextI18nextConfig from '../../../next-i18next.config';
 
 const SmartContractTransaction: React.FC = () => {
   const router = useRouter();
@@ -87,7 +88,12 @@ export const getServerSideProps: GetServerSideProps = async ({
       notFound: true,
     };
   }
-  const props = await serverSideTranslations(locale, ['en']);
+  const props = await serverSideTranslations(
+    locale,
+    ['common'],
+    nextI18nextConfig,
+    ['en'],
+  );
   return { props };
 };