);
}
-function InitStep({
- number,
- title,
- description,
- bgClass,
-}: {
- number: number;
- title: string;
- description: string;
- bgClass: string;
-}) {
+function FlowStep({ number, text }: { number: number; text: string }) {
return (
-
-
+
+
{number}
-
-
{title}
-
{description}
-
+
{text}
);
}
@@ -146,3 +126,32 @@ function ErrorMessage({ message }: { message: string }) {
);
}
+
+function CodeExample() {
+ return (
+
+
+
+
+ Usage Example
+
+
+
+ {`const { initDelegationProcess } = useWalletDelegation();
+
+// Opens Dynamic's modal UI for delegation
+const handleDelegate = async () => {
+ try {
+ await initDelegationProcess();
+ console.log('Delegation completed!');
+ } catch (error) {
+ console.error('User cancelled or error:', error);
+ }
+};
+
+// Or delegate specific wallets only
+await initDelegationProcess({ wallets: [primaryWallet] });`}
+
+
+ );
+}
diff --git a/examples/nextjs-delegated-access/components/dynamic/delegated-access/management.tsx b/examples/nextjs-delegated-access/components/dynamic/delegated-access/management.tsx
new file mode 100644
index 0000000..a526198
--- /dev/null
+++ b/examples/nextjs-delegated-access/components/dynamic/delegated-access/management.tsx
@@ -0,0 +1,321 @@
+"use client";
+
+import { useState } from "react";
+import {
+ Key,
+ Loader2,
+ AlertCircle,
+ CheckCircle2,
+ Info,
+ User,
+ Users,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+ ChainEnum,
+ useDynamicContext,
+ useWalletDelegation,
+} from "@/lib/dynamic";
+
+/**
+ * DelegationManagement - Delegation with Custom UI (No Modal)
+ *
+ * This component demonstrates programmatic delegation without Dynamic's modal:
+ * - delegateKeyShares() - Direct delegation without showing any UI
+ * - Best for: Custom delegation flows where you want full UI control
+ */
+export default function DelegationManagement() {
+ const { primaryWallet } = useDynamicContext();
+ const { delegateKeyShares, getWalletsDelegatedStatus } =
+ useWalletDelegation();
+
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState
(null);
+ const [success, setSuccess] = useState(null);
+
+ // Get delegation status for all wallets from the SDK
+ // This is the source of truth for which wallets are eligible for delegation
+ const allWalletStatuses = getWalletsDelegatedStatus();
+
+ // Wallets with status "pending" are eligible for delegation
+ const pendingWallets = allWalletStatuses.filter(
+ (wallet) => wallet.status === "pending"
+ );
+
+ // Check if primary wallet is in the delegation status list (eligible)
+ const primaryWalletStatus = primaryWallet
+ ? allWalletStatuses.find(
+ (w) => w.address.toLowerCase() === primaryWallet.address.toLowerCase()
+ )
+ : null;
+
+ const isPrimaryEligible = !!primaryWalletStatus;
+ const isPrimaryDelegated = primaryWalletStatus?.status === "delegated";
+ const isPrimaryPending = primaryWalletStatus?.status === "pending";
+
+ // Delegate primary wallet only
+ const handleDelegatePrimary = async () => {
+ if (!primaryWallet || !primaryWalletStatus) {
+ setError("No eligible primary wallet found");
+ return;
+ }
+
+ if (!isPrimaryPending) {
+ setError("Primary wallet is not pending delegation");
+ return;
+ }
+
+ try {
+ setIsLoading(true);
+ setError(null);
+ setSuccess(null);
+
+ await delegateKeyShares([
+ {
+ chainName: primaryWalletStatus.chain as ChainEnum,
+ accountAddress: primaryWalletStatus.address,
+ },
+ ]);
+
+ setSuccess("Primary wallet delegated successfully!");
+ } catch (err) {
+ const errorMessage =
+ err instanceof Error
+ ? err.message
+ : "Failed to delegate primary wallet";
+ setError(errorMessage);
+ console.error("Delegation failed:", err);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ // Delegate all pending wallets
+ const handleDelegateAll = async () => {
+ if (pendingWallets.length === 0) {
+ setError("No pending wallets found");
+ return;
+ }
+
+ try {
+ setIsLoading(true);
+ setError(null);
+ setSuccess(null);
+
+ const walletsToDelegate = pendingWallets.map((wallet) => ({
+ chainName: wallet.chain as ChainEnum,
+ accountAddress: wallet.address,
+ }));
+
+ await delegateKeyShares(walletsToDelegate);
+
+ setSuccess(`${pendingWallets.length} wallet(s) delegated successfully!`);
+ } catch (err) {
+ const errorMessage =
+ err instanceof Error ? err.message : "Failed to delegate wallets";
+ setError(errorMessage);
+ console.error("Delegation failed:", err);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const clearMessages = () => {
+ setError(null);
+ setSuccess(null);
+ };
+
+ return (
+
+
+
+ {/* Method Explanation */}
+
+
+
+
+
+
+
delegateKeyShares()
+
+ Delegates key shares programmatically without any UI. Build
+ your own consent flow and call this when ready.
+
+
+
+
+ {/* What happens */}
+
+
+ When called, this will:
+
+
+
+
+
+
+
+
+ {/* Action Buttons */}
+
+ {/* Delegate Primary Only */}
+
+
+ {/* Delegate All */}
+
+
+
+ {/* Feedback Messages */}
+ {error && (
+
+ )}
+ {success && (
+
+ )}
+
+
+ {/* Code Example */}
+
+
+
+
+
+ {number}
+
+
{text}
+
+
+
+ {isError ? (
+
+ ) : (
+
+ )}
+
+ {message}
+
+
+
+
+
+
+
+
+ Usage Example
+
+
+
+ {`const { delegateKeyShares } = useWalletDelegation();
+
+// Delegate without showing any Dynamic UI
+const handleDelegate = async () => {
+ try {
+ await delegateKeyShares([
+ { chainName: ChainEnum.Evm, accountAddress: '0x...' }
+ ]);
+ console.log('Delegation completed!');
+ } catch (error) {
+ console.error('Delegation failed:', error);
+ }
+};
+
+// Or delegate all pending wallets at once
+await delegateKeyShares();`}
+
+