refactor: ReceivedEther to tailwind

Author: wackerow

src/components/Simulator/screens/SendReceive/ReceivedEther.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { AnimatePresence, motion } from "framer-motion"
 import { MdClose, MdInfo } from "react-icons/md"
-import { Flex, Icon, Text } from "@chakra-ui/react"
 
 import type { SimulatorNavProps } from "@/lib/types"
 
@@ -85,32 +84,20 @@ export const ReceivedEther = ({
       />
       <AnimatePresence>
         {showToast && !hidden && (
-          <Flex
+          <motion.div
             key="toast"
-            position="absolute"
-            inset={4}
-            top="auto"
-            bottom={32}
-            borderRadius="base"
-            h="fit-content"
-            bg="primary300"
-            gap={3}
-            fontSize="md"
-            align="center"
-            p={4}
-            color="background.base"
-            as={motion.div}
+            className="absolute inset-4 bottom-32 top-auto flex h-fit items-center gap-3 rounded bg-primary-high-contrast p-4 text-md text-background"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
           >
-            <Icon as={MdInfo} fontSize="xl" />
-            <Text m={0} fontWeight="bold" fontSize="xs">
+            <MdInfo className="text-xl" />
+            <p className="m-0 text-xs font-bold">
               You received {displayEth} ETH ({displayUsd})
               {sender ? ` from ${sender}` : ""}!
-            </Text>
-            <Icon as={MdClose} fontSize="xl" onClick={() => setHidden(true)} />
-          </Flex>
+            </p>
+            <MdClose className="text-xl" onClick={() => setHidden(true)} />
+          </motion.div>
         )}
       </AnimatePresence>
     </motion.div>