How to use the @zilliqa-js/util.units.fromQa function in @zilliqa-js/util

text={''}
                before={}
                onClick={run}
                disabled={isPending}
                className="mb-1 py-0 px-1"
              />
            
            {isPending ? (
              <div data-testid="container-loading">
                <small>Loading...</small>
              </div>
            ) : error ? (
              <div data-testid="container-error">{`Something went wrong: ${error.message}`}</div>
            ) : data ? (
              <div data-testid="container-data">
                <small>{`${units.fromQa(new BN(data as string), units.Units.Zil)} ZIL`}</small>
              </div>
            ) : (
              <div data-testid="container-no-data">No data</div>
            )}
          
        
      
    
  );
};

const [toAddress, setToAddress] = useState('');
  const [toAddressValid, setToAddressValid] = useState(false);
  const [toAddressInvalid, setToAddressInvalid] = useState(false);
  const [amount, setAmount] = useState('');

  const minGasProps = useAsyncFn({ promiseFn: getMinGasPrice });
  const minGasPriceInQa = minGasProps.data as string;
  const isUpdatingMinGasPrice = minGasProps.isPending;

  const minGasPriceInZil: string = units.fromQa(new BN(minGasPriceInQa), units.Units.Zil);

  const balanceProps = useAsyncFn({ promiseFn: getBalance });
  const balanceInQa = balanceProps.data as string;
  const isUpdatingBalance = balanceProps.isPending;

  const balanceInZil: string = units.fromQa(new BN(balanceInQa), units.Units.Zil);

  const mutationProps = useAsyncFn({
    deferFn: send
  });

  const confirm = () => {
    setIsDraft(true);
    setHasRun(false);
    setToAddress('');
    setToAddressValid(false);
    setToAddressInvalid(false);
    setAmount('');
  };

  const changeToAddress = (e: React.ChangeEvent): void => {
    e.preventDefault();

mounted() {
    this.upadteAllState();
    this.gasPrice = units.fromQa(
      new BN(this.CONFIRM_TX.gasPrice),
      units.Units.Li
    ).toString();
    this.gasLimit = this.CONFIRM_TX.gasLimit;
  }
}

export function fromZil(value, isRound=false) {
  const amount = units.fromQa(new BN(value), units.Units.Zil);
  if (isRound) {
    return Math.round(+amount * 1000) / 1000;
  } else {
    return amount;
  }
}

const SendForm = ({ send, getBalance, getMinGasPrice }) => {
  const [hasRun, setHasRun] = useState(false);
  const [isDraft, setIsDraft] = useState(true);
  const [toAddress, setToAddress] = useState('');
  const [toAddressValid, setToAddressValid] = useState(false);
  const [toAddressInvalid, setToAddressInvalid] = useState(false);
  const [amount, setAmount] = useState('');

  const minGasProps = useAsyncFn({ promiseFn: getMinGasPrice });
  const minGasPriceInQa = minGasProps.data as string;
  const isUpdatingMinGasPrice = minGasProps.isPending;

  const minGasPriceInZil: string = units.fromQa(new BN(minGasPriceInQa), units.Units.Zil);

  const balanceProps = useAsyncFn({ promiseFn: getBalance });
  const balanceInQa = balanceProps.data as string;
  const isUpdatingBalance = balanceProps.isPending;

  const balanceInZil: string = units.fromQa(new BN(balanceInQa), units.Units.Zil);

  const mutationProps = useAsyncFn({
    deferFn: send
  });

  const confirm = () => {
    setIsDraft(true);
    setHasRun(false);
    setToAddress('');
    setToAddressValid(false);

export const formatSendAmountInZil = (
  amountInZil: string,
  balanceInZil: string,
  minGasPriceInZil: string
): string => {
  const amountInQaBN: BN = units.toQa(amountInZil, units.Units.Zil);
  const balanceInQaBN: BN = units.toQa(balanceInZil, units.Units.Zil);
  const minGasPriceInQaBN: BN = units.toQa(minGasPriceInZil, units.Units.Zil);

  const maxAmountInQaBN = balanceInQaBN.sub(minGasPriceInQaBN);

  if (amountInQaBN.lte(minGasPriceInQaBN)) {
    return units.fromQa(minGasPriceInQaBN, units.Units.Zil).toString();
  } else if (amountInQaBN.gt(maxAmountInQaBN)) {
    return units.fromQa(maxAmountInQaBN, units.Units.Zil).toString();
  } else {
    return units.fromQa(amountInQaBN, units.Units.Zil).toString();
  }
};

export const formatSendAmountInZil = (
  amountInZil: string,
  balanceInZil: string,
  minGasPriceInZil: string
): string => {
  const amountInQaBN: BN = units.toQa(amountInZil, units.Units.Zil);
  const balanceInQaBN: BN = units.toQa(balanceInZil, units.Units.Zil);
  const minGasPriceInQaBN: BN = units.toQa(minGasPriceInZil, units.Units.Zil);

  const maxAmountInQaBN = balanceInQaBN.sub(minGasPriceInQaBN);

  if (amountInQaBN.lte(minGasPriceInQaBN)) {
    return units.fromQa(minGasPriceInQaBN, units.Units.Zil).toString();
  } else if (amountInQaBN.gt(maxAmountInQaBN)) {
    return units.fromQa(maxAmountInQaBN, units.Units.Zil).toString();
  } else {
    return units.fromQa(amountInQaBN, units.Units.Zil).toString();
  }
};

amountInZil: string,
  balanceInZil: string,
  minGasPriceInZil: string
): string => {
  const amountInQaBN: BN = units.toQa(amountInZil, units.Units.Zil);
  const balanceInQaBN: BN = units.toQa(balanceInZil, units.Units.Zil);
  const minGasPriceInQaBN: BN = units.toQa(minGasPriceInZil, units.Units.Zil);

  const maxAmountInQaBN = balanceInQaBN.sub(minGasPriceInQaBN);

  if (amountInQaBN.lte(minGasPriceInQaBN)) {
    return units.fromQa(minGasPriceInQaBN, units.Units.Zil).toString();
  } else if (amountInQaBN.gt(maxAmountInQaBN)) {
    return units.fromQa(maxAmountInQaBN, units.Units.Zil).toString();
  } else {
    return units.fromQa(amountInQaBN, units.Units.Zil).toString();
  }
};