npm install @permissionless-technologies/upd-sdk

import { UPDProvider } from '@permissionless-technologies/upd-sdk/react'

function App() {
  return (
    <UPDProvider chainId={1}>
      <YourApp />
    </UPDProvider>
  )
}

import { useUPD } from '@permissionless-technologies/upd-sdk/react'
import { formatUnits, parseUnits } from 'viem'

function UPDBalance() {
  const { balance, isLoading, mint, burn } = useUPD()

  if (isLoading) return <div>Loading...</div>

  return (
    <div>
      <p>UPD Balance: {formatUnits(balance, 18)} UPD</p>
      <button onClick={() => mint({ ethAmount: parseEther('1') })}>
        Mint 1 ETH worth of UPD
      </button>
    </div>
  )
}

import { useCollateral } from '@permissionless-technologies/upd-sdk/react'

function SystemHealth() {
  const { ratio, totalCollateral, totalSupply, ethPrice } = useCollateral()

  return (
    <div>
      <p>Collateralization: {(Number(ratio) / 100).toFixed(1)}%</p>
      <p>Total UPD supply: {formatUnits(totalSupply, 18)} UPD</p>
      <p>ETH price: ${(Number(ethPrice) / 1e18).toFixed(2)}</p>
    </div>
  )
}

import { useStabilizer } from '@permissionless-technologies/upd-sdk/react'

function MyStabilizer({ tokenId }: { tokenId: bigint }) {
  const { position, isLoading, depositCollateral, withdrawCollateral } = useStabilizer(tokenId)

  if (isLoading) return <div>Loading...</div>

  return (
    <div>
      <p>Allocated stETH: {formatUnits(position.allocatedStEth, 18)}</p>
      <p>UPD backed: {formatUnits(position.updBacked, 18)}</p>
      <p>Utilization: {position.utilization.toString()}%</p>
    </div>
  )
}