Create new production release

frontend/src/components/AssetNumericInput/index.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, FC } from 'react';
 import { UseFormRegisterReturn } from 'react-hook-form';
 import { AssetButton } from '../buttons/AssetButton';
-import { RampFormValues } from '../Nabla/schema';
+import { RampFormValues } from '../../hooks/ramp/schema';
 import { NumericInput } from '../NumericInput';
 import { cn } from '../../helpers/cn';
 

frontend/src/components/BrlaComponents/BrlaSwapFields/index.tsx

@@ -16,11 +16,11 @@ const containerAnimation: MotionProps = {
 };
 
 const OFFRAMP_FIELDS = [
-  { id: StandardBrlaFieldOptions.TAX_ID, label: 'CPF', index: 0 },
-  { id: StandardBrlaFieldOptions.PIX_ID, label: 'PIX', index: 1 },
+  { id: StandardBrlaFieldOptions.TAX_ID, label: 'cpfOrCnpj', index: 0 },
+  { id: StandardBrlaFieldOptions.PIX_ID, label: 'pixKey', index: 1 },
 ];
 
-const ONRAMP_FIELDS = [{ id: StandardBrlaFieldOptions.TAX_ID, label: 'CPF', index: 0 }];
+const ONRAMP_FIELDS = [{ id: StandardBrlaFieldOptions.TAX_ID, label: 'cpfOrCnpj', index: 0 }];
 
 /**
  * BrlaSwapFields component
@@ -49,9 +49,11 @@ export const BrlaSwapFields: FC = () => {
               className="mt-2"
               key={field.id}
               id={field.id}
-              label={field.label}
+              label={t(`components.brlaSwapField.${field.label}`)}
               index={field.index}
-              placeholder={t(`components.brlaSwapField.placeholder`, { label: field.label })}
+              placeholder={t(`components.brlaSwapField.placeholder`, {
+                label: t(`components.brlaSwapField.${field.label}`),
+              })}
             />
           ))}
           <div className="mt-2">

frontend/src/components/BrlaComponents/KYCForm/index.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { motion } from 'motion/react';
 import { FormProvider, UseFormReturn } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 
 import { BrlaField, BrlaFieldProps, ExtendedBrlaFieldOptions } from '../BrlaField';
 import { KYCFormData } from '../../../hooks/brla/useKYCForm';
@@ -32,14 +32,7 @@ export const KYCForm = ({ form, onSubmit, onBackClick, fields }: KYCFormProps) =
         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]"
         onSubmit={handleSubmit(onSubmit)}
       >
-        <h1 className="mt-2 mb-2 text-3xl font-bold text-center text-blue-700">{t('components.brlaKYCForm.title')}</h1>
-        <div className="text-primary-500 text-center mb-6">
-          {t('components.brlaKYCForm.description')}
-          <a className="underline" target="_blank" rel="noreferrer" href="https://www.brla.digital">
-            BRLA
-          </a>
-          .
-        </div>
+        <h1 className="mt-2 mb-4 text-3xl font-bold text-center text-blue-700">{t('components.brlaKYCForm.title')}</h1>
         <div className="grid grid-cols-2 gap-4">
           {fields.map((field) => (
             <BrlaField
@@ -57,7 +50,20 @@ export const KYCForm = ({ form, onSubmit, onBackClick, fields }: KYCFormProps) =
             />
           ))}
         </div>
-
+        <div className="text-primary-500 text-center mt-4">
+          <Trans
+            i18nKey="components.brlaKYCForm.description"
+            components={{
+              a: <a className="underline" target="_blank" rel="noreferrer" href="https://www.brla.digital" />,
+            }}
+          >
+            Complete these quick identity checks (typically 90 seconds). Data is processed securely by{' '}
+            <a className="underline" target="_blank" rel="noreferrer" href="https://www.brla.digital">
+              BRLA
+            </a>{' '}
+            using bank-grade encryption for transaction security.
+          </Trans>
+        </div>
         <div className="grid gap-3 mt-8 mb-8">
           <div className="flex gap-3">
             <button type="button" className="btn-vortex-primary-inverse btn flex-1" onClick={onBackClick}>

frontend/src/components/Ramp/Offramp/index.tsx

@@ -24,6 +24,7 @@ import { RampFeeCollapse } from '../../RampFeeCollapse';
 import { RampSubmitButtons } from '../../RampSubmitButtons';
 import { useQuoteService } from '../../../hooks/ramp/useQuoteService';
 import { useTranslation } from 'react-i18next';
+import { useInitializeFailedMessage } from '../../../stores/rampStore';
 
 export const Offramp = () => {
   const { t } = useTranslation();
@@ -42,7 +43,8 @@ export const Offramp = () => {
     form.setValue('outputAmount', toAmount?.toString() || '0');
   }, [toAmount, form]);
 
-  const { getCurrentErrorMessage, initializeFailedMessage } = useRampValidation();
+  const { getCurrentErrorMessage } = useRampValidation();
+  const initializeFailedMessage = useInitializeFailedMessage()
   const { onRampConfirm } = useRampSubmission();
   const validateTerms = useValidateTerms();
 

frontend/src/components/Ramp/Onramp/index.tsx

@@ -23,6 +23,7 @@ import { useInputAmount, useOnChainToken, useFiatToken } from '../../../stores/r
 import { useRampUrlParams } from '../../../hooks/useRampUrlParams';
 import { RampFeeCollapse } from '../../RampFeeCollapse';
 import { RampSubmitButtons } from '../../RampSubmitButtons';
+import { useInitializeFailedMessage } from '../../../stores/rampStore';
 
 export const Onramp = () => {
   const { t } = useTranslation();
@@ -43,7 +44,8 @@ export const Onramp = () => {
     form.setValue('outputAmount', toAmount?.toString() || '0');
   }, [toAmount, form]);
 
-  const { getCurrentErrorMessage, initializeFailedMessage } = useRampValidation();
+  const { getCurrentErrorMessage } = useRampValidation();
+  const initializeFailedMessage = useInitializeFailedMessage()
   const validateTerms = useValidateTerms();
   const { onRampConfirm } = useRampSubmission();
 

frontend/src/components/RampSubmitButtons/index.tsx

@@ -2,7 +2,7 @@ import { FC, useCallback } from 'react';
 import Big from 'big.js';
 import { useEventsContext } from '../../contexts/events';
 import { useFeeComparisonStore } from '../../stores/feeComparison';
-import { useRampSummaryVisible } from '../../stores/rampStore';
+import { useInitializeFailedMessage, useRampSummaryVisible } from '../../stores/rampStore';
 import { useRampValidation } from '../../hooks/ramp/useRampValidation';
 import { SwapSubmitButton } from '../buttons/SwapSubmitButton';
 import { useFiatToken, useInputAmount, useOnChainToken } from '../../stores/ramp/useRampFormStore';
@@ -19,7 +19,8 @@ export const RampSubmitButtons: FC<RampSubmitButtonsProps> = ({ toAmount }) => {
 
   const { feeComparisonRef } = useFeeComparisonStore();
   const { trackEvent } = useEventsContext();
-  const { getCurrentErrorMessage, initializeFailedMessage } = useRampValidation();
+  const { getCurrentErrorMessage } = useRampValidation();
+  const initializeFailedMessage = useInitializeFailedMessage();
   const isRampSummaryDialogVisible = useRampSummaryVisible();
   const inputAmount = useInputAmount();
   const fiatToken = useFiatToken();

frontend/src/contexts/network.tsx

@@ -1,11 +1,25 @@
-import { createContext, ReactNode, useContext, useState, useEffect, useCallback } from 'react';
+import { createContext, ReactNode, useContext, useState, useCallback } from 'react';
 import { useAccount, useSwitchChain } from 'wagmi';
 import { useLocalStorage, LocalStorageKeys } from '../hooks/useLocalStorage';
 import { WALLETCONNECT_ASSETHUB_ID } from '../constants/constants';
 import { useRampActions } from '../stores/rampStore';
 import { getNetworkId, isNetworkEVM, Networks } from 'shared';
 import { useSep24Actions } from '../stores/sep24Store';
 
+const getParamsNetwork = () => {
+  const params = new URLSearchParams(window.location.search);
+  const networkParam = params.get('network')?.toLowerCase();
+
+  if (networkParam) {
+    const matchedNetwork = Object.values(Networks).find((network) => network.toLowerCase() === networkParam);
+
+    if (matchedNetwork) {
+      return matchedNetwork;
+    }
+  }
+  return null;
+};
+
 interface NetworkContextType {
   walletConnectPolkadotSelectedNetworkId: string;
   selectedNetwork: Networks;
@@ -34,7 +48,9 @@ export const NetworkProvider = ({ children }: NetworkProviderProps) => {
   // We do this to ensure that the local storage value is always in lowercase. Previously the first letter was uppercase
   const selectedNetworkLocalStorage = selectedNetworkLocalStorageState.toLowerCase() as Networks;
 
-  const [selectedNetwork, setSelectedNetworkState] = useState<Networks>(selectedNetworkLocalStorage);
+  const paramsNetwork = getParamsNetwork();
+
+  const [selectedNetwork, setSelectedNetworkState] = useState<Networks>(paramsNetwork || selectedNetworkLocalStorage);
   const [networkSelectorDisabled, setNetworkSelectorDisabled] = useState(false);
 
   const { resetRampState } = useRampActions();
@@ -63,19 +79,6 @@ export const NetworkProvider = ({ children }: NetworkProviderProps) => {
     [connectedEvmChain, switchChainAsync, setSelectedNetworkLocalStorage, resetRampState, cleanupSep24Variables],
   );
 
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const networkParam = params.get('network')?.toLowerCase();
-
-    if (networkParam) {
-      const matchedNetwork = Object.values(Networks).find((network) => network.toLowerCase() === networkParam);
-
-      if (matchedNetwork) {
-        setSelectedNetwork(matchedNetwork);
-      }
-    }
-  }, [setSelectedNetwork]);
-
   return (
     <NetworkContext
       value={{

frontend/src/hooks/offramp/useSubmitRamp.ts

@@ -6,7 +6,13 @@ import { useVortexAccount } from '../useVortexAccount';
 import { useNetwork } from '../../contexts/network';
 import { useEventsContext } from '../../contexts/events';
 import { useSiweContext } from '../../contexts/siwe';
-import { FiatToken, getAnyFiatTokenDetails, getOnChainTokenDetailsOrDefault, getTokenDetailsSpacewalk } from 'shared';
+import {
+  BrlaEndpoints,
+  FiatToken,
+  getAnyFiatTokenDetails,
+  getOnChainTokenDetailsOrDefault,
+  getTokenDetailsSpacewalk,
+} from 'shared';
 import { fetchTomlValues } from '../../services/stellar';
 import { sep24First } from '../../services/anchor/sep24/first';
 import { sep10 } from '../../services/anchor/sep10';
@@ -15,6 +21,8 @@ import { useSep24Actions } from '../../stores/sep24Store';
 import { SIGNING_SERVICE_URL } from '../../constants/constants';
 import { RampExecutionInput } from '../../types/phases';
 import { useToastMessage } from '../../helpers/notifications';
+import { isValidCnpj, isValidCpf } from '../ramp/schema';
+import { BrlaService } from '../../services/api';
 
 export const useSubmitRamp = () => {
   const { t } = useTranslation();
@@ -78,29 +86,38 @@ export const useSubmitRamp = () => {
               return;
             }
 
-            const response = await fetch(`${SIGNING_SERVICE_URL}/v1/brla/getUser?taxId=${taxId}`);
-            if (!response.ok) {
+            try {
+              const { evmAddress: brlaEvmAddress } = await BrlaService.getUser(taxId);
+
+              // append EVM address to execution input
+              const updatedBrlaRampExecution = { ...executionInput, brlaEvmAddress };
+              setRampExecutionInput(updatedBrlaRampExecution);
+
+              setRampSummaryVisible(true);
+            } catch (err) {
+              const errorResponse = err as BrlaEndpoints.BrlaErrorResponse;
+
               // Response can also fail due to invalid KYC. Nevertheless, this should never be the case, as when we create the user we wait for the KYC
               // to be valid, or retry.
-              if (response.status === 404) {
+              if (isValidCpf(taxId)) {
                 console.log("User doesn't exist yet.");
                 setRampKycStarted(true);
                 return;
-              } else if ((await response.text()).includes('KYC invalid')) {
+              } else if (isValidCnpj(taxId)) {
+                console.log("CNPJ User doesn't exist yet.");
+                setInitializeFailedMessage(t('hooks.useSubmitOfframp.cnpjUserDoesntExist'));
+                setRampStarted(false);
+                setRampInitiating(false);
+                cleanupSEP24();
+                return;
+              } else if (errorResponse.error.includes('KYC invalid')) {
                 setInitializeFailedMessage(t('hooks.useSubmitOfframp.kycInvalid'));
                 setRampStarted(false);
                 setRampInitiating(false);
                 cleanupSEP24();
                 return;
               }
               throw new Error('Error while fetching BRLA user');
-            } else {
-              const { evmAddress: brlaEvmAddress } = await response.json();
-              // append EVM address to execution input
-              const updatedBrlaRampExecution = { ...executionInput, brlaEvmAddress };
-              setRampExecutionInput(updatedBrlaRampExecution);
-
-              setRampSummaryVisible(true);
             }
           } else {
             const stellarEphemeralSecret = executionInput.ephemerals.stellarEphemeral.secret;