[READY] update numora version

apps/frontend/package.json

@@ -43,7 +43,6 @@
     "@walletconnect/universal-provider": "^2.21.10",
     "@walletconnect/utils": "catalog:",
     "@xstate/react": "^6.0.0",
-
     "big.js": "catalog:",
     "bn.js": "^5.2.1",
     "buffer": "^6.0.3",
@@ -56,8 +55,8 @@
     "lottie-react": "^2.4.1",
     "lucide-react": "^0.562.0",
     "motion": "^12.0.3",
-    "numora": "^3.0.2",
-    "numora-react": "3.0.3",
+    "numora": "^4.0.0",
+    "numora-react": "^4.0.0",
     "qrcode.react": "^4.2.0",
     "radix-ui": "^1.4.3",
     "react": "=19.2.0",
@@ -68,6 +67,7 @@
     "stellar-sdk": "catalog:",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.0.3",
+    "torph": "^0.0.9",
     "viem": "catalog:",
     "wagmi": "catalog:",
     "web3": "^4.16.0",

apps/frontend/src/components/NumericInput/index.tsx

@@ -1,8 +1,16 @@
-import { NumoraInput } from "numora-react";
-import { ChangeEvent } from "react";
+import { applyLocale, FormatOn, formatValueForDisplay, ThousandStyle } from "numora";
+import { NumoraInput, type NumoraInputChangeEvent } from "numora-react";
+import { useMemo } from "react";
 import { UseFormRegisterReturn, useFormContext, useWatch } from "react-hook-form";
+import { TextMorph } from "torph/react";
 import { cn } from "../../helpers/cn";
 
+const FORMATTING_OPTIONS = {
+  formatOn: FormatOn.Change,
+  thousandStyle: ThousandStyle.Thousand,
+  ...applyLocale(true, {})
+};
+
 interface NumericInputProps {
   register: UseFormRegisterReturn;
   readOnly?: boolean;
@@ -11,7 +19,7 @@ interface NumericInputProps {
   autoFocus?: boolean;
   disabled?: boolean;
   loading?: boolean;
-  onChange?: (e: ChangeEvent) => void;
+  onChange?: (e: NumoraInputChangeEvent) => void;
 }
 
 export const NumericInput = ({
@@ -27,25 +35,45 @@ export const NumericInput = ({
   const { setValue } = useFormContext();
   const { name: fieldName, ref, onBlur } = register;
   const inputValue = useWatch({ name: fieldName });
+  const formatted = useMemo(
+    () => (inputValue ? formatValueForDisplay(String(inputValue), maxDecimals, FORMATTING_OPTIONS).formatted : ""),
+    [inputValue, maxDecimals]
+  );
 
-  function handleChange(e: ChangeEvent<HTMLInputElement>): void {
+  function handleChange(e: NumoraInputChangeEvent): void {
     setValue(fieldName, e.target.value, { shouldDirty: true, shouldValidate: true });
     if (onChange) onChange(e);
   }
 
+  const inputClasses = cn(
+    "h-full w-full border-0 bg-transparent px-4 shadow-none outline-none focus:shadow-none focus:outline-none",
+    additionalStyle
+  );
+
   return (
     <div className="relative flex-grow">
+      <div
+        aria-hidden
+        className={cn(
+          "pointer-events-none absolute inset-0 flex items-center justify-end px-4 text-base-content",
+          additionalStyle
+        )}
+      >
+        <TextMorph ease={{ damping: 30, stiffness: 400 }}>{formatted || "0.0"}</TextMorph>
+      </div>
       <NumoraInput
         autoCapitalize="none"
         autoComplete="off"
         autoCorrect="off"
         autoFocus={autoFocus}
         className={cn(
-          "input h-full w-full border-0 bg-transparent px-4 focus:shadow-none focus:outline-none",
-          additionalStyle,
+          inputClasses,
+          "relative text-transparent caret-base-content placeholder:text-transparent",
           disabled && "opacity-0"
         )}
         disabled={disabled}
+        formatOn={FormatOn.Change}
+        locale={true}
         maxDecimals={maxDecimals}
         name={fieldName}
         onBlur={onBlur}

apps/frontend/src/sections/individuals/Hero/index.tsx

@@ -12,7 +12,7 @@ export const Hero = () => {
   return (
     <section
       aria-label={t("pages.main.hero.title")}
-      className="relative overflow-hidden bg-[radial-gradient(at_74%_98%,theme(colors.blue.900),theme(colors.blue.950),theme(colors.blue.950))] py-16 lg:py-40"
+      className="relative overflow-hidden bg-[radial-gradient(at_74%_98%,theme(colors.blue.900),theme(colors.blue.950),theme(colors.blue.950))] py-16 md:h-screen lg:py-40"
     >
       <div className="container mx-auto flex flex-col gap-x-20 px-4 sm:px-8 lg:grid lg:grid-cols-[1fr_1fr] lg:gap-y-10">
         <div className="flex flex-col gap-6">