rujira.ui 0.1.0

package/src/components/inputs/Checkbox.tsx

@@ -0,0 +1,35 @@
+import clsx from "clsx";
+import { uuidv4 } from "../../helpers";
+import { useMemo } from "react";
+
+export type CheckboxProps = {
+  label?: string;
+  labelClassName?: string;
+} & JSX.IntrinsicElements["input"];
+
+export function Checkbox({
+  label,
+  className,
+  disabled,
+  labelClassName,
+  children,
+  ...rest
+}: CheckboxProps) {
+  const id = rest.id ? rest.id : useMemo(() => uuidv4(), []);
+  return (
+    <div
+      className={clsx({
+        "radio-checkbox": true,
+        "radio-checkbox--disabled": disabled,
+        [`${className}`]: className,
+      })}>
+      <input type="checkbox" {...rest} disabled={disabled} id={id} />
+      {label && (
+        <label className={labelClassName} htmlFor={id}>
+          {label}
+        </label>
+      )}
+      {children}
+    </div>
+  );
+}

package/src/components/inputs/DecimalInput.tsx

@@ -0,0 +1,72 @@
+import { FC, useEffect, useState } from "react";
+import {
+  NumericFormat,
+  NumericFormatProps,
+  OnValueChange,
+} from "react-number-format";
+
+/**
+ * An decimalised representation of a number. Used to avoid the use of Number
+ * and the floating point arithmetic issues that it can cause
+ */
+interface Num {
+  int: bigint;
+  dec: bigint;
+  decimals: number;
+}
+
+const separators = () => {
+  const formatter = new Intl.NumberFormat();
+  const parts = formatter.formatToParts(12345.6);
+  const group = parts.find((p) => p.type === "group")?.value || ",";
+  const decimal = parts.find((p) => p.type === "decimal")?.value || ".";
+  return { group, decimal };
+};
+
+const div = (v: bigint, decimals: number): Num => {
+  const decs = 10n ** BigInt(decimals);
+  const int = (v / decs) * decs;
+  const dec = v - int;
+  return { dec, int: int / decs, decimals };
+};
+
+const toString = ({ dec, int, decimals }: Num): string => {
+  const { decimal } = separators();
+  const decs = dec.toString().padStart(decimals, "0").replace(/0+$/, "");
+  return dec > 0n ? `${int}${decimal}${decs}` : `${int}`;
+};
+
+export const DecimalInput: FC<
+  NumericFormatProps & {
+    amount: bigint;
+    onAmountchange: (v: bigint) => void;
+    decimals: number;
+  }
+> = ({ amount, decimals, onAmountchange, disabled, ...rest }) => {
+  const [value, setValue] = useState(toString(div(amount, decimals)));
+  const { group, decimal } = separators();
+
+  const handleInput: OnValueChange = (values) => {
+    setValue(values.formattedValue);
+    onAmountchange(BigInt(Number(values.value) * 10 ** decimals));
+  };
+
+  useEffect(() => {
+    const formatted = toString(div(amount, decimals));
+    if (formatted !== value) setValue(formatted);
+  }, [amount]);
+
+  return (
+    <NumericFormat
+      allowNegative={false}
+      decimalScale={decimals}
+      decimalSeparator={decimal}
+      thousandSeparator={group}
+      disabled={disabled}
+      placeholder="0"
+      value={value}
+      onValueChange={handleInput}
+      {...rest}
+    />
+  );
+};

package/src/components/inputs/DenomInput.tsx

@@ -0,0 +1,65 @@
+import clsx from "clsx";
+import { useMemo, useRef } from "react";
+import { uuidv4 } from "../../helpers";
+import { i18n } from "../../i18n";
+import { Button } from "../buttons/Button";
+import { IconDenom } from "../icons/IconDenom";
+import { Decimal } from "../numbers/Decimal";
+import { DecimalInput } from "./DecimalInput";
+
+export const DenomInput = ({
+  symbol,
+  amount,
+  decimals,
+  onChangeAmount,
+  disabled,
+  full,
+  max,
+  className,
+}: {
+  symbol: string;
+  amount: bigint;
+  decimals: number;
+  onChangeAmount: (a: bigint) => void;
+  disabled?: boolean;
+  full?: boolean;
+  max?: bigint;
+  className?: string;
+}) => {
+  const input = useRef<HTMLDivElement>(null);
+  const id = useMemo(() => uuidv4(), []);
+
+  return (
+    <div
+      className={clsx({
+        "denom-select condensed": true,
+        "denom-select--full": full,
+        "denom-select--disabled": disabled,
+        [`${className}`]: className,
+      })}
+      onClick={() => {
+        if (!disabled) input.current?.focus();
+      }}>
+      {max !== undefined && (
+        <Button
+          className="button--xsmall button--icon-right denom-select__balance denom-select__max"
+          label={i18n.t("Max:")}
+          onClick={() => onChangeAmount(max)}>
+          <Decimal amount={max} decimals={decimals} className="fw-700" />
+        </Button>
+      )}
+      <div className="denom-select__selected">
+        <IconDenom denom={symbol} />
+        <span>{symbol}</span>
+      </div>
+      <DecimalInput
+        getInputRef={input}
+        decimals={decimals}
+        disabled={disabled}
+        amount={amount}
+        onAmountchange={onChangeAmount}
+        id={id}
+      />
+    </div>
+  );
+};

package/src/components/inputs/DenomSelect.tsx

@@ -0,0 +1,178 @@
+import clsx from "clsx";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Asset } from "rujira.js";
+import { uuidv4 } from "../../helpers";
+import { i18n } from "../../i18n";
+import { Button } from "../buttons/Button";
+import { IconDenom } from "../icons/IconDenom";
+import { AngleDown, Glass } from "../icons/Icons";
+import { Decimal } from "../numbers/Decimal";
+import { DecimalInput } from "./DecimalInput";
+
+export const DenomSelect = ({
+  selected,
+  options,
+  onSelect,
+  searchValue = "",
+  amount,
+  onChangeAmount,
+  disabled,
+  full,
+  max,
+  label,
+  className,
+}: {
+  selected: Asset;
+  options?: Asset[];
+  onSelect?: (opt: Asset) => void;
+  searchValue?: string;
+  amount: bigint;
+  onChangeAmount?: (a: bigint) => void;
+  disabled?: boolean;
+  full?: boolean;
+  max?: bigint;
+  label?: string;
+  className?: string;
+}) => {
+  const readonly = !onChangeAmount;
+  const node = useRef<HTMLDivElement>(null);
+  const srch = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState(searchValue);
+
+  const id = useMemo(() => uuidv4(), []);
+
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    const ref = srch.current;
+    if (ref && open) {
+      ref.focus();
+    }
+    if (!open) {
+      setSearch("");
+    }
+  }, [open]);
+
+  const handleClickOutside = (e: any) => {
+    const ref = node.current;
+    if (ref) {
+      if (ref.contains(e.target)) {
+        return;
+      }
+    }
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+
+    setOpen(false);
+    return false;
+  };
+
+  if (!selected) return null;
+
+  return (
+    <div
+      ref={node}
+      className={clsx({
+        "denom-select condensed": true,
+        "denom-select--open": open,
+        "denom-select--full": full,
+        "denom-select--disabled": disabled,
+        "denom-select--haslabel": label,
+        [`${className}`]: className,
+      })}>
+      {label && (
+        <label className="fs-16 fw-500 color-white" htmlFor={id}>
+          {i18n.t(label)}
+        </label>
+      )}
+      {max !== undefined && (
+        <Button
+          className="button--xsmall button--icon-right denom-select__balance denom-select__max"
+          label={i18n.t("Max:")}
+          onClick={() => onChangeAmount && onChangeAmount(max)}>
+          <Decimal
+            amount={max}
+            decimals={selected.decimals}
+            className="fw-700"
+          />
+        </Button>
+      )}
+      <div
+        className="denom-select__selected"
+        onClick={() => options && !disabled && setOpen(true)}>
+        {!open ? (
+          <>
+            <IconDenom denom={selected.symbol} />
+            <div className="flex wrap denom-select__symbol">
+              <span className="mr-1">{selected.symbol}</span>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="denom-select__search-icon">
+              <Glass />
+            </div>
+            <input
+              ref={srch}
+              className="denom-select__search"
+              value={search}
+              onChange={(e) => setSearch(e.currentTarget.value)}
+            />
+          </>
+        )}
+        {options && <AngleDown />}
+      </div>
+      <DecimalInput
+        getInputRef={node}
+        decimals={selected.decimals}
+        disabled={readonly || disabled}
+        amount={amount}
+        onAmountchange={(e) => onChangeAmount && onChangeAmount(e)}
+        id={id}
+      />
+      {open && options && (
+        <div className="denom-select__dropdown">
+          {options
+            .filter((v) =>
+              v.symbol.toLowerCase().includes(search.toLowerCase())
+            )
+            .map((a) => (
+              <a
+                key={Asset.toString(a)}
+                onClick={() => {
+                  setOpen(false);
+                  onSelect && onSelect(a);
+                }}>
+                <IconDenom denom={a.symbol} />
+                {a.symbol}
+                {a.type === "secured" && (
+                  <span className="tag tag--sm tag--orange ml-0.5">
+                    Secured
+                  </span>
+                )}
+                <Decimal
+                  className="balance"
+                  amount={0n}
+                  decimals={a.decimals}
+                />
+              </a>
+            ))}
+
+          {options.filter((v) =>
+            v.symbol.toLowerCase().includes(search.toLowerCase())
+          ).length === 0 && <i18n.a>No results found</i18n.a>}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/inputs/Input.tsx

@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import { useEffect } from "react";
+
+export type InputProps = {
+  label?: string;
+  onSubmit?: () => void;
+  labelClassName?: string;
+  containerClassName?: string;
+} & JSX.IntrinsicElements["input"];
+
+export function Input({
+  id,
+  label,
+  value,
+  className,
+  onChange,
+  onSubmit,
+  disabled,
+  labelClassName,
+  containerClassName,
+  placeholder,
+  ...rest
+}: InputProps) {
+  useEffect(() => {
+    const handleUserKeyPress = (event: { keyCode: number }) => {
+      const { keyCode } = event;
+      if (keyCode === 13) {
+        onSubmit?.();
+      }
+    };
+    window.addEventListener("keydown", handleUserKeyPress);
+
+    return () => {
+      window.removeEventListener("keydown", handleUserKeyPress);
+    };
+  }, [onSubmit]);
+
+  return (
+    <div
+      className={clsx({
+        "input-container": true,
+        "input-container--disabled": disabled,
+        [`${containerClassName}`]: containerClassName,
+      })}>
+      <input
+        {...rest}
+        className={clsx({ input: true, [`${className}`]: className })}
+        id={id}
+        value={value}
+        onChange={onChange}
+        placeholder={label || placeholder}
+        disabled={disabled}
+      />
+      {label && (
+        <label
+          htmlFor={id}
+          className={clsx({
+            label: true,
+            [`${labelClassName}`]: labelClassName,
+          })}>
+          {label && label}
+        </label>
+      )}
+    </div>
+  );
+}

package/src/components/inputs/Numeric.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import { useMemo, useRef } from "react";
+import { uuidv4 } from "../../helpers";
+import { DecimalInput } from "./DecimalInput";
+
+export const Numeric = ({
+  label,
+  amount,
+  decimals,
+  onChangeAmount,
+  disabled,
+  full,
+  className,
+}: {
+  label: string;
+  amount: bigint;
+  decimals: number;
+  onChangeAmount: (a: bigint) => void;
+  disabled?: boolean;
+  full?: boolean;
+  className?: string;
+}) => {
+  const input = useRef<HTMLDivElement>(null);
+
+  const id = useMemo(() => uuidv4(), []);
+
+  return (
+    <div
+      className={clsx({
+        "numeric-input condensed": true,
+        "numeric-input--full": full,
+        "numeric-input--disabled": disabled,
+        [`${className}`]: className,
+      })}
+      onClick={() => {
+        if (!disabled) input.current?.focus();
+      }}>
+      {label && <label>{label}</label>}
+      <DecimalInput
+        getInputRef={input}
+        decimals={decimals}
+        disabled={disabled}
+        amount={amount}
+        onAmountchange={onChangeAmount}
+        id={id}
+      />
+    </div>
+  );
+};

package/src/components/inputs/Radio.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx";
+import { uuidv4 } from "../../helpers";
+import { useMemo } from "react";
+
+export type RadioProps = {
+  label?: string;
+  labelClassName?: string;
+} & JSX.IntrinsicElements["input"];
+
+export function Radio({
+  label,
+  className,
+  disabled,
+  labelClassName,
+  ...rest
+}: RadioProps) {
+  const id = useMemo(() => uuidv4(), []);
+  return (
+    <div
+      className={clsx({
+        "radio-checkbox": true,
+        "radio-checkbox--disabled": disabled,
+        [`${className}`]: className,
+      })}>
+      <input type="radio" {...rest} disabled={disabled} id={id} />
+      {label && (
+        <label className={labelClassName} htmlFor={id}>
+          {label}
+        </label>
+      )}
+    </div>
+  );
+}

package/src/components/inputs/Select.tsx

@@ -0,0 +1,69 @@
+import clsx from "clsx";
+import { useEffect } from "react";
+import { AngleDown } from "../icons/Icons";
+
+export type SelectProps = {
+  label?: string;
+  onSubmit?: () => void;
+  labelClassName?: string;
+  containerClassName?: string;
+} & JSX.IntrinsicElements["select"];
+
+export function Select({
+  id,
+  label,
+  value,
+  className,
+  onChange,
+  onSubmit,
+  labelClassName,
+  containerClassName,
+  children,
+  ...rest
+}: SelectProps) {
+  useEffect(() => {
+    const handleUserKeyPress = (event: { keyCode: number }) => {
+      const { keyCode } = event;
+      if (keyCode === 13) {
+        onSubmit?.();
+      }
+    };
+    window.addEventListener("keydown", handleUserKeyPress);
+
+    return () => {
+      window.removeEventListener("keydown", handleUserKeyPress);
+    };
+  }, [onSubmit]);
+
+  return (
+    <div
+      className={clsx({
+        "select-container": true,
+        [`${containerClassName}`]: containerClassName,
+      })}>
+      <select
+        {...rest}
+        className={clsx({
+          select: true,
+          "select--nolabel": !label,
+          [`${className}`]: className,
+        })}
+        id={id}
+        value={value}
+        onChange={onChange}>
+        {children}
+      </select>
+      {label && (
+        <label
+          htmlFor={id}
+          className={clsx({
+            label: true,
+            [`${labelClassName}`]: labelClassName,
+          })}>
+          {label}
+        </label>
+      )}
+      <AngleDown className="arrow" />
+    </div>
+  );
+}

package/src/components/inputs/Textarea.tsx

@@ -0,0 +1,65 @@
+import clsx from "clsx";
+import { useEffect } from "react";
+
+export type TextareaProps = {
+  label?: string;
+  onSubmit?: () => void;
+  labelClassName?: string;
+  containerClassName?: string;
+} & JSX.IntrinsicElements["textarea"];
+
+export function Textarea({
+  id,
+  label,
+  value,
+  className,
+  onChange,
+  onSubmit,
+  disabled,
+  labelClassName,
+  containerClassName,
+  placeholder,
+  ...rest
+}: TextareaProps) {
+  useEffect(() => {
+    const handleUserKeyPress = (event: { keyCode: number }) => {
+      const { keyCode } = event;
+      if (keyCode === 13) {
+        onSubmit?.();
+      }
+    };
+    window.addEventListener("keydown", handleUserKeyPress);
+
+    return () => {
+      window.removeEventListener("keydown", handleUserKeyPress);
+    };
+  }, [onSubmit]);
+
+  return (
+    <div
+      className={clsx({
+        "input-container": true,
+        "input-container--disabled": disabled,
+        [`${containerClassName}`]: containerClassName,
+      })}>
+      <textarea
+        {...rest}
+        className={clsx({ input: true, [`${className}`]: className })}
+        id={id}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder || label}
+      />
+      {label && (
+        <label
+          htmlFor={id}
+          className={clsx({
+            label: true,
+            [`${labelClassName}`]: labelClassName,
+          })}>
+          {label && label}
+        </label>
+      )}
+    </div>
+  );
+}

package/src/components/inputs/Toggle.tsx

@@ -0,0 +1,38 @@
+import clsx from "clsx";
+import { FC, InputHTMLAttributes } from "react";
+
+interface ToggleProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+export const Toggle: FC<ToggleProps> = ({
+  label,
+  checked,
+  className,
+  id,
+  onChange,
+  ...rest
+}) => {
+  const classes = clsx({
+    [`toggle`]: true,
+    [`${className}`]: className,
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChange) onChange(e);
+  };
+
+  return (
+    <label className={classes} htmlFor={id}>
+      <input
+        id={id}
+        type="checkbox"
+        onChange={handleChange}
+        checked={checked}
+        {...rest}
+      />
+      <span className="toggle__slider"></span>
+      {label && label !== "" && <span className="toggle__label">{label}</span>}
+    </label>
+  );
+};