Add confetti on token creation (#506)

* add confetti effect

* change confetti colours

* reposition confetti

frontend_vue/package.json

@@ -23,6 +23,7 @@
     "@vue/test-utils": "^2.4.4",
     "@vueuse/core": "^10.9.0",
     "axios": "^1.6.7",
+    "canvas-confetti": "^1.9.3",
     "eslint-config-typescript": "^3.0.0",
     "floating-vue": "^5.2.2",
     "vee-validate": "^4.12.6",

frontend_vue/src/components/ModalToken.vue

@@ -134,6 +134,7 @@ import ButtonHowToDeploy from '@/components/ui/ButtonHowToDeploy.vue';
 import { generateToken } from '@/api/main';
 import { TOKENS_TYPE } from './constants';
 import { tokenServices } from '@/utils/tokenServices';
+import { launchConfetti } from '@/utils/confettiEffect';
 
 enum ModalType {
   AddToken = 'addToken',
@@ -262,6 +263,7 @@ async function handleGenerateToken(formValues: BaseFormValuesType) {
     modalType.value = ModalType.NewToken;
     // Keep track of loaded components
     componentStack.value.push(modalType.value);
+    launchConfetti();
   } catch (err) {
     triggerSubmit.value = false;
     isGenerateTokenError.value = true;

frontend_vue/src/utils/confettiEffect.ts

@@ -0,0 +1,35 @@
+//@ts-ignore
+import confetti from 'canvas-confetti';
+
+export function launchConfetti() {
+  const confettiCanvas = document.createElement('canvas');
+  const modal = document.querySelector('.vfm__content');
+  modal?.appendChild(confettiCanvas);
+
+  Object.assign(confettiCanvas.style, {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+  });
+
+  Object.assign(confettiCanvas, {
+    with: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  const myConfetti = confetti.create(confettiCanvas, { resize: true });
+
+  myConfetti({
+    particleCount: 100,
+    spread: 160,
+    origin: { y: 0.9 },
+    colors: ['#F2059F', '#04D9B2', '#80C7F2'],
+  });
+
+  setTimeout(() => {
+    confettiCanvas.remove();
+  }, 2000);
+}