From c0991f5197a8de39dea1de7a80b02474c85d4e1c Mon Sep 17 00:00:00 2001
From: Joseph Chalabi <chalabi.joseph@gmail.com>
Date: Wed, 4 Dec 2024 15:35:04 -0700
Subject: [PATCH] fix: pr comments

---
 components/bank/components/historyBox.tsx | 36 ++++++++++++++---------
 components/bank/components/tokenList.tsx  |  8 ++---
 components/wallet.tsx                     |  6 +++-
 pages/bank.tsx                            | 29 ++++++++++++++----
 4 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/components/bank/components/historyBox.tsx b/components/bank/components/historyBox.tsx
index bdfc1ef3..af9091dc 100644
--- a/components/bank/components/historyBox.tsx
+++ b/components/bank/components/historyBox.tsx
@@ -50,23 +50,25 @@ function formatLargeNumber(num: number): string {
 export function HistoryBox({
   isLoading: initialLoading,
   address,
+  currentPage,
+  setCurrentPage,
+  sendTxs,
+  totalPages,
+  txLoading,
+  isError,
+  refetch,
 }: {
   isLoading: boolean;
   address: string;
+  currentPage: number;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  sendTxs: TransactionGroup[];
+  totalPages: number;
+  txLoading: boolean;
+  isError: boolean;
+  refetch: () => void;
 }) {
   const [selectedTx, setSelectedTx] = useState<TransactionGroup | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
-  const pageSize = 10;
-
-  const { selectedEndpoint } = useEndpointStore();
-  const indexerUrl = selectedEndpoint?.indexer || '';
-
-  const {
-    sendTxs,
-    totalPages,
-    isLoading: txLoading,
-    isError,
-  } = useGetFilteredTxAndSuccessfulProposals(indexerUrl, address, currentPage, pageSize);
 
   const isLoading = initialLoading || txLoading;
 
@@ -260,9 +262,15 @@ export function HistoryBox({
               <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white"></div>
             </div>
           ) : isError ? (
-            <div className="text-center text-red-500">Error loading transactions</div>
+            <div className="flex items-center justify-center h-[200px] w-full bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] rounded-[16px]">
+              <p className="text-center text-red-500">Error loading transactions</p>
+            </div>
           ) : !sendTxs || sendTxs.length === 0 ? (
-            <div className="text-center text-gray-500">No transactions found</div>
+            <div className="flex items-center justify-center h-[200px] w-full bg-[#FFFFFFCC] dark:bg-[#FFFFFF0F] mt-5 rounded-[16px]">
+              <p className="text-center text-[#00000099] dark:text-[#FFFFFF99]">
+                No transactions found!
+              </p>
+            </div>
           ) : (
             <div className="h-full overflow-y-auto">
               {Object.entries(groupedTransactions).map(([date, transactions], index) => (
diff --git a/components/bank/components/tokenList.tsx b/components/bank/components/tokenList.tsx
index 73c37804..2b717756 100644
--- a/components/bank/components/tokenList.tsx
+++ b/components/bank/components/tokenList.tsx
@@ -12,7 +12,6 @@ import useIsMobile from '@/hooks/useIsMobile';
 interface TokenListProps {
   balances: CombinedBalanceInfo[] | undefined;
   isLoading: boolean;
-
   refetchBalances: () => void;
   refetchHistory: () => void;
   address: string;
@@ -21,7 +20,6 @@ interface TokenListProps {
 export default function TokenList({
   balances,
   isLoading,
-
   refetchBalances,
   refetchHistory,
   address,
@@ -111,7 +109,7 @@ export default function TokenList({
                       </p>
                     </div>
                   </div>
-                  <div className="text-center">
+                  <div className="text-center hidden sm:block">
                     <p className="font-semibold text-[#161616] dark:text-white">
                       {Number(
                         shiftDigits(
@@ -121,7 +119,9 @@ export default function TokenList({
                       ).toLocaleString(undefined, {
                         maximumFractionDigits: balance.metadata?.denom_units[1]?.exponent ?? 6,
                       })}{' '}
-                      {truncateString(balance.metadata?.display ?? '', 12).toUpperCase()}
+                      <span>
+                        {truncateString(balance.metadata?.display ?? '', 12).toUpperCase()}
+                      </span>
                     </p>
                   </div>
                   <div className="flex flex-row gap-2">
diff --git a/components/wallet.tsx b/components/wallet.tsx
index b2fe3710..4521f5fb 100644
--- a/components/wallet.tsx
+++ b/components/wallet.tsx
@@ -116,7 +116,11 @@ export const WalletSection: React.FC<WalletSectionProps> = ({ chainName }) => {
               className="font-medium text-xl text-center mb-2 truncate"
               title={username || 'Connected user'}
             >
-              {username || 'Connected User'}
+              {username
+                ? username.length > 20
+                  ? `${username.slice(0, 20)}...`
+                  : username
+                : 'Connected User'}
             </p>
             <div className="bg-base-100 dark:bg-base-200 rounded-full py-2 px-4 text-center mb-4 flex items-center flex-row justify-between w-full ">
               <p className="text-xs  truncate flex-grow">
diff --git a/pages/bank.tsx b/pages/bank.tsx
index 2451a8d8..a8710698 100644
--- a/pages/bank.tsx
+++ b/pages/bank.tsx
@@ -11,7 +11,7 @@ import {
 
 import { useChain } from '@cosmos-kit/react';
 import Head from 'next/head';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { HistoryBox } from '@/components';
 import { BankIcon } from '@/components/icons';
 import { CombinedBalanceInfo } from '@/utils/types';
@@ -31,6 +31,17 @@ export default function Bank() {
   const indexerUrl = selectedEndpoint?.indexer || '';
 
   const { metadatas, isMetadatasLoading } = useTokenFactoryDenomsMetadata();
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const pageSize = 10;
+
+  const {
+    sendTxs,
+    totalPages,
+    isLoading: txLoading,
+    isError,
+    refetch: refetchHistory,
+  } = useGetFilteredTxAndSuccessfulProposals(indexerUrl, address ?? '', currentPage, pageSize);
 
   const combinedBalances = useMemo(() => {
     if (!balances || !resolvedBalances || !metadatas) return [];
@@ -72,8 +83,6 @@ export default function Bank() {
 
   const isLoading = isBalancesLoading || resolvedLoading || isMetadatasLoading;
 
-  const { refetch } = useGetFilteredTxAndSuccessfulProposals(indexerUrl, address ?? '');
-
   return (
     <>
       <div className="min-h-screen relative px-2 mx-auto text-white mt-12 md:mt-0">
@@ -143,12 +152,22 @@ export default function Bank() {
                     refetchBalances={refetchBalances || resolveRefetch}
                     isLoading={isLoading}
                     balances={combinedBalances}
-                    refetchHistory={refetch}
+                    refetchHistory={refetchHistory}
                     address={address ?? ''}
                   />
                 </div>
                 <div className="w-full lg:w-1/2 h-[calc(50vh-2rem)] lg:h-full">
-                  <HistoryBox address={address ?? ''} isLoading={isLoading} />
+                  <HistoryBox
+                    currentPage={currentPage}
+                    setCurrentPage={setCurrentPage}
+                    address={address ?? ''}
+                    isLoading={isLoading}
+                    sendTxs={sendTxs}
+                    totalPages={totalPages}
+                    txLoading={txLoading}
+                    isError={isError}
+                    refetch={refetchHistory}
+                  />
                 </div>
               </div>
             )