diff --git a/cypress/e2e/docs-display.cy.ts b/cypress/e2e/docs-display.cy.ts index e4a87582f..3806c6d41 100644 --- a/cypress/e2e/docs-display.cy.ts +++ b/cypress/e2e/docs-display.cy.ts @@ -48,6 +48,7 @@ const getUserProfileResponse: { result: UserProfileDto } = { githubUrl: null, twitterUrl: null, linkedInUrl: null, + isTrusted: null, }, }; diff --git a/src/api-4markdown-contracts/dtos/user-profile.dto.ts b/src/api-4markdown-contracts/dtos/user-profile.dto.ts index a51b243ec..dc1c29132 100644 --- a/src/api-4markdown-contracts/dtos/user-profile.dto.ts +++ b/src/api-4markdown-contracts/dtos/user-profile.dto.ts @@ -27,6 +27,7 @@ type UserProfileDto = { twitterUrl: string | null; fbUrl: string | null; blogUrl: string | null; + isTrusted: boolean | null; }; export type { UserProfileDto }; diff --git a/src/containers/trusted-user.container.tsx b/src/containers/trusted-user.container.tsx new file mode 100644 index 000000000..b242d22ae --- /dev/null +++ b/src/containers/trusted-user.container.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import type { ReactNode, DetailedHTMLProps, ButtonHTMLAttributes } from 'react'; +import { useYourUserProfileState } from 'store/your-user-profile'; +import { MdVerified, MdGppBad, MdGppMaybe } from 'react-icons/md'; +import c from 'classnames'; + +interface TooltipProps + extends DetailedHTMLProps< + ButtonHTMLAttributes, + HTMLButtonElement + > { + text: string; + children: ReactNode; + className?: string; +} + +const Tooltip = ({ text, children, className }: TooltipProps) => ( +
+ {children} + + {text} + +
+); + +const TrustedUserContainer = () => { + const yourUserProfile = useYourUserProfileState(); + + if (yourUserProfile.is !== `ok`) { + return ( + + + + + + ); + } + + const isVerified = yourUserProfile.user?.isTrusted; + + return ( + + + {isVerified ? : } + + + ); +}; + +export { TrustedUserContainer }; diff --git a/src/features/creator/creator.view.tsx b/src/features/creator/creator.view.tsx index 6e02efa43..9c9be797a 100644 --- a/src/features/creator/creator.view.tsx +++ b/src/features/creator/creator.view.tsx @@ -36,6 +36,7 @@ import { isInvalidSelection, getSelectedText, } from 'development-kit/textarea-utils'; +import { TrustedUserContainer } from 'containers/trusted-user.container'; const CreatorErrorModalContainer = React.lazy( () => import(`./containers/creator-error-modal.container`), @@ -320,6 +321,7 @@ const CreatorView = () => {