rujira.ui 0.1.0

package/lib/esm/src/context/Affiliate.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, } from "react";
+const AFFILIATE = "rujira";
+const FEE = 50;
+const KEY = "refs";
+const load = () => {
+    const json = localStorage.getItem(KEY) || "{}";
+    return JSON.parse(json);
+};
+const store = (ref) => {
+    const current = load();
+    if (!!current[ref.name])
+        return;
+    localStorage.setItem(KEY, JSON.stringify({ ...current, [ref.name]: ref }));
+};
+const context = createContext({
+    base: { name: AFFILIATE, fee: FEE },
+});
+export const AffiliateContext = ({ 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 (_jsx(context.Provider, { value: { base: { name: AFFILIATE, fee: FEE }, affiliate }, children: children }));
+};
+export const useAffiliate = () => useContext(context);

package/lib/esm/src/context/GlobalModal.js

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

package/lib/esm/src/d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/esm/src/helpers/index.js

@@ -0,0 +1,65 @@
+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) => {
+    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, digits, 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, digits) => {
+    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/lib/esm/src/helpers/number.js

@@ -0,0 +1,8 @@
+"use strict";
+// Add the method to the Number prototype
+Number.prototype.toLocaleDecimal = function (decimals = 0) {
+    return this.toLocaleString(undefined, {
+        maximumFractionDigits: decimals,
+        minimumFractionDigits: decimals,
+    });
+};

package/lib/esm/src/hooks/useClickOutside.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from "react";
+export const useClickOutside = (callback, isActive) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            const target = e.target;
+            if (ref.current && !ref.current.contains(target)) {
+                callback();
+            }
+        };
+        if (isActive) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isActive, callback]);
+    return ref;
+};

package/lib/esm/src/hooks/useLocalStorage.js

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

package/lib/esm/src/hooks/useQueryParam.js

@@ -0,0 +1,31 @@
+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 = (key, initial) => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const q = useQuery();
+    const val = q.get(key) || initial;
+    const setVal = (s) => {
+        s ? q.set(key, s) : q.delete(key);
+        navigate(`${location.pathname}?${q.toString()}`);
+    };
+    return [val, setVal];
+};
+export const useQueryParams = (vals) => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const q = useQuery();
+    const val = Object.entries(vals).reduce((a, [k, v]) => ({ ...a, [k]: q.get(k) || v }), {});
+    const setVal = (s) => {
+        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/lib/esm/src/hooks/useWindowSize.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+export function useWindowSize() {
+    const [windowSize, setWindowSize] = useState({
+        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/lib/esm/src/i18n/i18n.js

@@ -0,0 +1,90 @@
+import { createElement } from "react";
+import template from "../../i18n/translations/template.json";
+const replace = (string, replacements) => {
+    const r = replacements.pop();
+    if (r) {
+        return replace(string.replace("{}", r), replacements);
+    }
+    else {
+        return string;
+    }
+};
+export const t = (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) => {
+    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) => (props) => createElement(tag, props, typeof props.children === "string" ? t(props.children) : props.children);
+export const a = comp("a");
+export const strong = comp("strong");
+export const label = comp("label");
+export const li = comp("li");
+export const h1 = comp("h1");
+export const h2 = comp("h2");
+export const h3 = comp("h3");
+export const h4 = comp("h4");
+export const th = comp("th");
+export const td = comp("td");
+export const div = comp("div");
+export const span = comp("span");
+export const small = comp("small");
+export const p = comp("p");
+export const 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/lib/esm/src/i18n/index.js

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

package/lib/esm/src/index.js

@@ -0,0 +1,38 @@
+/* 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/lib/esm/src/services/account.js

@@ -0,0 +1,42 @@
+import { Network, Provider } from "rujira.js";
+const STORAGE = window.localStorage;
+const KEY_ACCOUNT = "rujira-account";
+const KEY_ACCOUNTS = "rujira-accounts";
+/**
+ * Fetches the persisted Account
+ */
+export const loadAccount = () => {
+    const stored = STORAGE.getItem(KEY_ACCOUNT);
+    if (!stored)
+        return undefined;
+    const parsed = JSON.parse(stored);
+    if (typeof parsed == "object" &&
+        "network" in parsed &&
+        Object.values(Network).includes(parsed.network) &&
+        "provider" in parsed &&
+        Object.values(Provider).includes(parsed.provider)) {
+        return parsed;
+    }
+    else {
+        throw new Error(`Invalid store ${stored}`);
+    }
+};
+/**
+ * Persists a selected account
+ */
+export const saveAccount = (provider, network) => {
+    STORAGE.setItem(KEY_ACCOUNT, JSON.stringify({ provider, network }));
+};
+/**
+ * Clears the persisted Account
+ */
+export const clearAccount = () => {
+    STORAGE.removeItem(KEY_ACCOUNT);
+};
+export const loadAccounts = () => JSON.parse(STORAGE.getItem(KEY_ACCOUNTS) || "[]");
+export const saveAccounts = (as) => {
+    STORAGE.setItem(KEY_ACCOUNTS, JSON.stringify(as));
+};
+export const clearAccounts = () => {
+    STORAGE.removeItem(KEY_ACCOUNTS);
+};

package/lib/esm/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../src/d.ts","../../src/index.ts","../../src/components/buttons/button.tsx","../../src/components/buttons/popout.tsx","../../src/components/buttons/txbutton.tsx","../../src/components/buttons/__popout.tsx","../../src/components/cards/card.tsx","../../src/components/cards/gradientcard.tsx","../../src/components/footer/footer.tsx","../../src/components/header/accounts.tsx","../../src/components/header/header.tsx","../../src/components/header/quicklauncher.tsx","../../src/components/header/resolvelink.tsx","../../src/components/icons/icondenom.tsx","../../src/components/icons/icons.tsx","../../src/components/icons/networks.tsx","../../src/components/icons/wallets.tsx","../../src/components/inputs/checkbox.tsx","../../src/components/inputs/decimalinput.tsx","../../src/components/inputs/denominput.tsx","../../src/components/inputs/denomselect.tsx","../../src/components/inputs/input.tsx","../../src/components/inputs/numeric.tsx","../../src/components/inputs/radio.tsx","../../src/components/inputs/select.tsx","../../src/components/inputs/textarea.tsx","../../src/components/inputs/toggle.tsx","../../src/components/loader/loader.tsx","../../src/components/logos/rujiralogo.tsx","../../src/components/notices/warning.tsx","../../src/components/numbers/decimal.tsx","../../src/components/numbers/fiat.tsx","../../src/components/progress/progress.tsx","../../src/components/slider/slider.tsx","../../src/context/affiliate.tsx","../../src/context/globalmodal.tsx","../../src/helpers/index.ts","../../src/helpers/number.ts","../../src/hooks/useclickoutside.ts","../../src/hooks/uselocalstorage.ts","../../src/hooks/usequeryparam.ts","../../src/hooks/usewindowsize.ts","../../src/i18n/i18n.tsx","../../src/i18n/index.ts","../../src/services/account.ts"],"version":"5.6.2"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "rujira.ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "test": "vitest run",
+    "build": "tsc -b"
+  },
+  "exports": {
+    ".": {
+      "import": "./lib/esm/index.js"
+    },
+    "./types": "./lib/esm/index.d.ts"
+  },
+  "dependencies": {
+    "@keplr-wallet/types": "^0.12.151",
+    "clsx": "^2.1.1",
+    "ethers": "^6.13.4",
+    "jsdom": "^24.0.0",
+    "motion": "^11.12.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.4.1",
+    "react-number-format": "^5.4.2",
+    "react-router-dom": "^6.26.2",
+    "react-slider": "^2.0.6",
+    "rujira.js": "workspace:*"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-slider": "^1.3.6",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "sass": "^1.77.8",
+    "typescript": "^5.5.4",
+    "vite": "^5.2.0",
+    "vitest": "^1.5.0"
+  }
+}