reformat

LinkTrue · Oct 3, 2024 · 4eab497 · 4eab497
1 parent e8fad73
commit 4eab497
Show file tree

Hide file tree

Showing 27 changed files with 549 additions and 291 deletions.
diff --git a/app/[username]/page.tsx b/app/[username]/page.tsx
@@ -11,6 +11,7 @@ export default function UserProfile() {
   const params = useParams();
   const {
     handleConnectWallet,
+    signer,
     isConnecting,
     isConnected,
   } = useBlockchain();
@@ -41,7 +42,7 @@ export default function UserProfile() {
   }, [isConnected, isConnecting, handleConnectWallet]);
 
   useEffect(() => {
-    if (isConnected && username.length > 0 && !isFetching) {
+    if (isConnected && signer && username.length > 0 && !isFetching) {
       setIsFetching(true);
       getProfileByUsername(username).then(res => {
         const cleanedData = parseResult(res);
@@ -55,13 +56,12 @@ export default function UserProfile() {
         )
       })
         .catch(err => {
-          debugger
           console.log(err);
         }).finally(() => {
           setIsFetching(false);
         })
     }
-  }, [isFetching, isConnected, username, getProfileByUsername, setUserProfile]);
+  }, [isConnected, signer, username, getProfileByUsername, setUserProfile]);
 
   function parseResult(result: string[]) {
     // Initialize arrays for Web2 and Web3 items
@@ -103,8 +103,11 @@ export default function UserProfile() {
   // set the profile data into the global state 
   return (
     <div>
-      {isConnecting ? <>Connecting ...</> : ''}
-      {isConnected && isFetching ? <>Reading Blockchain Data ...</> : ''}
+      <div className='text-center'>
+        {isConnecting ? <span>Connecting ...</span> : ''}
+        {isConnected && isFetching ? <span className='pt-32'>Reading Blockchain Data ...</span> : ''}
+      </div>
+
       {isConnected && !isFetching ? <Preview /> : ''}
 
     </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -38,32 +38,15 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <a href="/" className="flex text-center justify-center pt-8 text-2xl">
+          <strong>Link</strong>True<sup><span className="text-xs">Join now!</span></sup>
+        </a>
         <LoggerProvider>
           <BlockchainProvider>
             <GlobalStateProvider>
               <StepsProvider>
                 <SmartContractProvider>
-
-                  <div className="
-            grid 
-            grid-rows-[20px_1fr_20px] 
-            items-center 
-            justify-items-center 
-            min-h-screen 
-            p-8 pb-10 gap-16 sm:p-10 
-            font-[family-name:var(--font-geist-sans)]
-            ">
-                    <a href="/" >
-                      <Image
-                        src="logo.svg"
-                        alt="Next.js logo"
-                        width={180}
-                        height={38}
-                        priority
-                      />
-                    </a>
-                    {children}
-                  </div>
+                  {children}
                 </SmartContractProvider>
               </StepsProvider>
             </GlobalStateProvider>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,56 +1,93 @@
-"use client"
-// import Image from "next/image";
-import { useSteps, Steps } from '../context/StepsContext';
+"use client";
+import Image from "next/image";
+import { useSteps, Steps } from "../context/StepsContext";
 
-import Step1 from '../components/steps/S1Main';
-import Step2 from '../components/steps/S2Username';
-import Step3 from '../components/steps/S3Web2Items';
-import Step4 from '../components/steps/S4Web3Items';
-import Step5 from '../components/steps/S5Preview';
+import Step1 from "../components/steps/S1Main";
+import Step2 from "../components/steps/S2Username";
+import Step3 from "../components/steps/S3Web2Items";
+import Step4 from "../components/steps/S4Web3Items";
+import Step5 from "../components/steps/S5Preview";
 
 export default function Home() {
   const { currentStep } = useSteps();
 
   return (
-    <div className="">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+    <div className="flex flex-col"> {/* Use flex and set minimum height to screen height */}
+      <main
+        className="flex-grow flex flex-col justify-center p-8 min-h-screen"
 
-        {/* <h1>{currentStep}</h1> */}
+      >
+        {currentStep === Steps.Main && <Step1 />}
+        {currentStep === Steps.Username && <Step2 />}
+        {currentStep === Steps.Web2Addresses && <Step3 />}
+        {currentStep === Steps.Web3Addresses && <Step4 />}
+        {currentStep === Steps.Preview && <Step5 />}
+      </main>
 
-        {currentStep === Steps.Main && (
-            <Step1 />
-        )}
-
-        {currentStep === Steps.Username && (
-          <Step2 />
-        )}
-        {currentStep === Steps.Web2Addresses && (
-          <Step3 />
-        )}
-
-        {currentStep === Steps.Web3Addresses && (
-          <Step4 />
-        )}
-
-        {currentStep === Steps.Preview &&
-          <Step5 />
-        }
+      <footer className="flex flex-col justify-center items-center space-y-4 pt-2">
+        <hr className="border w-full" />
+        <div className="flex items-center justify-center gap-2">
+          Built with
+          <Image
+            title="built with passion"
+            src={"/icons/tech/h.svg"}
+            width={21}
+            height={21}
+            alt="heart icon"
+          />
+          <p>using</p>
+          <Image
+            title="built on github"
+            src={"/icons/tech/gh.svg"}
+            width={21}
+            height={21}
+            alt="github icon"
+          />
+          <Image
+            title="built with nextjs"
+            src={"/icons/tech/nj.svg"}
+            width={21}
+            height={21}
+            alt="nextjs icon"
+          />
+          <Image
+            title="built with solidity"
+            src={"/icons/tech/solidity.svg"}
+            width={21}
+            height={21}
+            alt="solidity icon"
+          />
+          <Image
+            title="built with hardhat"
+            src={"/icons/tech/hh.svg"}
+            width={21}
+            height={21}
+            alt="hardhat icon"
+          />
+          <p>on</p>
+          <Image
+            title="built with optimism"
+            src={"/icons/chains/op.svg"}
+            width={21}
+            height={21}
+            alt="optimism blockchain icon"
+          />
+        </div>
+      </footer>
 
-        <br />
-      </main >
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
+      <div className="p-4">
         <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          className="flex justify-center gap-2 hover:underline hover:underline-offset-4"
           href="https://github.com/miladtsx?tab=repositories&q=linktrue&type=&language=&sort="
           target="_blank"
           rel="noopener noreferrer"
         >
           <span>
-            <i className="fa-brands fa-github"></i>
+            <i className="fa-brands fa-github text-xs"></i>
           </span>
           Explore source code
         </a>
-      </footer>
-    </div >
+      </div>
+    </div>
   );
 }
diff --git a/components/ChainsComboBox.jsx b/components/ChainsComboBox.jsx
@@ -53,11 +53,13 @@ const ChainsComboBox = forwardRef(({ onSelect }, ref) => {
               src={option.value}
               alt={option.label}
               style={{ width: 20, marginRight: 10 }}
+              width={20}
+              height={20}
             />
             {option.label}
           </div>
         )}
-        placeholder="Search the Native coin name..."
+        placeholder="Select the coin name..."
         isClearable
       />
     </div>

diff --git a/components/ConnectWallet.tsx b/components/ConnectWallet.tsx
@@ -22,7 +22,9 @@ const BlockchainComponent: React.FC = () => {
                        "
                     onClick={() => handleConnectWallet(true)}
                 >
-                    {isConnecting ? 'Waiting for MetaMask to connect...' : 'Connect Wallet'}
+                    {isConnecting ? (
+                        (<div className="spinner"></div>)
+                    ) : 'Connect Wallet'}
 
                 </button>
             )}

diff --git a/components/EllipsifiedAddress.tsx b/components/EllipsifiedAddress.tsx
@@ -28,7 +28,7 @@ const EllipsifiedAddress = ({ walletAddress }: { walletAddress: string }) => {
                         }
                         }
                     >
-                        <span>
+                        <span className='md:text-xl text-xxs lg:text-2xl'>
                             {ellipsify(walletAddress)} {" "} <i className="fas fa-copy"></i>
                         </span>
                     </Button>
-Original file line number
+Diff line change
@@ Expand Up @@
                             }
                             }
                         >
-                            <span>
+                            <span className='md:text-xl text-xxs lg:text-2xl'>
                                 {ellipsify(walletAddress)} {" "} <i className="fas fa-copy"></i>
                             </span>
                         </Button>
@@ Expand Down @@