feat: worldcoin badge 🧿 (#462)

* feat: add worldcoin badge

* fix: use flex-wrap

src/components/Profile/Badges/Worldcoin.tsx

@@ -0,0 +1,37 @@
+import { Tooltip } from '@components/UI/Tooltip';
+import { Profile } from '@generated/types';
+import { CheckCircleIcon } from '@heroicons/react/solid';
+import React, { FC } from 'react';
+import { STATIC_ASSETS } from 'src/constants';
+
+interface Props {
+  profile: Profile;
+}
+
+const Worldcoin: FC<Props> = ({ profile }) => {
+  if (!profile?.onChainIdentity?.worldcoin?.isHuman) {
+    return null;
+  }
+
+  return (
+    <Tooltip
+      content={
+        <span className="flex items-center space-x-1">
+          <span>Worldcoin verified</span>
+          <CheckCircleIcon className="h-4 w-4" />
+        </span>
+      }
+      placement="top"
+    >
+      <img
+        className="drop-shadow-xl"
+        height={75}
+        width={75}
+        src={`${STATIC_ASSETS}/badges/worldcoin.png`}
+        alt="Sybil Badge"
+      />
+    </Tooltip>
+  );
+};
+
+export default Worldcoin;

src/components/Profile/Badges/index.tsx

@@ -4,6 +4,7 @@ import React, { FC } from 'react';
 import Ens from './Ens';
 import ProofOfHumanity from './ProofOfHumanity';
 import Sybil from './Sybil';
+import Worldcoin from './Worldcoin';
 
 interface Props {
   profile: Profile;
@@ -22,10 +23,11 @@ const Badges: FC<Props> = ({ profile }) => {
   return (
     <>
       <div className="w-full divider" />
-      <div className="flex flex-row gap-3">
+      <div className="flex flex-wrap gap-3">
         <ProofOfHumanity profile={profile} />
         <Ens profile={profile} />
         <Sybil profile={profile} />
+        <Worldcoin profile={profile} />
       </div>
     </>
   );

src/components/Profile/index.tsx

@@ -55,6 +55,9 @@ export const PROFILE_QUERY = gql`
         ens {
           name
         }
+        worldcoin {
+          isHuman
+        }
       }
       stats {
         totalFollowers