rujira.ui 0.1.0

package/src/components/buttons/Button.tsx

@@ -0,0 +1,80 @@
+import { motion, useMotionTemplate, useMotionValue } from "motion/react";
+import {
+  ComponentPropsWithRef,
+  ElementType,
+  ForwardedRef,
+  MouseEvent,
+  ReactNode,
+  Ref,
+  RefAttributes,
+  forwardRef,
+} from "react";
+
+export type ButtonProps<T extends ElementType = "button"> = {
+  as?: T;
+  label?: string;
+  className?: string;
+  children?: ReactNode;
+} & DistributiveOmit<ComponentPropsWithRef<T>, "as">;
+
+type FixedForwardRef = <T, P = {}>(
+  render: (props: P, ref: Ref<T>) => ReactNode
+) => (props: P & RefAttributes<T>) => ReactNode;
+
+const fixedForwardRef = forwardRef as FixedForwardRef;
+
+type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any
+  ? Omit<T, TOmitted>
+  : never;
+
+const UnwrappedAnyComponent = <T extends ElementType>(
+  props: ButtonProps<T>,
+  ref: ForwardedRef<any>
+) => {
+  const { as: Comp = "button", label, children, className, ...rest } = props;
+
+  let mouseX = useMotionValue(0);
+  let mouseY = useMotionValue(0);
+
+  function handleMouseMove({ currentTarget, clientX, clientY }: MouseEvent) {
+    let { left, top } = currentTarget.getBoundingClientRect();
+    mouseX.set(clientX - left);
+    mouseY.set(clientY - top);
+  }
+
+  let gradient = "214, 21, 235, 1";
+  if (className?.includes("button--grey")) {
+    gradient = "96, 125, 139, 1";
+  } else if (className?.includes("button--red")) {
+    gradient = "244, 81, 30, 1";
+  } else if (className?.includes("button--blue")) {
+    gradient = "96, 251, 208, 1";
+  } else if (className?.includes("button--dark")) {
+    gradient = "90, 42, 209, 1";
+  }
+
+  return (
+    <Comp
+      {...rest}
+      ref={ref}
+      onMouseMove={handleMouseMove}
+      className={`button ${className}`}>
+      <motion.div
+        className="button__motion"
+        style={{
+          background: useMotionTemplate`
+          radial-gradient(
+            150px circle at ${mouseX}px ${mouseY}px,
+            rgba(${gradient}),  
+            transparent 100%
+          )
+        `,
+        }}
+      />
+      {label && <span>{label}</span>}
+      {children}
+    </Comp>
+  );
+};
+
+export const Button = fixedForwardRef(UnwrappedAnyComponent);

package/src/components/buttons/Popout.tsx

@@ -0,0 +1,74 @@
+import clsx from "clsx";
+import { FC, useEffect, useRef, useState } from "react";
+import { Button } from "./Button";
+import { AngleLeft, Ellipsis } from "../icons/Icons";
+
+function getParentOffset(el: HTMLElement) {
+  const rect = el.getBoundingClientRect();
+  const p = el.closest(".relative")?.getBoundingClientRect();
+  return {
+    left: rect.left - (p?.left || 0),
+    top: rect.top - (p?.top || 0),
+    right: (p?.right || 0) - rect.right,
+    bottom: (p?.bottom || 0) - rect.bottom - 8,
+  };
+}
+
+export const Popout: FC<{
+  children?: React.ReactNode;
+  className?: string;
+  buttonClassName?: string;
+}> = ({ children, className, buttonClassName }) => {
+  const [open, setOpen] = useState(false);
+  const node = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      const nav = node.current?.querySelector("nav");
+      if (node.current && nav) {
+        const p = getParentOffset(node?.current);
+        nav.style.bottom = p.bottom + "px";
+        nav.style.right = p.right + node.current.offsetWidth + 4 + "px";
+      }
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [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;
+  };
+
+  return (
+    <div
+      ref={node}
+      className={clsx({
+        popout: true,
+        "popout--open": open,
+        [`${className}`]: className,
+      })}>
+      <Button
+        onClick={() => setOpen(!open)}
+        className={clsx({
+          "button--grey button--small": !buttonClassName,
+          [`${buttonClassName}`]: buttonClassName,
+        })}>
+        {!open ? <Ellipsis /> : <AngleLeft />}
+      </Button>
+      {children}
+    </div>
+  );
+};

package/src/components/buttons/TxButton.tsx

@@ -0,0 +1,103 @@
+import { ElementType, FC, useEffect, useState } from "react";
+import toast, { Renderable } from "react-hot-toast";
+import { AccountProvider, Msg, Simulation, TxResult } from "rujira.js";
+import { networkTxLink } from "rujira.js/src/network";
+import { i18n } from "../../i18n";
+import { Warning } from "../notices/Warning";
+import { Decimal } from "../numbers/Decimal";
+import { Button, ButtonProps } from "./Button";
+
+export type TxButtonProps<T extends ElementType = "button"> = ButtonProps<T> & {
+  accountProvider: AccountProvider;
+  msg: Msg | null;
+  SimulationComponent?: ElementType<{ simulation?: Simulation }>;
+  onSuccess?: (res: TxResult) => void;
+  toastOpts?: {
+    loading?: Renderable;
+    success?: Renderable | ((res: TxResult) => Renderable);
+    error?: Renderable | ((err: any) => Renderable);
+  };
+};
+
+export const TxButton: FC<TxButtonProps> = ({
+  accountProvider,
+  msg,
+  onSuccess,
+  SimulationComponent = DefaultSimulationComponent,
+  children,
+  toastOpts = {},
+  ...rest
+}) => {
+  const { simulate, signAndBroadcast } = accountProvider;
+  const [simulation, setSimulation] = useState<Simulation>();
+  const [simulationError, setSimulationError] = useState<Error>();
+  const { loading, success, error } = toastOpts;
+
+  useEffect(() => {
+    setSimulationError(undefined);
+    msg && simulate(msg).then(setSimulation).catch(setSimulationError);
+  }, [simulate, msg]);
+
+  const onClick = () => {
+    if (!simulation) throw new Error(`Simulation required`);
+    if (!msg) throw new Error(`Msg required`);
+    const p = signAndBroadcast(simulation, msg).then((res) => {
+      onSuccess && onSuccess(res);
+      return res;
+    });
+    toast.promise(p, {
+      loading: loading || i18n.t("Submitting Transaction"),
+      success: success || successHandler,
+      error:
+        error ||
+        ((err: any) => i18n.t(err.message || "Error Submitting Transaction")),
+    });
+  };
+
+  return (
+    <div className="iflex dir-c">
+      <Button {...rest} onClick={onClick} disabled={!simulation || !msg}>
+        {children}
+      </Button>
+      <SimulationComponent simulation={simulation} error={simulationError} />
+    </div>
+  );
+};
+
+const DefaultSimulationComponent: FC<{
+  simulation?: Simulation;
+  error?: Error;
+}> = ({ simulation, error }) => {
+  if (!error) {
+    return (
+      <small className="mt-1 color-white">
+        {simulation ? (
+          <>
+            {i18n.t("Network fee")}:{" "}
+            <Decimal
+              amount={simulation.amount}
+              decimals={simulation.asset.decimals}
+              symbol={simulation.asset.symbol}
+            />
+          </>
+        ) : (
+          "calculating..."
+        )}
+      </small>
+    );
+  }
+  return <Warning color="red" className="condensed mt-1" msg={error.message} />;
+};
+
+const successHandler = (res: TxResult): Renderable => (
+  <p>
+    {i18n.t("Transaction Succeeded")}
+    <br />
+    <a
+      href={networkTxLink(res)}
+      target="_blank"
+      className="color-white no-underline fs-12">
+      {res.txHash.slice(0, 8) + "..." + res.txHash.slice(-8)}
+    </a>
+  </p>
+);

package/src/components/buttons/__Popout.tsx

@@ -0,0 +1,56 @@
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+interface Props {
+  children: React.ReactNode;
+  position: { top: number; left: number };
+  visible: boolean;
+}
+
+export const Popout: React.FC<Props> = ({ children, position, visible }) => {
+  const node = useRef<HTMLElement>(null);
+  if (!visible) return null;
+
+  return createPortal(
+    <nav
+      ref={node}
+      className="popout condensed"
+      style={{
+        top: position.top - (node.current?.offsetHeight || 0) + 8,
+        left: position.left - (node.current?.offsetWidth || 0),
+      }}>
+      {children}
+    </nav>,
+    document.body
+  );
+};
+
+export const usePopout = () => {
+  const [popoutState, setPopoutState] = useState<{
+    content: React.ReactNode;
+    position: { top: number; left: number };
+    visible: boolean;
+  }>({
+    content: "",
+    position: { top: 0, left: 0 },
+    visible: false,
+  });
+
+  const showPopout = (content: React.ReactNode, target: HTMLElement) => {
+    const rect = target.getBoundingClientRect();
+    setPopoutState({
+      content,
+      position: {
+        top: rect.top + window.scrollY + rect.height,
+        left: rect.left + window.scrollX,
+      },
+      visible: true,
+    });
+  };
+
+  const hidePopout = () => {
+    setPopoutState((prev) => ({ ...prev, visible: false }));
+  };
+
+  return { popoutState, showPopout, hidePopout };
+};

package/src/components/cards/Card.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+export const Card: React.FC<Props> = ({ className, children }) => {
+  return (
+    <div
+      className={clsx({
+        "card p-3 color-white": true,
+        [`${className}`]: className,
+      })}>
+      {children}
+    </div>
+  );
+};

package/src/components/cards/GradientCard.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+export const GradientCard: React.FC<Props> = ({ className, children }) => {
+  return (
+    <div
+      className={clsx({
+        "gradient-card bg-black p-3 color-white": true,
+        [`${className}`]: className,
+      })}>
+      {children}
+    </div>
+  );
+};