assembly/composables/useNotification.ts

import { ref } from "@nuxtjs/composition-api";
import { useFormatting } from "@/composables/useFormatting";
import {
  getArbitrumLink,
  getEtherscanLink,
  getMaticLink,
  getTenderlyLink
} from "./useLink";
import { useRandom } from "./useRandom";
import { Network, activeNetworkId } from "./useNetwork";
const { makeid } = useRandom();

const queue = ref([]);

export function useNotification() {
  const { shortenHash } = useFormatting();

  function close(key) {
    queue.value = queue.value.filter(item => item.key !== key);
  }

  function closeAll() {
    queue.value.forEach((item, index) => {
      setTimeout(() => {
        queue.value.shift();
      }, index * 150);
    });
  }

  function closeAwaiting(title, success = true, key) {
    const found = queue.value.find(item => item.key === key);
    if (!found) return;

    if (success) {
      found.icon = "success";
      found.title = title;
    } else {
      found.icon = "error";
      found.title = title;
    }

    setTimeout(() => {
      close(key);
    }, 2000);
  }

  /**
   * Ques a notification to show to the user.
   *
   * @param {string} params.icon Icon of notification
   * @param {string} params.title Title of notification
   * @param {string} params.body Body text of notification
   * @param {string} params.href Link of notification body
   * @param {number} params.duration  Duration in ms. 0 for no timeout
   * @param {string} params.key key for notification identification
   */
  function show(params) {
    if (params) {
      if (!params.key) params.key = makeid(10);
      queue.value.push(params);
    }
  }

  function showError(title, body, href) {
    show({ icon: "error", title, body, href, duration: 0 });
  }

  function showWarning(title, body = "") {
    show({ icon: "warning", title, body, duration: 0 });
  }

  function showNotImplemented() {
    show({
      icon: "warning",
      title: "Not implemented",
      body: "This feature is not yet implemented."
    });
  }

  function showSuccess(title, body) {
    show({ icon: "success", title, body, duration: 5000 });
  }

  function showInfo(title, body) {
    show({ icon: "info", title, body, duration: 7000 });
  }

  function showAwaiting(title, body) {
    const key = makeid(10);
    show({ icon: "spinner", title, body, duration: 0, key });
    return key;
  }

  function showPendingTransaction(transactionHash, network?: Network) {
    network = network || activeNetworkId.value;

    let href;
    if (network === Network.Polygon) {
      href = getMaticLink(transactionHash);
    }else if (network === Network.Arbitrum) {
      href = getArbitrumLink(transactionHash);
    } else {
      href = getEtherscanLink(transactionHash);
    }
    const body = shortenHash(transactionHash);

    show({
      icon: "pending-transaction",
      title: "Pending transaction",
      href,
      body,
      duration: 0,
      key: transactionHash
    });
  }

  function showConfirmedTransaction(transactionHash, network?: Network) {
    network = network || activeNetworkId.value;

    let href;
    if (network === Network.Polygon) {
      href = getMaticLink(transactionHash);
    } else if (network === Network.Arbitrum) {
      href = getArbitrumLink(transactionHash);
    } else {
      href = getEtherscanLink(transactionHash);
    }
    const body = shortenHash(transactionHash);

    const found = queue.value.find(item => item.key === transactionHash);
    if (found) {
      found.icon = "success";
      found.title = "Transaction Confirmed";
      found.href = href;
      found.body = body;
    } else {
      show({
        icon: "success",
        title: "Transaction Confirmed",
        href,
        body,
        duration: 0
      });
    }
  }

  function showConfirmedSimulation(transactionId) {
    const href = getTenderlyLink(transactionId);
    const body = shortenHash(transactionId);

    show({
      icon: "success",
      title: "Successfully Simulated",
      href,
      body,
      duration: 5000
    });
  }

  function showLoggedIn(title, body) {
    show({ icon: "logged-in", title, body, duration: 2000 });
  }
  function showLoggedOut(title, body) {
    show({ icon: "logged-out", title, body, duration: 2000 });
  }

  return {
    queue,
    close,
    closeAwaiting,
    showError,
    showWarning,
    showNotImplemented,
    showSuccess,
    showInfo,
    showPendingTransaction,
    showConfirmedTransaction,
    showConfirmedSimulation,
    showLoggedIn,
    showLoggedOut,
    showAwaiting,
    closeAll
  };
}