Support subsquare identity judgement, #6881

packages/next-common/components/nav/menu/item/index.jsx

@@ -5,7 +5,7 @@ import NavMenuDivider from "../../divider";
 import { useNavSubmenuVisible } from "next-common/context/nav";
 
 export default function NavMenuItem({ collapsed, ...menu } = {}) {
-  const { type, items } = menu || {};
+  const { type, items, visible = true } = menu || {};
   const router = useRouter();
   const routePathname = router.asPath.split("?")[0];
   const [navSubmenuVisible, setNavSubmenuVisible] = useNavSubmenuVisible();
@@ -14,6 +14,10 @@ export default function NavMenuItem({ collapsed, ...menu } = {}) {
     return <NavMenuDivider />;
   }
 
+  if (visible === false) {
+    return null;
+  }
+
   if (items?.length && !menu?.hideItemsOnMenu) {
     return (
       <NavMenuItemGroup

packages/next-common/components/nav/menu/item/item.jsx

@@ -14,11 +14,16 @@ export default function NavMenuItemItem({
   onClick,
   className = "",
   hoverTooltipLabel = true,
+  visible = true,
 }) {
   const isExternal = isExternalLink(item?.pathname);
   const [, setNavMenuType] = useNavMenuType();
   const router = useRouter();
 
+  if (visible === false) {
+    return null;
+  }
+
   if (
     item?.type === NAV_MENU_TYPE.subspace ||
     item?.type === NAV_MENU_TYPE.archived

packages/next-common/components/overview/accountInfo/accountInfoPanel.js

@@ -29,6 +29,7 @@ import Avatar from "next-common/components/avatar";
 import getIpfsLink from "next-common/utils/env/ipfsEndpoint";
 import { AvatarImg } from "next-common/components/user/styled";
 import Gravatar from "next-common/components/gravatar";
+import AccountPanelJudgementScrollPrompt from "./components/accountPanelJudgementScrollPrompt";
 
 const ParaChainTeleportPopup = dynamic(() =>
   import("next-common/components/paraChainTeleportPopup").then(
@@ -313,6 +314,7 @@ export default function AccountInfoPanel() {
       <Divider />
       <AccountBalances />
       <ExtensionUpdatePrompt />
+      <AccountPanelJudgementScrollPrompt />
       <AccountPanelScrollPrompt />
     </NeutralPanel>
   );

packages/next-common/components/overview/accountInfo/components/ScrollPromptContainer.js

@@ -0,0 +1,113 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { animate } from "framer-motion";
+import { useWindowWidthContext } from "next-common/context/windowSize";
+import { Fragment } from "react";
+
+const ITEM_HEIGHT = 40;
+const MOBILE_ITEM_HEIGHT = 60;
+const ITEM_GAP = 4;
+
+export default function ScrollPromptContainer({ components = [] }) {
+  const wrapperRef = useRef();
+  const width = useWindowWidthContext();
+  const isMobile = width < 768;
+  const [total, setTotal] = useState(0);
+  const pauseRef = useRef(false);
+
+  const pageSize = total > 2 ? 2 : 1;
+
+  const wrapperHeight = useMemo(() => {
+    if (!total) {
+      return 0;
+    }
+    if (isMobile) {
+      return pageSize * MOBILE_ITEM_HEIGHT + ITEM_GAP * (pageSize - 1);
+    }
+    return pageSize * ITEM_HEIGHT + ITEM_GAP * (pageSize - 1);
+  }, [isMobile, pageSize, total]);
+
+  const [random, setRandom] = useState(1);
+  useEffect(() => {
+    if (!wrapperRef.current) {
+      return;
+    }
+
+    const updateTotal = () => {
+      setTotal(Math.floor(wrapperRef.current.children.length / 3));
+    };
+
+    updateTotal();
+
+    const observer = new MutationObserver(updateTotal);
+    observer.observe(wrapperRef.current, { childList: true });
+
+    return () => observer.disconnect();
+  }, [random]);
+
+  const marginTop = useMemo(() => {
+    if (isMobile) {
+      return MOBILE_ITEM_HEIGHT + ITEM_GAP;
+    }
+    return ITEM_HEIGHT + ITEM_GAP;
+  }, [isMobile]);
+
+  const indexRef = useRef(0);
+
+  useEffect(() => {
+    indexRef.current = 0;
+    wrapperRef.current?.scrollTo({ top: 0 });
+
+    if (total < 2) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      if (pauseRef.current || !wrapperRef.current) {
+        return;
+      }
+
+      const nextIndex = indexRef.current + 1;
+      const from = indexRef.current * marginTop;
+      const to = nextIndex * marginTop;
+
+      animate(from, to, {
+        duration: 1,
+        onUpdate: (latest) => {
+          wrapperRef.current?.scrollTo({ top: latest });
+        },
+        onComplete: () => {
+          indexRef.current = nextIndex;
+          if (indexRef.current >= total) {
+            indexRef.current -= total;
+            wrapperRef.current?.scrollTo({ top: indexRef.current * marginTop });
+          }
+        },
+      });
+    }, 6500);
+    return () => clearInterval(interval);
+  }, [marginTop, total]);
+
+  return (
+    <div
+      ref={wrapperRef}
+      style={{
+        height: wrapperHeight + "px",
+        display: total ? "" : "none",
+      }}
+      className=" overflow-y-hidden flex flex-col gap-1"
+      onMouseEnter={() => (pauseRef.current = true)}
+      onMouseLeave={() => (pauseRef.current = false)}
+    >
+      {[...components, ...components, ...components].map((Item, index) => {
+        return (
+          <Fragment key={index}>
+            <Item
+              key={`${random}-${index}`}
+              onClose={() => setRandom(random + 1)}
+            />
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}

packages/next-common/components/overview/accountInfo/components/accountPanelJudgementScrollPrompt.js

@@ -0,0 +1,8 @@
+import ScrollPromptContainer from "./ScrollPromptContainer";
+import { JudgementPrompt } from "./judgementPrompt";
+
+const promptComponents = [JudgementPrompt];
+
+export default function AccountPanelJudgementScrollPrompt() {
+  return <ScrollPromptContainer components={promptComponents} />;
+}

packages/next-common/components/overview/accountInfo/components/accountPanelScrollPrompt.js

@@ -3,21 +3,14 @@ import { AvatarPrompt } from "./useSetAvatarPrompt";
 import { IdentityPrompt } from "./useSetIdentityPrompt";
 import { MultisigPrompt } from "./useMultisigPrompt";
 import AssetsManagePrompt from "./useAssetsManagePrompt";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { animate } from "framer-motion";
-import { useWindowWidthContext } from "next-common/context/windowSize";
-import { Fragment } from "react";
+import ScrollPromptContainer from "./ScrollPromptContainer";
 import AccountUnlockBalancePrompt from "./accountUnlockBalancePrompt";
 import VestingUnlockablePrompt from "./vestingUnlockablePrompt";
 import NominatorWithdrawUnbondedPrompt from "./nominatorWithdrawUnbondedPrompt";
 import NominatorClaimRewardPrompt from "./nominatorClaimRewardPrompt";
 import PoolWithdrawUnbondedPrompt from "./poolWithdrawUnbondedPrompt";
 import PoolClaimRewardPrompt from "./poolClaimRewardPrompt";
 
-const ITEM_HEIGHT = 40;
-const MOBILE_ITEM_HEIGHT = 60;
-const ITEM_GAP = 4;
-
 const promptComponents = [
   DelegationPrompt,
   AvatarPrompt,
@@ -33,110 +26,5 @@ const promptComponents = [
 ];
 
 export default function AccountPanelScrollPrompt() {
-  const wrapperRef = useRef();
-  const width = useWindowWidthContext();
-  const isMobile = width < 768;
-  const [total, setTotal] = useState(0);
-  const pauseRef = useRef(false);
-
-  const pageSize = total > 2 ? 2 : 1;
-
-  const wrapperHeight = useMemo(() => {
-    if (!total) {
-      return 0;
-    }
-    if (isMobile) {
-      return pageSize * MOBILE_ITEM_HEIGHT + ITEM_GAP * (pageSize - 1);
-    }
-    return pageSize * ITEM_HEIGHT + ITEM_GAP * (pageSize - 1);
-  }, [isMobile, pageSize, total]);
-
-  const [random, setRandom] = useState(1);
-  useEffect(() => {
-    if (!wrapperRef.current) {
-      return;
-    }
-
-    const updateTotal = () => {
-      setTotal(Math.floor(wrapperRef.current.children.length / 3));
-    };
-
-    updateTotal();
-
-    const observer = new MutationObserver(updateTotal);
-    observer.observe(wrapperRef.current, { childList: true });
-
-    return () => observer.disconnect();
-  }, [random]);
-
-  const marginTop = useMemo(() => {
-    if (isMobile) {
-      return MOBILE_ITEM_HEIGHT + ITEM_GAP;
-    }
-    return ITEM_HEIGHT + ITEM_GAP;
-  }, [isMobile]);
-
-  const indexRef = useRef(0);
-
-  useEffect(() => {
-    indexRef.current = 0;
-    wrapperRef.current?.scrollTo({ top: 0 });
-
-    if (total < 2) {
-      return;
-    }
-
-    const interval = setInterval(() => {
-      if (pauseRef.current || !wrapperRef.current) {
-        return;
-      }
-
-      const nextIndex = indexRef.current + 1;
-      const from = indexRef.current * marginTop;
-      const to = nextIndex * marginTop;
-
-      animate(from, to, {
-        duration: 1,
-        onUpdate: (latest) => {
-          wrapperRef.current?.scrollTo({ top: latest });
-        },
-        onComplete: () => {
-          indexRef.current = nextIndex;
-          if (indexRef.current >= total) {
-            indexRef.current -= total;
-            wrapperRef.current?.scrollTo({ top: indexRef.current * marginTop });
-          }
-        },
-      });
-    }, 6500);
-    return () => clearInterval(interval);
-  }, [marginTop, total]);
-
-  return (
-    <div
-      ref={wrapperRef}
-      style={{
-        height: wrapperHeight + "px",
-        display: total ? "" : "none",
-      }}
-      className=" overflow-y-hidden flex flex-col gap-1"
-      onMouseEnter={() => (pauseRef.current = true)}
-      onMouseLeave={() => (pauseRef.current = false)}
-    >
-      {[...promptComponents, ...promptComponents, ...promptComponents].map(
-        (Item, index) => {
-          return (
-            <Fragment key={index}>
-              <Item
-                key={random}
-                onClose={() => {
-                  setRandom(random + 1);
-                }}
-              />
-            </Fragment>
-          );
-        },
-      )}
-    </div>
-  );
+  return <ScrollPromptContainer components={promptComponents} />;
 }

packages/next-common/components/overview/accountInfo/components/judgementPrompt.js

@@ -0,0 +1,15 @@
+import RequestJudgementPromptItem from "./requestJudgementPromptItem";
+import NavigateToJudgementPagePromptItem from "./navigateToJudgementPagePromptItem";
+import { useChain } from "next-common/context/chain";
+import { isPeopleChain } from "next-common/utils/chain";
+
+export function JudgementPrompt({ onClose }) {
+  const chain = useChain();
+
+  return (
+    <>
+      <NavigateToJudgementPagePromptItem onClose={onClose} />
+      {isPeopleChain(chain) && <RequestJudgementPromptItem onClose={onClose} />}
+    </>
+  );
+}

packages/next-common/components/overview/accountInfo/components/navigateToJudgementPagePromptItem.js

@@ -0,0 +1,69 @@
+import Link from "next-common/components/link";
+import {
+  PromptTypes,
+  ScrollPromptItemWrapper,
+} from "next-common/components/scrollPrompt";
+import { CACHE_KEY } from "next-common/utils/constants";
+import { useCookieValue } from "next-common/utils/hooks/useCookieValue";
+import { useMemo } from "react";
+import useMyJudgementRequest from "next-common/components/people/hooks/useMyJudgementRequest";
+
+function NavigateToJudgementPagePrompt() {
+  return (
+    <div>
+      Verify your social accounts for identity judgement.&nbsp;
+      <Link className="underline text14Medium" href="/people/verifications">
+        Go to Verifications page
+      </Link>
+      .
+    </div>
+  );
+}
+
+function useNavigateToJudgementPagePromptItem() {
+  const { value: myJudgementRequest } = useMyJudgementRequest();
+
+  const needAction =
+    myJudgementRequest &&
+    Object.values(myJudgementRequest.verifications).some(
+      (verified) => verified !== true,
+    );
+
+  const [visible, setVisible] = useCookieValue(
+    CACHE_KEY.navigateToJudgementPagePrompt,
+    true,
+  );
+
+  return useMemo(() => {
+    if (!visible || !needAction) {
+      return {};
+    }
+
+    return {
+      key: CACHE_KEY.navigateToJudgementPagePrompt,
+      message: <NavigateToJudgementPagePrompt />,
+      type: PromptTypes.WARNING,
+      close: () => setVisible(false, { expires: 15 }),
+    };
+  }, [needAction, setVisible, visible]);
+}
+
+export default function NavigateToJudgementPagePromptItem({ onClose }) {
+  const prompt = useNavigateToJudgementPagePromptItem();
+
+  if (!prompt?.message) {
+    return null;
+  }
+
+  return (
+    <ScrollPromptItemWrapper
+      prompt={{
+        ...prompt,
+        close: () => {
+          onClose?.();
+          prompt?.close?.();
+        },
+      }}
+    />
+  );
+}