Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ref: change clickable to indexer #135

Merged
merged 2 commits into from
Aug 28, 2023
Merged

ref: change clickable to indexer #135

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
29f2297
ref: change clickable to indexer
fricoben Aug 25, 2023
dc68bd1
fix: discord link
fricoben Aug 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 16 additions & 77 deletions components/UI/actions/clickable/clickableDiscordIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}`)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this will work, iirc this undocumented discord endpoint takes a channel id, not a user id. It might be possible to get a channel id from a discord id though.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested I think it worked (it's been a long time since this is in production).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It didn't for me. Lemme know if you have a working example

}
})
.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;
};

Expand Down
91 changes: 15 additions & 76 deletions components/UI/actions/clickable/clickableGithubIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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;
};

Expand Down
76 changes: 13 additions & 63 deletions components/UI/actions/clickable/clickableTwitterIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
};

Expand Down
51 changes: 37 additions & 14 deletions components/UI/actions/socialmediaActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
Loading