ref: change clickable to indexer

lfglabs-dev · Aug 25, 2023 · 29f2297 · 29f2297
1 parent 7f3b1bf
commit 29f2297
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 257 deletions.
diff --git a/components/UI/actions/clickable/clickableDiscordIcon.tsx b/components/UI/actions/clickable/clickableDiscordIcon.tsx
@@ -1,97 +1,36 @@
 import { Tooltip } from "@mui/material";
-import { useRouter } from "next/router";
-import React, {
-  FunctionComponent,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import React, { FunctionComponent } from "react";
 import DiscordIcon from "../../../UI/iconsComponents/icons/discordIcon";
 import styles from "../../../../styles/components/icons.module.css";
 import { minifyDomain } from "../../../../utils/stringService";
 import VerifiedIcon from "../../../UI/iconsComponents/icons/verifiedIcon";
-import { StarknetIdJsContext } from "../../../../context/StarknetIdJsProvider";
+import theme from "../../../../styles/theme";
 
 type ClickableDiscordIconProps = {
   width: string;
-  tokenId: string;
-  isOwner: boolean;
-  domain: string;
+  discordId?: string;
+  domain?: string;
 };
 
 const ClickableDiscordIcon: FunctionComponent<ClickableDiscordIconProps> = ({
   width,
-  tokenId,
-  isOwner,
   domain,
+  discordId,
 }) => {
-  const router = useRouter();
-  const [discordId, setDiscordId] = useState<string | undefined>();
-  const { starknetIdNavigator } = useContext(StarknetIdJsContext);
-
-  useEffect(() => {
-    starknetIdNavigator
-      ?.getVerifierData(tokenId, "discord")
-      .then((response) => {
-        if (response.toString(10) !== "0") {
-          setDiscordId(response.toString(10));
-        } else {
-          setDiscordId(undefined);
+  return discordId ? (
+    <Tooltip title={`Check ${minifyDomain(domain ?? "")} discord`} arrow>
+      <div
+        className={styles.clickableIconDiscord}
+        onClick={() =>
+          window.open(`https://discord.com/channels/@me/${discordId}`)
         }
-      })
-      .catch(() => {
-        return;
-      });
-  }, [starknetIdNavigator, tokenId]);
-
-  function startVerification(link: string): void {
-    sessionStorage.setItem("tokenId", tokenId);
-    router.push(link);
-  }
-
-  return isOwner ? (
-    <div className="mr-1">
-      <Tooltip
-        title={
-          discordId
-            ? "Change your discord on starknet ID"
-            : "Start Discord verification"
-        }
-        arrow
       >
-        <div
-          className={styles.clickableIconDiscord}
-          onClick={() =>
-            startVerification(
-              `${process.env.NEXT_PUBLIC_STARKNETID_APP_LINK}/identities`
-            )
-          }
-        >
-          {discordId ? (
-            <div className={styles.verifiedIcon}>
-              <VerifiedIcon width={"18"} color={"green"} />
-            </div>
-          ) : null}
-          <DiscordIcon width={width} color={"white"} />
-        </div>
-      </Tooltip>
-    </div>
-  ) : discordId ? (
-    <div className="mr-1">
-      <Tooltip title={`Check ${minifyDomain(domain)} discord`} arrow>
-        <div
-          className={styles.clickableIconDiscord}
-          onClick={() =>
-            window.open(`https://discord.com/channels/@me/${discordId}`)
-          }
-        >
-          <div className={styles.verifiedIcon}>
-            <VerifiedIcon width={"18"} color={"green"} />
-          </div>
-          <DiscordIcon width={width} color={"white"} />
+        <div className={styles.verifiedIcon}>
+          <VerifiedIcon width={"18"} color={theme.palette.primary.main} />
         </div>
-      </Tooltip>
-    </div>
+        <DiscordIcon width={width} color={"white"} />
+      </div>
+    </Tooltip>
   ) : null;
 };
 

diff --git a/components/UI/actions/clickable/clickableGithubIcon.tsx b/components/UI/actions/clickable/clickableGithubIcon.tsx
@@ -1,50 +1,23 @@
 import { Tooltip } from "@mui/material";
-import { useRouter } from "next/router";
-import React, {
-  FunctionComponent,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import GithubIcon from "../../../UI/iconsComponents/icons/githubIcon";
 import styles from "../../../../styles/components/icons.module.css";
 import { minifyDomain } from "../../../../utils/stringService";
 import VerifiedIcon from "../../../UI/iconsComponents/icons/verifiedIcon";
-import { StarknetIdJsContext } from "../../../../context/StarknetIdJsProvider";
+import theme from "../../../../styles/theme";
 
 type ClickableGithubIconProps = {
   width: string;
-  tokenId: string;
-  isOwner: boolean;
-  domain: string;
+  githubId?: string;
+  domain?: string;
 };
 
 const ClickableGithubIcon: FunctionComponent<ClickableGithubIconProps> = ({
   width,
-  tokenId,
-  isOwner,
+  githubId,
   domain,
 }) => {
-  const router = useRouter();
-  const [githubId, setGithubId] = useState<string | undefined>();
   const [githubUsername, setGithubUsername] = useState<string | undefined>();
-  const { starknetIdNavigator } = useContext(StarknetIdJsContext);
-
-  useEffect(() => {
-    starknetIdNavigator
-      ?.getVerifierData(tokenId, "github")
-      .then((response) => {
-        if (response.toString(10) !== "0") {
-          setGithubId(response.toString(10));
-        } else {
-          setGithubId(undefined);
-          setGithubUsername(undefined);
-        }
-      })
-      .catch(() => {
-        return;
-      });
-  }, [tokenId, domain]);
 
   useEffect(() => {
     if (githubId) {
@@ -57,52 +30,18 @@ const ClickableGithubIcon: FunctionComponent<ClickableGithubIconProps> = ({
     }
   }, [githubId]);
 
-  function startVerification(link: string): void {
-    sessionStorage.setItem("tokenId", tokenId);
-    router.push(link);
-  }
-
-  return isOwner ? (
-    <div className="mr-1">
-      <Tooltip
-        title={
-          githubUsername
-            ? "Change your github on starknet ID"
-            : "Start github verification"
-        }
-        arrow
+  return githubUsername ? (
+    <Tooltip title={`Check ${minifyDomain(domain ?? "")} github`} arrow>
+      <div
+        className={styles.clickableIconGithub}
+        onClick={() => window.open(`https://github.com/${githubUsername}`)}
       >
-        <div
-          className={styles.clickableIconGithub}
-          onClick={() =>
-            startVerification(
-              `${process.env.NEXT_PUBLIC_STARKNETID_APP_LINK}/identities`
-            )
-          }
-        >
-          {githubUsername ? (
-            <div className={styles.verifiedIcon}>
-              <VerifiedIcon width={"18"} color={"green"} />
-            </div>
-          ) : null}
-          <GithubIcon width={width} color={"white"} />
-        </div>
-      </Tooltip>
-    </div>
-  ) : githubUsername ? (
-    <div className="mr-1">
-      <Tooltip title={`Check ${minifyDomain(domain)} github`} arrow>
-        <div
-          className={styles.clickableIconGithub}
-          onClick={() => window.open(`https://github.com/${githubUsername}`)}
-        >
-          <div className={styles.verifiedIcon}>
-            <VerifiedIcon width={"18"} color={"green"} />
-          </div>
-          <GithubIcon width={width} color="white" />
+        <div className={styles.verifiedIcon}>
+          <VerifiedIcon width={"18"} color={theme.palette.primary.main} />
         </div>
-      </Tooltip>
-    </div>
+        <GithubIcon width={width} color="white" />
+      </div>
+    </Tooltip>
   ) : null;
 };
 

diff --git a/components/UI/actions/clickable/clickableTwitterIcon.tsx b/components/UI/actions/clickable/clickableTwitterIcon.tsx
@@ -1,80 +1,30 @@
 import { Tooltip } from "@mui/material";
-import { useRouter } from "next/router";
-import React, {
-  FunctionComponent,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import React, { FunctionComponent } from "react";
 import TwitterIcon from "../../../UI/iconsComponents/icons/twitterIcon";
 import VerifiedIcon from "../../../UI/iconsComponents/icons/verifiedIcon";
 import styles from "../../../../styles/components/icons.module.css";
-import { StarknetIdJsContext } from "../../../../context/StarknetIdJsProvider";
+import theme from "../../../../styles/theme";
 
 type ClickableTwitterIconProps = {
   width: string;
-  tokenId: string;
-  isOwner: boolean;
-  domain: string;
+  twitterId?: string;
+  domain?: string;
 };
 
 const ClickableTwitterIcon: FunctionComponent<ClickableTwitterIconProps> = ({
   width,
-  tokenId,
-  isOwner,
+  twitterId,
   domain,
 }) => {
-  const router = useRouter();
-  const [twitterId, setTwitterId] = useState<string | undefined>();
-  const { starknetIdNavigator } = useContext(StarknetIdJsContext);
-
-  useEffect(() => {
-    starknetIdNavigator
-      ?.getVerifierData(tokenId, "twitter")
-      .then((response) => {
-        if (response.toString(10) !== "0") {
-          setTwitterId(response.toString(10));
-        } else {
-          setTwitterId(undefined);
-        }
-      })
-      .catch(() => {
-        return;
-      });
-  }, [tokenId, domain]);
-
-  function startVerification(link: string): void {
-    sessionStorage.setItem("tokenId", tokenId);
-    router.push(link);
-  }
-
-  return isOwner ? (
-    <div className="mr-1">
-      <Tooltip
-        title={
-          twitterId
-            ? "Change your twitter account on Starknet ID"
-            : "Start twitter verification"
-        }
-        arrow
-      >
-        <div
-          className={styles.clickableIconTwitter}
-          onClick={() =>
-            startVerification(
-              `${process.env.NEXT_PUBLIC_STARKNETID_APP_LINK}/identities`
-            )
-          }
-        >
-          {twitterId ? (
-            <div className={styles.verifiedIcon}>
-              <VerifiedIcon width={"18"} color={"green"} />
-            </div>
-          ) : null}
-          <TwitterIcon width={width} color={"white"} />
+  return twitterId ? (
+    <Tooltip title={`${domain} twitter is verified`} arrow>
+      <div className={styles.clickableIconTwitter}>
+        <div className={styles.verifiedIcon}>
+          <VerifiedIcon width="18" color={theme.palette.primary.main} />
         </div>
-      </Tooltip>
-    </div>
+        <TwitterIcon width={width} color={"white"} />
+      </div>
+    </Tooltip>
   ) : null;
 };
 

diff --git a/components/UI/actions/socialmediaActions.tsx b/components/UI/actions/socialmediaActions.tsx
@@ -1,32 +1,55 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import ClickableDiscordIcon from "./clickable/clickableDiscordIcon";
 import ClickableGithubIcon from "./clickable/clickableGithubIcon";
 import ClickableTwitterIcon from "./clickable/clickableTwitterIcon";
+import { isStarkRootDomain } from "starknetid.js/packages/core/dist/utils";
 
-const SocialMediaActions: FunctionComponent<SocialMediaActions> = ({
-  tokenId,
-  isOwner,
-  domain = "",
+type SocialMediaActionsProps = {
+  identity: Identity;
+};
+
+const SocialMediaActions: FunctionComponent<SocialMediaActionsProps> = ({
+  identity,
 }) => {
+  const [apiIdentity, setApiIdentity] = useState<Identity | undefined>();
+
+  useEffect(() => {
+    if (isStarkRootDomain(identity?.domain ?? "")) {
+      const refreshData = () =>
+        fetch(
+          `${process.env.NEXT_PUBLIC_STARKNET_ID_API_LINK}/domain_to_data?domain=${identity.domain}`
+        )
+          .then(async (response) => {
+            if (!response.ok) {
+              throw new Error(await response.text());
+            }
+            return response.json();
+          })
+          .then((data: Identity) => {
+            setApiIdentity(data);
+          });
+      refreshData();
+      const timer = setInterval(() => refreshData(), 30e3);
+      return () => clearInterval(timer);
+    }
+  }, [identity]);
+
   return (
     <div className="flex flex-row gap-1">
       <ClickableTwitterIcon
-        isOwner={isOwner}
         width="25"
-        tokenId={tokenId}
-        domain={domain}
+        domain={identity?.domain}
+        twitterId={apiIdentity?.old_twitter}
       />
       <ClickableDiscordIcon
-        isOwner={isOwner}
         width="25"
-        tokenId={tokenId}
-        domain={domain}
+        domain={identity?.domain}
+        discordId={apiIdentity?.old_discord}
       />
       <ClickableGithubIcon
-        isOwner={isOwner}
         width="25"
-        tokenId={tokenId}
-        domain={domain}
+        domain={identity?.domain}
+        githubId={apiIdentity?.old_github}
       />
     </div>
   );