Merge pull request #634 from valory-xyz/mohan/animations-earned-tag

feat: animations setup and animate “Earned” tag
valory-xyz · Dec 30, 2024 · 4f208fa · 4f208fa
2 parents 83f6b9d + 294d376
commit 4f208fa
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 41 deletions.
diff --git a/.gitignore b/.gitignore
@@ -46,4 +46,7 @@ leak_report
 /electron/bins/
 
 # logs
-*.log
+*.log
+
+# custom script for development
+custom-script.sh
diff --git a/frontend/components/MainPage/sections/RewardsSection/index.tsx b/frontend/components/MainPage/sections/RewardsSection/index.tsx
@@ -1,5 +1,7 @@
 import { Flex, Skeleton, Tag, Typography } from 'antd';
+import { AnimatePresence, HTMLMotionProps, motion } from 'framer-motion';
 import { useMemo } from 'react';
+import styled from 'styled-components';
 
 import { NA } from '@/constants/symbols';
 import { useBalanceContext } from '@/hooks/useBalanceContext';
@@ -14,34 +16,64 @@ import { StakingRewardsThisEpoch } from './StakingRewardsThisEpoch';
 
 const { Text } = Typography;
 
+// Common motion props for the earned tag
+const commonMotionProps: HTMLMotionProps<'div'> = {
+  initial: 'initial',
+  animate: 'animate',
+  exit: 'exit',
+  variants: {
+    initial: { y: 10, opacity: 0 },
+    animate: { y: 0, opacity: 1, transition: { duration: 0.5 } },
+    exit: {
+      y: -10,
+      opacity: 0,
+      transition: { duration: 0.5 },
+    },
+  },
+  style: { position: 'absolute' },
+};
+
+const EarnedTagContainer = styled.div`
+  position: relative;
+  top: -14px;
+`;
+
 const Loader = () => (
   <Flex vertical gap={8}>
     <Skeleton.Button active size="small" style={{ width: 92 }} />
     <Skeleton.Button active size="small" style={{ width: 92 }} />
   </Flex>
 );
 
-const getFormattedReward = (reward: number | undefined) =>
-  reward === undefined ? NA : `~${balanceFormat(reward, 2)}`;
-
 const DisplayRewards = () => {
   const {
-    availableRewardsForEpochEth,
+    availableRewardsForEpochEth: reward,
     isEligibleForRewards,
     isStakingRewardsDetailsLoading,
     isStakingRewardsDetailsError,
   } = useReward();
   const { isLoaded: isBalancesLoaded } = useBalanceContext();
-  const reward = getFormattedReward(availableRewardsForEpochEth);
+  const formattedReward =
+    reward === undefined ? NA : `~${balanceFormat(reward, 2)}`;
 
   const earnedTag = useMemo(() => {
     if (isStakingRewardsDetailsLoading && !isStakingRewardsDetailsError) {
       return <Skeleton.Input size="small" />;
     }
-    if (isEligibleForRewards) {
-      return <Tag color="success">Earned</Tag>;
-    }
-    return <Tag color="processing">Not yet earned</Tag>;
+
+    return (
+      <AnimatePresence>
+        {isEligibleForRewards ? (
+          <motion.div key="earned" {...commonMotionProps}>
+            <Tag color="success">Earned</Tag>
+          </motion.div>
+        ) : (
+          <motion.div key="not-earned" {...commonMotionProps}>
+            <Tag color="processing">Not yet earned</Tag>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    );
   }, [
     isEligibleForRewards,
     isStakingRewardsDetailsLoading,
@@ -53,8 +85,10 @@ const DisplayRewards = () => {
       <StakingRewardsThisEpoch />
       {isBalancesLoaded ? (
         <Flex align="center" gap={12}>
-          <Text className="text-xl font-weight-600">{reward} OLAS&nbsp;</Text>
-          {earnedTag}
+          <Text className="text-xl font-weight-600">
+            {formattedReward} OLAS&nbsp;
+          </Text>
+          <EarnedTagContainer>{earnedTag}</EarnedTagContainer>
         </Flex>
       ) : (
         <Loader />
@@ -63,6 +97,9 @@ const DisplayRewards = () => {
   );
 };
 
+/**
+ * Rewards (Earned OLAS and Tag) including the rewards modal.
+ */
 export const RewardsSection = () => {
   const isRewardsStreakEnabled = useFeatureFlag('rewards-streak');
 

diff --git a/frontend/package.json b/frontend/package.json
@@ -9,6 +9,7 @@
     "axios": "^1.7.7",
     "ethers": "5.7.2",
     "ethers-multicall": "^0.2.3",
+    "framer-motion": "^11.15.0",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "lodash": "^4.17.21",

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -3261,6 +3261,15 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+framer-motion@^11.15.0:
+  version "11.15.0"
+  resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz#93e5d1839d500ba9cab1d617959a36142a61212b"
+  integrity sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==
+  dependencies:
+    motion-dom "^11.14.3"
+    motion-utils "^11.14.3"
+    tslib "^2.4.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
@@ -4589,6 +4598,16 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.1.tgz"
   integrity sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==
 
+motion-dom@^11.14.3:
+  version "11.14.3"
+  resolved "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz#725c72c0f1d0b632e42fdd8d13b69ecf9fe202c0"
+  integrity sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==
+
+motion-utils@^11.14.3:
+  version "11.14.3"
+  resolved "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz#cd4a413463739498411f82abb67b3dd58768b0f8"
+  integrity sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==
+
 [email protected]:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "electron-updater": "^6.1.8",
     "ethers": "5.7.2",
     "ethers-multicall": "^0.2.3",
+    "framer-motion": "^11.15.0",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "lodash": "^4.17.21",
@@ -79,4 +80,4 @@
     "yarn": ">=1.22.0",
     "npm": "please-use-yarn"
   }
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -3110,6 +3110,15 @@ fp-ts@^1.0.0:
   resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-1.19.5.tgz#3da865e585dfa1fdfd51785417357ac50afc520a"
   integrity sha512-wDNqTimnzs8QqpldiId9OavWK2NptormjXnRJTQecNjzwfyp6P/8s/zG8e4h3ja3oqkKaY72UlTjQYt/1yXf9A==
 
+framer-motion@^11.15.0:
+  version "11.15.0"
+  resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz#93e5d1839d500ba9cab1d617959a36142a61212b"
+  integrity sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==
+  dependencies:
+    motion-dom "^11.14.3"
+    motion-utils "^11.14.3"
+    tslib "^2.4.0"
+
 from@~0:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
@@ -4324,6 +4333,16 @@ module-error@^1.0.1, module-error@^1.0.2:
   resolved "https://registry.yarnpkg.com/module-error/-/module-error-1.0.2.tgz#8d1a48897ca883f47a45816d4fb3e3c6ba404d86"
   integrity sha512-0yuvsqSCv8LbaOKhnsQ/T5JhyFlCYLPXK3U2sgV10zoKQwzs/MyfuQUOZQ1V/6OCOJsK/TRgNVrPuPDqtdMFtA==
 
+motion-dom@^11.14.3:
+  version "11.14.3"
+  resolved "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz#725c72c0f1d0b632e42fdd8d13b69ecf9fe202c0"
+  integrity sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==
+
+motion-utils@^11.14.3:
+  version "11.14.3"
+  resolved "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz#cd4a413463739498411f82abb67b3dd58768b0f8"
+  integrity sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==
+
 [email protected]:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -5675,16 +5694,7 @@ string-convert@^0.2.0:
   resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
   integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5709,14 +5719,7 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -6175,16 +6178,7 @@ workerpool@^6.5.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544"
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==