Make all toasts compatible (#1153)

* make toasts at top with icon, remove green color

* add meaningful message

* remove exclamation mark

* remove black color

* update colors

* add custom toast

* add pr comments

* update timeout

* make colors more simple

* move colors outside method

* update icon position

packages/playground/src/components/custom_toast.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { createToast, type ToastOptions } from "mosha-vue-toastify";
+
+export enum ToastType {
+  danger = "danger",
+  default = "default",
+  info = "info",
+  success = "success",
+  warning = "warning",
+}
+
+const colors = {
+  danger: "#FF5252",
+  default: "#313131",
+  info: "#2196F3",
+  success: "#1AA18F",
+  warning: "#FFCC00",
+};
+
+export function createCustomToast(content: string, type: ToastType) {
+  const toastOptions: ToastOptions = {
+    hideProgressBar: true,
+    position: "top-right",
+    timeout: 5000,
+    showIcon: true,
+    type,
+    toastBackgroundColor: colors[type],
+  };
+
+  createToast(content, toastOptions);
+}
+</script>
+
+<style>
+.mosha__toast__content-wrapper {
+  margin-bottom: -2px;
+}
+.mosha__icon {
+  margin-right: 6px !important;
+  margin-top: 2px;
+}
+
+.mosha__toast__content__text {
+  font-size: 14px !important;
+}
+</style>

packages/playground/src/components/deposit_dialog.vue

@@ -57,13 +57,13 @@
 
 <script setup lang="ts">
 import { Decimal } from "decimal.js";
-import { createToast } from "mosha-vue-toastify";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import QrcodeGenerator from "../components/qrcode_generator.vue";
 import { useProfileManager } from "../stores";
 import { getGrid } from "../utils/grid";
+import { createCustomToast, ToastType } from "./custom_toast.vue";
 
 const depositDialog = ref(false);
 const emits = defineEmits(["close"]);
@@ -107,27 +107,13 @@ onMounted(async () => {
     if (destroyed) return;
     const DecimalDeposit = new Decimal(receivedDeposit);
     const divisor = new Decimal(10000000);
-    createToast(`You have received ${DecimalDeposit.dividedBy(divisor)} TFT`, {
-      position: "bottom-right",
-      hideProgressBar: true,
-      toastBackgroundColor: "black",
-      timeout: 5000,
-      showIcon: true,
-      type: "success",
-    });
+    createCustomToast(`You have received ${DecimalDeposit.dividedBy(divisor)} TFT`, ToastType.success);
     await ProfileManagerController.reloadBalance();
     closeDialog();
   } catch (e) {
     if (destroyed) return;
     console.log(e);
-    createToast(e as string, {
-      position: "bottom-right",
-      hideProgressBar: true,
-      toastBackgroundColor: "red",
-      timeout: 5000,
-      showIcon: true,
-      type: "danger",
-    });
+    createCustomToast(e as string, ToastType.danger);
     closeDialog();
   }
 });

packages/playground/src/components/funds_card.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script lang="ts">
-import { createToast } from "mosha-vue-toastify";
 import { ref } from "vue";
 
+import { createCustomToast, ToastType } from "../components/custom_toast.vue";
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useProfileManager } from "../stores";
 import { getGrid } from "../utils/grid";
@@ -36,25 +36,11 @@ export default {
           await grid?.balance.getMoreFunds();
           await ProfileManagerController.reloadBalance();
           loadingAddTFT.value = false;
-          createToast(`Success!`, {
-            position: "bottom-right",
-            hideProgressBar: true,
-            toastBackgroundColor: "#1aa18f",
-            timeout: 5000,
-            type: "success",
-            showIcon: true,
-          });
+          createCustomToast("Success! You have received TFTs.", ToastType.success);
         } catch (e) {
           loadingAddTFT.value = false;
           console.log("Error: ", e);
-          createToast(`Get more TFT failed!`, {
-            position: "bottom-right",
-            hideProgressBar: true,
-            toastBackgroundColor: "black",
-            timeout: 5000,
-            type: "danger",
-            showIcon: true,
-          });
+          createCustomToast("Get more TFT failed!", ToastType.danger);
         }
       }
     };

packages/playground/src/components/tf_notification.vue

@@ -6,12 +6,12 @@
 import "mosha-vue-toastify/dist/style.css";
 
 import { ContractStates } from "@threefold/grid_client";
-import { createToast } from "mosha-vue-toastify";
 import { onMounted } from "vue";
 import { ref } from "vue";
 
 import { useProfileManager } from "../stores";
 import { getGrid } from "../utils/grid";
+import { createCustomToast, ToastType } from "./custom_toast.vue";
 
 const profileManager = useProfileManager();
 const contractsCount = ref(0);
@@ -28,12 +28,7 @@ onMounted(async () => {
     ) {
       contractsCount.value =
         contracts.nameContracts.length + contracts.nodeContracts.length + contracts.rentContracts.length;
-      createToast("You have " + contractsCount.value + " contracts in grace period", {
-        position: "top-right",
-        hideProgressBar: true,
-        toastBackgroundColor: "red",
-        timeout: 5000,
-      });
+      createCustomToast("You have " + contractsCount.value + " contracts in grace period", ToastType.warning);
     }
     await new Promise(resolve => setTimeout(resolve, 15 * 60 * 1000));
   }

packages/playground/src/portal/bridge_view.vue

@@ -92,10 +92,10 @@
 </template>
 
 <script lang="ts" setup>
-import { createToast } from "mosha-vue-toastify";
 import { default as StellarSdk, StrKey } from "stellar-sdk";
 import { onMounted, ref } from "vue";
 
+import { createCustomToast, ToastType } from "../components/custom_toast.vue";
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useProfileManager } from "../stores";
 import { getGrid, loadBalance } from "../utils/grid";
@@ -206,28 +206,14 @@ async function withdrawTFT(targetAddress: string, withdrawAmount: number) {
     amount.value = 0;
     loadingWithdraw.value = false;
     await ProfileManagerController.reloadBalance();
-    createToast("Transaction Succeeded", {
-      position: "bottom-right",
-      hideProgressBar: true,
-      toastBackgroundColor: "black",
-      timeout: 5000,
-      showIcon: true,
-      type: "success",
-    });
+    createCustomToast("Transaction Succeeded", ToastType.success);
   } catch (e) {
     console.log("Error withdrawing, Error: ", e);
     openWithdrawDialog.value = false;
     target.value = "";
     amount.value = 0;
     loadingWithdraw.value = false;
-    createToast("Withdraw Failed!", {
-      position: "bottom-right",
-      hideProgressBar: true,
-      toastBackgroundColor: "red",
-      timeout: 5000,
-      showIcon: true,
-      type: "danger",
-    });
+    createCustomToast("Withdraw Failed!", ToastType.danger);
   }
 }
 </script>

packages/playground/src/portal/transfer_view.vue

@@ -119,9 +119,10 @@
 <script lang="ts" setup>
 import { Keyring } from "@polkadot/keyring";
 import type { Twin } from "@threefold/tfchain_client";
-import { createToast } from "mosha-vue-toastify";
 import { onMounted, ref } from "vue";
 
+import { createCustomToast, ToastType } from "@/components/custom_toast.vue";
+
 import { useProfileManagerController } from "../components/profile_manager_controller.vue";
 import { useProfileManager } from "../stores";
 import { getGrid, loadBalance } from "../utils/grid";
@@ -208,12 +209,7 @@ async function transfer(receipientTwin: Twin) {
   try {
     if (grid) {
       await grid.balance.transfer({ address: receipientTwin.accountId, amount: transferAmount.value });
-      createToast("Transaction Complete!", {
-        position: "top-right",
-        hideProgressBar: true,
-        toastBackgroundColor: "green",
-        timeout: 5000,
-      });
+      createCustomToast("Transaction Complete!", ToastType.success);
       profileManagerController.reloadBalance();
       await getFreeBalance();
     }
@@ -227,12 +223,7 @@ async function submitFormAddress() {
   loadingAddressTransfer.value = false;
 }
 function createInvalidTransferToast(message: string) {
-  createToast(message, {
-    position: "top-right",
-    hideProgressBar: true,
-    toastBackgroundColor: "red",
-    timeout: 5000,
-  });
+  createCustomToast(message, ToastType.danger);
 }
 async function submitFormTwinID() {
   const grid = await getGrid(profile.value);