From 4d89116085ad8faa0b6b6df0d34ec5f539bba50b Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 17 Dec 2024 16:41:22 +0000
Subject: [PATCH] [DASH-634] Remove framer-motion package usage (#5773)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Note: can't remove the package from package.json because chakra has peer dependency on it

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the presentation of components by removing unnecessary animations and simplifying the structure of several components, specifically in the `GuideCard`, `EventsFeed`, and `PermissionsTable`.

### Detailed summary
- Changed `guides.map` to use a more concise arrow function syntax.
- Removed `index` prop from `GuideCardProps`.
- Replaced `AnimatePresence` wrappers with simple `div` elements in `EventsFeed` and `LatestEvents`.
- Simplified animation logic in `EventsFeedItem` and `PermissionsItem` by removing motion properties and replacing them with simple list item (`li`) tags.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../[contractAddress]/events/events-feed.tsx  | 34 ++-----------------
 .../overview/components/LatestEvents.tsx      | 31 ++---------------
 .../overview/components/PermissionsTable.tsx  | 31 ++---------------
 .../landing-pages/guide-showcase.tsx          | 11 +++---
 .../product-pages/common/GuideCard.tsx        |  7 ----
 5 files changed, 14 insertions(+), 100 deletions(-)

diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx
index df418685ec5..89b6d93f4bc 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx
@@ -24,7 +24,6 @@ import {
   Switch,
   Tooltip,
 } from "@chakra-ui/react";
-import { AnimatePresence, motion } from "framer-motion";
 import { useChainSlug } from "hooks/chains/chainSlug";
 import { useClipboard } from "hooks/useClipboard";
 import { ChevronDownIcon, CircleHelpIcon, CopyIcon } from "lucide-react";
@@ -147,12 +146,7 @@ export const EventsFeed: React.FC<EventsFeedProps> = ({ contract }) => {
               </Flex>
             </div>
           )}
-          <Accordion
-            as={AnimatePresence}
-            initial={false}
-            allowMultiple
-            defaultIndex={[]}
-          >
+          <Accordion allowMultiple defaultIndex={[]}>
             {filteredEvents?.slice(0, 10).map((e) => (
               <EventsFeedItem
                 key={e.transactionHash}
@@ -196,31 +190,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
         <SimpleGrid
           columns={12}
           gap={2}
-          as={motion.li}
-          initial={{
-            y: -30,
-            opacity: 0,
-            paddingTop: 0,
-            paddingBottom: 0,
-            height: 0,
-          }}
-          animate={{
-            y: 0,
-            opacity: 1,
-            height: "auto",
-            paddingTop: "var(--chakra-space-3)",
-            paddingBottom: "var(--chakra-space-3)",
-            transition: { duration: 0.15 },
-          }}
-          exit={{
-            y: 30,
-            opacity: 0,
-            paddingTop: 0,
-            paddingBottom: 0,
-            height: 0,
-            transition: { duration: 0.3 },
-          }}
-          willChange="opacity, height, paddingTop, paddingBottom"
+          as="li"
           borderBottomWidth="1px"
           borderColor="borderColor"
           padding={4}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx
index 6a710432ed6..baf9154a65a 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx
@@ -13,7 +13,6 @@ import {
   Spinner,
   Tooltip,
 } from "@chakra-ui/react";
-import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
 import { CopyIcon } from "lucide-react";
 import { useState } from "react";
@@ -91,7 +90,7 @@ export const LatestEvents: React.FC<LatestEventsProps> = ({
               </Flex>
             </div>
           ) : null}
-          <AnimatePresence initial={false}>
+          <div>
             {allEvents?.slice(0, 3).map((e) => (
               <EventsFeedItem
                 key={e.transactionHash}
@@ -100,7 +99,7 @@ export const LatestEvents: React.FC<LatestEventsProps> = ({
                 chainSlug={chainSlug}
               />
             ))}
-          </AnimatePresence>
+          </div>
         </List>
       </Card>
     </Flex>
@@ -126,31 +125,7 @@ const EventsFeedItem: React.FC<EventsFeedItemProps> = ({
       <SimpleGrid
         columns={9}
         gap={2}
-        as={motion.li}
-        initial={{
-          y: -30,
-          opacity: 0,
-          paddingTop: 0,
-          paddingBottom: 0,
-          height: 0,
-        }}
-        animate={{
-          y: 0,
-          opacity: 1,
-          height: "auto",
-          paddingTop: "var(--chakra-space-3)",
-          paddingBottom: "var(--chakra-space-3)",
-          transition: { duration: 0.15 },
-        }}
-        exit={{
-          y: 30,
-          opacity: 0,
-          paddingTop: 0,
-          paddingBottom: 0,
-          height: 0,
-          transition: { duration: 0.3 },
-        }}
-        willChange="opacity, height, paddingTop, paddingBottom"
+        as="li"
         borderBottomWidth="1px"
         borderColor="borderColor"
         padding={4}
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx
index 8ee0f7fcd7f..1725170816d 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx
@@ -3,7 +3,6 @@
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { Box, Flex, List, SimpleGrid, Tag } from "@chakra-ui/react";
 import { getAllRoleMembers } from "contract-ui/hooks/permissions";
-import { AnimatePresence, motion } from "framer-motion";
 import { useClipboard } from "hooks/useClipboard";
 import { CopyIcon } from "lucide-react";
 import { useMemo } from "react";
@@ -100,11 +99,11 @@ export const PermissionsTable: React.FC<PermissionsTableProps> = ({
                 </Flex>
               </div>
             )}
-            <AnimatePresence initial={false}>
+            <div>
               {members.map((e) => (
                 <PermissionsItem key={e.member} data={e} />
               ))}
-            </AnimatePresence>
+            </div>
           </List>
         </Card>
       )}
@@ -124,31 +123,7 @@ const PermissionsItem: React.FC<PermissionsItemProps> = ({ data }) => {
       <SimpleGrid
         columns={9}
         gap={2}
-        as={motion.li}
-        initial={{
-          y: -30,
-          opacity: 0,
-          paddingTop: 0,
-          paddingBottom: 0,
-          height: 0,
-        }}
-        animate={{
-          y: 0,
-          opacity: 1,
-          height: "auto",
-          paddingTop: "var(--chakra-space-3)",
-          paddingBottom: "var(--chakra-space-3)",
-          transition: { duration: 0.15 },
-        }}
-        exit={{
-          y: 30,
-          opacity: 0,
-          paddingTop: 0,
-          paddingBottom: 0,
-          height: 0,
-          transition: { duration: 0.3 },
-        }}
-        willChange="opacity, height, paddingTop, paddingBottom"
+        as="li"
         borderBottomWidth="1px"
         borderColor="borderColor"
         padding={4}
diff --git a/apps/dashboard/src/components/landing-pages/guide-showcase.tsx b/apps/dashboard/src/components/landing-pages/guide-showcase.tsx
index 591701f3019..336539e4b2b 100644
--- a/apps/dashboard/src/components/landing-pages/guide-showcase.tsx
+++ b/apps/dashboard/src/components/landing-pages/guide-showcase.tsx
@@ -56,17 +56,18 @@ export const LandingGuidesShowcase: React.FC<LandingGuidesShowcaseProps> = ({
           justifyContent={guides.length <= 2 ? "center" : undefined}
         >
           {guides.map(
-            (
-              { title: guideTitle, description: guideDescription, image, link },
-              idx,
-            ) => (
+            ({
+              title: guideTitle,
+              description: guideDescription,
+              image,
+              link,
+            }) => (
               <GuideCard
                 category={category}
                 label="guide"
                 trackingProps={{
                   guide: guideTitle.replaceAll(" ", "_").toLowerCase(),
                 }}
-                index={idx}
                 key={guideTitle}
                 image={image}
                 title={guideTitle}
diff --git a/apps/dashboard/src/components/product-pages/common/GuideCard.tsx b/apps/dashboard/src/components/product-pages/common/GuideCard.tsx
index 677a2db0b4e..a67090c3115 100644
--- a/apps/dashboard/src/components/product-pages/common/GuideCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/GuideCard.tsx
@@ -1,5 +1,4 @@
 import { Box, Flex } from "@chakra-ui/react";
-import { motion } from "framer-motion";
 import NextImage from "next/image";
 import {
   Heading,
@@ -14,7 +13,6 @@ interface GuideCardProps
   title: string;
   description?: string;
   link: string;
-  index: number;
 }
 
 export const GuideCard: React.FC<GuideCardProps> = ({
@@ -22,7 +20,6 @@ export const GuideCard: React.FC<GuideCardProps> = ({
   title,
   description,
   link,
-  index,
   category,
   label,
   trackingProps,
@@ -37,10 +34,6 @@ export const GuideCard: React.FC<GuideCardProps> = ({
       textDecor="none !important"
     >
       <Flex
-        initial={{ opacity: 0, y: -10 }}
-        animate={{ opacity: 1, y: 0, transition: { delay: index / 20 } }}
-        exit={{ opacity: 0, y: -10, transition: { delay: index / 20 } }}
-        as={motion.div}
         willChange="opacity"
         h="full"
         direction="column"