rujira.ui 0.1.0

package/src/hooks/useClickOutside.ts

@@ -0,0 +1,27 @@
+import { RefObject, useEffect, useRef } from "react";
+
+export const useClickOutside = (
+  callback: () => void,
+  isActive: boolean
+): RefObject<HTMLElement> => {
+  const ref = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (ref.current && !ref.current.contains(target)) {
+        callback();
+      }
+    };
+
+    if (isActive) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isActive, callback]);
+
+  return ref;
+};

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,20 @@
+import { useMemo, useState } from "react";
+
+type T = string | object;
+
+export const useLocalStorage = (key: string, def: T) => {
+  const initial = useMemo(() => localStorage.getItem(key), [key]);
+
+  const [val, setLocalVal] = useState(
+    initial ? JSON.parse(initial) : def
+  );
+
+  const setVal = (v: any) => {
+    setLocalVal(v);
+    v
+      ? localStorage.setItem(key, JSON.stringify(v))
+      : localStorage.removeItem(key);
+  };
+
+  return [val, setVal];
+};

package/src/hooks/useQueryParam.ts

@@ -0,0 +1,46 @@
+import { useMemo } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+
+const useQuery = () => {
+  const { search } = useLocation();
+  return useMemo(() => new URLSearchParams(search), [search]);
+};
+
+export const useQueryParam = <T extends string = string>(
+  key: string,
+  initial: T
+): [T, (v: T) => void] => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const q = useQuery();
+
+  const val = (q.get(key) as T) || (initial as T);
+  const setVal = (s: string) => {
+    s ? q.set(key, s) : q.delete(key);
+    navigate(`${location.pathname}?${q.toString()}`);
+  };
+
+  return [val, setVal];
+};
+
+export const useQueryParams = <T extends string = string>(
+  vals: Record<string, T>
+): [Record<string, T>, (v: Record<string, T>) => void] => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const q = useQuery();
+
+  const val = Object.entries(vals).reduce(
+    (a, [k, v]) => ({ ...a, [k]: (q.get(k) as T) || (v as T) }),
+    {}
+  );
+  const setVal = (s: Record<string, T>) => {
+    const r = Object.entries(s).reduce((a, [k, v]) => {
+      v ? a.set(k, v) : a.delete(k);
+      return a;
+    }, q);
+    navigate(`${location.pathname}?${r.toString()}`);
+  };
+
+  return [val, setVal];
+};

package/src/hooks/useWindowSize.ts

@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+export function useWindowSize(): Size {
+  const [windowSize, setWindowSize] = useState<Size>({
+    width: window.outerWidth,
+    height: window.outerHeight,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return windowSize;
+}

package/src/i18n/i18n.tsx

@@ -0,0 +1,102 @@
+import { createElement, PropsWithChildren } from "react";
+import template from "../../i18n/translations/template.json";
+
+const replace = (string: string, replacements: string[]): string => {
+  const r = replacements.pop();
+  if (r) {
+    return replace(string.replace("{}", r), replacements);
+  } else {
+    return string;
+  }
+};
+
+export const t = (string: string, replacements = []) => {
+  const lang = navigator.language;
+  const txs = translations(lang);
+  if (txs) {
+    const tx = replace(txs[string], replacements.reverse());
+    if (!tx) txs[string] = "";
+    return tx || string;
+  }
+  return string;
+};
+
+const translations = (language: string): Record<string, string> => {
+  switch (language) {
+    /* case "de":
+    case "de-DE":
+      return de;
+    case "tr":
+    case "tr-TR":
+      return tr;
+    case "es":
+    case "es-ES":
+      return es;
+    case "it":
+    case "it-IT":
+      return it;
+    case "ru":
+    case "ru-RU":
+      return ru;
+    case "ar":
+    case "ar-AE":
+    case "ar-BH":
+    case "ar-DZ":
+    case "ar-EG":
+    case "ar-IQ":
+    case "ar-JO":
+    case "ar-KW":
+    case "ar-LB":
+    case "ar-LY":
+    case "ar-MA":
+    case "ar-OM":
+    case "ar-QA":
+    case "ar-SA":
+    case "ar-SY":
+    case "ar-TN":
+    case "ar-YE":
+      return ar; */
+    default:
+      return template;
+  }
+};
+
+const comp =
+  (tag: string): React.FC<PropsWithChildren<{}>> =>
+  (props) =>
+    createElement(
+      tag,
+      props,
+      typeof props.children === "string" ? t(props.children) : props.children
+    );
+
+export const a: React.FC<JSX.IntrinsicElements["a"]> = comp("a");
+export const strong: React.FC<JSX.IntrinsicElements["strong"]> = comp("strong");
+export const label: React.FC<JSX.IntrinsicElements["label"]> = comp("label");
+export const li: React.FC<JSX.IntrinsicElements["li"]> = comp("li");
+export const h1: React.FC<JSX.IntrinsicElements["h1"]> = comp("h1");
+export const h2: React.FC<JSX.IntrinsicElements["h2"]> = comp("h2");
+export const h3: React.FC<JSX.IntrinsicElements["h3"]> = comp("h3");
+export const h4: React.FC<JSX.IntrinsicElements["h4"]> = comp("h4");
+export const th: React.FC<JSX.IntrinsicElements["th"]> = comp("th");
+export const td: React.FC<JSX.IntrinsicElements["td"]> = comp("td");
+export const div: React.FC<JSX.IntrinsicElements["div"]> = comp("div");
+export const span: React.FC<JSX.IntrinsicElements["span"]> = comp("span");
+export const small: React.FC<JSX.IntrinsicElements["small"]> = comp("small");
+export const p: React.FC<JSX.IntrinsicElements["p"]> = comp("p");
+export const button: React.FC<JSX.IntrinsicElements["button"]> = comp("button");
+
+document.onkeyup = function (e) {
+  if (e.ctrlKey && e.shiftKey && e.key == "E") {
+    const lang = navigator.language;
+    const txs = translations(lang);
+
+    var a = document.createElement("a");
+    var file = new Blob([JSON.stringify(txs, null, 2)], {
+      type: "application/json",
+    });
+    a.href = URL.createObjectURL(file);
+    a.download = `${lang}.json`;
+    a.click();
+  }
+};

package/src/i18n/index.ts

@@ -0,0 +1 @@
+export * as i18n from './i18n';

package/src/index.ts

@@ -0,0 +1,54 @@
+/* global BigInt */
+import "./helpers/number";
+
+export * from "./components/buttons/Button";
+export * from "./components/buttons/Popout";
+export * from "./components/buttons/TxButton";
+
+export * from "./components/cards/Card";
+export * from "./components/cards/GradientCard";
+
+export * from "./components/footer/Footer";
+
+export { Header } from "./components/header/Header";
+export * from "./components/header/ResolveLink";
+
+export * from "./components/icons/IconDenom";
+export * as Icons from "./components/icons/Icons";
+export * as NetworkIcons from "./components/icons/Networks";
+export * as WalletIcons from "./components/icons/Wallets";
+
+export * from "./components/inputs/Checkbox";
+export * from "./components/inputs/DenomInput";
+export * from "./components/inputs/DenomSelect";
+export * from "./components/inputs/Input";
+export * from "./components/inputs/Numeric";
+export * from "./components/inputs/Radio";
+export * from "./components/inputs/Select";
+export * from "./components/inputs/Textarea";
+export * from "./components/inputs/Toggle";
+
+export * from "./components/loader/Loader";
+
+export * from "./components/logos/RujiraLogo";
+
+export * from "./components/notices/Warning";
+
+export * from "./components/numbers/Decimal";
+export * from "./components/numbers/Fiat";
+
+export * from "./components/progress/Progress";
+
+export * from "./components/slider/Slider";
+
+export * from "./hooks/useClickOutside";
+export * from "./hooks/useLocalStorage";
+export * from "./hooks/useQueryParam";
+export * from "./hooks/useWindowSize";
+
+export * from "./context/Affiliate";
+export * from "./context/GlobalModal";
+
+export * from "./i18n";
+
+export * from "./services/account";

package/src/scss/base/_colors.scss

@@ -0,0 +1,23 @@
+@each $l, $c in $colors {
+  .color-#{$l} {
+    color: $c;
+  }
+  .hover-#{$l} {
+    transition: color 0.1s;
+    &:hover {
+      color: $c;
+    }
+  }
+  .bg-#{$l} {
+    background-color: $c;
+  }
+  .bg-hover-#{$l} {
+    transition: background-color 0.1s;
+    &:hover {
+      background-color: $c;
+    }
+  }
+  .b-#{$l} {
+    border: 1px solid $c;
+  }
+}

package/src/scss/base/_display.scss

@@ -0,0 +1,85 @@
+html {
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+.relative {
+  position: relative;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.block-img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.reset-overflow {
+  overflow: visible;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.arrow {
+  cursor: default;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.no-pointer-events {
+  pointer-events: none;
+}
+
+.no-select {
+  user-select: none;
+  cursor: default;
+}
+
+.clearfix {
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}
+
+.transition {
+  transition: all 0.15s;
+}

package/src/scss/base/_filters.scss

@@ -0,0 +1,20 @@
+@for $i from 0 through 20 {
+  $o: $i * 0.05;
+  .opacity-#{$i} {
+    opacity: $o;
+  }
+}
+.invert {
+  filter: invert(1);
+}
+.desaturate {
+  filter: none;
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+}
+.blur-bg {
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+}