feat: implement the second step of the Spherre account creation process, Account Details

Author: devJaja

frontend/app/add-sphere-member/page.tsx

@@ -0,0 +1,33 @@
+import Header from '../components/Header';
+import SecondStepper from '../components/SecondStepper';
+import AddShereMembers from '../components/AddSphereMembers';
+import ConfigureThreshold from '../components/ConfigureThreshold';
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-black text-white">
+      <Header />
+      {/* Main Content */}
+      <div className="flex flex-col items-center pt-16 sm:pt-20 md:pt-24 pb-6 sm:pb-8">
+        {/* Stepper */}
+        <SecondStepper />
+
+        {/* Heading and Description */}
+        <div className="w-full px-4 sm:w-[456px]">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-4 text-center">
+          Add Members to a Multisig Vault
+          </h1>
+          <p className="text-gray-400 text-sm sm:text-base text-center mb-6 sm:mb-8 max-w-lg">
+          Add your team members & customize security settings to fit your team needs.
+          </p>
+        </div>
+
+        {/* Sphere Review Card and Members Threshold */}
+        <div className="w-full px-4 flex flex-col items-center space-y-4">
+          <AddShereMembers />
+          <ConfigureThreshold />
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/components/AddSphereMembers.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React, { useState } from 'react';
+import Image from 'next/image';
+import Delete from '../../public/Images/trash-bin.png'
+
+const AddSphereMembers = () => {
+  const [members, setMembers] = useState([
+    'elbbababaahhajaagsahv77278191912a',
+    '',
+  ]);
+
+  const addMember = () => {
+    setMembers([...members, '']);
+  };
+
+  // Remove a member by index
+  const removeMember = (index: number) => {
+    setMembers(members.filter((_, i) => i !== index));
+  };
+
+  // Update a member's address
+  const updateMember = (index: number, value: string) => {
+    const updatedMembers = [...members];
+    updatedMembers[index] = value;
+    setMembers(updatedMembers);
+  };
+
+  return (
+    <div className='w-full max-w-md'>
+        <h1 className="text-lg font-semibold bg-gray-800 text-white rounded-t-lg mb-[-2] p-6">Add Sphere Members</h1>
+        <div className="w-full max-w-md bg-gray-900 rounded-b-lg p-6">        
+            {/* Member List */}
+            {members.map((member, index) => (
+            <div key={index} className="mb-4">
+                <div className="flex items-center justify-between">
+                    <label className="text-sm text-white mb-1">Member {index + 1}</label>
+                    {members.length > 1 && (
+                    <button
+                        onClick={() => removeMember(index)}
+                        className="text-gray-400 hover:text-gray-200"
+                    >
+                        <Image src ={Delete} alt='' ></Image>
+                    </button>
+                    )}
+                </div>
+                <input
+                    type="text"
+                    value={member}
+                    onChange={(e) => updateMember(index, e.target.value)}
+                    placeholder="Enter team member’s address"
+                    className="w-full bg-gray-800 text-white text-sm rounded-lg p-2 border border-gray-700 focus:outline-none focus:border-purple-600"
+                />
+            </div>
+        ))}
+
+        <button
+            onClick={addMember}
+            className="flex items-center bg-gray-800 w-full p-4 text-center items-center justify-center rounded-lg hover:text-purple-500 text-sm"
+        >
+            <span className="mr-1">+</span> Add Member
+        </button>
+        </div>
+    </div>
+    
+  );
+};
+
+export default AddSphereMembers;

frontend/app/components/ConfigureThreshold.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import React, { useState } from 'react';
+
+const ConfigureThreshold = () => {
+  const [threshold, setThreshold] = useState(1); // Default value of 1
+
+  // Handle slider change
+  const handleThresholdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setThreshold(Number(e.target.value));
+  };
+
+  return (
+    <div className="w-full max-w-md bg-gray-900 rounded-lg p-6">
+      {/* Title */}
+      <h1 className="text-lg font-semibold text-white mb-2">Configure Threshold</h1>
+
+      {/* Description */}
+      <p className="text-sm text-gray-400 mb-6">
+        Please select the amount of approvals needed to confirm a transaction.
+      </p>
+
+      {/* Slider */}
+      <div className="mb-6">
+        <input
+          type="range"
+          min="1"
+          max="2"
+          value={threshold}
+          onChange={handleThresholdChange}
+          className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+        />
+        <div className="flex justify-between mt-2">
+          <span className="text-sm text-gray-400">1</span>
+          <span className="text-sm text-gray-400">2</span>
+        </div>
+      </div>
+
+      {/* Continue Button */}
+      <button className="w-full py-2 bg-white text-black rounded-lg hover:bg-gray-200">
+        Continue
+      </button>
+    </div>
+  );
+};
+
+export default ConfigureThreshold;

frontend/app/components/SecondStepper.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+const SecondStepper = () => {
+  return (
+    <div className="flex items-center justify-center space-x-4 mt-16 mb-8">
+      {/* Step 1 */}
+      <div className="flex flex-col items-center">
+        <div className="w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center text-white">
+          1
+        </div>
+        <span className="text-gray-400 text-sm mt-2">Account Details</span>
+      </div>
+      <div className="w-12 h-0.5 bg-gray-600"></div>
+
+      {/* Step 2 */}
+      <div className="flex flex-col items-center">
+        <div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-white">
+          2
+        </div>
+        <span className="text-gray-400 text-sm mt-2">Member & Threshold</span>
+      </div>
+      <div className="w-12 h-0.5 bg-gray-600"></div>
+
+      {/* Step 3 (Active) */}
+      <div className="flex flex-col items-center">
+        <div className="w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center text-white">
+          3
+        </div>
+        <span className="text-white text-sm mt-2">Confirm & Setup</span>
+      </div>
+    </div>
+  );
+};
+
+export default SecondStepper;