feat(app): trusted user container

cypress/e2e/docs-display.cy.ts

@@ -48,6 +48,7 @@ const getUserProfileResponse: { result: UserProfileDto } = {
     githubUrl: null,
     twitterUrl: null,
     linkedInUrl: null,
+    isTrusted: null,
   },
 };
 

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

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>,
+    HTMLButtonElement
+  > {
+  text: string;
+  children: ReactNode;
+  className?: string;
+}
+
+const Tooltip = ({ text, children, className }: TooltipProps) => (
+  <div className={c(`group relative inline-block`, className)}>
+    <span>{children}</span>
+    <span
+      className={c(
+        `pointer-events-none absolute left-1/2 -translate-x-1/2`,
+        `whitespace-nowrap rounded bg-black px-2 py-1 text-white`,
+        `opacity-0 transition group-hover:opacity-100`,
+        // Mobile: show above
+        `bottom-full mb-2`,
+        `before:absolute before:left-1/2 before:-translate-x-1/2`,
+        `before:border-4 before:border-transparent before:border-t-black`,
+        `before:bottom-[-8px]`,
+        // Desktop: show below
+        `md:bottom-auto md:top-full md:mt-2`,
+        `md:before:bottom-auto md:before:top-[-8px]`,
+        `md:before:border-t-transparent md:before:border-b-black`,
+      )}
+    >
+      {text}
+    </span>
+  </div>
+);
+
+const TrustedUserContainer = () => {
+  const yourUserProfile = useYourUserProfileState();
+
+  if (yourUserProfile.is !== `ok`) {
+    return (
+      <Tooltip
+        title={`Trusted user loading container`}
+        text={`Loading verification status...`}
+      >
+        <span className={`text-gray-400 dark:text-gray-500`}>
+          <MdGppMaybe size={24} />
+        </span>
+      </Tooltip>
+    );
+  }
+
+  const isVerified = yourUserProfile.user?.isTrusted;
+
+  return (
+    <Tooltip
+      title={`Trusted user container`}
+      text={isVerified ? `User is verified` : `User is not verified`}
+    >
+      <span
+        className={
+          isVerified
+            ? `text-green-700 dark:text-green-400`
+            : `text-red-500 dark:text-red-400`
+        }
+      >
+        {isVerified ? <MdVerified size={24} /> : <MdGppBad size={24} />}
+      </span>
+    </Tooltip>
+  );
+};
+
+export { TrustedUserContainer };

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 = () => {
           </nav>
           <div />
           <nav className="flex items-center gap-2">
+            <TrustedUserContainer />
             <UserPopover />
             <MoreNav />
           </nav>