Hackathon winner info in build cards

packages/react-app/components/BuildCard.jsx

@@ -24,6 +24,7 @@ import { getBuildDeleteSignMessage, deleteBuild } from "../data/api";
 import SubmitBuildModal from "./SubmitBuildModal";
 import { USER_ROLES } from "../helpers/constants";
 import BuildLikeButton from "./BuildLikeButton";
+import HackathonWinner from "./HackathonWinner";
 
 const BuildCard = ({ build, userProvider, userRole, onUpdate }) => {
   const address = useUserAddress(userProvider);
@@ -148,6 +149,9 @@ const BuildCard = ({ build, userProvider, userRole, onUpdate }) => {
             likesAmount={build?.likes?.length ?? 0}
             onLike={onUpdate}
           />
+          {build.hackathonWinner && (
+            <HackathonWinner message={build.hackathonWinner}/>
+          )}
         </ButtonGroup>
       </Flex>
       {canEditBuild && (

packages/react-app/components/HackathonWinner.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import BadgeIcon from "./icons/BadgeIcon";
+import { Button, Icon, Tooltip } from "@chakra-ui/react";
+
+const HackathonWinner = ({ message }) => {
+  if (!message) return;
+
+  return (
+    <Tooltip label={message}>
+      <Button variant="outline" size="sm">
+        <Icon as={BadgeIcon} w={6} h={6} mr={2} />
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default HackathonWinner;

packages/react-app/components/icons/BadgeIcon.jsx

@@ -0,0 +1,22 @@
+/* eslint react/jsx-props-no-spreading: off */
+// ☝️ we want this component to be usable with chakra props
+import React from "react";
+import { chakra } from "@chakra-ui/react";
+
+const BadgeIcon = props => (
+  <chakra.svg
+    {...props}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill={props.active ? "red.500" : props.filled ? "currentColor" : "none"}
+    stroke={props.active ? "red.500" : "currentColor"}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"/>
+  </chakra.svg>
+);
+
+export default BadgeIcon;

packages/react-app/pages/build/[buildId].jsx

@@ -11,6 +11,7 @@ import useConnectedAddress from "../../hooks/useConnectedAddress";
 import { getYoutubeVideoId } from "../../helpers/strings";
 import { useRouter } from "next/router";
 import MetaSeo from "../../components/MetaSeo";
+import HackathonWinner from "../../components/HackathonWinner";
 
 export default function BuildDetailView({ build }) {
   const address = useConnectedAddress();
@@ -82,6 +83,7 @@ export default function BuildDetailView({ build }) {
         likesAmount={build.likes?.length ?? 0}
         onLike={refreshData}
       />
+      <HackathonWinner message={build.hackathonWinner} />
     </>
   );