From 6754cbb704d6e467d029a501248ebe8fd721db94 Mon Sep 17 00:00:00 2001
From: Joseph Chalabi <chalabi.joseph@gmail.com>
Date: Tue, 7 Jan 2025 20:04:13 -0700
Subject: [PATCH 1/2] feat: sexier landing pages

---
 pages/bank.tsx          | 126 ++++++++++++++++++++++++++++------------
 pages/factory/index.tsx | 100 +++++++++++++++++++------------
 2 files changed, 154 insertions(+), 72 deletions(-)

diff --git a/pages/bank.tsx b/pages/bank.tsx
index ba708ff..53d285e 100644
--- a/pages/bank.tsx
+++ b/pages/bank.tsx
@@ -16,6 +16,7 @@ import { MFX_TOKEN_DATA } from '@/utils/constants';
 import env from '@/config/env';
 import { SEO } from '@/components';
 import { useResponsivePageSize } from '@/hooks/useResponsivePageSize';
+import Link from 'next/link';
 
 interface PageSizeConfig {
   tokenList: number;
@@ -149,16 +150,18 @@ export default function Bank() {
                     >
                       Bank
                     </h1>
-                    <div className="relative w-full sm:w-[224px]">
-                      <input
-                        type="text"
-                        placeholder="Search for an asset ..."
-                        className="input input-bordered w-full h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"
-                        value={searchTerm}
-                        onChange={e => setSearchTerm(e.target.value)}
-                      />
-                      <SearchIcon className="h-6 w-6 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
-                    </div>
+                    {combinedBalances.length > 0 && (
+                      <div className="relative w-full sm:w-[224px]">
+                        <input
+                          type="text"
+                          placeholder="Search for an asset ..."
+                          className="input input-bordered w-full h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                          value={searchTerm}
+                          onChange={e => setSearchTerm(e.target.value)}
+                        />
+                        <SearchIcon className="h-6 w-6 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+                      </div>
+                    )}
                   </div>
                 </div>
                 <div
@@ -189,32 +192,38 @@ export default function Bank() {
                 </div>
 
                 <div className="flex flex-col w-full mt-4">
-                  {activeTab === 'assets' && (
-                    <TokenList
-                      refetchBalances={refetchBalances || resolveRefetch}
-                      isLoading={isLoading}
-                      balances={combinedBalances}
-                      refetchHistory={refetchHistory}
-                      address={address ?? ''}
-                      pageSize={tokenListPageSize}
-                      searchTerm={searchTerm}
-                    />
-                  )}
-                  {activeTab === 'history' && (
-                    <HistoryBox
-                      currentPage={currentPage}
-                      setCurrentPage={setCurrentPage}
-                      address={address ?? ''}
-                      isLoading={isLoading}
-                      sendTxs={sendTxs}
-                      totalPages={totalPages}
-                      txLoading={txLoading}
-                      isError={isError}
-                      refetch={refetchHistory}
-                      skeletonGroupCount={skeletonGroupCount}
-                      skeletonTxCount={skeletonTxCount}
-                    />
-                  )}
+                  {activeTab === 'assets' &&
+                    (combinedBalances.length === 0 ? (
+                      <NoAssetsFound />
+                    ) : (
+                      <TokenList
+                        refetchBalances={refetchBalances || resolveRefetch}
+                        isLoading={isLoading}
+                        balances={combinedBalances}
+                        refetchHistory={refetchHistory}
+                        address={address ?? ''}
+                        pageSize={tokenListPageSize}
+                        searchTerm={searchTerm}
+                      />
+                    ))}
+                  {activeTab === 'history' &&
+                    (sendTxs.length === 0 ? (
+                      <NoActivityFound />
+                    ) : (
+                      <HistoryBox
+                        currentPage={currentPage}
+                        setCurrentPage={setCurrentPage}
+                        address={address ?? ''}
+                        isLoading={isLoading}
+                        sendTxs={sendTxs}
+                        totalPages={totalPages}
+                        txLoading={txLoading}
+                        isError={isError}
+                        refetch={refetchHistory}
+                        skeletonGroupCount={skeletonGroupCount}
+                        skeletonTxCount={skeletonTxCount}
+                      />
+                    ))}
                 </div>
               </div>
             </div>
@@ -224,3 +233,48 @@ export default function Bank() {
     </div>
   );
 }
+
+function NoAssetsFound() {
+  return (
+    <section className="transition-opacity duration-300 h-auto mt-12 ease-in-out animate-fadeIn w-full flex items-center justify-center">
+      <div className="grid max-w-4xl bg-base-300 p-12 rounded-md w-full mx-auto gap-8 lg:grid-cols-12">
+        <div className="mr-auto place-self-center lg:col-span-7">
+          <h1 className="max-w-2xl mb-4 text-2xl font-extrabold tracking-tight leading-none md:text-3xl xl:text-4xl dark:text-white text-black">
+            No Assets Found
+          </h1>
+          <p className="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl">
+            You do not have any assets yet. Create a new asset in the factory page or request MFX
+            from the faucet!
+          </p>
+          <Link href="" passHref>
+            <button className="btn btn-gradient">MFX faucet</button>
+          </Link>
+        </div>
+        <div className="hidden lg:mt-0 lg:ml-24 lg:col-span-5 lg:flex">
+          <BankIcon className="h-60 w-60 text-primary" />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function NoActivityFound() {
+  return (
+    <section className="transition-opacity duration-300 h-auto mt-12 ease-in-out animate-fadeIn w-full flex items-center justify-center">
+      <div className="grid max-w-4xl bg-base-300 p-12 rounded-md w-full mx-auto gap-8 lg:grid-cols-12">
+        <div className="mr-auto place-self-center lg:col-span-7">
+          <h1 className="max-w-2xl mb-4 text-2xl font-extrabold tracking-tight leading-none md:text-3xl xl:text-4xl dark:text-white text-black">
+            No Activity Found
+          </h1>
+          <p className="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl">
+            You do not have any activity yet. Submit a transaction and revisit this page to view
+            your history!
+          </p>
+        </div>
+        <div className="hidden lg:mt-0 lg:ml-24 lg:col-span-5 lg:flex">
+          <BankIcon className="h-60 w-60 text-primary" />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/pages/factory/index.tsx b/pages/factory/index.tsx
index cb4a216..bc172cd 100644
--- a/pages/factory/index.tsx
+++ b/pages/factory/index.tsx
@@ -15,6 +15,7 @@ import { SEO } from '@/components';
 import env from '@/config/env';
 
 import { useResponsivePageSize } from '@/hooks/useResponsivePageSize';
+import Link from 'next/link';
 
 interface PageSizeConfig {
   denomList: number;
@@ -117,46 +118,50 @@ export default function Factory() {
             />
           ) : (
             <div className="relative w-full h-full overflow-hidden scrollbar-hide p-1">
-              <div className="h-full flex flex-col ">
-                <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
-                  <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full md:w-auto">
-                    <h1
-                      className="text-secondary-content"
-                      style={{ fontSize: '20px', fontWeight: 700, lineHeight: '24px' }}
-                    >
-                      Tokens
-                    </h1>
-                    <div className="relative w-full sm:w-[224px]">
-                      <input
-                        type="text"
-                        placeholder="Search for a token ..."
-                        className="input input-bordered w-full h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"
-                        value={searchTerm}
-                        onChange={e => setSearchTerm(e.target.value)}
-                      />
-                      <SearchIcon className="h-6 w-6 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+              {combinedData.length > 0 ? (
+                <div className="h-full flex flex-col ">
+                  <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
+                    <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full md:w-auto">
+                      <h1
+                        className="text-secondary-content"
+                        style={{ fontSize: '20px', fontWeight: 700, lineHeight: '24px' }}
+                      >
+                        Tokens
+                      </h1>
+                      <div className="relative w-full sm:w-[224px]">
+                        <input
+                          type="text"
+                          placeholder="Search for a token ..."
+                          className="input input-bordered w-full h-[40px] rounded-[12px] border-none bg-secondary text-secondary-content pl-10 focus:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                          value={searchTerm}
+                          onChange={e => setSearchTerm(e.target.value)}
+                        />
+                        <SearchIcon className="h-6 w-6 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                <div className="flex flex-col w-full mt-4">
-                  {isError ? (
-                    <div className="text-center my-auto text-error">
-                      Error loading tokens. Please try again.
-                    </div>
-                  ) : (
-                    <DenomList
-                      denoms={combinedData}
-                      isLoading={isLoading}
-                      refetchDenoms={refetchData}
-                      pageSize={denomListPageSize}
-                      address={address ?? ''}
-                      admin={address ?? ''}
-                      searchTerm={searchTerm}
-                    />
-                  )}
+                  <div className="flex flex-col w-full mt-4">
+                    {isError ? (
+                      <div className="text-center my-auto text-error">
+                        Error loading tokens. Please try again.
+                      </div>
+                    ) : (
+                      <DenomList
+                        denoms={combinedData}
+                        isLoading={isLoading}
+                        refetchDenoms={refetchData}
+                        pageSize={denomListPageSize}
+                        address={address ?? ''}
+                        admin={address ?? ''}
+                        searchTerm={searchTerm}
+                      />
+                    )}
+                  </div>
                 </div>
-              </div>
+              ) : (
+                <NoAssetsFound />
+              )}
             </div>
           )}
         </div>
@@ -164,3 +169,26 @@ export default function Factory() {
     </div>
   );
 }
+
+function NoAssetsFound() {
+  return (
+    <section className="transition-opacity duration-300 h-[80vh] ease-in-out animate-fadeIn w-full flex items-center justify-center">
+      <div className="grid max-w-4xl bg-base-300 p-12 rounded-md w-full mx-auto gap-8 lg:grid-cols-12">
+        <div className="mr-auto place-self-center lg:col-span-7">
+          <h1 className="max-w-2xl mb-4 text-2xl font-extrabold tracking-tight leading-none md:text-3xl xl:text-4xl dark:text-white text-black">
+            No Assets Found
+          </h1>
+          <p className="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl">
+            You do not have any factory assets yet. Create a new asset in the factory page!
+          </p>
+          <Link href="/groups/create" passHref>
+            <button className="btn btn-gradient">Create New Token</button>
+          </Link>
+        </div>
+        <div className="hidden lg:mt-0 lg:ml-24 lg:col-span-5 lg:flex">
+          <FactoryIcon className="h-60 w-60 text-primary" />
+        </div>
+      </div>
+    </section>
+  );
+}

From 8dc6bcfb1d003ae1c6c7b4344a4b36360a8447ec Mon Sep 17 00:00:00 2001
From: "Felix C. Morency" <1102868+fmorency@users.noreply.github.com>
Date: Wed, 8 Jan 2025 10:12:58 -0500
Subject: [PATCH 2/2] fix: label

---
 pages/bank.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/pages/bank.tsx b/pages/bank.tsx
index 53d285e..12e5908 100644
--- a/pages/bank.tsx
+++ b/pages/bank.tsx
@@ -243,12 +243,8 @@ function NoAssetsFound() {
             No Assets Found
           </h1>
           <p className="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl">
-            You do not have any assets yet. Create a new asset in the factory page or request MFX
-            from the faucet!
+            You do not have any assets yet.
           </p>
-          <Link href="" passHref>
-            <button className="btn btn-gradient">MFX faucet</button>
-          </Link>
         </div>
         <div className="hidden lg:mt-0 lg:ml-24 lg:col-span-5 lg:flex">
           <BankIcon className="h-60 w-60 text-primary" />