import { depositToYieldVault } from '@dynamic-labs-sdk/client';

const { transactionHash } = await depositToYieldVault({
  vaultId: 'fb-eth-galaxy-usdc-fw-01',
  walletAccount,
  amount: '10.5', // 10.5 USDC — human-readable units, not raw
  onStepChange: (step) => {
    console.log('Step:', step); // 'approval' or 'transaction'
  },
});

console.log('Transaction hash:', transactionHash);

import { useState } from 'react';
import { depositToYieldVault } from '@dynamic-labs-sdk/client';

const DepositButton = ({ vaultId, walletAccount, amount, onComplete }) => {
  const [step, setStep] = useState(null);

  const handleDeposit = async () => {
    const { transactionHash } = await depositToYieldVault({
      vaultId,
      walletAccount,
      amount,
      onStepChange: setStep,
    });

    onComplete(transactionHash);
  };

  return (
    <button onClick={handleDeposit} disabled={!!step}>
      {step === 'approval' && 'Approving...'}
      {step === 'transaction' && 'Depositing...'}
      {!step && 'Deposit'}
    </button>
  );
};

import { useDepositToYieldVault } from '@dynamic-labs-sdk/react-hooks';
import { useState } from 'react';

function DepositButton({ vaultId, walletAccount, amount, onComplete }) {
  const { mutate: deposit, isPending } = useDepositToYieldVault();
  const [step, setStep] = useState(null);

  return (
    <button
      onClick={() =>
        deposit(
          { vaultId, walletAccount, amount, onStepChange: setStep },
          { onSuccess: ({ transactionHash }) => onComplete(transactionHash) },
        )
      }
      disabled={isPending}
    >
      {step === 'approval' && 'Approving...'}
      {step === 'transaction' && 'Depositing...'}
      {!step && 'Deposit'}
    </button>
  );
}