rujira.ui 0.1.0

package/src/components/loader/Loader.tsx

@@ -0,0 +1,103 @@
+import clsx from "clsx";
+
+export const Loader = ({ className }: { className?: string }) => (
+  <div className={clsx({ loader: true, [`${className}`]: className })}>
+    <svg
+      className="loader__blob"
+      viewBox="0 0 500 500"
+      xmlns="http://www.w3.org/2000/svg">
+      <path fill="#CE18EC">
+        <animate
+          attributeName="d"
+          dur="2800ms"
+          repeatCount="indefinite"
+          values="M398,320.5Q332,391,247,396.5Q162,402,118.5,326Q75,250,125,184.5Q175,119,258.5,104.5Q342,90,403,170Q464,250,398,320.5Z;
+  M431,347Q362,444,268.5,412Q175,380,94.5,315Q14,250,86,170.5Q158,91,265,65Q372,39,436,144.5Q500,250,431,347Z;
+  M421.5,355Q372,460,248.5,463Q125,466,78.5,358Q32,250,94,168.5Q156,87,251,85Q346,83,408.5,166.5Q471,250,421.5,355Z;
+  M382.5,342Q356,434,260.5,415Q165,396,93.5,323Q22,250,90.5,171.5Q159,93,259,76.5Q359,60,384,155Q409,250,382.5,342Z;
+  M392,357Q374,464,250.5,463Q127,462,102.5,356Q78,250,114.5,164Q151,78,243.5,90Q336,102,373,176Q410,250,392,357Z;
+  M413,340.5Q354,431,255.5,421.5Q157,412,119,331Q81,250,115.5,163Q150,76,254,69.5Q358,63,415,156.5Q472,250,413,340.5Z;
+  M398,320.5Q332,391,247,396.5Q162,402,118.5,326Q75,250,125,184.5Q175,119,258.5,104.5Q342,90,403,170Q464,250,398,320.5Z;"
+        />
+      </path>
+    </svg>
+    <svg
+      className="loader__blob"
+      viewBox="0 0 500 500"
+      xmlns="http://www.w3.org/2000/svg">
+      <path fill="#8535F4">
+        <animate
+          attributeName="d"
+          dur="3000ms"
+          repeatCount="indefinite"
+          values="M390,323.5Q335,397,244.5,407Q154,417,87.5,333.5Q21,250,83,159Q145,68,235.5,93Q326,118,385.5,184Q445,250,390,323.5Z;
+  M388.44284,356.71939Q373.40992,463.43878,249.17148,464.61488Q124.93304,465.79098,81.27136,357.89549Q37.60969,250,90.26674,157.44284Q142.92379,64.88568,254.70496,56.66629Q366.48613,48.44691,384.98095,149.22345Q403.47577,250,388.44284,356.71939Z;
+  M388.87386,333.816Q346.57737,417.63199,250.12159,417.26268Q153.6658,416.89337,92.342,333.44668Q31.01821,250,87.75683,158.62159Q144.49545,67.24317,258.11248,53.51365Q371.72952,39.78414,401.44993,144.89207Q431.17035,250,388.87386,333.816Z;
+  M407.11178,321.2174Q331.96274,392.43479,239.55747,410.67856Q147.15219,428.92233,101.65993,339.46116Q56.16767,250,93.41459,146.54815Q130.66151,43.0963,250.06678,42.94411Q369.47205,42.79192,425.86644,146.39596Q482.26082,250,407.11178,321.2174Z;
+  M418,346.5Q361,443,251.5,440Q142,437,100,343.5Q58,250,98,152.5Q138,55,242,69.5Q346,84,410.5,167Q475,250,418,346.5Z;
+  M382.06447,321.8585Q333.27831,393.71699,229.42532,429.21934Q125.57233,464.72169,104.62028,357.36085Q83.66823,250,116.99449,163.79402Q150.32075,77.58805,244.05346,87.46776Q337.78617,97.34748,384.3184,173.67374Q430.85064,250,382.06447,321.8585Z;
+  M390,323.5Q335,397,244.5,407Q154,417,87.5,333.5Q21,250,83,159Q145,68,235.5,93Q326,118,385.5,184Q445,250,390,323.5Z;"
+        />
+      </path>
+    </svg>
+    <svg
+      className="loader__blob"
+      viewBox="0 0 500 500"
+      xmlns="http://www.w3.org/2000/svg">
+      <path fill="#8535F4">
+        <animate
+          attributeName="d"
+          dur="2900ms"
+          repeatCount="indefinite"
+          values="M425.65286,345.08093Q360.09352,440.16185,251.07553,438.03057Q142.05755,435.89929,105.0018,342.94965Q67.94605,250,115.4964,175.04136Q163.04676,100.08273,256.04316,89.00719Q349.03956,77.93166,420.12589,163.96583Q491.21221,250,425.65286,345.08093Z;
+  M430.21857,346.57286Q362.09714,443.14572,252.57286,439.04857Q143.04857,434.95143,117.58287,342.47571Q92.11716,250,128.08287,175Q164.04857,100,251.80571,97.38858Q339.56285,94.77715,418.95143,172.38858Q498.34,250,430.21857,346.57286Z;
+  M410.5,356.5Q373,463,264.5,437.5Q156,412,86,331Q16,250,71.5,143.5Q127,37,227,77Q327,117,387.5,183.5Q448,250,410.5,356.5Z;
+  M412.01351,346.40994Q360.89193,442.81988,266.01351,414.79737Q171.13509,386.77485,125.85573,318.38743Q80.57638,250,106.3107,148.04053Q132.04503,46.08105,234.06304,73.46848Q336.08105,100.85591,399.60807,175.42795Q463.13509,250,412.01351,346.40994Z;
+  M391.35886,346Q361,442,257.95529,428.45324Q154.91058,414.90648,104.33899,332.45324Q53.76739,250,93.76242,149.50497Q133.75745,49.00994,237.4851,70.28726Q341.21274,91.56458,381.46523,170.78229Q421.71771,250,391.35886,346Z;
+  M425.65286,345.08093Q360.09352,440.16185,251.07553,438.03057Q142.05755,435.89929,105.0018,342.94965Q67.94605,250,115.4964,175.04136Q163.04676,100.08273,256.04316,89.00719Q349.03956,77.93166,420.12589,163.96583Q491.21221,250,425.65286,345.08093Z;"
+        />
+      </path>
+    </svg>
+    <svg
+      className="loader__spinner"
+      viewBox="0 0 24 24"
+      stroke="#fff"
+      xmlns="http://www.w3.org/2000/svg">
+      <g>
+        <circle
+          cx="12"
+          cy="12"
+          r="9.5"
+          fill="none"
+          strokeWidth="3"
+          strokeLinecap="round">
+          <animate
+            attributeName="stroke-dasharray"
+            dur="1.5s"
+            calcMode="spline"
+            values="0 150;42 150;42 150;42 150"
+            keyTimes="0;0.475;0.95;1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
+            repeatCount="indefinite"
+          />
+          <animate
+            attributeName="stroke-dashoffset"
+            dur="1.5s"
+            calcMode="spline"
+            values="0;-16;-59;-59"
+            keyTimes="0;0.475;0.95;1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1"
+            repeatCount="indefinite"
+          />
+        </circle>
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          dur="2s"
+          values="0 12 12;360 12 12"
+          repeatCount="indefinite"
+        />
+      </g>
+    </svg>
+  </div>
+);

package/src/components/logos/RujiraLogo.tsx

@@ -0,0 +1,83 @@
+export const RujiraLogo = ({
+  textColor = "#fff",
+  showText = true,
+  animate = false,
+  className,
+}: {
+  textColor?: string;
+  showText?: boolean;
+  animate?: boolean;
+  className?: string;
+}) => (
+  <svg
+    viewBox={`0 0 ${showText ? 2689 : 1000} 1000`}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}>
+    <defs>
+      <linearGradient x1="97.12%" y1="12.295%" x2="15.952%" y2="88.858%" id="a">
+        <stop stopColor="#D615EB" offset="0%" />
+        <stop stopColor="#8436F5" offset="100%" />
+      </linearGradient>
+    </defs>
+    <g fill="none" fillRule="nonzero">
+      {!animate ? (
+        <>
+          <path
+            d="M109.713 718.57c64.466 183.188 203.797 276.949 417.99 281.283 214.195 4.334 357.082-87.26 428.663-274.782 71.581-187.522 55.091-346.445-49.47-476.768C802.337 117.981 666.289 37.628 498.753 7.246 331.216-23.136 208.376 42.026 130.23 202.73c-78.145 160.705-84.984 332.652-20.517 515.84Z"
+            fillOpacity=".45"
+            fill="#CE18EC"
+          />
+          <path
+            d="M938.285 742.674c-81.778 172.834-217.066 249.65-405.863 230.445C343.625 953.916 193.193 867.5 81.127 713.868-30.94 560.238-26.902 413.177 93.242 272.686c120.143-140.491 271.08-228.424 452.81-263.8C727.782-26.489 859.03 43.756 939.8 219.623c80.768 175.866 80.264 350.216-1.515 523.05Z"
+            fillOpacity=".45"
+            fill="#8535F4"
+          />
+        </>
+      ) : (
+        <>
+          <path fill="#CE18EC" fillOpacity=".45">
+            <animate
+              attributeName="d"
+              dur="3897ms"
+              repeatCount="indefinite"
+              values="M908.65 772.515c-119.423 173.188-259.837 247.488-421.243 222.9C326 970.826 191.184 884.232 82.957 735.633-25.268 587.033-27.6 434.158 75.96 277.006 179.522 119.854 316.67 28.984 487.407 4.396c170.736-24.59 313.482 53.987 428.24 235.727 114.757 181.74 112.424 359.205-6.998 532.392Z;
+                M905.657 701.408C781.589 850.992 630.329 930.883 451.876 941.082c-178.453 10.199-308.47-64.593-390.048-224.376-81.579-159.782-82.428-320.415-2.55-481.897C139.159 73.326 270.874-4.865 454.426.234c183.552 5.1 335.662 85.84 456.33 242.224 120.67 156.383 118.97 309.366-5.098 458.95Z;
+                M938.285 742.674c-81.778 172.834-217.066 249.65-405.863 230.445C343.625 953.916 193.193 867.5 81.127 713.868-30.94 560.238-26.902 413.177 93.242 272.686c120.143-140.491 271.08-228.424 452.81-263.8C727.782-26.489 859.03 43.756 939.8 219.623c80.768 175.866 80.264 350.216-1.515 523.05Z;
+                M909.194 698.092C791.124 849.094 646.258 945.89 474.596 988.48c-171.662 42.59-307.317-32.91-406.964-226.503-99.648-193.591-89.18-365.888 31.401-516.89C219.615 94.086 358.201 12.777 514.79 1.162c156.589-11.616 290.988 63.885 403.196 226.502 112.208 162.617 109.277 319.426-8.792 470.428Z;
+                M908.65 772.515c-119.423 173.188-259.837 247.488-421.243 222.9C326 970.826 191.184 884.232 82.957 735.633-25.268 587.033-27.6 434.158 75.96 277.006 179.522 119.854 316.67 28.984 487.407 4.396c170.736-24.59 313.482 53.987 428.24 235.727 114.757 181.74 112.424 359.205-6.998 532.392Z;"
+            />
+          </path>
+          <path fill="#8535F4" fillOpacity=".45">
+            <animate
+              attributeName="d"
+              dur="2975ms"
+              repeatCount="indefinite"
+              values="M932.532 715.172C854.38 889.747 710.761 984.14 501.676 998.35 292.591 1012.56 146.943 925.27 64.73 736.486c-82.213-188.785-68.51-353.718 41.106-494.8C215.453 100.607 357.042 20.93 530.603 2.66c173.56-18.27 303.477 52.271 389.75 211.622 86.273 159.351 90.332 326.314 12.18 500.89Z;
+                M885.654 705.273C746.066 828.795 579.708 919.904 386.58 978.599c-193.128 58.695-311.204-3.066-354.228-185.284-43.024-182.217-43.502-364.873-1.434-547.967C72.984 62.255 202.534-18.342 419.564 3.56c217.03 21.9 383.867 113.448 500.51 274.64 116.641 161.193 105.168 303.55-34.42 427.073Z;
+                M962.274 793.5c-49.124 177.855-169.888 240.71-362.29 188.563-192.402-52.145-355.126-141.072-488.17-266.78C-21.23 589.572-36.069 440.585 67.296 268.318 170.66 96.052 333.896 6.659 557 .141c223.104-6.518 358.707 79.615 406.808 258.4 48.1 178.786 47.589 357.106-1.535 534.96Z;
+                M897.318 638.271C761.297 778.402 603.636 888.36 424.336 968.141c-179.3 79.783-306.047 9.718-380.24-210.196-74.193-219.913-54.762-400.958 58.295-543.135C215.447 72.633 343.077 1.034 485.28.01c142.203-1.022 280.432 70.066 414.686 213.266 134.255 143.2 133.371 284.864-2.65 424.995Z;
+                M932.532 715.172C854.38 889.747 710.761 984.14 501.676 998.35 292.591 1012.56 146.943 925.27 64.73 736.486c-82.213-188.785-68.51-353.718 41.106-494.8C215.453 100.607 357.042 20.93 530.603 2.66c173.56-18.27 303.477 52.271 389.75 211.622 86.273 159.351 90.332 326.314 12.18 500.89Z;"
+            />
+          </path>
+        </>
+      )}
+      <g transform="translate(49 24)">
+        <circle fill="url(#a)" cx="475.5" cy="475.5" r="475.5" />
+        <path
+          d="M475.5 57.011c-231.125 0-418.489 187.364-418.489 418.489 0 231.125 187.364 418.489 418.489 418.489 231.125 0 418.489-187.364 418.489-418.489 0-231.125-187.364-418.489-418.489-418.489Z"
+          fill="#1B1821"
+        />
+        <path
+          d="M460.284 232.995v159.944h-58.52l58.52 67.345h-68.973l-60.794-67.345h-45.61v67.345h-51.912V341.027h50.66l-50.66-56.12v-51.912h227.289Zm-152.396 51.912 48.766 56.12h51.718v-56.12H307.888Zm182.828 433.098v-51.912h88.39V542.628h-88.39v-51.912h227.289v51.912h-86.987v123.465h86.987v51.912H490.716Zm-257.721 0V598.748h51.912v67.345h93.716l29.75-29.155v-94.31H346.64v-51.912h113.644v166.96l-60.33 60.329H232.995Zm318.05-257.721-60.329-60.33V232.995h51.912v146.222l29.748 29.155h93.717V232.995h51.912v227.289h-166.96Z"
+          fill="url(#a)"
+        />
+      </g>
+      {showText && (
+        <path
+          d="M1296.872 346c59.86 0 98.86 39.196 98.86 95.256 0 54.237-35.372 83.407-71.65 89.332L1398 650h-61.22l-67.117-113.487h-52.605V650H1164V346Zm-7.256 46.945h-72.558v96.623h72.558c29.93 0 51.698-19.142 51.698-48.312 0-29.169-21.767-48.311-51.698-48.311ZM1582.227 654C1669.863 654 1713 604.103 1713 528.804V346h-53.58v181.443c0 48.083-26.79 79.382-77.193 79.382-50.856 0-77.646-31.3-77.646-79.382V346H1451v183.258C1451 603.649 1494.137 654 1582.227 654ZM1758.134 769C1816.537 769 1860 736.672 1860 667.462V346h-52.97v320.551c0 33.24-20.373 55.095-52.97 55.095-23.09 0-39.388-11.839-51.612-25.043L1678 737.127c21.279 22.766 48.896 31.873 80.134 31.873ZM2007 650V346h-52v304zM2234.872 346c59.86 0 98.86 39.196 98.86 95.256 0 54.237-35.372 83.407-71.65 89.332L2336 650h-61.22l-67.117-113.487h-52.605V650H2102V346Zm-7.256 46.945h-72.558v96.623h72.558c29.93 0 51.698-19.142 51.698-48.312 0-29.169-21.767-48.311-51.698-48.311ZM2570.122 346 2689 650h-60.346l-22.233-58.339h-138.842L2445.346 650H2385l118.878-304h66.244ZM2537 399.781l-54.448 144.936h108.896L2537 399.78Z"
+          fill={textColor}
+        />
+      )}
+    </g>
+  </svg>
+);

package/src/components/notices/Warning.tsx

@@ -0,0 +1,42 @@
+import clsx from "clsx";
+import { ExclamationCircle, ExclamationTriangle, Xmark } from "../icons/Icons";
+
+type Props = {
+  msg?: string;
+  color?: "teal" | "orange" | "red";
+  dismiss?: () => void;
+  className?: string;
+  children?: React.ReactNode;
+};
+export const Warning: React.FC<Props> = ({
+  color,
+  msg,
+  dismiss,
+  className,
+  children,
+}) => {
+  return (
+    <div
+      className={clsx({
+        warning: true,
+        [`warning--${color}`]: color,
+        [`${className}`]: className,
+      })}>
+      {children || (
+        <>
+          {color == "red" ? (
+            <ExclamationTriangle className="warning__icon" />
+          ) : (
+            <ExclamationCircle className="warning__icon" />
+          )}
+        </>
+      )}
+      {msg && <span className="warning__msg">{msg}</span>}
+      {dismiss && (
+        <button onClick={dismiss} className="transparent warning__close">
+          <Xmark />
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/numbers/Decimal.tsx

@@ -0,0 +1,43 @@
+import clsx from "clsx";
+import { whatDecimalSeparator } from "../../helpers";
+
+export const Decimal = ({
+  amount,
+  decimals = 6,
+  round = 6,
+  symbol,
+  symbolLeft,
+  className,
+  as: Component = "div",
+}: {
+  amount: bigint;
+  decimals?: number;
+  round?: number;
+  symbol?: string;
+  symbolLeft?: boolean;
+  className?: string;
+  as?: React.ElementType;
+}) => {
+  const dec = amount % BigInt(10 ** decimals);
+  const int = BigInt(Number(amount - dec) / 10 ** decimals);
+  const padded = dec.toString().padStart(decimals, "0");
+  const trimmed = padded.substring(0, round);
+
+  return (
+    <Component
+      className={clsx({
+        decimal: true,
+        "decimal--label-left": symbolLeft,
+        [`${className}`]: className,
+      })}>
+      <span className="decimal__int">
+        {(int || "0").toLocaleString()}
+        {round > 0 && whatDecimalSeparator()}
+      </span>
+      {dec.toString().length && round > 0 && (
+        <span className="decimal__dec">{trimmed}</span>
+      )}
+      {symbol && <span className="decimal__symbol">{symbol}</span>}
+    </Component>
+  );
+};

package/src/components/numbers/Fiat.tsx

@@ -0,0 +1,56 @@
+import clsx from "clsx";
+import { whatDecimalSeparator } from "../../helpers";
+
+export const Fiat = ({
+  amount,
+  decimals = 2,
+  symbol,
+  className,
+  symbolRight = false,
+  padSymbol = true,
+  as: Component = "div",
+}: {
+  amount: bigint;
+  decimals?: number;
+  symbol?: string;
+  className?: string;
+  symbolRight?: boolean;
+  padSymbol?: boolean;
+  as?: React.ElementType;
+}) => {
+  const dec = amount % BigInt(10 ** decimals);
+  const int = BigInt(Math.floor(Number(amount - dec) / 10 ** decimals));
+
+  const round = 2;
+
+  return (
+    <Component
+      className={clsx({
+        fiat: true,
+        "fiat--symbol-right": symbolRight,
+        [`${className}`]: className,
+      })}>
+      <span className="fiat__int">
+        {(int || "0").toLocaleString()}
+        {whatDecimalSeparator()}
+      </span>
+
+      <span className="fiat__dec">
+        {dec.toString().length > round
+          ? dec.toString().substring(0, round)
+          : `${dec}${"0".repeat(round - dec.toString().length)}`}
+      </span>
+
+      {symbol && (
+        <span
+          className={clsx({
+            fiat__symbol: true,
+            "mr-0.5": padSymbol && !symbolRight,
+            "ml-0.5": padSymbol && symbolRight,
+          })}>
+          {symbol}
+        </span>
+      )}
+    </Component>
+  );
+};

package/src/components/progress/Progress.tsx

@@ -0,0 +1,40 @@
+import clsx from "clsx";
+
+export const Progress = ({
+  percentage,
+  height = 4,
+  className,
+  showLabels,
+  label,
+  labelMin = "0",
+  labelMax = "100",
+}: {
+  percentage: number;
+  height?: number;
+  className?: string;
+  showLabels?: boolean;
+  label?: string;
+  labelMin?: string;
+  labelMax?: string;
+}) => {
+  if (percentage < 0) percentage = 0;
+  if (percentage > 100) percentage = 100;
+  return (
+    <div className={clsx({ progress: true, [`${className}`]: className })}>
+      <div className="progress__height">
+        <div className="progress__track" style={{ height: height }} />
+        <div
+          className="progress__percentage"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+      {showLabels && (
+        <div className="progress__labels">
+          <div>{labelMin}</div>
+          <div style={{ left: `${percentage}%` }}>{label || percentage}</div>
+          <div>{labelMax}</div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/slider/Slider.tsx

@@ -0,0 +1,12 @@
+import ReactSlider, { ReactSliderProps } from "react-slider";
+
+export const Slider = (props: ReactSliderProps) => {
+  return (
+    <ReactSlider
+      {...props}
+      className="slider grow"
+      trackClassName="slider__track"
+      thumbClassName="slider__thumb"
+    />
+  );
+};

package/src/context/Affiliate.tsx

@@ -0,0 +1,65 @@
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
+const AFFILIATE = "rujira";
+const FEE = 50;
+const KEY = "refs";
+export interface Referral {
+  name: string;
+  fee: number;
+  firstSeen: Date;
+}
+
+export interface AffiliateData {
+  base: {
+    name: string;
+    fee: number;
+  };
+  affiliate?: Referral;
+}
+
+type Referrals = Record<string, Referral>;
+
+const load = (): Referrals => {
+  const json = localStorage.getItem(KEY) || "{}";
+  return JSON.parse(json);
+};
+
+const store = (ref: Referral) => {
+  const current = load();
+  if (!!current[ref.name]) return;
+  localStorage.setItem(KEY, JSON.stringify({ ...current, [ref.name]: ref }));
+};
+
+const context = createContext<AffiliateData>({
+  base: { name: AFFILIATE, fee: FEE },
+});
+
+export const AffiliateContext: FC<PropsWithChildren> = ({ children }) => {
+  useEffect(() => {
+    const q = new URLSearchParams(window.location.search);
+    const aff = q.get("aff");
+    const split = aff?.split("-");
+    if (split?.length === 2) {
+      store({ name: split[0], fee: parseInt(split[1]), firstSeen: new Date() });
+    }
+  }, []);
+
+  const stored = useMemo(load, []);
+  const affiliate = Object.values(stored)
+    .sort((a, b) => a.firstSeen.getTime() - b.firstSeen.getTime())
+    .at(0);
+  return (
+    <context.Provider
+      value={{ base: { name: AFFILIATE, fee: FEE }, affiliate }}>
+      {children}
+    </context.Provider>
+  );
+};
+
+export const useAffiliate = () => useContext(context);

package/src/context/GlobalModal.tsx

@@ -0,0 +1,115 @@
+import {
+  FC,
+  PropsWithChildren,
+  createContext,
+  useContext,
+  useState,
+} from "react";
+import ReactDOM from "react-dom";
+import clsx from "clsx";
+import { Xmark } from "../components/icons/Icons";
+import { isEmpty } from "../helpers";
+import { Button } from "../components/buttons/Button";
+import { AnimatePresence, motion } from "motion/react";
+
+export type ModalProps = PropsWithChildren<{
+  title?: string;
+  confirm?: () => void;
+  backgroundClose?: boolean;
+  className?: string;
+}>;
+
+type GlobalModalContext = {
+  showModal: (modalProps: ModalProps) => void;
+  hideModal: () => void;
+};
+
+const initalState: GlobalModalContext = {
+  showModal: () => {},
+  hideModal: () => {},
+};
+
+const GlobalModalContext = createContext(initalState);
+export const useGlobalModalContext = () => useContext(GlobalModalContext);
+
+export const GlobalModal: FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [modalProps, setModalProps] = useState<ModalProps>({});
+
+  const showModal = (modalProps: ModalProps) => {
+    setModalProps(modalProps);
+  };
+
+  const hideModal = () => {
+    setModalProps({});
+  };
+
+  const dest = document.getElementById("modal")!;
+
+  const renderComponent = () => {
+    return dest
+      ? ReactDOM.createPortal(
+          <AnimatePresence>
+            {!isEmpty(modalProps) && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                className={clsx({
+                  modal: true,
+                  [`${modalProps.className}`]: modalProps.className,
+                })}
+                onClick={() =>
+                  modalProps.backgroundClose ? hideModal() : null
+                }>
+                <motion.div
+                  initial={{ scale: 0.9 }}
+                  animate={{ scale: 1 }}
+                  exit={{ scale: 0.9 }}
+                  className="modal__window"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}>
+                  <button
+                    className="transparent modal__close fs-12 color-white fw-600 flex ai-c mr-1 mb-1 hover-primary1"
+                    onClick={hideModal}>
+                    <Xmark className="w-2 h-a mr-1" />
+                    Close
+                  </button>
+                  {modalProps.title && (
+                    <div className="modal__header">
+                      <h2>{modalProps.title}</h2>
+                    </div>
+                  )}
+                  {modalProps.children && modalProps.children}
+                  {modalProps.confirm && (
+                    <div className="modal__footer mt-4 px-3 py-2 text-right">
+                      <Button
+                        className="button--grey button--outline"
+                        onClick={hideModal}
+                        label="Cancel"
+                      />
+                      <Button
+                        className="button ml-1"
+                        onClick={modalProps.confirm}
+                        label="Confirm"
+                      />
+                    </div>
+                  )}
+                </motion.div>
+              </motion.div>
+            )}
+          </AnimatePresence>,
+          dest
+        )
+      : null;
+  };
+
+  return (
+    <GlobalModalContext.Provider value={{ showModal, hideModal }}>
+      {children}
+      {renderComponent()}
+    </GlobalModalContext.Provider>
+  );
+};

package/src/d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+    const value: string;
+    export default value;
+  }

package/src/helpers/index.ts

@@ -0,0 +1,73 @@
+export const getLang = () => {
+  if (navigator.languages != undefined) return navigator.languages[0];
+  return navigator.language;
+};
+
+export const whatDecimalSeparator = () => {
+  const n = 1.1;
+  const s = n.toLocaleString().substring(1, 2);
+  return s;
+};
+
+export const isEmpty = (obj: any) => {
+  for (const prop in obj) {
+    if (Object.hasOwn(obj, prop)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+export const uuidv4 = () => {
+  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) =>
+    (
+      +c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
+    ).toString(16)
+  );
+};
+
+export const nFormatter = (bigint: bigint, digits: number, decimals = 6) => {
+  const num = Number(bigint / BigInt(10 ** decimals));
+  const lookup = [
+    { value: 1, symbol: "" },
+    { value: 1e3, symbol: "k" },
+    { value: 1e6, symbol: "M" },
+    { value: 1e9, symbol: "G" },
+    { value: 1e12, symbol: "T" },
+    { value: 1e15, symbol: "P" },
+    { value: 1e18, symbol: "E" },
+  ];
+  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+  var item = lookup
+    .slice()
+    .reverse()
+    .find(function (item) {
+      return num >= item.value;
+    });
+  return item
+    ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol
+    : "0";
+};
+
+export const nFormatterInt = (num: number, digits: number) => {
+  const lookup = [
+    { value: 1, symbol: "" },
+    { value: 1e3, symbol: "k" },
+    { value: 1e6, symbol: "M" },
+    { value: 1e9, symbol: "G" },
+    { value: 1e12, symbol: "T" },
+    { value: 1e15, symbol: "P" },
+    { value: 1e18, symbol: "E" },
+  ];
+  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
+  var item = lookup
+    .slice()
+    .reverse()
+    .find(function (item) {
+      return num >= item.value;
+    });
+  return item
+    ? (num / item.value).toFixed(digits).replace(rx, "$1") + item.symbol
+    : "0";
+};

package/src/helpers/number.ts

@@ -0,0 +1,12 @@
+// Extend the Number interface with your custom method
+interface Number {
+  toLocaleDecimal: (decimals: number) => string;
+}
+
+// Add the method to the Number prototype
+Number.prototype.toLocaleDecimal = function (decimals = 0): string {
+  return this.toLocaleString(undefined, {
+    maximumFractionDigits: decimals,
+    minimumFractionDigits: decimals,
+  });
+};