New design for direct delegation (#46)

* Get current direct delegatee * fix: load voting power correctly and fetch delegatee * fix: get delegatee * loading + case with no delegatee * refactor * add comment * add fetch direct delegation * feat: new design for direct delegation * fix: optimistic vote - build fix * fix: refuse * style fix
voteagora · Jan 12, 2024 · e56ae1d · e56ae1d
1 parent b9b1405
commit e56ae1d
Show file tree

Hide file tree

Showing 14 changed files with 314 additions and 120 deletions.
diff --git a/src/app/api/delegations/getDelegations.ts b/src/app/api/delegations/getDelegations.ts
@@ -213,3 +213,28 @@ async function getCurrentDelegatorsForAddress({
     })),
   ] as Delegation[];
 }
+
+const getDirectDelegateeForAddress = async ({
+  address,
+}: {
+  address: string;
+}) => {
+  const [proxyAddress, delegatee] = await Promise.all([
+    getProxyAddress(address),
+    prisma.delegatees.findFirst({
+      where: { delegator: address.toLowerCase() },
+    }),
+  ]);
+
+  if (delegatee?.delegatee === proxyAddress?.toLowerCase()) {
+    return null;
+  }
+
+  return delegatee;
+};
+
+export const getDirectDelegatee = ({
+  addressOrENSName,
+}: {
+  addressOrENSName: string;
+}) => addressOrEnsNameWrap(getDirectDelegateeForAddress, addressOrENSName);
diff --git a/src/app/delegates/[addressOrENSName]/page.jsx b/src/app/delegates/[addressOrENSName]/page.jsx
@@ -14,6 +14,7 @@ import DelegateVotesProvider from "@/contexts/DelegateVotesContext";
 import {
   getCurrentDelegatees,
   getCurrentDelegators,
+  getDirectDelegatee,
 } from "@/app/api/delegations/getDelegations";
 import DelegationsContainer from "@/components/Delegates/Delegations/DelegationsContainer";
 import ResourceNotFound from "@/components/shared/ResourceNotFound/ResourceNotFound";
@@ -80,6 +81,12 @@ async function getProxyAddress(addressOrENSName) {
   return getProxy({ addressOrENSName });
 }
 
+async function fetchDirectDelegatee(addressOrENSName) {
+  "use server";
+
+  return getDirectDelegatee({ addressOrENSName });
+}
+
 export default async function Page({ params: { addressOrENSName } }) {
   let delegate;
   let delegateVotes;
@@ -118,6 +125,7 @@ export default async function Page({ params: { addressOrENSName } }) {
             fetchBalanceForDirectDelegation={fetchBalanceForDirectDelegation}
             getProxyAddress={getProxyAddress}
             fetchCurrentDelegatees={getDelegatees}
+            fetchDirectDelegatee={fetchDirectDelegatee}
           />
         </VStack>
 

diff --git a/src/app/delegates/page.jsx b/src/app/delegates/page.jsx
@@ -15,7 +15,10 @@ import {
   getVotingPowerAvailableForSubdelegation,
   isDelegatingToProxy,
 } from "../api/voting-power/getVotingPower";
-import { getCurrentDelegatees } from "../api/delegations/getDelegations";
+import {
+  getCurrentDelegatees,
+  getDirectDelegatee,
+} from "../api/delegations/getDelegations";
 
 async function fetchDelegates(sort, page = 1, seed) {
   "use server";
@@ -64,6 +67,12 @@ async function fetchDaoMetrics() {
   return getMetrics();
 }
 
+async function fetchDirectDelegatee(addressOrENSName) {
+  "use server";
+
+  return getDirectDelegatee({ addressOrENSName });
+}
+
 export default async function Page({ searchParams }) {
   const sort =
     delegatesFilterOptions[searchParams.orderBy]?.sort || "weighted_random";
@@ -95,6 +104,7 @@ export default async function Page({ searchParams }) {
         checkIfDelegatingToProxy={checkIfDelegatingToProxy}
         fetchCurrentDelegatees={fetchCurrentDelegatees}
         getProxyAddress={getProxyAddress}
+        fetchDirectDelegatee={fetchDirectDelegatee}
       />
     </section>
   );

diff --git a/src/app/lib/hooks/useIsAdvancedUser.ts b/src/app/lib/hooks/useIsAdvancedUser.ts
@@ -11,7 +11,7 @@ const useIsAdvancedUser = () => {
   const { address } = useAccount();
   const [isAdvancedUser, setIsAdvancedUser] = useState(false);
   const allowList = [
-    "0x4D5d7d63989BBE6358a3352A2449d59Aa5A08267",
+    "0x4D5d7d63989BBE6358a3352A2449d59Aa5A08267", // Dom Test 1
     "0xd0f23E5ea6c8088eD0FFf294F3fC29e719EE6B8b",
     "0xde748c3dd4311A5d6b305E2eeFd6481BCDA1e84B", // Base tester
     "0x85A0779CA390adaD02Aa63075373bF33e7C5a711", // Base tester

diff --git a/src/components/Delegates/DelegateCard/DelegateActions.tsx b/src/components/Delegates/DelegateCard/DelegateActions.tsx
@@ -4,12 +4,11 @@ import { HStack } from "@/components/Layout/Stack";
 import { DelegateButton } from "./DelegateButton";
 import { DelegateSocialLinks } from "./DelegateSocialLinks";
 import { useAccount } from "wagmi";
-import { useState } from "react";
 import { AdvancedDelegateButton } from "./AdvancedDelegateButton";
 import { Delegation } from "@/app/api/delegations/delegation";
 import { useAgoraContext } from "@/contexts/AgoraContext";
 import { DelegateChunk } from "../DelegateCardList/DelegateCardList";
-import useIsAdvancedUser from "@/app/lib/hooks/useIsAdvancedUser";
+import { Delegatees } from "@prisma/client";
 
 export function DelegateActions({
   delegate,
@@ -20,6 +19,7 @@ export function DelegateActions({
   fetchCurrentDelegatees,
   getProxyAddress,
   isAdvancedUser,
+  fetchDirectDelegatee,
 }: {
   delegate: DelegateChunk;
   className?: string;
@@ -33,6 +33,7 @@ export function DelegateActions({
   fetchCurrentDelegatees: (addressOrENSName: string) => Promise<Delegation[]>;
   getProxyAddress: (addressOrENSName: string) => Promise<string>;
   isAdvancedUser: boolean;
+  fetchDirectDelegatee: (addressOrENSName: string) => Promise<Delegatees>;
 }) {
   const { isConnected } = useAgoraContext();
   const { address } = useAccount();
@@ -61,10 +62,9 @@ export function DelegateActions({
           ) : (
             <DelegateButton
               full={!twitter && !discord}
-              delegate={delegate.address}
-              fetchBalanceForDirectDelegation={() =>
-                fetchBalanceForDirectDelegation(address)
-              }
+              delegate={delegate}
+              fetchBalanceForDirectDelegation={fetchBalanceForDirectDelegation}
+              fetchDirectDelegatee={fetchDirectDelegatee}
             />
           ))}
       </div>

diff --git a/src/components/Delegates/DelegateCard/DelegateButton.jsx b/src/components/Delegates/DelegateCard/DelegateButton.jsx
diff --git a/src/components/Delegates/DelegateCard/DelegateButton.tsx b/src/components/Delegates/DelegateCard/DelegateButton.tsx
@@ -0,0 +1,40 @@
+import { Button } from "@/components/Button";
+import { useOpenDialog } from "@/components/Dialogs/DialogProvider/DialogProvider";
+import { DelegateChunk } from "../DelegateCardList/DelegateCardList";
+import { Delegatees } from "@prisma/client";
+
+type Props = {
+  full: boolean;
+  delegate: DelegateChunk;
+  fetchBalanceForDirectDelegation: (
+    addressOrENSName: string
+  ) => Promise<string>;
+  fetchDirectDelegatee: (addressOrENSName: string) => Promise<Delegatees>;
+};
+export function DelegateButton({
+  full,
+  delegate,
+  fetchBalanceForDirectDelegation,
+  fetchDirectDelegatee,
+}: Props) {
+  const openDialog = useOpenDialog();
+
+  return (
+    <Button
+      onClick={(e: any) => {
+        e.preventDefault();
+        openDialog({
+          type: "DELEGATE",
+          params: {
+            delegate,
+            fetchBalanceForDirectDelegation,
+            fetchDirectDelegatee,
+          },
+        });
+      }}
+      className={full ? "w-full" : undefined}
+    >
+      Delegate
+    </Button>
+  );
+}
diff --git a/src/components/Delegates/DelegateCard/DelegateCard.jsx b/src/components/Delegates/DelegateCard/DelegateCard.jsx
@@ -12,6 +12,7 @@ export default async function DelegateCard({
   checkIfDelegatingToProxy,
   fetchCurrentDelegatees,
   getProxyAddress,
+  fetchDirectDelegatee,
 }) {
   const delegate = await fetchDelegate(addressOrENSName);
 
@@ -85,6 +86,7 @@ export default async function DelegateCard({
               checkIfDelegatingToProxy={checkIfDelegatingToProxy}
               fetchCurrentDelegatees={fetchCurrentDelegatees}
               getProxyAddress={getProxyAddress}
+              fetchDirectDelegatee={fetchDirectDelegatee}
             />
           </VStack>
         </div>

diff --git a/...gates/DelegateCard/DelegateCardClient.jsx → ...gates/DelegateCard/DelegateCardClient.tsx b/...gates/DelegateCard/DelegateCardClient.jsx → ...gates/DelegateCard/DelegateCardClient.tsx
@@ -1,7 +1,24 @@
 "use client";
 
+import { Delegation } from "@/app/api/delegations/delegation";
+import { DelegateChunk } from "../DelegateCardList/DelegateCardList";
 import { DelegateActions } from "./DelegateActions";
 import useIsAdvancedUser from "@/app/lib/hooks/useIsAdvancedUser";
+import { Delegatees } from "@prisma/client";
+
+type Props = {
+  delegate: DelegateChunk;
+  fetchBalanceForDirectDelegation: (
+    addressOrENSName: string
+  ) => Promise<string>;
+  fetchVotingPowerForSubdelegation: (
+    addressOrENSName: string
+  ) => Promise<string>;
+  checkIfDelegatingToProxy: (addressOrENSName: string) => Promise<boolean>;
+  fetchCurrentDelegatees: (addressOrENSName: string) => Promise<Delegation[]>;
+  getProxyAddress: (addressOrENSName: string) => Promise<string>;
+  fetchDirectDelegatee: (addressOrENSName: string) => Promise<Delegatees>;
+};
 
 export default function DelegateCardClient({
   delegate,
@@ -10,7 +27,8 @@ export default function DelegateCardClient({
   checkIfDelegatingToProxy,
   fetchCurrentDelegatees,
   getProxyAddress,
-}) {
+  fetchDirectDelegatee,
+}: Props) {
   const { isAdvancedUser } = useIsAdvancedUser();
 
   return (
@@ -22,6 +40,7 @@ export default function DelegateCardClient({
       fetchCurrentDelegatees={fetchCurrentDelegatees}
       getProxyAddress={getProxyAddress}
       isAdvancedUser={isAdvancedUser}
+      fetchDirectDelegatee={fetchDirectDelegatee}
     />
   );
 }
diff --git a/src/components/Delegates/DelegateCardList/DelegateCardList.tsx b/src/components/Delegates/DelegateCardList/DelegateCardList.tsx
@@ -12,6 +12,7 @@ import { useRouter } from "next/navigation";
 import { DialogProvider } from "@/components/Dialogs/DialogProvider/DialogProvider";
 import { Delegate } from "@/app/api/delegates/delegate";
 import useIsAdvancedUser from "@/app/lib/hooks/useIsAdvancedUser";
+import { Delegatees } from "@prisma/client";
 
 export type DelegateChunk = Pick<
   Delegate,
@@ -35,7 +36,8 @@ interface Props {
   checkIfDelegatingToProxy: (addressOrENSName: string) => Promise<boolean>;
   fetchCurrentDelegatees: (addressOrENSName: string) => Promise<any>;
   getProxyAddress: (addressOrENSName: string) => Promise<string>;
-  completeDelegation: (addressOrENSName: string) => void;
+  completeDelegation: () => void;
+  fetchDirectDelegatee: (addressOrENSName: string) => Promise<Delegatees>;
 }
 
 export default function DelegateCardList({
@@ -46,6 +48,7 @@ export default function DelegateCardList({
   checkIfDelegatingToProxy,
   fetchCurrentDelegatees,
   getProxyAddress,
+  fetchDirectDelegatee,
 }: Props) {
   const router = useRouter();
   const fetching = React.useRef(false);
@@ -145,6 +148,7 @@ export default function DelegateCardList({
                     fetchCurrentDelegatees={fetchCurrentDelegatees}
                     getProxyAddress={getProxyAddress}
                     isAdvancedUser={isAdvancedUser}
+                    fetchDirectDelegatee={fetchDirectDelegatee}
                   />
                 </VStack>
               </VStack>