bump deps and fix undelegate (#234)

Author: bryzettler

package.json

@@ -10,19 +10,19 @@
   },
   "dependencies": {
     "@coral-xyz/anchor": "^0.31.0",
-    "@helium/account-fetch-cache": "^0.10.13",
-    "@helium/account-fetch-cache-hooks": "^0.10.13",
-    "@helium/helium-react-hooks": "^0.10.13",
-    "@helium/hpl-crons-sdk": "^0.10.13",
+    "@helium/account-fetch-cache": "^0.10.14",
+    "@helium/account-fetch-cache-hooks": "^0.10.14",
+    "@helium/helium-react-hooks": "^0.10.14",
+    "@helium/hpl-crons-sdk": "^0.10.14",
     "@helium/modular-governance-hooks": "^0.1.5",
     "@helium/modular-governance-idls": "^0.1.5",
-    "@helium/no-emit-sdk": "^0.10.13",
+    "@helium/no-emit-sdk": "^0.10.14",
     "@helium/organization-sdk": "^0.1.5",
-    "@helium/spl-utils": "^0.10.13",
+    "@helium/spl-utils": "^0.10.14",
     "@helium/state-controller-sdk": "^0.1.5",
     "@helium/tuktuk-sdk": "^0.0.8",
-    "@helium/voter-stake-registry-hooks": "^0.10.13",
-    "@helium/voter-stake-registry-sdk": "^0.10.13",
+    "@helium/voter-stake-registry-hooks": "^0.10.14",
+    "@helium/voter-stake-registry-sdk": "^0.10.14",
     "@hookform/resolvers": "^3.3.4",
     "@metaplex-foundation/mpl-token-metadata": "2.10.0",
     "@project-serum/anchor": "^0.26.0",
@@ -78,15 +78,15 @@
   "resolutions": {
     "@tanstack/react-query": "5.45.1",
     "@solana/web3.js": "^1.90.0",
-    "@helium/account-fetch-cache": "^0.10.13",
-    "@helium/account-fetch-cache-hooks": "^0.10.13",
-    "@helium/helium-react-hooks": "^0.10.13",
-    "@helium/voter-stake-registry-hooks": "^0.10.13",
+    "@helium/account-fetch-cache": "^0.10.14",
+    "@helium/account-fetch-cache-hooks": "^0.10.14",
+    "@helium/helium-react-hooks": "^0.10.14",
+    "@helium/voter-stake-registry-hooks": "^0.10.14",
     "@helium/modular-governance-idls": "^0.1.5",
-    "@helium/spl-utils": "^0.10.13",
+    "@helium/spl-utils": "^0.10.14",
     "@helium/modular-governance-hooks": "^0.1.5",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@helium/voter-stake-registry-sdk": "^0.10.13"
+    "@helium/voter-stake-registry-sdk": "^0.10.14"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",

src/components/PositionManager/ConfirmationItem.tsx

@@ -18,7 +18,7 @@ export const ConfirmationItem: FC<{
       <div className="size-12 rounded-full relative">
         <Image alt={img.alt} src={img.src} fill />
       </div>
-      <div className="flex flex-col items-center">
+      <div className="flex flex-col text-center items-center">
         <span className="text-sm">{title}</span>
         <span className="font-medium">{description}</span>
       </div>

src/components/PositionManager/PositionManager.tsx

@@ -22,6 +22,7 @@ import {
   useSubDaos,
   useTransferPosition,
   useUnassignProxies,
+  useUndelegatePosition,
 } from "@helium/voter-stake-registry-hooks";
 import { WalletSignTransactionError } from "@solana/wallet-adapter-base";
 import BN from "bn.js";
@@ -56,6 +57,7 @@ import { MOBILE_SUB_DAO_KEY } from "@/lib/constants";
 export type PositionAction =
   | "flip"
   | "delegate"
+  | "undelegate"
   | "extend"
   | "split"
   | "merge"
@@ -178,13 +180,15 @@ export const PositionManager: FC<PositionManagerProps> = ({
   const [subDao, setSubDao] = useState<SubDaoWithMeta | null>(
     subDaos?.find((sd) => sd.pubkey.equals(MOBILE_SUB_DAO_KEY)) || null
   );
+
   useEffect(() => {
     if (subDaos && !subDao) {
       setSubDao(
         subDaos.find((sd) => sd.pubkey.equals(MOBILE_SUB_DAO_KEY)) || null
       );
     }
   }, [subDaos, subDao]);
+
   const {
     loading: isDelegating,
     delegatePosition,
@@ -195,6 +199,13 @@ export const PositionManager: FC<PositionManagerProps> = ({
     position,
     subDao: subDao || undefined,
   });
+
+  const { loading: isUndelegating, undelegatePosition } = useUndelegatePosition(
+    {
+      position,
+    }
+  );
+
   const { loading: isTransfering, transferPosition } = useTransferPosition();
   const { loading: isSplitting, splitPosition } = useSplitPosition();
   const { loading: isExtending, extendPosition } = useExtendPosition();
@@ -330,6 +341,21 @@ export const PositionManager: FC<PositionManagerProps> = ({
     }
   };
 
+  const handleUndelegatePosition = async () => {
+    try {
+      await undelegatePosition({
+        onInstructions: onInstructions(provider),
+      });
+
+      toast("Position undelegated");
+      reset();
+    } catch (e: any) {
+      if (!(e instanceof WalletSignTransactionError)) {
+        toast(e.message || "Undelegation failed, please try again");
+      }
+    }
+  };
+
   const handleExtendPosition = async (values: LockTokensFormValues) => {
     try {
       await extendPosition({
@@ -531,9 +557,10 @@ export const PositionManager: FC<PositionManagerProps> = ({
               {action === "delegate" && (
                 <UpdatePositionDelegationPrompt
                   position={position}
-                  isSubmitting={isDelegating}
+                  isSubmitting={isDelegating || isUndelegating}
                   onCancel={() => setAction(undefined)}
                   onConfirm={handleDelegatePosition}
+                  onUndelegate={handleUndelegatePosition}
                   automationEnabled={automationEnabled}
                   setAutomationEnabled={setAutomationEnabled}
                   subDao={subDao}
@@ -542,6 +569,7 @@ export const PositionManager: FC<PositionManagerProps> = ({
                   prepaidTxFees={prepaidTxFees}
                 />
               )}
+              {action === "undelegate" && <div>Test</div>}
               {action === "extend" && (
                 <ExtendPositionPrompt
                   position={position}

src/components/PositionManager/UpdatePositionDelegationPrompt.tsx

@@ -1,32 +1,31 @@
 "use client";
 
+import { removeNullBytes } from "@/lib/utils";
 import { useGovernance } from "@/providers/GovernanceProvider";
 import { useSolanaUnixNow } from "@helium/helium-react-hooks";
 import {
   PositionWithMeta,
   SubDaoWithMeta,
-  useDataBurnSplit,
-  useSubDaoDelegationSplit,
 } from "@helium/voter-stake-registry-hooks";
 import { PublicKey } from "@solana/web3.js";
 import BN from "bn.js";
 import classNames from "classnames";
 import { Loader2, X } from "lucide-react";
 import React, { FC, useCallback, useMemo, useState } from "react";
 import { FaCircleArrowRight } from "react-icons/fa6";
+import { AutomationSettings } from "../AutomationSettings";
+import { DataSplitBars } from "../DataSplitBars";
 import { StepIndicator } from "../StepIndicator";
 import { SubDaoSelection } from "../SubDaoSelection";
 import { Button } from "../ui/button";
 import { ConfirmationItem } from "./ConfirmationItem";
-import { DataSplitBars } from "../DataSplitBars";
-import { AutomationSettings } from "../AutomationSettings";
-import { humanReadable } from "@/lib/utils";
 
 export const UpdatePositionDelegationPrompt: FC<{
   position: PositionWithMeta;
   isSubmitting?: boolean;
   onCancel: () => void;
   onConfirm: (subDao?: SubDaoWithMeta) => Promise<void>;
+  onUndelegate: () => Promise<void>;
   automationEnabled: boolean;
   setAutomationEnabled: (automationEnabled: boolean) => void;
   subDao: SubDaoWithMeta | null;
@@ -38,6 +37,7 @@ export const UpdatePositionDelegationPrompt: FC<{
   isSubmitting,
   onCancel,
   onConfirm,
+  onUndelegate,
   subDao,
   setSubDao,
   automationEnabled,
@@ -46,7 +46,8 @@ export const UpdatePositionDelegationPrompt: FC<{
   prepaidTxFees = 0,
 }) => {
   const [step, setStep] = useState(1);
-  const { subDaos, voteService } = useGovernance();
+  const [isUndelegating, setIsUndelegating] = useState(false);
+  const { subDaos } = useGovernance();
   const unixNow = useSolanaUnixNow() || Date.now() / 1000;
   const { lockup, isDelegated, delegatedSubDao } = position;
   const lockupKind = Object.keys(lockup.kind)[0] as string;
@@ -71,50 +72,12 @@ export const UpdatePositionDelegationPrompt: FC<{
     subDaos?.find((sd) => sd.pubkey.equals(position.delegatedSubDao!))
       ?.dntMetadata;
 
-  const { data: revData, isLoading: revLoading } = useDataBurnSplit({
-    voteService,
-  });
-  const { iot: iotDataUsageRev = 0, mobile: mobileDataUsageRev = 0 } =
-    (revData || {}) as { iot: number; mobile: number };
-  const { data: delegationData, isLoading: delegationLoading } =
-    useSubDaoDelegationSplit({
-      voteService,
-    });
-  const {
-    iot: iotDelegation = new BN(0),
-    mobile: mobileDelegation = new BN(0),
-  } = (delegationData || {}) as { iot: BN; mobile: BN };
-
-  const totalDataUsage = Number(mobileDataUsageRev) + Number(iotDataUsageRev);
-  const totalVetokens =
-    mobileDelegation && iotDelegation
-      ? new BN(mobileDelegation).add(new BN(iotDelegation))
-      : new BN(0);
-
-  const mobileDelegationPercentage =
-    mobileDelegation && totalVetokens.gt(new BN(0))
-      ? new BN(mobileDelegation)
-          .mul(new BN(10000))
-          .div(totalVetokens)
-          .toNumber() / 100
-      : 0;
-
-  const iotDelegationPercentage =
-    iotDelegation && totalVetokens.gt(new BN(0))
-      ? new BN(iotDelegation).mul(new BN(10000)).div(totalVetokens).toNumber() /
-        100
-      : 0;
-
-  const mobileDataUsagePercentage =
-    totalDataUsage > 0
-      ? (Number(mobileDataUsageRev) / totalDataUsage) * 100
-      : 0;
-
-  const iotDataUsagePercentage =
-    totalDataUsage > 0 ? (Number(iotDataUsageRev) / totalDataUsage) * 100 : 0;
-
   const handleSubmit = async () => {
-    await onConfirm(selectedSubDao);
+    if (isUndelegating) {
+      await onUndelegate();
+    } else {
+      await onConfirm(selectedSubDao);
+    }
   };
 
   const setSelectedSubDaoPk = useCallback(
@@ -135,7 +98,13 @@ export const UpdatePositionDelegationPrompt: FC<{
         <div className="flex flex-col gap-4">
           <div className="flex flex-col gap-1">
             <div className="flex flex-row justify-between items-center">
-              <h3>{step === 1 ? "Update Position" : "Update Delegation"}</h3>
+              <h3>
+                {step === 1
+                  ? "Update Position"
+                  : isUndelegating
+                  ? "Undelegate Position"
+                  : "Update Delegation"}
+              </h3>
               <StepIndicator steps={2} currentStep={step} />
             </div>
             {step === 1 ? (
@@ -177,7 +146,7 @@ export const UpdatePositionDelegationPrompt: FC<{
                     disabled={!isDelegated}
                     className="flex-1"
                     onClick={() => {
-                      setSelectedSubDaoPk(undefined);
+                      setIsUndelegating(true);
                       setStep(step + 1);
                     }}
                   >
@@ -214,7 +183,9 @@ export const UpdatePositionDelegationPrompt: FC<{
                             src: delegatedSubDaoMetadata?.json?.image,
                           }}
                           title="Delegating from..."
-                          description={delegatedSubDaoMetadata?.symbol.toUpperCase()}
+                          description={removeNullBytes(
+                            delegatedSubDaoMetadata?.symbol.toUpperCase()
+                          )}
                         />
                         <FaCircleArrowRight className="size-6 absolute left-[calc(50%-0.75rem)] top-[calc(50%-0.75rem)]" />
                       </>
@@ -229,7 +200,9 @@ export const UpdatePositionDelegationPrompt: FC<{
                         src: selectedSubDaoMetadata?.json?.image,
                       }}
                       title="Delegating to..."
-                      description={selectedSubDaoMetadata?.symbol.toUpperCase()}
+                      description={removeNullBytes(
+                        selectedSubDaoMetadata?.symbol.toUpperCase()
+                      )}
                     />
                   </div>
                 )}
@@ -240,8 +213,14 @@ export const UpdatePositionDelegationPrompt: FC<{
                       alt: delegatedSubDaoMetadata?.json?.name,
                       src: delegatedSubDaoMetadata?.json?.image,
                     }}
-                    title="Updating delegation"
-                    description={delegatedSubDaoMetadata?.symbol.toUpperCase()}
+                    title={
+                      isUndelegating
+                        ? "Undelegating from..."
+                        : "Updating delegation"
+                    }
+                    description={removeNullBytes(
+                      delegatedSubDaoMetadata?.symbol.toUpperCase()
+                    )}
                   />
                 )}
               </div>
@@ -253,6 +232,7 @@ export const UpdatePositionDelegationPrompt: FC<{
                     disabled={isSubmitting}
                     onClick={() => {
                       setSelectedSubDaoPk(undefined);
+                      setIsUndelegating(false);
                       setStep(step - 1);
                     }}
                   >
@@ -266,7 +246,11 @@ export const UpdatePositionDelegationPrompt: FC<{
                     {isSubmitting && (
                       <Loader2 className="size-5 animate-spin" />
                     )}
-                    {isSubmitting ? "Updating Delegation..." : "Confirm"}
+                    {isSubmitting
+                      ? isUndelegating
+                        ? "Undelegating..."
+                        : "Updating delegation..."
+                      : "Confirm"}
                   </Button>
                 </div>
                 <p className="text-xs text-muted-foreground text-center">

src/components/SubDaoSelection.tsx

@@ -6,6 +6,7 @@ import classNames from "classnames";
 import Image from "next/image";
 import React, { FC } from "react";
 import { Skeleton } from "./ui/skeleton";
+import { removeNullBytes } from "@/lib/utils";
 
 export const SubDaoSelection: FC<{
   hideNoneOption?: boolean;
@@ -72,9 +73,7 @@ export const SubDaoSelection: FC<{
                       fill
                     />
                   </div>
-                  {subDao.dntMetadata.symbol
-                    ? subDao.dntMetadata.symbol.replace(/\u0000/g, "")
-                    : ""}
+                  {removeNullBytes(subDao.dntMetadata.symbol)}
                 </div>
               </div>
             ))}

src/lib/utils.ts

@@ -440,3 +440,7 @@ export function debounce<T extends unknown[], U>(
 }
 
 export const EPOCH_LENGTH = 60 * 60 * 24;
+
+export const removeNullBytes = (str?: string): string => {
+  return str ? str.replace(/\u0000/g, "") : "";
+};