[READY] 456 Create UI for BRLa offramp KYC

package.json

@@ -53,7 +53,7 @@
     "motion": "^12.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-hook-form": "^7.51.5",
+    "react-hook-form": "^7.54.2",
     "react-toastify": "^10.0.6",
     "stellar-base": "^11.0.1",
     "stellar-sdk": "^13.1.0",

signer-service/src/api/controllers/brla.controller.ts

@@ -2,7 +2,19 @@ import { Request, Response } from 'express';
 import { BrlaApiService } from '../services/brla/brlaApiService';
 import { RegisterSubaccountPayload, TriggerOfframpRequest } from '../services/brla/types';
 import { eventPoller } from '../..';
-
+/**
+ * Retrieves a BRLA user's information based on Tax ID
+ *
+ * This endpoint fetches a user's subaccount information from the BRLA API service.
+ * It validates that the user exists and has completed KYC level 1 verification.
+ * If successful, it returns the user's EVM wallet address which is needed for offramp operations.
+ *
+ * @returns void - Sends JSON response with evmAddress on success, or appropriate error status
+ *
+ * @throws 400 - If taxId or pixId are missing or if KYC level is invalid
+ * @throws 404 - If the subaccount cannot be found
+ * @throws 500 - For any server-side errors during processing
+ */
 export const getBrlaUser = async (req: Request<{}, {}, {}, { taxId: string }>, res: Response): Promise<void> => {
   try {
     const { taxId } = req.query;
@@ -12,6 +24,7 @@ export const getBrlaUser = async (req: Request<{}, {}, {}, { taxId: string }>, r
       return;
     }
 
+    // TODO how to check that pixId is valid, as a later offramp will get stuck if it's not valid..
     const brlaApiService = BrlaApiService.getInstance();
     const subaccount = await brlaApiService.getSubaccount(taxId);
     if (!subaccount) {

signer-service/src/api/middlewares/validators.ts

@@ -312,7 +312,7 @@ export const validateBrlaTriggerOfframpInput: RequestHandler = (req, res, next)
 };
 
 export const validataSubaccountCreation: RequestHandler = (req, res, next) => {
-  const { phone, taxIdType, address, fullName, cpf, birthDate, companyName, startDate, cnpj } =
+  const { phone, taxIdType, address, fullName, cpf, birthdate, companyName, startDate, cnpj } =
     req.body as RegisterSubaccountPayload;
 
   if (taxIdType !== 'CPF' && taxIdType !== 'CNPJ') {
@@ -340,8 +340,8 @@ export const validataSubaccountCreation: RequestHandler = (req, res, next) => {
     return;
   }
 
-  if (!birthDate) {
-    res.status(400).json({ error: 'Missing birthDate parameter' });
+  if (!birthdate) {
+    res.status(400).json({ error: 'Missing birthdate parameter' });
     return;
   }
 

signer-service/src/api/services/brla/brlaApiService.ts

@@ -138,11 +138,9 @@ export class BrlaApiService {
       return undefined;
     }
   }
-
   public async getSubaccount(taxId: string): Promise<SubaccountData | undefined> {
-    const endpoint = `/subaccounts`;
     const query = `taxId=${encodeURIComponent(taxId)}`;
-    const response = await this.sendRequest(endpoint, 'GET', query);
+    const response = await this.sendRequest('/subaccounts', 'GET', query);
     return response.subaccounts[0];
   }
 

signer-service/src/api/services/brla/types.ts

@@ -48,7 +48,7 @@ export interface RegisterSubaccountPayload {
   address: BrlaAddress;
   fullName: string;
   cpf: string;
-  birthDate: string;
+  birthdate: string;
   companyName?: string;
   startDate?: string;
   cnpj?: string;

src/components/BrlaComponents/BrlaExtendedForm.tsx

@@ -0,0 +1,113 @@
+import { RefObject } from 'react';
+
+import { useKYCProcess } from '../../hooks/brla/useBRLAKYCProcess';
+import { useKYCForm } from '../../hooks/brla/useKYCForm';
+
+import { FeeComparisonRef } from '../FeeComparison';
+import { VerificationStatus } from './VerificationStatus';
+import { BrlaFieldProps, ExtendedBrlaFieldOptions } from './BrlaField';
+import { KYCForm } from './KYCForm';
+
+interface PIXKYCFormProps {
+  feeComparisonRef: RefObject<FeeComparisonRef | null>;
+  setIsOfframpSummaryDialogVisible: (isVisible: boolean) => void;
+  onSwapConfirm: () => void;
+}
+
+const PIXKYCFORM_FIELDS: BrlaFieldProps[] = [
+  {
+    id: ExtendedBrlaFieldOptions.PHONE,
+    label: 'Phone Number',
+    type: 'text',
+    placeholder: 'Phone Number',
+    required: true,
+    index: 0,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.FULL_NAME,
+    label: 'Full Name',
+    type: 'text',
+    placeholder: 'Full Name',
+    required: true,
+    index: 1,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.CEP,
+    label: 'CEP',
+    type: 'text',
+    placeholder: 'CEP',
+    required: true,
+    index: 2,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.CITY,
+    label: 'City',
+    type: 'text',
+    placeholder: 'City',
+    required: true,
+    index: 3,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.STATE,
+    label: 'State',
+    type: 'text',
+    placeholder: 'State',
+    required: true,
+    index: 4,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.STREET,
+    label: 'Street',
+    type: 'text',
+    placeholder: 'Street',
+    required: true,
+    index: 5,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.NUMBER,
+    label: 'Number',
+    type: 'text',
+    placeholder: 'Number',
+    required: true,
+    index: 6,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.DISTRICT,
+    label: 'District',
+    type: 'text',
+    placeholder: 'District',
+    required: true,
+    index: 7,
+  },
+  {
+    id: ExtendedBrlaFieldOptions.BIRTHDATE,
+    label: 'Birthdate',
+    type: 'date',
+    required: true,
+    index: 8,
+  },
+];
+
+export const PIXKYCForm = ({ feeComparisonRef, setIsOfframpSummaryDialogVisible }: PIXKYCFormProps) => {
+  const { verificationStatus, statusMessage, handleFormSubmit, handleBackClick, isSubmitted } = useKYCProcess(
+    setIsOfframpSummaryDialogVisible,
+  );
+
+  const { kycForm } = useKYCForm();
+
+  return (
+    <div className="relative">
+      {!isSubmitted ? (
+        <KYCForm
+          fields={PIXKYCFORM_FIELDS}
+          form={kycForm}
+          onSubmit={handleFormSubmit}
+          onBackClick={handleBackClick}
+          feeComparisonRef={feeComparisonRef}
+        />
+      ) : (
+        <VerificationStatus status={verificationStatus} message={statusMessage} />
+      )}
+    </div>
+  );
+};

src/components/BrlaComponents/BrlaField/index.tsx

@@ -0,0 +1,71 @@
+import { FC } from 'react';
+import { useFormContext, useFormState } from 'react-hook-form';
+import { motion } from 'motion/react';
+
+import { Field, FieldProps } from '../../Field';
+
+export enum StandardBrlaFieldOptions {
+  TAX_ID = 'taxId',
+  PIX_ID = 'pixId',
+}
+
+export enum ExtendedBrlaFieldOptions {
+  PHONE = 'phone',
+  ADDRESS = 'address',
+  CEP = 'cep',
+  CITY = 'city',
+  STATE = 'state',
+  STREET = 'street',
+  NUMBER = 'number',
+  DISTRICT = 'district',
+  FULL_NAME = 'fullName',
+  CPF = 'cpf',
+  BIRTHDATE = 'birthdate',
+  EMAIL = 'email',
+}
+
+export type BrlaFieldOptions = StandardBrlaFieldOptions | ExtendedBrlaFieldOptions;
+
+export interface BrlaFieldProps extends FieldProps {
+  id: BrlaFieldOptions;
+  label: string;
+  index: number;
+  validationPattern?: {
+    value: RegExp;
+    message: string;
+  };
+}
+
+export const BrlaField: FC<BrlaFieldProps> = ({ id, label, index, validationPattern, ...rest }) => {
+  // It required to be inside a FormProvider (react-hook-form)
+  const { register } = useFormContext();
+  const { errors } = useFormState();
+  const errorMessage = errors[id]?.message as string;
+
+  return (
+    <motion.div
+      className="mb-4"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      transition={{
+        duration: 0.4,
+        delay: index * 0.15,
+        type: 'spring',
+        stiffness: 300,
+        damping: 15,
+      }}
+    >
+      <label htmlFor={id} className="block mb-1">
+        {label}
+      </label>
+      <Field
+        id={id}
+        register={register(id, { required: true, pattern: validationPattern })}
+        className={`w-full p-2 ${errors[id] ? 'border border-red-500' : ''}`}
+        {...rest}
+      />
+      {errorMessage && <span className="text-red-500 text-sm mt-1">{errorMessage}</span>}
+    </motion.div>
+  );
+};

src/components/BrlaComponents/BrlaSwapFields/index.tsx

@@ -0,0 +1,69 @@
+import { FC } from 'react';
+import { AnimatePresence, motion, MotionProps } from 'motion/react';
+
+import { OutputTokenType, OutputTokenTypes } from '../../../constants/tokenConfig';
+import { BrlaField, StandardBrlaFieldOptions } from '../BrlaField';
+
+interface BrlaSwapFieldsProps {
+  toToken: OutputTokenType;
+}
+
+const containerAnimation: MotionProps = {
+  initial: { opacity: 0, height: 0 },
+  animate: { opacity: 1, height: 'auto' },
+  exit: { opacity: 0, height: 0 },
+  transition: { duration: 0.3 },
+};
+
+const STANDARD_FIELDS = [
+  { id: StandardBrlaFieldOptions.TAX_ID, label: 'Tax ID', index: 0 },
+  { id: StandardBrlaFieldOptions.PIX_ID, label: 'PIX ID', index: 1 },
+];
+
+/**
+ * BrlaSwapFields component
+ *
+ * Renders PIX payment details form fields when Brazilian Real (BRL) is selected
+ * as the destination currency in the Swap form. Collects necessary information
+ * for processing PIX transfers to Brazilian bank accounts.
+ */
+
+export const BrlaSwapFields: FC<BrlaSwapFieldsProps> = ({ toToken }) => (
+  <AnimatePresence>
+    {toToken === OutputTokenTypes.BRL && (
+      <motion.div {...containerAnimation}>
+        <motion.h2
+          className="mb-2 text-2xl font-bold text-center text-blue-700"
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{
+            duration: 0.4,
+            delay: 0.1,
+            type: 'spring',
+            stiffness: 300,
+            damping: 15,
+          }}
+        >
+          PIX Details
+        </motion.h2>
+        <motion.p
+          className="text-gray-400 mb-4"
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{
+            duration: 0.4,
+            delay: 0.2,
+            type: 'spring',
+            stiffness: 300,
+            damping: 15,
+          }}
+        >
+          Which bank account should we send the funds to?
+        </motion.p>
+        {STANDARD_FIELDS.map((field) => (
+          <BrlaField key={field.id} id={field.id} label={field.label} index={field.index} />
+        ))}
+      </motion.div>
+    )}
+  </AnimatePresence>
+);

src/components/BrlaComponents/KYCForm/index.tsx

@@ -0,0 +1,54 @@
+import { RefObject, useCallback } from 'react';
+import { motion } from 'motion/react';
+import { FormProvider, UseFormReturn } from 'react-hook-form';
+
+import { FeeComparisonRef } from '../../FeeComparison';
+import { BrlaField, BrlaFieldProps } from '../BrlaField';
+import { KYCFormData } from '../../../hooks/brla/useKYCForm';
+
+interface KYCFormProps {
+  fields: BrlaFieldProps[];
+  form: UseFormReturn<KYCFormData>;
+  onSubmit: (formData: KYCFormData) => Promise<void>;
+  onBackClick: () => void;
+  feeComparisonRef: RefObject<FeeComparisonRef | null>;
+}
+
+export const KYCForm = ({ form, onSubmit, onBackClick, fields, feeComparisonRef }: KYCFormProps) => {
+  const { handleSubmit } = form;
+
+  const compareFeesClick = useCallback(() => {
+    feeComparisonRef.current?.scrollIntoView();
+  }, [feeComparisonRef]);
+
+  return (
+    <FormProvider {...form}>
+      <motion.form
+        initial={{ scale: 0.9, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.3 }}
+        className="px-4 pt-4 pb-2 mx-4 mt-8 mb-4 rounded-lg shadow-custom md:mx-auto md:w-96 min-h-[480px] flex flex-col"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <h1 className="mt-2 mb-5 text-3xl font-bold text-center text-blue-700">KYC Details</h1>
+        {fields.map((field) => (
+          <BrlaField key={field.id} {...field} />
+        ))}
+
+        <div className="grid gap-3 mt-8 mb-12">
+          <div className="flex gap-3">
+            <button type="button" className="btn-vortex-primary-inverse btn flex-1" onClick={onBackClick}>
+              Back
+            </button>
+            <button type="submit" className="btn-vortex-primary btn flex-1">
+              Continue
+            </button>
+          </div>
+          <button type="button" className="btn-vortex-primary-inverse btn flex-1" onClick={compareFeesClick}>
+            Compare Fees
+          </button>
+        </div>
+      </motion.form>
+    </FormProvider>
+  );
+};