[DASH-634] Remove framer-motion package usage

Author: MananTank

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}

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}

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}

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}

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,15 +13,13 @@ interface GuideCardProps
   title: string;
   description?: string;
   link: string;
-  index: number;
 }
 
 export const GuideCard: React.FC<GuideCardProps> = ({
   image,
   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"