How to use the iotex-antenna/lib/account/utils.fromRau function in iotex-antenna

const receipt =
            get(data || {}, "getReceiptByAction.receiptInfo.receipt") || {};

          // @ts-ignore
          if (receipt.__typename) {
            // @ts-ignore
            delete receipt.__typename;
          }

          const gasPrice = Number(get(action, "core.gasPrice"));
          const gasConsumed = Number(get(receipt, "gasConsumed"));

          const dataSource = buildKeyValueArray({
            ...receipt,
            actionFee: `${fromRau(`${gasConsumed * gasPrice}`, "IOTX")} IOTX`
          });

          return (
            
              
                {t("title.receipt")}

export function renderValue(text: string, record: any): JSX.Element | string {
  switch (record.key) {
    case "transferAmount":
      return `${fromRau(text || "0", "IOTX")} IOTX`;
    case "type":
      return <span>{t(`render.value.rewardType.${text}`)}</span>;
    case "amount":
      return `${fromRau(text, "IOTX")} IOTX`;

    case "balance": {
      return record.value.split(",").map((v: string, i: number) =&gt; (
        <span>
          {i === 0 ? (
            `${fromRau(String(v || 0), "IOTX")} IOTX`
          ) : (
            &lt;&gt;
              <br>
              {v}
            
          )}</span>

public renderAddressInfo = (addressInfo: AccountMeta): JSX.Element => (
    <>
      <div>
        <div>
          
        </div>
        <div>{t("address.balance")}</div>
        <div>{`${(+utils.fromRau(
          String((addressInfo &amp;&amp; addressInfo.balance) || 0),
          "IOTX"
        )).toFixed(4)} IOTX`}</div>
        {this.renderOtherTokenBalance()}
      </div>
      <div>
        <div>
          
        </div>
        <div>{t("address.nonce")}</div>
        <div>{(addressInfo &amp;&amp; addressInfo.nonce) || 0}</div>
      </div>
      <div>
        <div>
          
        </div></div>

{({ data, error, loading }: GetActionDetailsResponse) => {
        if (error) {
          notification.error({
            message: `failed to query action details by hash in ActionFeeRenderer: ${error}`
          });
        }
        if (!data || loading) {
          return null;
        }
        const { gasPrice = "0" } =
          get(data, "action.actionInfo.0.action.core") || {};
        const { gasConsumed = 0 } =
          get(data, "receipt.receiptInfo.receipt") || {};
        return `${fromRau(`${gasConsumed * Number(gasPrice)}`, "Iotx")}`;
      }}

const from = (senderPubKey && publicKeyToAddress(senderPubKey)) || undefined;

  return {
    status,
    blkHeight,
    timestamp,
    from,
    ...(execution ? { to: { execution, contractAddress } } : {}),
    ...(transfer ? { to: { transfer } } : {}),
    ...(grantReward ? { actionType: t("render.value.grantReward") } : {}),
    ...(execution ? { evmTransfer: actHash, value: execution.amount } : {}),
    ...(transfer ? { value: transfer.amount } : {}),
    fee: `${fromRau(`${gasConsumed * Number(gasPrice)}`, "Iotx")} IOTX`,
    gasLimit: Number(gasLimit).toLocaleString(),
    gasPrice: `${Number(gasPrice).toLocaleString()} (${fromRau(
      gasPrice,
      "Qev"
    )} Qev)`,
    nonce,
    ...(execution ? { data: execution.data.toString() } : {}),
    logs: removeTypeName(logs)
  };
};

render: (_: string, record: TopHolderInfo): JSX.Element | string => {
      const percentage: string = (
        (parseFloat(fromRau(record.balance, "iotx")) * 100) /
        10000000000
      ).toFixed(8);
      return `${percentage}%`;
    }
  },

const { senderPubKey }: Dict = get(data, "action.actionInfo.0.action") || {};

  const from = (senderPubKey && publicKeyToAddress(senderPubKey)) || undefined;

  return {
    status,
    blkHeight,
    timestamp,
    from,
    ...(execution ? { to: { execution, contractAddress } } : {}),
    ...(transfer ? { to: { transfer } } : {}),
    ...(grantReward ? { actionType: t("render.value.grantReward") } : {}),
    ...(execution ? { evmTransfer: actHash, value: execution.amount } : {}),
    ...(transfer ? { value: transfer.amount } : {}),
    fee: `${fromRau(`${gasConsumed * Number(gasPrice)}`, "Iotx")} IOTX`,
    gasLimit: Number(gasLimit).toLocaleString(),
    gasPrice: `${Number(gasPrice).toLocaleString()} (${fromRau(
      gasPrice,
      "Qev"
    )} Qev)`,
    nonce,
    ...(execution ? { data: execution.data.toString() } : {}),
    logs: removeTypeName(logs)
  };
};

style={{ color: colors.black80 }}
                >
                  
                    
                  
                  {t("render.key.from")}
                  
                    {from}
                  
                  {t("render.key.to")}
                  
                    {to}
                  
                  
                    {t("transfer.for", {
                      value: `${fromRau(quantity, "iotx")} (IOTX)`
                    })}
                  
                
              );
            })}

public renderBalance(): JSX.Element | null {
    const { tokenInfos, accountMeta, isLoading } = this.state;
    const { network } = this.props;
    const dataSource = Object.keys(tokenInfos)
      .map(addr => tokenInfos[addr])
      .filter(tokenInfo => tokenInfo && tokenInfo.symbol);
    const columns = this.getColumns();
    if (accountMeta) {
      dataSource.unshift({
        symbol: "IOTX",
        balanceString: new BigNumber(fromRau(accountMeta.balance, "")).toString(
          10
        ),
        tokenAddress: "",
        balance: new BigNumber(accountMeta.balance),
        decimals: new BigNumber(0),
        name: "IOTX"
      });
    }
    const spinning = isLoading || !network;
    return (