Merge pull request #1 from fakepixels/edits

Add animation
fakepixels · Oct 3, 2024 · 3e9243c · 3e9243c
2 parents a171a21 + 5d00fc2
commit 3e9243c
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,13 +18,14 @@
   },
   "dependencies": {
     "@coinbase/onchainkit": "^0.32.0",
-    "framer-motion": "^11.9.0",
+    "framer-motion": "^11.10.0",
     "lucide": "^0.447.0",
     "lucide-react": "^0.447.0",
     "next": "^14.2.5",
     "permissionless": "^0.1.26",
     "react": "^18",
     "react-dom": "^18",
+    "shimmer-css": "^1.0.1",
     "siwe": "^2.3.2"
   },
   "devDependencies": {

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -7,6 +7,7 @@ import {
   ONCHAINKIT_LINK,
   TWITTER_LINK,
 } from 'src/links';
+import { motion } from 'framer-motion'; // Import motion from framer-motion
 import ArrowSvg from 'src/svg/ArrowSvg';
 
 const docLinks = [
@@ -37,16 +38,18 @@ export default function Footer() {
       <ul className="mt-4 flex max-w-full flex-col flex-wrap justify-center gap-3 md:mt-0 md:flex-row md:justify-start md:gap-6">
         {docLinks.map(({ href, title }) => (
           <li className="flex" key={href}>
-            <a
+            <motion.a
               href={href}
               target="_blank"
               rel="noreferrer"
               title={title}
-              className="flex items-center gap-1 hover:text-indigo-600" // Added hover effect
+              className="flex items-center gap-1 hover:text-indigo-600"
+              whileHover={{ y: -5 }} // Move up slightly on hover
+              transition={{ type: 'spring', stiffness: 300 }} // Add bounciness
             >
               <p>{title}</p>
               <ArrowSvg />
-            </a>
+            </motion.a>
           </li>
         ))}
       </ul>

diff --git a/src/components/IdentityWrapper.tsx b/src/components/IdentityWrapper.tsx
@@ -2,12 +2,13 @@
 
 import { Avatar, Name } from '@coinbase/onchainkit/identity';
 import { getName } from '@coinbase/onchainkit/identity';
-import { Github, Globe, Twitter } from 'lucide-react';
+import { Github, Globe, Twitter, ChevronDown } from 'lucide-react'; // Import ChevronDown
 import { useEffect, useState } from 'react';
 import { base } from 'viem/chains';
 import { normalize } from 'viem/ens';
 import { useAccount } from 'wagmi';
 import { publicClient } from '../client';
+import { motion } from 'framer-motion'; // Import framer-motion
 
 export default function IdentityWrapper() {
   const { address } = useAccount();
@@ -16,6 +17,7 @@ export default function IdentityWrapper() {
     github: string | null;
     url: string | null;
   } | null>(null);
+  const [isOpen, setIsOpen] = useState(false); // State to manage dropdown visibility
 
   useEffect(() => {
     console.log('Address:', address); // Debug log
@@ -67,17 +69,28 @@ export default function IdentityWrapper() {
   return (
     <div className="mx-auto max-w-2xl p-4">
       {address ? (
-        <div className="relative space-y-2">
-          <div className="flex items-center space-x-4 rounded-full bg-white bg-opacity-20 p-2 transition-all duration-300 hover:bg-opacity-30">
-            <Avatar address={address} chain={base} />
-            <Name
-              address={address}
-              chain={base}
-              className="text-m text-white"
-            />
+        <motion.div
+          className="relative space-y-2"
+          initial={{ opacity: 0, y: -20 }} // Initial state
+          animate={{ opacity: 1, y: 0 }} // Animated state
+          transition={{ duration: 0.5 }} // Animation duration
+        >
+          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+          <div className='flex cursor-pointer items-center justify-between space-x-2 rounded-full bg-white bg-opacity-20 p-2 transition-all duration-300 hover:bg-opacity-30' onClick={() => setIsOpen(!isOpen)}> 
+            <div className='flex items-center space-x-2'>
+              <Avatar address={address} chain={base} />
+              <Name address={address} chain={base} className="text-m text-white" />
+            </div>
+            <ChevronDown className={`h-4 w-4 text-white transition-transform ${isOpen ? 'rotate-180' : ''}`} /> {/* Dropdown arrow */}
           </div>
           {ensText && (
-            <div className='rounded-lg bg-white bg-opacity-20 p-4 text-white shadow-md'>
+            <motion.div
+              className='rounded-lg bg-white bg-opacity-20 p-4 text-white shadow-md'
+              initial={{ height: 0, opacity: 0 }} // Initial state
+              animate={{ height: isOpen ? 'auto' : 0, opacity: isOpen ? 1 : 0 }} // Animated state
+              transition={{ duration: 0.5, ease: "easeInOut" }} // Animation duration and easing
+              style={{ overflow: 'hidden' }} // Ensure smooth height transition
+            >
               <div className="flex items-center space-x-2">
                 <Twitter className="h-4 w-4" />
                 <span>Twitter:</span>
@@ -111,12 +124,12 @@ export default function IdentityWrapper() {
                   rel="noopener noreferrer"
                   className="hover:underline"
                 >
-                  {ensText.url}
+                  {ensText.url?.replace(/^https?:\/\//, '')}
                 </a>
               </div>
-            </div>
+            </motion.div>
           )}
-        </div>
+        </motion.div>
       ) : (
         <div className="text-white">
           Connect your wallet to view your profile card.

diff --git a/yarn.lock b/yarn.lock
@@ -4670,10 +4670,10 @@ fraction.js@^4.3.7:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-framer-motion@^11.9.0:
-  version "11.9.0"
-  resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-11.9.0.tgz"
-  integrity sha512-nCfGxvsQecVLjjYDu35G2F5ls+ArE3FBfhxV0RSiisMaUKqteq5DMBFNRKwMyVj+VqKTNhawt+BV480YCHKFlQ==
+framer-motion@^11.10.0:
+  version "11.10.0"
+  resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-11.10.0.tgz"
+  integrity sha512-HOEJGdcDBmIipuMpfcrgQfheuRlPM9TySlzaP8WrZVAdBsLzxfeB4XBuFNVc4YO4OTSpac/oAASPJGAPISvVgQ==
   dependencies:
     tslib "^2.4.0"
 
@@ -7784,6 +7784,11 @@ shell-quote@^1.6.1, shell-quote@^1.7.3:
   resolved "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz"
   integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
 
+shimmer-css@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/shimmer-css/-/shimmer-css-1.0.1.tgz"
+  integrity sha512-R3KgInTAsDvwlrYbOnXt0vRD0Ra+bJ2NQr7mM+IqxieWEE+JmoEoPHxMOryrl7RtlXuM+AhY7eVeGnjHV2KoQQ==
+
 side-channel@^1.0.4:
   version "1.0.6"
   resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz"