use Confetti and remove dummy code

valory-xyz · May 23, 2024 · dbbb3ae · dbbb3ae
1 parent c31ed71
commit dbbb3ae
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/frontend/common-util/Confetti.js b/frontend/common-util/Confetti.js
@@ -26,9 +26,9 @@ export const Confetti = () => {
   const fire = () => {
     makeShot(0.25, { spread: 26, startVelocity: 55 });
     makeShot(0.2, { spread: 60 });
-    makeShot(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
-    makeShot(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
-    makeShot(0.1, { spread: 120, startVelocity: 45 });
+    makeShot(0.35, { spread: 80, decay: 0.91, scalar: 0.8 });
+    makeShot(0.1, { spread: 100, startVelocity: 25, decay: 0.92, scalar: 1.2 });
+    makeShot(0.1, { spread: 100, startVelocity: 45 });
   };
 
   const getInstance = (instance) => {

diff --git a/frontend/components/Main/MainRewards.tsx b/frontend/components/Main/MainRewards.tsx
@@ -1,6 +1,6 @@
 import { Button, Col, Flex, Modal, Row, Skeleton, Tag, Typography } from 'antd';
 import Image from 'next/image';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { balanceFormat } from '@/common-util';
@@ -9,6 +9,8 @@ import { useBalance } from '@/hooks';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useReward } from '@/hooks/useReward';
 
+import { Confetti } from '../../common-util/Confetti';
+
 const { Text, Title } = Typography;
 
 const RewardsRow = styled(Row)`
@@ -79,14 +81,16 @@ const NotifyRewards = () => {
   const { totalOlasBalance } = useBalance();
   const { showNotification } = useElectronApi();
 
-  const canShowNotification = useMemo(() => {
-    const hasAlreadyNotified = false; // TODO: Implement this once state persistence is available
-
-    if (hasAlreadyNotified) return false;
-    if (!isEligibleForRewards) return false;
+  const [canShowNotification, setCanShowNotification] = useState(true);
 
-    return isEligibleForRewards && availableRewardsForEpochEther;
-  }, [isEligibleForRewards, availableRewardsForEpochEther]);
+  useEffect(() => {
+    // const hasAlreadyNotified = false; // TODO: Implement this once state persistence is available
+    // if (!isEligibleForRewards) return;
+    // if (hasAlreadyNotified) return;
+    // setCanShowNotification(
+    //   isEligibleForRewards && !!availableRewardsForEpochEther,
+    // );
+  }, [isEligibleForRewards, availableRewardsForEpochEther, showNotification]);
 
   useEffect(() => {
     if (!canShowNotification) return;
@@ -95,15 +99,17 @@ const NotifyRewards = () => {
       'Your agent earned its first staking rewards!',
       `Congratulations! Your agent just got the first reward for you! Your current balance: ${availableRewardsForEpochEther} OLAS`,
     );
-    // TODO: setter for hasAlreadyNotified
+
+    // TODO: add setter for hasAlreadyNotified
   }, [canShowNotification, availableRewardsForEpochEther, showNotification]);
 
-  // if (!canShowNotification) return null;
+  if (!canShowNotification) return null;
 
   return (
     <Modal
-      open
+      open={canShowNotification}
       width={400}
+      onCancel={() => setCanShowNotification(false)}
       footer={[
         <Button
           key="back"
@@ -120,6 +126,8 @@ const NotifyRewards = () => {
         </Button>,
       ]}
     >
+      <Confetti />
+
       <Flex align="center" justify="center">
         <Image
           src="/splash-robot-head.png"
@@ -129,7 +137,9 @@ const NotifyRewards = () => {
         />
       </Flex>
 
-      <Title level={5}>Your agent just earned the first reward!</Title>
+      <Title level={5} className="mt-12">
+        Your agent just earned the first reward!
+      </Title>
 
       <Flex vertical gap={16}>
         <Text>
@@ -161,5 +171,7 @@ export const MainRewards = () => (
 /**
  * animation
  * - https://lottiefiles.com/animations/success-icon-iY8xKnizbH
- *
+ * - https://www.npmjs.com/package/react-confetti-explosion
+ * - https://fireworks.js.org/
+ * - https://www.codewithrandom.com/2023/11/21/confetti-effects-using-css/
  */
diff --git a/frontend/styles/globals.scss b/frontend/styles/globals.scss
@@ -84,6 +84,10 @@ button, input, select, textarea, .ant-input-suffix {
   margin-bottom: auto !important;
 }
 
+.mt-12 {
+  margin-top: 12px !important;
+}
+
 .mx-auto {
   margin-left: auto !important;
   margin-right: auto !important;