Fix: Add Warnings to Delegation Actions (Issue #194)

apollo/subgraph.ts

@@ -9569,7 +9569,7 @@ export type AccountQueryVariables = Exact<{
 }>;
 
 
-export type AccountQuery = { __typename: 'Query', delegator?: { __typename: 'Delegator', id: string, bondedAmount: string, principal: string, unbonded: string, withdrawnFees: string, startRound: string, lastClaimRound?: { __typename: 'Round', id: string } | null, unbondingLocks?: Array<{ __typename: 'UnbondingLock', id: string, amount: string, unbondingLockId: number, withdrawRound: string, delegate: { __typename: 'Transcoder', id: string } }> | null, delegate?: { __typename: 'Transcoder', id: string, active: boolean, status: TranscoderStatus, totalStake: string } | null } | null, transcoder?: { __typename: 'Transcoder', id: string, active: boolean, feeShare: string, rewardCut: string, status: TranscoderStatus, totalStake: string, totalVolumeETH: string, activationTimestamp: number, activationRound: string, deactivationRound: string, thirtyDayVolumeETH: string, ninetyDayVolumeETH: string, lastRewardRound?: { __typename: 'Round', id: string } | null, pools?: Array<{ __typename: 'Pool', rewardTokens?: string | null }> | null, delegators?: Array<{ __typename: 'Delegator', id: string }> | null } | null, protocol?: { __typename: 'Protocol', id: string, totalSupply: string, totalActiveStake: string, participationRate: string, inflation: string, inflationChange: string, lptPriceEth: string, roundLength: string, currentRound: { __typename: 'Round', id: string } } | null };
+export type AccountQuery = { __typename: 'Query', delegator?: { __typename: 'Delegator', id: string, bondedAmount: string, principal: string, unbonded: string, withdrawnFees: string, startRound: string, lastClaimRound?: { __typename: 'Round', id: string } | null, unbondingLocks?: Array<{ __typename: 'UnbondingLock', id: string, amount: string, unbondingLockId: number, withdrawRound: string, delegate: { __typename: 'Transcoder', id: string } }> | null, delegate?: { __typename: 'Transcoder', id: string, active: boolean, status: TranscoderStatus, totalStake: string, lastRewardRound?: { __typename: 'Round', id: string } | null } | null } | null, transcoder?: { __typename: 'Transcoder', id: string, active: boolean, feeShare: string, rewardCut: string, status: TranscoderStatus, totalStake: string, totalVolumeETH: string, activationTimestamp: number, activationRound: string, deactivationRound: string, thirtyDayVolumeETH: string, ninetyDayVolumeETH: string, lastRewardRound?: { __typename: 'Round', id: string } | null, pools?: Array<{ __typename: 'Pool', rewardTokens?: string | null }> | null, delegators?: Array<{ __typename: 'Delegator', id: string }> | null } | null, protocol?: { __typename: 'Protocol', id: string, totalSupply: string, totalActiveStake: string, participationRate: string, inflation: string, inflationChange: string, lptPriceEth: string, roundLength: string, currentRound: { __typename: 'Round', id: string } } | null };
 
 export type AccountInactiveQueryVariables = Exact<{
   id: Scalars['ID'];
@@ -9730,6 +9730,9 @@ export const AccountDocument = gql`
       active
       status
       totalStake
+      lastRewardRound {
+        id
+      }
     }
   }
   transcoder(id: $account) {

components/DelegatingView/index.tsx

@@ -7,6 +7,7 @@ import { QuestionMarkCircledIcon } from "@modulz/radix-icons";
 import { AccountQueryResult, OrchestratorsSortedQueryResult } from "apollo";
 import {
   useAccountAddress,
+  useDelegationReview,
   useEnsData,
   usePendingFeesAndStakeData,
 } from "hooks";
@@ -20,6 +21,7 @@ import Masonry from "react-masonry-css";
 import { Address } from "viem";
 import { useSimulateContract, useWriteContract } from "wagmi";
 
+import DelegationReview from "../DelegationReview";
 import StakeTransactions from "../StakeTransactions";
 
 const breakpointColumnsObj = {
@@ -49,6 +51,12 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
 
   const pendingFeesAndStake = usePendingFeesAndStakeData(delegator?.id);
 
+  const { delegationWarning } = useDelegationReview({
+    delegator,
+    currentRound,
+    action: "withdrawFees",
+  });
+
   const recipient = delegator?.id as Address | undefined;
   const amount = pendingFeesAndStake?.pendingFees ?? "0";
 
@@ -357,18 +365,26 @@ const Index = ({ delegator, transcoders, protocol, currentRound }: Props) => {
                 </Text>
               </Flex>
               {isMyAccount && !withdrawButtonDisabled && delegator?.id && (
-                <Button
-                  css={{
-                    marginTop: "$3",
-                    width: "100%",
-                  }}
-                  disabled={!config}
-                  onClick={() => config && writeContract(config.request)}
-                  size="4"
-                  variant="primary"
-                >
-                  Withdraw Pending Fees
-                </Button>
+                <>
+                  <Button
+                    css={{
+                      marginTop: "$3",
+                      width: "100%",
+                    }}
+                    disabled={!config}
+                    onClick={() => config && writeContract(config.request)}
+                    size="4"
+                    variant="primary"
+                  >
+                    Withdraw Pending Fees
+                  </Button>
+                  {delegationWarning && (
+                    <DelegationReview
+                      warning={delegationWarning}
+                      css={{ marginTop: "$3" }}
+                    />
+                  )}
+                </>
               )}
             </Box>
           }

components/DelegatingWidget/Footer.tsx

@@ -11,11 +11,13 @@ import {
   StakingAction,
   useAccountAddress,
   useAccountBalanceData,
+  useDelegationReview,
   usePendingFeesAndStakeData,
 } from "hooks";
 import { useMemo } from "react";
 import { parseEther } from "viem";
 
+import DelegationReview from "../DelegationReview";
 import Delegate from "./Delegate";
 import Footnote from "./Footnote";
 import Undelegate from "./Undelegate";
@@ -69,15 +71,22 @@ const Footer = ({
   );
   const accountBalance = useAccountBalanceData(accountAddress);
 
-  const tokenBalance = useMemo(() => accountBalance?.balance, [accountBalance]);
-  const transferAllowance = useMemo(
-    () => accountBalance?.allowance,
-    [accountBalance]
-  );
+  const tokenBalance = accountBalance?.balance;
+  const transferAllowance = accountBalance?.allowance;
   const delegatorStatus = useMemo(
     () => getDelegatorStatus(delegator, currentRound),
     [currentRound, delegator]
   );
+  const { delegationWarning } = useDelegationReview({
+    delegator,
+    currentRound,
+    action: isTransferStake
+      ? "moveStake"
+      : action === "delegate"
+      ? "delegate"
+      : "undelegate",
+    targetOrchestrator: action === "delegate" ? transcoder : undefined,
+  });
   const stakeWei = useMemo(
     () =>
       delegatorPendingStakeAndFees?.pendingStake
@@ -175,6 +184,12 @@ const Footer = ({
             currDelegateNewPosNext: currDelegateNewPosNext,
           }}
         />
+        {delegationWarning && (isTransferStake || amount) && (
+          <DelegationReview
+            warning={delegationWarning}
+            css={{ marginTop: "$3" }}
+          />
+        )}
       </Box>
     );
   }
@@ -194,6 +209,12 @@ const Footer = ({
         sufficientStake,
         isMyTranscoder
       )}
+      {delegationWarning && amount && (
+        <DelegationReview
+          warning={delegationWarning}
+          css={{ marginTop: "$3" }}
+        />
+      )}
     </Box>
   );
 };

components/DelegationReview/index.tsx

@@ -0,0 +1,34 @@
+import { Box, Flex, Text } from "@livepeer/design-system";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+
+const DelegationReview = ({
+  warning,
+  css,
+}: {
+  warning?: string | null;
+  css?: object;
+}) => {
+  if (!warning) return null;
+
+  return (
+    <Box css={{ marginBottom: "$3", ...css }}>
+      <Flex
+        css={{
+          alignItems: "center",
+          gap: "$2",
+          color: "$yellow11",
+          backgroundColor: "$yellow3",
+          border: "1px solid $yellow7",
+          borderRadius: "$2",
+          padding: "$2",
+          fontSize: "$2",
+        }}
+      >
+        <ExclamationTriangleIcon width={28} height={28} />
+        <Text css={{ color: "inherit", fontSize: "inherit" }}>{warning}</Text>
+      </Flex>
+    </Box>
+  );
+};
+
+export default DelegationReview;

components/Redelegate/index.tsx

@@ -1,10 +1,24 @@
+import { ExplorerTooltip } from "@components/ExplorerTooltip";
 import { bondingManager } from "@lib/api/abis/main/BondingManager";
-import { Button } from "@livepeer/design-system";
+import { Box, Button, Flex } from "@livepeer/design-system";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useBondingManagerAddress } from "hooks/useContracts";
+import { useDelegationReview } from "hooks/useDelegationReview";
 import { useHandleTransaction } from "hooks/useHandleTransaction";
 import { useSimulateContract, useWriteContract } from "wagmi";
 
-const Index = ({ unbondingLockId, newPosPrev, newPosNext }) => {
+const Index = ({
+  unbondingLockId,
+  newPosPrev,
+  newPosNext,
+  delegator,
+  currentRound,
+}) => {
+  const { delegationWarning } = useDelegationReview({
+    delegator,
+    currentRound,
+    action: "redelegate",
+  });
   const { data: bondingManagerAddress } = useBondingManagerAddress();
 
   const { data: config } = useSimulateContract({
@@ -23,13 +37,32 @@ const Index = ({ unbondingLockId, newPosPrev, newPosNext }) => {
   });
 
   return (
-    <>
+    <Flex
+      css={{
+        gap: "$2",
+        alignItems: "center",
+        flexDirection: "row-reverse",
+        "@bp2": {
+          flexDirection: "row",
+        },
+      }}
+    >
+      {delegationWarning && (
+        <ExplorerTooltip content={delegationWarning} multiline>
+          <Box
+            css={{
+              display: "inline-flex",
+              color: "$yellow11",
+            }}
+          >
+            <ExclamationTriangleIcon width={18} height={18} />
+          </Box>
+        </ExplorerTooltip>
+      )}
       <Button
         css={{
-          marginRight: "$3",
-          width: "100%",
           "@bp2": {
-            width: "auto",
+            marginRight: "$3",
           },
         }}
         disabled={!config}
@@ -39,7 +72,7 @@ const Index = ({ unbondingLockId, newPosPrev, newPosNext }) => {
       >
         Redelegate
       </Button>
-    </>
+    </Flex>
   );
 };
 

components/RedelegateFromUndelegated/index.tsx

@@ -1,11 +1,27 @@
 import { bondingManager } from "@lib/api/abis/main/BondingManager";
-import { Button } from "@livepeer/design-system";
+import { Box, Button, Flex } from "@livepeer/design-system";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useAccountAddress } from "hooks";
 import { useBondingManagerAddress } from "hooks/useContracts";
+import { useDelegationReview } from "hooks/useDelegationReview";
 import { useHandleTransaction } from "hooks/useHandleTransaction";
 import { useSimulateContract, useWriteContract } from "wagmi";
 
-const Index = ({ unbondingLockId, delegate, newPosPrev, newPosNext }) => {
+import { ExplorerTooltip } from "../ExplorerTooltip";
+
+const Index = ({
+  unbondingLockId,
+  delegate,
+  newPosPrev,
+  newPosNext,
+  delegator,
+  currentRound,
+}) => {
+  const { delegationWarning } = useDelegationReview({
+    delegator,
+    currentRound,
+    action: "redelegateFromUndelegated",
+  });
   const accountAddress = useAccountAddress();
 
   const { data: bondingManagerAddress } = useBondingManagerAddress();
@@ -38,13 +54,20 @@ const Index = ({ unbondingLockId, delegate, newPosPrev, newPosNext }) => {
   }
 
   return (
-    <>
+    <Flex
+      css={{
+        gap: "$2",
+        alignItems: "center",
+        flexDirection: "row-reverse",
+        "@bp2": {
+          flexDirection: "row",
+        },
+      }}
+    >
       <Button
         css={{
-          marginRight: "$3",
-          width: "100%",
           "@bp2": {
-            width: "auto",
+            marginRight: "$3",
           },
         }}
         disabled={!config}
@@ -54,7 +77,20 @@ const Index = ({ unbondingLockId, delegate, newPosPrev, newPosNext }) => {
       >
         Redelegate
       </Button>
-    </>
+      {delegationWarning && (
+        <ExplorerTooltip content={delegationWarning} multiline>
+          <Box
+            css={{
+              display: "inline-flex",
+              color: "$yellow11",
+              cursor: "help",
+            }}
+          >
+            <ExclamationTriangleIcon width={18} height={18} />
+          </Box>
+        </ExplorerTooltip>
+      )}
+    </Flex>
   );
 };