pendulum-chain · ebma · Jan 14, 2026 · Jan 5, 2026 · Jan 6, 2026 · Jan 6, 2026
diff --git a/apps/frontend/App.css b/apps/frontend/App.css
@@ -6,7 +6,7 @@
   --color-primary-content: #fff;
   --color-secondary: #f4f5f6;
   --color-secondary-content: #58667e;
-  --color-accent: #1de7df;
+  --color-accent: #db2777;
   --color-accent-content: #000;
   --color-neutral: #eff2f5;
   --color-neutral-content: #58667e;

diff --git a/apps/frontend/android-chrome-192x192.png b/apps/frontend/android-chrome-192x192.png
diff --git a/apps/frontend/android-chrome-512x512.png b/apps/frontend/android-chrome-512x512.png
diff --git a/apps/frontend/apple-touch-icon.png b/apps/frontend/apple-touch-icon.png
diff --git a/apps/frontend/favicon-16x16.png b/apps/frontend/favicon-16x16.png
diff --git a/apps/frontend/favicon-32x32.png b/apps/frontend/favicon-32x32.png
diff --git a/apps/frontend/favicon.ico b/apps/frontend/favicon.ico
diff --git a/apps/frontend/favicon.png b/apps/frontend/favicon.png
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/frontend/favicon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/frontend/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/frontend/favicon-16x16.png" />
+    <link rel="icon" type="image/x-icon" href="/frontend/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/frontend/apple-touch-icon.png" />
+    <link rel="manifest" href="/frontend/site.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title translate="no">Vortex</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/apps/frontend/site.webmanifest b/apps/frontend/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "background_color": "#f5f9fa",
+  "display": "standalone",
+  "icons": [
+    {
+      "sizes": "192x192",
+      "src": "/frontend/android-chrome-192x192.png",
+      "type": "image/png"
+    },
+    {
+      "sizes": "512x512",
+      "src": "/frontend/android-chrome-512x512.png",
+      "type": "image/png"
+    }
+  ],
+  "name": "Vortex",
+  "short_name": "Vortex",
+  "theme_color": "#0f4dc0"
+}
diff --git a/apps/frontend/src/components/Avenia/AveniaField/index.tsx b/apps/frontend/src/components/Avenia/AveniaField/index.tsx
@@ -1,3 +1,4 @@
+import { CalendarDaysIcon } from "@heroicons/react/24/outline";
 import { motion } from "motion/react";
 import { FC } from "react";
 import { useFormContext, useFormState } from "react-hook-form";
@@ -69,21 +70,12 @@ export const AveniaField: FC<AveniaFieldProps> = ({ id, label, index, validation
       <label className="mb-1 block" htmlFor={id}>
         {label}
       </label>
-      <Field
-        className={cn("w-full p-2", errors[id] && "border border-red-800")}
-        id={id}
-        register={register(id, {
-          pattern: validationPattern
-            ? {
-                message: validationPattern.message,
-                value: validationPattern.value
-              }
-            : undefined,
-          required: true,
-          validate: validationPattern?.validate
-        })}
-        {...rest}
-      />
+      <div className="relative">
+        <Field className={cn("w-full p-2", errors[id] && "border border-red-800")} id={id} register={register(id)} {...rest} />
+        {id === ExtendedAveniaFieldOptions.BIRTHDATE && (
+          <CalendarDaysIcon className="absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-600 pointer-events-none" />
+        )}
+      </div>
       {errorMessage && <span className="mt-1 text-red-800 text-sm">{errorMessage}</span>}
     </motion.div>
   );

diff --git a/apps/frontend/src/components/Avenia/DocumentUpload/index.tsx b/apps/frontend/src/components/Avenia/DocumentUpload/index.tsx
@@ -161,11 +161,13 @@ export const DocumentUpload: React.FC<DocumentUploadProps> = ({ aveniaKycActor,
     label: string,
     onChange: React.ChangeEventHandler<HTMLInputElement> | undefined,
     valid: boolean,
-    Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
+    Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>,
+    fileName?: string
   ) => (
     <label className="relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 hover:border-blue-500">
       <Icon className="mb-2 h-12 w-12 text-gray-400" />
       <span className="mb-1 text-gray-600">{label}</span>
+      <span className="text-gray-400 text-sm">{fileName || t("components.documentUpload.helperText")}</span>
       <input accept=".png,.jpeg,.jpg,.pdf" className="hidden" onChange={onChange} type="file" />
       {valid && <CheckCircleIcon className="absolute top-2 right-2 h-6 w-6 text-green-500" />}
     </label>
@@ -190,13 +192,15 @@ export const DocumentUpload: React.FC<DocumentUploadProps> = ({ aveniaKycActor,
               t("components.documentUpload.fields.rgFront"),
               e => handleFileChange(e, setFront, setFrontValid),
               frontValid,
-              DocumentTextIcon
+              DocumentTextIcon,
+              front?.name
             )}
             {renderField(
               t("components.documentUpload.fields.rgBack"),
               e => handleFileChange(e, setBack, setBackValid),
               backValid,
-              DocumentTextIcon
+              DocumentTextIcon,
+              back?.name
             )}
           </>
         )}
@@ -205,7 +209,8 @@ export const DocumentUpload: React.FC<DocumentUploadProps> = ({ aveniaKycActor,
             t("components.documentUpload.fields.cnhDocument"),
             e => handleFileChange(e, setFront, setFrontValid),
             frontValid,
-            DocumentTextIcon
+            DocumentTextIcon,
+            front?.name
           )}
       </div>
 

diff --git a/apps/frontend/src/components/QuoteSubmitButtons/index.tsx b/apps/frontend/src/components/QuoteSubmitButtons/index.tsx
@@ -106,7 +106,7 @@ export const QuoteSubmitButton: FC<QuoteSubmitButtonProps> = ({ className, disab
   return (
     <div className={className}>
       <button className="btn-vortex-primary btn w-full" disabled={isSubmitButtonDisabled} onClick={onClick}>
-        {(isQuoteOutdated || pending) && <Spinner />}
+        {(isQuoteOutdated || pending) && !currentErrorMessage && <Spinner />}
         {isMaintenanceDisabled ? buttonProps.title : buttonText}
       </button>
     </div>

diff --git a/apps/frontend/src/components/RampSubmitButton/RampSubmitButton.tsx b/apps/frontend/src/components/RampSubmitButton/RampSubmitButton.tsx
@@ -177,7 +177,7 @@ const useButtonContent = ({ toToken, submitButtonDisabled }: UseButtonContentPro
   ]);
 };
 
-export const RampSubmitButton = ({ className }: { className?: string }) => {
+export const RampSubmitButton = ({ className, hasValidationErrors }: { className?: string; hasValidationErrors?: boolean }) => {
   const rampActor = useRampActor();
   const { onRampConfirm } = useRampSubmission();
   const stellarData = useStellarKycSelector();
@@ -208,6 +208,10 @@ export const RampSubmitButton = ({ className }: { className?: string }) => {
   const toToken = isOnramp ? getOnChainTokenDetailsOrDefault(selectedNetwork, onChainToken) : getAnyFiatTokenDetails(fiatToken);
 
   const submitButtonDisabled = useMemo(() => {
+    if (hasValidationErrors) {
+      return true;
+    }
+
     if (
       walletLocked &&
       (isOfframp || quote?.from === "sepa") &&
@@ -242,6 +246,7 @@ export const RampSubmitButton = ({ className }: { className?: string }) => {
 
     return false;
   }, [
+    hasValidationErrors,
     executionInput,
     isQuoteExpired,
     isOfframp,

diff --git a/apps/frontend/src/components/widget-steps/DetailsStep/DetailsStepActions.tsx b/apps/frontend/src/components/widget-steps/DetailsStep/DetailsStepActions.tsx
@@ -1,4 +1,6 @@
 import { Networks } from "@vortexfi/shared";
+import { useFormContext } from "react-hook-form";
+import { RampFormValues } from "../../../hooks/ramp/schema";
 import { useVortexAccount } from "../../../hooks/useVortexAccount";
 import { ConnectWalletSection } from "../../ConnectWalletSection";
 import { RampSubmitButton } from "../../RampSubmitButton/RampSubmitButton";
@@ -10,12 +12,38 @@ export interface DetailsStepActionsProps {
   requiresConnection: boolean;
   className?: string;
   forceNetwork?: Networks;
+  isBrazilLanding: boolean;
 }
 
-export const DetailsStepActions = ({ signingState, className, requiresConnection, forceNetwork }: DetailsStepActionsProps) => {
+export const DetailsStepActions = ({
+  signingState,
+  className,
+  requiresConnection,
+  forceNetwork,
+  isBrazilLanding
+}: DetailsStepActionsProps) => {
   const { shouldDisplay: signingBoxVisible, signatureState, confirmations } = signingState;
   const { isConnected } = useVortexAccount(forceNetwork);
 
+  const {
+    formState: { errors },
+    watch
+  } = useFormContext<RampFormValues>();
+  const formValues = watch();
+
+  const hasFormErrors = Object.keys(errors).length > 0;
+
+  let hasEmptyForm = false;
+
+  if (isBrazilLanding) {
+    const allRelevantFieldsEmpty = !formValues.taxId || !formValues.walletAddress;
+    hasEmptyForm = allRelevantFieldsEmpty;
+  } else {
+    hasEmptyForm = !formValues.walletAddress;
+  }
+
+  const hasValidationErrors = hasFormErrors || hasEmptyForm;
+
   if (signingBoxVisible) {
     return (
       <div className={`flex grow text-center ${className || ""}`}>
@@ -28,7 +56,7 @@ export const DetailsStepActions = ({ signingState, className, requiresConnection
   return (
     <div className={className}>
       {requiresConnection && <ConnectWalletSection forceNetwork={forceNetwork} />}
-      {displayRampSubmitButton && <RampSubmitButton className="mb-4" />}
+      {displayRampSubmitButton && <RampSubmitButton className="mb-4" hasValidationErrors={hasValidationErrors} />}
     </div>
   );
 };
diff --git a/apps/frontend/src/components/widget-steps/DetailsStep/index.tsx b/apps/frontend/src/components/widget-steps/DetailsStep/index.tsx
@@ -1,10 +1,11 @@
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
 import { FiatToken, Networks } from "@vortexfi/shared";
 import { useSelector } from "@xstate/react";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { FormProvider } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useRampActor } from "../../../contexts/rampState";
+import { RampFormValues } from "../../../hooks/ramp/schema";
 import { useRampForm } from "../../../hooks/ramp/useRampForm";
 import { useRampSubmission } from "../../../hooks/ramp/useRampSubmission";
 import { useSigningBoxState } from "../../../hooks/useSigningBoxState";
@@ -32,6 +33,7 @@ export interface FormData {
   taxId?: string;
   moneriumWalletAddress?: string;
   walletAddress?: string;
+  fiatToken?: FiatToken;
 }
 
 export const DetailsStep = ({ className }: DetailsStepProps) => {
@@ -58,6 +60,7 @@ export const DetailsStep = ({ className }: DetailsStepProps) => {
   const walletForm = walletLockedFromState || address || undefined;
 
   const { form } = useRampForm({
+    fiatToken: quote?.rampType === "BUY" ? (quote.inputCurrency as FiatToken) : (quote?.outputCurrency as FiatToken),
     moneriumWalletAddress: evmAddress,
     pixId,
     taxId,
@@ -72,12 +75,18 @@ export const DetailsStep = ({ className }: DetailsStepProps) => {
 
     if (isMoneriumToAssethubRamp && substrateAddress) {
       form.setValue("walletAddress", substrateAddress);
-    } else if (walletLockedFromState) {
-      form.setValue("walletAddress", walletLockedFromState);
     } else if (!isMoneriumToAssethubRamp && address) {
       form.setValue("walletAddress", address);
+    } else if (walletLockedFromState) {
+      form.setValue("walletAddress", walletLockedFromState);
     }
-  }, [form, evmAddress, isMoneriumRamp, address, walletLockedFromState, isMoneriumToAssethubRamp, substrateAddress]);
+
+    const fiatToken = quote?.rampType === "BUY" ? (quote.inputCurrency as FiatToken) : (quote?.outputCurrency as FiatToken);
+    form.setValue("fiatToken", fiatToken);
+  }, [form, evmAddress, isMoneriumRamp, address, walletLockedFromState, isMoneriumToAssethubRamp, substrateAddress, quote]);
+
+  const previousValues = useRef<RampFormValues>({});
+  const currentValues = form.watch();
 
   const { onRampConfirm } = useRampSubmission();
 
@@ -118,7 +127,12 @@ export const DetailsStep = ({ className }: DetailsStepProps) => {
             </div>
           </div>
         )}
-        <DetailsStepActions forceNetwork={forceNetwork} requiresConnection={!canSkipConnection} signingState={signingState} />
+        <DetailsStepActions
+          forceNetwork={forceNetwork}
+          isBrazilLanding={isBrazilLanding}
+          requiresConnection={!canSkipConnection}
+          signingState={signingState}
+        />
       </form>
       <DetailsStepQuoteSummary quote={quote} />
     </FormProvider>

diff --git a/apps/frontend/src/hooks/brla/useKYCForm/index.tsx b/apps/frontend/src/hooks/brla/useKYCForm/index.tsx
@@ -60,20 +60,27 @@ const createKycFormSchema = (t: (key: string) => string) =>
 
       [ExtendedAveniaFieldOptions.BIRTHDATE]: yup
         .date()
-        .transform((value, originalValue) => {
+        .transform((value: Date | undefined, originalValue: any) => {
           return originalValue === "" ? undefined : value;
         })
         .required(t("components.brlaExtendedForm.validation.birthdate.required"))
         .max(new Date(), t("components.brlaExtendedForm.validation.birthdate.future"))
-        .min(new Date(1900, 0, 1), t("components.brlaExtendedForm.validation.birthdate.tooOld")),
+        .min(new Date(1900, 0, 1), t("components.brlaExtendedForm.validation.birthdate.tooOld"))
+        .test("is-18-or-older", t("components.brlaExtendedForm.validation.birthdate.tooYoung"), value => {
+          if (!value) return true;
+          const birthDate = new Date(value);
+          const ageDate = new Date(birthDate);
+          ageDate.setFullYear(ageDate.getFullYear() + 18);
+          return ageDate <= new Date();
+        }),
 
       [ExtendedAveniaFieldOptions.COMPANY_NAME]: yup
         .string()
         .min(3, t("components.brlaExtendedForm.validation.companyName.minLength")),
 
       [ExtendedAveniaFieldOptions.START_DATE]: yup
         .date()
-        .transform((value, originalValue) => {
+        .transform((value: Date | undefined, originalValue: any) => {
           return originalValue === "" ? undefined : value;
         })
         .max(new Date(), t("components.brlaExtendedForm.validation.startDate.future"))

diff --git a/apps/frontend/src/hooks/ramp/schema.ts b/apps/frontend/src/hooks/ramp/schema.ts
@@ -11,6 +11,7 @@ export type RampFormValues = {
   pixId?: string;
   walletAddress?: string;
   moneriumWalletAddress?: string;
+  fiatToken?: FiatToken;
 };
 
 export const PHONE_REGEX = /^\+[1-9][0-9]\d{1,14}$/;

diff --git a/apps/frontend/src/hooks/ramp/useRampNavigation.ts b/apps/frontend/src/hooks/ramp/useRampNavigation.ts
@@ -25,10 +25,6 @@ export const useRampNavigation = (
   const shouldSkipQuoteForm = useMemo(() => searchParams.quoteId || hasAllQuoteRefreshParams(searchParams), [searchParams]);
 
   const getCurrentComponent = useCallback(() => {
-    if (shouldSkipQuoteForm) {
-      return formComponent;
-    }
-
     if (rampState?.ramp?.currentPhase === "complete") {
       return successComponent;
     }
@@ -41,19 +37,23 @@ export const useRampNavigation = (
       return progressComponent;
     }
 
+    if (shouldSkipQuoteForm) {
+      return formComponent;
+    }
+
     if (rampMachineState.value === "Idle") {
       return quoteComponent;
     }
 
     return formComponent;
   }, [
-    shouldSkipQuoteForm,
     rampState,
-    formComponent,
+    rampMachineState.value,
+    shouldSkipQuoteForm,
     successComponent,
     failureComponent,
     progressComponent,
-    rampMachineState.value,
+    formComponent,
     quoteComponent
   ]);