Merge branch 'main' of https://github.com/Official-MoonDao/MoonDAO in…

…to update-jobs-cards

contracts/deployments/base-sepolia.json

@@ -0,0 +1,4 @@
+{
+    "MOONEYToken": "0x3B3024e49261866a420F2444Fa1f248902C8D143",
+    "vMOONEYToken": "0xa83aceC4e6784a0c9C4Ba6fa414665Ba15F6F3b6"
+}

contracts/deployments/base.json

@@ -0,0 +1,4 @@
+{
+    "MOONEYToken": "0x6585a54A98fADA893904EB8A9E9CDFb927bddf39",
+    "vMOONEYToken": "0x7f8f1B45c3FD6Be4F467520Fc1Cf030d5CaBAcF5"
+}

ui/.env.testnet

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_CHAIN=mumbai
 NEXT_PUBLIC_VMOONEY_REQUIRED_STAKE=1
 NEXT_PUBLIC_SNAPSHOT_API_KEY=placeholder
+COORDINAPE_API_KEY=placeholder

ui/components/contribution/ContributionEditor.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from 'react';
+import dynamic from "next/dynamic";
+import { usePrivy, getAccessToken } from "@privy-io/react-auth";
+import { GetMarkdown, SetMarkdown } from "@nance/nance-editor";
+import { LoadingSpinner } from "@/components/layout/LoadingSpinner";
+import { pinBlobOrFile } from "@/lib/ipfs/pinBlobOrFile";
+import { createSession, destroySession } from "@/lib/iron-session/iron-session";
+import useAccount from "@/lib/nance/useAccountAddress";
+import { toast } from "react-hot-toast";
+import "@nance/nance-editor/lib/css/dark.css";
+import "@nance/nance-editor/lib/css/editor.css";
+
+let getMarkdown: GetMarkdown;
+let setMarkdown: SetMarkdown;
+
+const NanceEditor = dynamic(
+  async () => {
+    const editorModule = await import("@nance/nance-editor");
+    getMarkdown = editorModule.getMarkdown;
+    setMarkdown = editorModule.setMarkdown;
+    return editorModule.NanceEditor;
+  },
+  {
+    ssr: false,
+    loading: () => <LoadingSpinner />,
+  }
+);
+
+const CONTRIBUTION_TEMPLATE = `
+## Contribution Summary
+When documenting contributions, please ensure they meet the following criteria:
+	1.	Completed Work Only: Contributions should reflect completed efforts, not ongoing or planned work.
+	2.	Specific and Measurable Results: Describe the tangible outcomes of the contribution. Include metrics, timelines, or other objective measures wherever possible.
+Clear, detailed, and results-focused contributions help us understand and value the impact of your work.
+
+*Example:*
+*Good Contribution:*
+	•	*"Improved search performance by optimizing database queries, reducing response times by 30% within one month."*
+
+*Poor Contribution:*
+	•	*"Worked on improving search performance."*
+
+`;
+
+const ContributionEditor: React.FC = () => {
+  const { authenticated } = usePrivy();
+  const [submitting, setSubmitting] = useState(false);
+  const [coordinapeLink, setCoordinapeLink] = useState<string | null>(null);
+  const { address } = useAccount();
+
+  useEffect(() => {
+    if (setMarkdown) {
+      setMarkdown(CONTRIBUTION_TEMPLATE);
+    }
+  }, []);
+
+  const handleSubmit = async () => {
+    if (!authenticated) {
+      toast.error("Please sign in to submit a contribution!");
+      return;
+    }
+
+    setSubmitting(true);
+    const accessToken = await getAccessToken();
+    await createSession(accessToken);
+    const loadingToast = toast.loading("Submitting contribution...");
+
+    try {
+      const body = JSON.stringify({
+        description: getMarkdown(),
+        address,
+      });
+
+      const res = await fetch("/api/coordinape/createContribution", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${accessToken}`
+        },
+        body
+      });
+      await destroySession(accessToken);
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error);
+      }
+
+      setCoordinapeLink(`https://app.coordinape.com/circles/${data.insert_contributions_one.circle_id}`);
+      toast.success("Contribution submitted successfully!");
+    } catch (err) {
+      toast.error("Failed to submit contribution");
+    } finally {
+      toast.dismiss(loadingToast);
+      setSubmitting(false);
+    }
+  };
+
+  if (!authenticated) {
+    return <p className="py-24">Please sign in to submit a contribution!</p>;
+  }
+
+  if (coordinapeLink) {
+    return (
+      <div className="w-full flex flex-col justify-center items-center md:w-auto space-y-4 pb-12">
+        <p className="text-2xl">Contribution submitted!</p>
+        <p>
+          View and edit your contribution {" "}
+          <a href={coordinapeLink} target="_blank" rel="noopener noreferrer" className="underline">
+            here
+          </a>
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full md:w-auto px-4 sm:px-0">
+      <div className="h-[600px]">
+        <NanceEditor
+          initialValue={CONTRIBUTION_TEMPLATE}
+          fileUploadExternal={ async (val) => {
+            const accessToken = await getAccessToken()
+            await createSession(accessToken)
+            const res = await pinBlobOrFile(val)
+            await destroySession(accessToken)
+            return res.url;
+          }}
+          darkMode={true}
+        />
+      </div>
+      <div className="flex justify-end">
+        <button
+          type="submit"
+          className="gradient-2 hover:pl-7 disabled:pl-5 disabled:opacity-30 transition-all ease-in-out duration-300 rounded-[2vmax] rounded-tl-[10px] mt-5 px-5 py-3 inline-block disabled:transform-none disabled:cursor-not-allowed"
+          disabled={submitting}
+          onClick={handleSubmit}
+        >
+          Submit Contribution
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ContributionEditor;

ui/components/dashboard/analytics/AnalyticsChainSelector.tsx

@@ -1,11 +1,32 @@
 import {
   ChartBarSquareIcon,
   ChevronDownIcon,
-  SignalIcon,
 } from '@heroicons/react/24/outline'
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 
+function AnalyticsChain({ chain, selectChain }: any) {
+  return (
+    <button
+      type="button"
+      className="w-full flex items-center gap-2 bg-gray-100 hover:bg-gray-200 p-2 rounded-md"
+      onClick={() => selectChain(chain)}
+    >
+      {chain === 'all' ? (
+        <ChartBarSquareIcon height={24} width={24} />
+      ) : (
+        <Image
+          src={`/icons/networks/${chain}.svg`}
+          width={13}
+          height={13}
+          alt="Ethereum"
+        />
+      )}
+      {chain.charAt(0).toUpperCase() + chain.slice(1)}
+    </button>
+  )
+}
+
 export default function AnalyticsChainSelector({
   analyticsChain,
   setAnalyticsChain,
@@ -60,50 +81,11 @@ export default function AnalyticsChainSelector({
             id="network-selector-dropdown"
             className="w-[250px] absolute flex flex-col items-start gap-2 text-black z-10"
           >
-            <button
-              type="button"
-              className="w-full flex gap-2 bg-gray-100 hover:bg-gray-200 p-2 rounded-md"
-              onClick={() => selectChain('all')}
-            >
-              {'All'}
-            </button>
-            <button
-              type="button"
-              className="w-full flex gap-2 bg-gray-100 hover:bg-gray-200 p-2 rounded-md"
-              onClick={() => selectChain('ethereum')}
-            >
-              <Image
-                src="/icons/networks/ethereum.svg"
-                width={13}
-                height={13}
-                alt="Ethereum"
-              />
-              {'Ethereum'}
-            </button>
-            <button
-              className="w-full flex gap-2 bg-gray-100 hover:bg-gray-200 p-2 rounded-md"
-              onClick={() => selectChain('polygon')}
-            >
-              <Image
-                src="/icons/networks/polygon.svg"
-                width={24}
-                height={24}
-                alt="Polygon"
-              />
-              {'Polygon'}
-            </button>
-            <button
-              className="w-full flex gap-2 bg-gray-100 hover:bg-gray-200 p-2 rounded-md"
-              onClick={() => selectChain('arbitrum')}
-            >
-              <Image
-                src="/icons/networks/arbitrum.svg"
-                width={24}
-                height={24}
-                alt="Arbitrumm"
-              />
-              {'Arbitrum'}
-            </button>
+            <AnalyticsChain chain="all" selectChain={selectChain} />
+            <AnalyticsChain chain="ethereum" selectChain={selectChain} />
+            <AnalyticsChain chain="polygon" selectChain={selectChain} />
+            <AnalyticsChain chain="arbitrum" selectChain={selectChain} />
+            <AnalyticsChain chain="base" selectChain={selectChain} />
           </div>
         )}
       </div>

ui/components/hats/Hat.tsx

@@ -1,6 +1,6 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
 import { Chain } from '@thirdweb-dev/chains'
-import { NFT, ThirdwebNftMedia } from '@thirdweb-dev/react'
+import { MediaRenderer, NFT } from '@thirdweb-dev/react'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { useHatData } from '@/lib/hats/useHatData'
@@ -48,8 +48,8 @@ export function Hat({
       <div className="flex items-center gap-5">
         {teamNFT && (
           <div className="rounded-[2.5vmax] rounded-tl-[10px] overflow-hidden">
-            <ThirdwebNftMedia
-              metadata={teamNFT.metadata}
+            <MediaRenderer
+              src={teamNFT.metadata.image}
               width="150px"
               height="150px"
             />

ui/components/jobs/Job.tsx

@@ -22,6 +22,7 @@ export type Job = {
 }
 
 type JobProps = {
+  id?: string
   job: Job
   jobTableContract?: any
   refreshJobs?: any
@@ -31,6 +32,7 @@ type JobProps = {
 }
 
 export default function Job({
+  id,
   job,
   jobTableContract,
   refreshJobs,
@@ -71,6 +73,8 @@ export default function Job({
     <>
       {isActive && (
         <div
+          id={id}
+          className={`flex flex-col justify-between bg-dark-cool rounded-md lg:w-[500px]`}
           id="job-container"
           className={`flex flex-col justify-between bg-dark-cool rounded-md mx-5 lg:mx-0`}
         >