Add tooltips to navigation items

Add tooltip component
Add extra isDisabled style for button
2022-03-29 16:52:48 +03:00 · 2022-03-29 16:52:39 +03:00 · 2022-03-29 16:52:24 +03:00 · 2022-03-29 16:52:02 +03:00 · 2022-03-29 15:29:51 +03:00 · 2022-03-29 13:55:10 +03:00
13 changed files with 230 additions and 44 deletions
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -171,6 +171,16 @@ export const StyledButton = styled("button", {
        color: "$textMuted",
      },
    },
+    isDisabled: {
+      true: {
+        opacity: 0.6,
+        // pointerEvents: "none",
+        cursor: "auto",
+        "&:hover": {
+          boxShadow: "inherit",
+        },
+      },
+    },
    outline: {
      true: {
        backgroundColor: "transparent",
--- a/components/EditorNavigation.tsx
+++ b/components/EditorNavigation.tsx
@@ -25,6 +25,7 @@ import {
 import NewWindow from "react-new-window";
 import { signOut, useSession } from "next-auth/react";
 import { useSnapshot } from "valtio";
+import toast from "react-hot-toast";

 import {
  createNewFile,
@@ -48,7 +49,7 @@ import Flex from "./Flex";
 import Stack from "./Stack";
 import Input from "./Input";
 import Text from "./Text";
-import toast from "react-hot-toast";
+import Tooltip from "./Tooltip";
 import {
  AlertDialog,
  AlertDialogContent,
@@ -367,44 +368,65 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
              },
            }}
          >
-            <Button
-              isLoading={snap.zipLoading}
-              onClick={downloadAsZip}
-              outline
-              size="sm"
-              css={{ alignItems: "center" }}
+            <Tooltip content="Download as ZIP">
+              <Button
+                isLoading={snap.zipLoading}
+                onClick={downloadAsZip}
+                outline
+                size="sm"
+                css={{ alignItems: "center" }}
+              >
+                <DownloadSimple size="16px" />
+              </Button>
+            </Tooltip>
+            <Tooltip content="Copy share link to clipboard">
+              <Button
+                outline
+                size="sm"
+                css={{ alignItems: "center" }}
+                onClick={() => {
+                  navigator.clipboard.writeText(
+                    `${window.location.origin}/develop/${snap.gistId}`
+                  );
+                  toast.success("Copied share link to clipboard!");
+                }}
+              >
+                <Share size="16px" />
+              </Button>
+            </Tooltip>
+            <Tooltip
+              content={
+                session && session.user
+                  ? snap.gistOwner === session?.user.username
+                    ? "Sync to Gist"
+                    : "Create as a new Gist"
+                  : "You need to be logged in to sync with Gist"
+              }
            >
-              <DownloadSimple size="16px" />
-            </Button>
-            <Button
-              outline
-              size="sm"
-              css={{ alignItems: "center" }}
-              onClick={() => {
-                navigator.clipboard.writeText(
-                  `${window.location.origin}/develop/${snap.gistId}`
-                );
-                toast.success("Copied share link to clipboard!");
-              }}
-            >
-              <Share size="16px" />
-            </Button>
-            <Button
-              outline
-              size="sm"
-              disabled={!session || !session.user}
-              isLoading={snap.gistLoading}
-              css={{ alignItems: "center" }}
-              onClick={() => {
-                if (snap.gistOwner === session?.user.username) {
-                  syncToGist(session);
-                } else {
-                  setCreateNewAlertOpen(true);
-                }
-              }}
-            >
-              <CloudArrowUp size="16px" />
-            </Button>
+              <Button
+                outline
+                size="sm"
+                isDisabled={!session || !session.user}
+                isLoading={snap.gistLoading}
+                css={{ alignItems: "center" }}
+                onClick={() => {
+                  if (!session || !session.user) {
+                    return;
+                  }
+                  if (snap.gistOwner === session?.user.username) {
+                    syncToGist(session);
+                  } else {
+                    setCreateNewAlertOpen(true);
+                  }
+                }}
+              >
+                {snap.gistOwner === session?.user.username ? (
+                  <CloudArrowUp size="16px" />
+                ) : (
+                  <FilePlus size="16px" />
+                )}
+              </Button>
+            </Tooltip>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
--- a/components/LogBox.tsx
+++ b/components/LogBox.tsx
@@ -215,6 +215,7 @@ export const Log: FC<ILog> = ({
        )}
        {expanded && jsonData && <Pre block>{jsonData}</Pre>}
      </LogText>
+      <br />
    </>
  );
 };
--- a/components/Tooltip.tsx
+++ b/components/Tooltip.tsx
@@ -0,0 +1,89 @@
+import React from "react";
+import { styled, keyframes } from "../stitches.config";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+const slideUpAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+const slideRightAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" },
+});
+
+const slideDownAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" },
+});
+
+const slideLeftAndFade = keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" },
+});
+
+const StyledContent = styled(TooltipPrimitive.Content, {
+  borderRadius: 4,
+  padding: "$2 $3",
+  fontSize: 12,
+  lineHeight: 1,
+  color: "$text",
+  backgroundColor: "$background",
+  boxShadow:
+    "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  "@media (prefers-reduced-motion: no-preference)": {
+    animationDuration: "400ms",
+    animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    animationFillMode: "forwards",
+    willChange: "transform, opacity",
+    '&[data-state="delayed-open"]': {
+      '&[data-side="top"]': { animationName: slideDownAndFade },
+      '&[data-side="right"]': { animationName: slideLeftAndFade },
+      '&[data-side="bottom"]': { animationName: slideUpAndFade },
+      '&[data-side="left"]': { animationName: slideRightAndFade },
+    },
+  },
+  ".dark &": {
+    boxShadow:
+      "0px 0px 10px 2px rgba(255,255,255,.15), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  },
+  ".light &": {
+    boxShadow:
+      "0px 0px 10px 2px rgba(0,0,0,.15), hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  },
+});
+
+const StyledArrow = styled(TooltipPrimitive.Arrow, {
+  fill: "$background",
+});
+
+interface ITooltip {
+  content: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const Tooltip: React.FC<ITooltip> = ({
+  children,
+  content,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+}) => {
+  return (
+    <TooltipPrimitive.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+      <StyledContent side="bottom" align="center">
+        {content}
+        <StyledArrow offset={5} width={11} height={5} />
+      </StyledContent>
+    </TooltipPrimitive.Root>
+  );
+};
+
+export default Tooltip;
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
    "@radix-ui/react-dialog": "^0.1.1",
    "@radix-ui/react-dropdown-menu": "^0.1.1",
    "@radix-ui/react-id": "^0.1.1",
+    "@radix-ui/react-tooltip": "^0.1.7",
    "@stitches/react": "^1.2.6-0",
    "base64-js": "^1.5.1",
    "dinero.js": "^1.9.1",
--- a/state/actions/addFaucetAccount.ts
+++ b/state/actions/addFaucetAccount.ts
@@ -68,11 +68,11 @@ export const addFaucetAccount = async (showToast: boolean = false) => {
 // fetch initial faucets
 (async function fetchFaucets() {
  if (typeof window !== 'undefined') {
-    if (state.accounts.length < 2) {
+    if (state.accounts.length === 0) {
      await addFaucetAccount();
-      setTimeout(() => {
-        addFaucetAccount();
-      }, 10000);
+      // setTimeout(() => {
+      //   addFaucetAccount();
+      // }, 10000);
    }
  }
 })();
--- a/state/actions/deployHook.ts
+++ b/state/actions/deployHook.ts
@@ -15,6 +15,13 @@ const hash = async (string: string) => {
  return hashHex;
 }

+function toHex(str: string) {
+  var result = '';
+  for (var i = 0; i < str.length; i++) {
+    result += str.charCodeAt(i).toString(16);
+  }
+  return result.toUpperCase();
+}

 function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
  if (!arrayBuffer) {
@@ -64,7 +71,7 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
  ).toUpperCase());
  const hookOnValues: (keyof TTS)[] = data.Invoke.map(tt => tt.value);
  const { HookParameters } = data;
-  const filteredHookParameters = HookParameters.filter(hp => hp.HookParameter.HookParameterName && hp.HookParameter.HookParameterValue);
+  const filteredHookParameters = HookParameters.filter(hp => hp.HookParameter.HookParameterName && hp.HookParameter.HookParameterValue)?.map(aa => ({ HookParameter: { HookParameterName: toHex(aa.HookParameter.HookParameterName || ''), HookParameterValue: toHex(aa.HookParameter.HookParameterValue || '') } }));
  // const filteredHookGrants = HookGrants.filter(hg => hg.HookGrant.Authorize || hg.HookGrant.HookHash).map(hg => {
  //   return {
  //     HookGrant: {
@@ -74,6 +81,7 @@ export const deployHook = async (account: IAccount & { name?: string }, data: Se
  //     }
  //   }
  // });
+
  if (typeof window !== "undefined") {
    const tx = {
      Account: account.address,
--- a/state/actions/importAccount.ts
+++ b/state/actions/importAccount.ts
@@ -24,6 +24,7 @@ export const importAccount = (secret: string) => {
    sequence: 1,
    hooks: [],
    isLoading: false,
+    version: '2'
  });
  return toast.success("Account imported successfully!");
 };
--- a/state/index.ts
+++ b/state/index.ts
@@ -121,7 +121,7 @@ if (typeof window !== "undefined") {
    initialAccounts = JSON.parse(localStorageAccounts);
  }
  // filter out old accounts (they do not have version property at all)
-  initialAccounts = initialAccounts.filter(acc => acc.version === '2');
+  // initialAccounts = initialAccounts.filter(acc => acc.version === '2');
 }

 // Initialize state
--- a/xrpl-hooks-docs/docs.ts
+++ b/xrpl-hooks-docs/docs.ts
@@ -25,6 +25,8 @@ import hooksGuardInFor from "./md/hooks-guard-in-for.md";
 import hooksGuardInWhile from "./md/hooks-guard-in-while.md";
 import hooksHashBufLen from "./md/hooks-hash-buf-len.md";
 import hooksKeyletBufLen from "./md/hooks-keylet-buf-len.md";
+import hooksParamBufLen from "./md/hooks-param-buf-len.md";
+import hooksParamSetBufLen from "./md/hooks-param-set-buf-len.md";
 import hooksRaddrConvBufLen from "./md/hooks-raddr-conv-buf-len.md";
 import hooksRaddrConvPure from "./md/hooks-raddr-conv-pure.md";
 import hooksReserveLimit from "./md/hooks-reserve-limit.md";
@@ -69,6 +71,8 @@ const docs: { [key: string]: string; } = {
  "hooks-guard-in-while": hooksGuardInWhile,
  "hooks-hash-buf-len": hooksHashBufLen,
  "hooks-keylet-buf-len": hooksKeyletBufLen,
+  "hooks-param-buf-len": hooksParamBufLen,
+  "hooks-param-set-buf-len": hooksParamSetBufLen,
  "hooks-raddr-conv-buf-len": hooksRaddrConvBufLen,
  "hooks-raddr-conv-pure": hooksRaddrConvPure,
  "hooks-reserve-limit": hooksReserveLimit,
--- a/xrpl-hooks-docs/md/hooks-param-buf-len.md
+++ b/xrpl-hooks-docs/md/hooks-param-buf-len.md
@@ -0,0 +1,7 @@
+# hooks-param-buf-len
+
+Function [hook_param](https://xrpl-hooks.readme.io/v2.0/reference/hook_param) expects a limited-length name input and produces fixed-size value output.
+
+This check warns about invalid sizes of input and output buffers (if they're specified by constants - variable parameters are ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/parameters)
--- a/xrpl-hooks-docs/md/hooks-param-set-buf-len.md
+++ b/xrpl-hooks-docs/md/hooks-param-set-buf-len.md
@@ -0,0 +1,7 @@
+# hooks-param-set-buf-len
+
+Function [hook_param_set](https://xrpl-hooks.readme.io/v2.0/reference/hook_param_set) expects limited-length name, fixed-length hash and limited-length value inputs.
+
+This check warns about invalid sizes of input buffers (if they're specified by constants - variable parameters are ignored).
+
+[Read more](https://xrpl-hooks.readme.io/v2.0/docs/parameters)
--- a/yarn.lock
+++ b/yarn.lock
@@ -762,6 +762,27 @@
    "@babel/runtime" "^7.13.10"
    "@radix-ui/react-compose-refs" "0.1.0"

+"@radix-ui/react-tooltip@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3"
+  integrity sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "0.1.0"
+    "@radix-ui/react-compose-refs" "0.1.0"
+    "@radix-ui/react-context" "0.1.1"
+    "@radix-ui/react-id" "0.1.5"
+    "@radix-ui/react-popper" "0.1.4"
+    "@radix-ui/react-portal" "0.1.4"
+    "@radix-ui/react-presence" "0.1.2"
+    "@radix-ui/react-primitive" "0.1.4"
+    "@radix-ui/react-slot" "0.1.2"
+    "@radix-ui/react-use-controllable-state" "0.1.0"
+    "@radix-ui/react-use-escape-keydown" "0.1.0"
+    "@radix-ui/react-use-previous" "0.1.1"
+    "@radix-ui/react-use-rect" "0.1.1"
+    "@radix-ui/react-visually-hidden" "0.1.4"
+
 "@radix-ui/react-use-body-pointer-events@0.1.1":
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz#63e7fd81ca7ffd30841deb584cd2b7f460df2597"
@@ -807,6 +828,13 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-use-previous@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
+  integrity sha512-O/ZgrDBr11dR8rhO59ED8s5zIXBRFi8MiS+CmFGfi7MJYdLbfqVOmQU90Ghf87aifEgWe6380LA69KBneaShAg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-rect@0.1.1":
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz#6c15384beee59c086e75b89a7e66f3d2e583a856"
@@ -822,6 +850,14 @@
  dependencies:
    "@babel/runtime" "^7.13.10"

+"@radix-ui/react-visually-hidden@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.4.tgz#6c75eae34fb5d084b503506fbfc05587ced05f03"
+  integrity sha512-K/q6AEEzqeeEq/T0NPChvBqnwlp8Tl4NnQdrI/y8IOY7BRR+Ug0PEsVk6g48HJ7cA1//COugdxXXVVK/m0X1mA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "0.1.4"
+
 "@radix-ui/rect@0.1.1":
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419"
Author	SHA1	Message	Date
Valtteri Karesto	4ad329882c	Add tooltips to navigation items	2022-03-29 16:52:48 +03:00
Valtteri Karesto	ee86b91e82	Add tooltip component	2022-03-29 16:52:39 +03:00
Valtteri Karesto	d2addf782e	Add extra isDisabled style for button	2022-03-29 16:52:24 +03:00
Valtteri Karesto	51f7bd509b	Add radix tooltip	2022-03-29 16:52:02 +03:00
Valtteri Karesto	e064251ff9	Merge pull request #150 from eqlabs/feat/fix-newlines Fixes issue #86 again, regressed in #107 for Firefox	2022-03-29 15:29:51 +03:00
Valtteri Karesto	95022ef121	Fixes issue #86 again, regressed in #107 for Firefox	2022-03-29 13:55:10 +03:00
Valtteri Karesto	4519906b78	hotfix/remove-console-log	2022-03-28 15:35:27 +03:00
Valtteri Karesto	88a47c49a4	Merge pull request #149 from eqlabs/fix/fix-hook-params Convert hook params to hex blobs	2022-03-28 15:33:23 +03:00
Valtteri Karesto	1ab03f9bed	Fix types	2022-03-28 15:22:10 +03:00
Valtteri Karesto	84ff667135	Convert hook params to hex blobs	2022-03-28 15:20:14 +03:00
Valtteri Karesto	0d10e782f3	Ask faucets account only once if you dont have one	2022-03-25 11:35:23 +02:00
Valtteri Karesto	84e6763495	hotfix/keep-accounts	2022-03-25 10:49:29 +02:00
Vaclav Barta	7ffcfd694d	Feature/new hook doc (#144 ) * added hooks-param-buf-len doc file * showing help for hooks-param-buf-len * added hooks-param-set-buf-len	2022-03-25 09:23:53 +01:00
Valtteri Karesto	77e4917d38	Merge pull request #145 from eqlabs/hotfix/fix-accounts Fix problem with accounts	2022-03-25 10:21:47 +02:00