Merge pull request #21 from ayush-848/main

styled the home page

package.json

@@ -18,6 +18,7 @@
     "bip39": "^3.1.0",
     "ed25519-hd-key": "^1.3.0",
     "ethers": "^6.13.2",
+    "framer-motion": "^11.11.1",
     "lucide-react": "^0.446.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",

src/components/CopyButton.jsx

@@ -1,40 +1,42 @@
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Copy, CheckCircle } from 'lucide-react';
 
-export default function MnemonicCard({ word }) {
-    const [buttonText, setButtonText] = useState('Copy Seed Phrase');
-    const [isCopied, setIsCopied] = useState(false); // State to track if the text is copied
+const CopyButton = ({ text }) => {
+  const [isCopied, setIsCopied] = useState(false);
 
-    const handleClick = () => {
-        navigator.clipboard.writeText(word)
-            .then(() => {
-                setButtonText('Copied!');
-                setIsCopied(true); // Set copied state to true
-                setTimeout(() => {
-                    setButtonText('Copy Seed Phrase');
-                    setIsCopied(false); // Reset copied state after 2 seconds
-                }, 2000);
-            })
-            .catch(err => {
-                console.error('Failed to copy text: ', err);
-            });
-    };
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text)
+      .then(() => {
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+      })
+      .catch(err => console.error('Failed to copy text: ', err));
+  };
 
-    return (
-        <div>
-            <button
-                className={`p-2 rounded-3xl mt-8 transition-all duration-300 ease-in-out ${
-                    isCopied ? 'bg-green-500' : 'bg-rose-500'
-                } hover:bg-green-600 hover:scale-105`}
-                onClick={handleClick}
-            >
-                {buttonText}
-            </button>
-        </div>
-    );
-}
+  return (
+    <motion.button
+      className={`flex items-center justify-center space-x-2 p-3 rounded-full text-white transition-all duration-300 ${
+        isCopied
+          ? 'bg-green-500 hover:bg-green-600'
+          : 'bg-indigo-500 hover:bg-indigo-600'
+      }`}
+      onClick={handleCopy}
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
+    >
+      {isCopied ? <CheckCircle size={24} /> : <Copy size={24} />}
+      <span>{isCopied ? 'Copied' : 'Copy'}</span>
+    </motion.button>
+  );
+};
 
-// Adding prop-types validation
-MnemonicCard.propTypes = {
-    word: PropTypes.string.isRequired,
+CopyButton.propTypes = {
+  text: PropTypes.string.isRequired,
 };
+
+export default CopyButton;

src/components/ETHWallet.jsx

@@ -31,7 +31,7 @@ const EthWallet = ({ mnemonic }) => {
     };
 
     return (
-        <div className="flex flex-col items-center">
+        <div className="flex flex-col items-center mb-10">
             <button
                 className={`p-2 rounded-3xl m-8 transition-all duration-300 ease-in-out ${
                     isWalletAdded ? 'bg-green-500' : 'bg-rose-500'

src/components/MnemonicCard.jsx

@@ -1,11 +1,25 @@
-import * as React from 'react';
-import Chip from '@mui/material/Chip';
-import Stack from '@mui/material/Stack';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { motion } from 'framer-motion';
 
-export default function MnemonicCard({index, word }) {
+const MnemonicCard = ({ word }) => {
   return (
-    <Stack className='p-2' direction="row" spacing={5}>
-      <Chip label={`${index}. ${word}`}  />
-    </Stack>
+    <motion.div
+      className="bg-gradient-to-br from-gray-700 to-gray-800 p-4 rounded-xl shadow-lg border border-gray-600 backdrop-blur-lg"
+      whileHover={{ scale: 1.05 }}
+      transition={{ duration: 0.2 }}
+    >
+      <div className="text-center">
+        <div className="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
+          {word}
+        </div>
+      </div>
+    </motion.div>
   );
-}
+};
+
+MnemonicCard.propTypes = {
+  word: PropTypes.string.isRequired,
+};
+
+export default MnemonicCard;

src/components/MnemonicContainer.jsx

@@ -1,30 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { motion } from 'framer-motion';
 import MnemonicCard from './MnemonicCard';
 import CopyButton from './CopyButton';
 
 const MnemonicContainer = ({ mnemonic }) => {
-    if (!mnemonic) return null;
+  if (!mnemonic) return null;
 
-    const words = mnemonic.split(' ');
-
-    return (
-      <div>
-        <div className="mt-14">
-          <div>Your Seed is below. <br /> <span className="text-red-800 font-bold">(Keep it Carefully, away from scammers)</span></div>
-          <div className="flex flex-col items-center">
-          <div className="grid grid-cols-3 justify-center items-center">
-            {words.map((word, index) => (
-              <div key={index} className="flex justify-center items-center">
-                <MnemonicCard index={index + 1} word={word} />
-              </div>
-            ))}
-          </div>
-          <CopyButton word={mnemonic} />
-          </div>
-          <br />
-          <hr />
-        </div>
+  const words = mnemonic.split(' ');
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="bg-gradient-to-br from-gray-800 to-gray-900 p-8 rounded-2xl shadow-xl border border-gray-700 backdrop-blur-lg"
+    >
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.2, duration: 0.5 }}
+        className="text-center mb-6"
+      >
+        <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 mb-2">
+          Your Seed Phrase
+        </h2>
+        <p className="text-gray-300">
+          Keep it safe and{' '}
+          <span className="text-red-500 font-semibold">
+            away from scammers
+          </span>
+        </p>
+      </motion.div>
+
+      <motion.div 
+        className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-8"
+        variants={{
+          hidden: { opacity: 0 },
+          show: {
+            opacity: 1,
+            transition: {
+              staggerChildren: 0.1
+            }
+          }
+        }}
+        initial="hidden"
+        animate="show"
+      >
+        {words.map((word, index) => (
+          <motion.div
+            key={index}
+            variants={{
+              hidden: { opacity: 0, y: 20 },
+              show: { opacity: 1, y: 0 }
+            }}
+            className="relative"
+          >
+            <div className="absolute -top-3 -left-3 w-8 h-8 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white font-bold text-sm z-10">
+              {index + 1}
+            </div>
+            <MnemonicCard word={word} />
+          </motion.div>
+        ))}
+      </motion.div>
+
+      <div className="flex justify-center mt-6">
+        <CopyButton text={mnemonic} />
       </div>
+    </motion.div>
   );
 };
 
+MnemonicContainer.propTypes = {
+  mnemonic: PropTypes.string.isRequired,
+};
+
 export default MnemonicContainer;

src/components/SolanaWallet.jsx

@@ -32,7 +32,7 @@ function SolanaWallet({ mnemonic }) {
     };
 
     return (
-        <div className="flex flex-col items-center">
+        <div className="flex flex-col items-center mb-10">
             <button
                 className={`p-2 rounded-3xl m-8 transition-all duration-300 ease-in-out ${
                     isWalletAdded ? 'bg-green-500' : 'bg-rose-500'

src/index.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;