Supply Assets on Aave V4

import { type SupplyRequest, usePreview } from "@aave/react";

function SupplyPreview({ request }: { request: SupplyRequest }) {
  const { data, error, loading } = usePreview({
    action: {
      supply: request,
    },
  });

  if (loading) return <div>Loading…</div>;
  if (error) return <div>Error: {error.message}</div>;

  // data: PreviewUserPosition
  return (
    <div>
      <h3>Health Factor:</h3>
      <p>From: {data.healthFactor.current?.toFixed(2) ?? "N/A"}</p>
      <p>To: {data.healthFactor.after?.toFixed(2) ?? "N/A"}</p>

      <h3>User Risk Premium:</h3>
      <p>From: {data.riskPremium.current.normalized.toFixed(2)}%</p>
      <p>To: {data.riskPremium.after.normalized.toFixed(2)}%</p>

      <h3>Net APY:</h3>
      <p>From: {data.netApy.current.normalized.toFixed(2)}%</p>
      <p>To: {data.netApy.after.normalized.toFixed(2)}%</p>

      <h3>Net Collateral:</h3>
      <p>From: {data.netCollateral.current.value.toDisplayString(2)}</p>
      <p>To: {data.netCollateral.after.value.toDisplayString(2)}</p>

      <h3>Max Borrowing Power:</h3>
      <p>From: {data.maxBorrowingPower.current.value.toDisplayString(2)}</p>
      <p>To: {data.maxBorrowingPower.after.value.toDisplayString(2)}</p>
    </div>
  );
}

import { type SupplyRequest, usePreview } from "@aave/react";

function SupplyPreview({ request }: { request: SupplyRequest }) {
  const { data, error, loading } = usePreview({
    action: {
      supply: request,
    },
    suspense: true,
  });

  // data: PreviewUserPosition
  return (
    <div>
      <h3>Health Factor:</h3>
      <p>From: {data.healthFactor.current?.toFixed(2) ?? "N/A"}</p>
      <p>To: {data.healthFactor.after?.toFixed(2) ?? "N/A"}</p>

      <h3>User Risk Premium:</h3>
      <p>From: {data.riskPremium.current.normalized.toFixed(2)}%</p>
      <p>To: {data.riskPremium.after.normalized.toFixed(2)}%</p>

      <h3>Net APY:</h3>
      <p>From: {data.netApy.current.normalized.toFixed(2)}%</p>
      <p>To: {data.netApy.after.normalized.toFixed(2)}%</p>

      <h3>Net Collateral:</h3>
      <p>From: {data.netCollateral.current.value.toDisplayString(2)}</p>
      <p>To: {data.netCollateral.after.value.toDisplayString(2)}</p>

      <h3>Max Borrowing Power:</h3>
      <p>From: {data.maxBorrowingPower.current.value.toDisplayString(2)}</p>
      <p>To: {data.maxBorrowingPower.after.value.toDisplayString(2)}</p>
    </div>
  );
}

import { usePreviewAction } from "@aave/react";

// …

const [preview, { called, data, error, loading }] = usePreviewAction();

const handler = async (request: SupplyRequest) => {
  const result = await preview({
    action: {
      supply: request,
    },
  });

  if (result.isOk()) {
    console.log(result.value); // PreviewUserPosition
  } else {
    console.error(result.error);
  }
};

import { preview } from "@aave/client/actions";
import { bigDecimal, evmAddress } from "@aave/client";

import { client } from "./client";

const result = await preview(client, {
  action: {
    supply: {
      sender: evmAddress("0x123…"),
      reserve: reserve.id,
      amount: {
        erc20: {
          value: bigDecimal(100), // 100 tokens
        },
      },
    },
  },
});

if (result.isOk()) {
  console.log(result.value); // PreviewUserPosition
} else {
  console.error(result.error);
}

const result = await preview(client, {
  action: {
    supply: {
      sender: evmAddress("0x123…"),
      reserve: reserve.id,
      amount: {
        erc20: {
          value: bigDecimal(100),
        },
      },
      enableCollateral: true,
    },
  },
});

import { AaveClient } from "@aave/client";

export const client = AaveClient.create();

query ($request: PreviewRequest!, $currency: Currency = USD) {
  preview(request: $request) {
    __typename
    id
    healthFactor {
      ...HealthFactorResult
    }
    netApy {
      ...PercentNumberVariation
    }
    riskPremium {
      ...PercentNumberVariation
    }
    netCollateral(currency: $currency) {
      ...ExchangeAmountVariation
    }
    netBalance(currency: $currency) {
      ...ExchangeAmountVariation
    }
    projectedEarnings {
      ...ExchangeAmountVariation
    }
    maxBorrowingPower {
      ...ExchangeAmountVariation
    }
    remainingBorrowingPower {
      ...ExchangeAmountVariation
    }
    reserveRates {
      supplyApy {
        ...PercentNumberVariation
      }
      borrowApy {
        ...PercentNumberVariation
      }
    }
    otherConditions {
      ...UserPositionConditionVariation
    }
  }
}

fragment HealthFactorResult on HealthFactorResult {
  __typename
  ... on HealthFactorVariation {
    ...HealthFactorVariation
  }
  ... on HealthFactorError {
    ...HealthFactorError
  }
}

fragment HealthFactorVariation on HealthFactorVariation {
  __typename
  current
  after
}

fragment HealthFactorError on HealthFactorError {
  __typename
  reason
  current
  after
}

fragment UserPositionConditionVariation on UserPositionConditionVariation {
  __typename
  ... on CollateralFactorVariation {
    reserveId
    token {
      ...Erc20Token
    }
    current {
      ...PercentNumber
    }
    after {
      ...PercentNumber
    }
  }
  ... on LiquidationFeeVariation {
    reserveId
    token {
      ...Erc20Token
    }
    current {
      ...PercentNumber
    }
    after {
      ...PercentNumber
    }
  }
  ... on MaxLiquidationBonusVariation {
    reserveId
    token {
      ...Erc20Token
    }
    current {
      ...PercentNumber
    }
    after {
      ...PercentNumber
    }
  }
}

fragment PercentNumberVariation on PercentNumberVariation {
  __typename
  current {
    ...PercentNumber
  }
  after {
    ...PercentNumber
  }
}

fragment ExchangeAmountVariation on ExchangeAmountVariation {
  __typename
  current {
    ...ExchangeAmount
  }
  after {
    ...ExchangeAmount
  }
}

const request: SupplyRequest = {
  sender: evmAddress("0x123…"), // User's address
  reserve: reserve.id,
  amount: {
    erc20: {
      value: bigDecimal(42), // USDC
    },
  },
};

const request: SupplyRequest = {
  sender: evmAddress("0x123…"), // User's address
  reserve: reserve.id,
  amount: {
    erc20: {
      value: bigDecimal(42), // USDC
    },
  },
  enableCollateral: true,
};

{
  "request": {
    "action": {
      "supply": {
        "sender": "0x123…",
        "reserve": "SGVsbG8h",
        "amount": {
          "erc20": {
            "value": "100"
          }
        }
      }
    }
  }
}

{
  "request": {
    "action": {
      "supply": {
        "sender": "0x123…",
        "reserve": "SGVsbG8h",
        "amount": {
          "erc20": {
            "value": "100"
          }
        },
        "enableCollateral": true
      }
    }
  }
}

import { Currency } from "@aave/react";

const { data, error, loading } = usePreview({
  action: {
    supply: request,
  },
  currency: Currency.Eur,
});

import { Currency } from "@aave/react";

const [preview, { called, data, error, loading }] = usePreviewAction({
  currency: Currency.Eur,
});

import { bigDecimal, evmAddress } from "@aave/react";

const execute = async () => {
  const result = await supply({
    sender: evmAddress(wallet.account.address), // User's address
    reserve: reserve.id,
    amount: {
      erc20: {
        value: bigDecimal(42), // 42 USDC
      },
    },
  });

  // …
};

const execute = async () => {
  const result = await supply({
    sender: evmAddress(wallet.account.address), // User's address
    reserve: reserve.id,
    amount: {
      erc20: {
        value: bigDecimal(42), // 42 USDC
      },
    },
    enableCollateral: true,
  });

  // …
};

import { supply } from "@aave/client/actions";
import { bigDecimal, evmAddress } from "@aave/client";

import { client } from "./client";

const result = await supply(client, {
  sender: evmAddress(wallet.account.address), // User's address
  reserve: reserve.id,
  amount: {
    erc20: {
      value: bigDecimal(42), // 42 USDC
    },
  },
});

// …

import { AaveClient } from "@aave/client";

export const client = AaveClient.create();

query ($request: SupplyRequest!) {
  supply(request: $request) {
    __typename

    ... on TransactionRequest {
      ...TransactionRequest
    }

    ... on Erc20ApprovalRequired {
      reason
      requiredAmount {
        ...DecimalNumber
      }
      currentAllowance {
        ...DecimalNumber
      }
      approvals {
        byTransaction {
          ...TransactionRequest
        }
        bySignature {
          ...PermitTypedData
        }
      }
      originalTransaction {
        ...TransactionRequest
      }
    }

    ... on PreContractActionRequired {
      reason
      transaction {
        ...TransactionRequest
      }
      originalTransaction {
        ...TransactionRequest
      }
    }

    ... on InsufficientBalanceError {
      required {
        ...DecimalNumber
      }
      available {
        ...DecimalNumber
      }
    }
  }
}

fragment TransactionRequest on TransactionRequest {
  to
  from
  data
  value
  chainId
  operations
}

fragment PermitTypedData on PermitTypedData {
  types
  primaryType
  domain {
    name
    version
    chainId
    verifyingContract
  }
  message
}

import {
  type SetUserSuppliesAsCollateralRequest,
  usePreview,
} from "@aave/react";

function CollateralPreview({
  request,
}: {
  request: SetUserSuppliesAsCollateralRequest;
}) {
  const { data, error, loading } = usePreview({
    action: {
      setUserSuppliesAsCollateral: request,
    },
  });

  if (loading) return <div>Loading…</div>;
  if (error) return <div>Error: {error.message}</div>;

  // data: PreviewUserPosition
  return (
    <div>
      <h3>Health Factor:</h3>
      <p>From: {data.healthFactor.current?.toFixed(2) ?? "N/A"}</p>
      <p>To: {data.healthFactor.after?.toFixed(2) ?? "N/A"}</p>

      <h3>User Risk Premium:</h3>
      <p>From: {data.riskPremium.current.normalized.toFixed(2)}%</p>
      <p>To: {data.riskPremium.after.normalized.toFixed(2)}%</p>

      <h3>Net Collateral:</h3>
      <p>From: {data.netCollateral.current.value.toDisplayString(2)}</p>
      <p>To: {data.netCollateral.after.value.toDisplayString(2)}</p>

      <h3>Max Borrowing Power:</h3>
      <p>From: {data.maxBorrowingPower.current.value.toDisplayString(2)}</p>
      <p>To: {data.maxBorrowingPower.after.value.toDisplayString(2)}</p>
    </div>
  );
}

import {
  type SetUserSuppliesAsCollateralRequest,
  usePreview,
} from "@aave/react";

function CollateralPreview({
  request,
}: {
  request: SetUserSuppliesAsCollateralRequest;
}) {
  const { data, error, loading } = usePreview({
    action: {
      setUserSuppliesAsCollateral: request,
    },
    suspense: true,
  });

  // data: PreviewUserPosition
  return (
    <div>
      <h3>Health Factor:</h3>
      <p>From: {data.healthFactor.current?.toFixed(2) ?? "N/A"}</p>
      <p>To: {data.healthFactor.after?.toFixed(2) ?? "N/A"}</p>

      <h3>User Risk Premium:</h3>
      <p>From: {data.riskPremium.current.normalized.toFixed(2)}%</p>
      <p>To: {data.riskPremium.after.normalized.toFixed(2)}%</p>

      <h3>Net Collateral:</h3>
      <p>From: {data.netCollateral.current.value.toDisplayString(2)}</p>
      <p>To: {data.netCollateral.after.value.toDisplayString(2)}</p>

      <h3>Max Borrowing Power:</h3>
      <p>From: {data.maxBorrowingPower.current.value.toDisplayString(2)}</p>
      <p>To: {data.maxBorrowingPower.after.value.toDisplayString(2)}</p>
    </div>
  );
}

import { usePreviewAction } from "@aave/react";

// …

const [preview, { called, data, error, loading }] = usePreviewAction();

const handler = async (request: SetUserSuppliesAsCollateralRequest) => {
  const result = await preview({
    action: {
      setUserSuppliesAsCollateral: request,
    },
  });

  if (result.isOk()) {
    console.log(result.value); // PreviewUserPosition
  } else {
    console.error(result.error);
  }
};

query ($request: PreviewRequest!, $currency: Currency = USD) {
  preview(request: $request) {
    __typename
    id
    healthFactor {
      ...HealthFactorResult
    }
    netApy {
      ...PercentNumberVariation
    }
    riskPremium {
      ...PercentNumberVariation
    }
    netCollateral(currency: $currency) {
      ...ExchangeAmountVariation
    }
    netBalance(currency: $currency) {
      ...ExchangeAmountVariation
    }
    projectedEarnings {
      ...ExchangeAmountVariation
    }
    maxBorrowingPower {
      ...ExchangeAmountVariation
    }
    remainingBorrowingPower {
      ...ExchangeAmountVariation
    }
    otherConditions {
      ...UserPositionConditionVariation
    }
  }
}

fragment HealthFactorResult on HealthFactorResult {
  __typename
  ... on HealthFactorVariation {
    ...HealthFactorVariation
  }
  ... on HealthFactorError {
    ...HealthFactorError
  }
}

fragment HealthFactorVariation on HealthFactorVariation {
  __typename
  current
  after
}

fragment HealthFactorError on HealthFactorError {
  __typename
  reason
  current
  after
}

fragment UserPositionConditionVariation on UserPositionConditionVariation {
  __typename
  ... on CollateralFactorVariation {
    reserveId
    token {
      ...Erc20Token
    }
    current {
      ...PercentNumber
    }
    after {
      ...PercentNumber
    }
  }
  ... on LiquidationFeeVariation {
    reserveId
    token {
      ...Erc20Token
    }
    current {
      ...PercentNumber
    }
    after {
      ...PercentNumber
    }
  }
  ... on MaxLiquidationBonusVariation {
    reserveId
    token {
      ...Erc20Token
    }
    current {
      ...PercentNumber
    }
    after {
      ...PercentNumber
    }
  }
}

fragment PercentNumberVariation on PercentNumberVariation {
  __typename
  current {
    ...PercentNumber
  }
  after {
    ...PercentNumber
  }
}

fragment ExchangeAmountVariation on ExchangeAmountVariation {
  __typename
  current {
    ...ExchangeAmount
  }
  after {
    ...ExchangeAmount
  }
}

const request: SetUserSuppliesAsCollateralRequest = {
  sender: evmAddress("0x123…"), // User's address
  changes: [
    {
      reserve: supplyPosition.reserve.id,
      enableCollateral: true, // false to disable collateral
    },
  ],
};

const request: SetUserSuppliesAsCollateralRequest = {
  sender: evmAddress("0x123…"), // User's address
  changes: [
    {
      reserve: supplyPositions[0].reserve.id,
      enableCollateral: true,
    },
    {
      reserve: supplyPositions[1].reserve.id,
      enableCollateral: true,
    },
  ],
};

import { Currency } from "@aave/react";

const { data, error, loading } = usePreview({
  action: {
    setUserSuppliesAsCollateral: request,
  },
  currency: Currency.Eur,
});

import { Currency } from "@aave/react";

const [preview, { called, data, error, loading }] = usePreviewAction({
  currency: Currency.Eur,
});