assembly/composables/useNotification.ts
Georges KABBOUCHI d2ef95e5b9 Avalanche Support
closes #23
2021-10-17 15:57:51 +03:00

190 lines
4.6 KiB
TypeScript

import { ref } from "@nuxtjs/composition-api";
import { useFormatting } from "@/composables/useFormatting";
import {
getAvalancheLink,
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 if (network === Network.Avalanche) {
href = getAvalancheLink(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 if (network === Network.Avalanche) {
href = getAvalancheLink(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
};
}