Deposit

@orderly.network/hooks provides the following hopes to facilitate the deposit process.

useChains - Retrieves the list of supported chains
useDeposit - Contains all deposit related logic

List of supported chains

useChains returns a list of chains, where each element contains the chain's config.

import { useChains } from "@orderly.network/hooks";
 
const [chains, { findByChainId }] = useChains("mainnet");

Wallet balance

It is useful to display the current wallet's balance when a user wishes to deposit. The wallet balance can be retrieve using the following two methods:

`balance`

useDeposit returns a balance field which is equal to the current token balance of the wallet (ie balance not deposited). This balance will refresh by fetching from the chain again if token changes.

import { useDeposit } from "@orderly.network/hooks";
 
export const Example = () => {
  // User chooses a token on the UI
  const [token, setToken] = useState<API.TokenInfo>();
 
  const {
    dst,
    balance, // The wallet balance of the chosen token
    allowance,
    approve,
    deposit,
    isNativeToken,
    balanceRevalidating,
    fetchBalance,
  } = useDeposit({
    address: token?.address,
    decimals: token?.decimals,
    srcToken: token?.symbol,
    srcChainId: "",
  });
 
  //...
};

Fetch balance

useDeposit also has a fetchBalance() method to get the wallet balance. This can be used in a token list, and can be used to trigger a balance fetch directly.

import { useDeposit } from "@orderly.network/hooks";
 
export const Example = () => {
  const {
    //...
    fetchBalance,
  } = useDeposit({
    //...
  });
 
  const getBalance = async () => {
    const balance = await fetchBalance(`0x...`, 6);
  };
 
  //...
};

Wallet allowance

`allowance`

The current allowance authorized by the user to be used by the Orderly smart contract. This will refresh if the token is changed.

`approve`

Call the approve function to authorize an allowance of the token that can be used by the Orderly smart contract. If the quantity is not sent, the default will be ethers.MaxUint256.

const {
  //...
  approve,
} = useDeposit({
  //...
});
 
approve("<quantity?>");

Initiate deposit

`deposit()`

Call the deposit function from the response of useDeposit to initiate a deposit.

const {
  //...
  deposit,
} = useDeposit({
  //...
});
 
const res = await deposit("<quantity>");

Deposit status

Subscribe to the relevant websocket topic to get updates on the deposit status.

import { useWS } from "@orderly.network/hooks";
 
//...
 
export const Example = () => {
  const ws = useWS();
 
  useEffect(() => {
    const unsubscribe = ws.subscribe(
      {
        id: "wallet",
        event: "subscribe",
        topic: "wallet",
        ts: Date.now(),
      },
      {
        onMessage: (data: any) => {
          //
        },
      }
    );
 
    return () => {
      unsubscribe();
    };
  }, [ws]);
};

Market Withdraw