Fixed txlist loader bug, fixed transaction

package.json

@@ -1,7 +1,7 @@
 {
   "name": "clorio-wallet",
   "description": "Clorio wallet",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "private": true,
   "main": "packages/main/dist/index.cjs",
   "author": {

packages/main/src/mainWindow.ts

@@ -434,17 +434,17 @@ Object.keys(eventHandlers).forEach(eventName => {
 });
 
 ipcMain.on('account-change', (_: Electron.IpcMainInvokeEvent, arg) => {
-  try{
+  try {
     childWindow.webContents.send('accountsChanged', arg);
-  } catch(e){
+  } catch (e) {
     console.log('Child window not connected');
   }
 });
 
 ipcMain.on('chain-change', (_: Electron.IpcMainInvokeEvent, arg) => {
-  try{
+  try {
     childWindow.webContents.send('chainChanged', arg);
-  } catch(e){
+  } catch (e) {
     console.log('Child window not connected');
   }
 });

packages/renderer/src/Layout.tsx

@@ -68,18 +68,14 @@ const Layout = () => {
             }
           >
             <Container className="contentWrapper animate__animated animate__fadeIn">
-              <Spinner show={showLoader}>
-                <div
-                  className={`flex gap-4 flex-col ${isAuthenticated ? 'authenticated-view' : ''}`}
-                >
-                  {sessionData && !isEmptyObject(sessionData) && sessionData.address && <Balance />}
-                  <Routes
-                    sessionData={sessionData}
-                    toggleLoader={toggleLoader}
-                    network={networkData}
-                  />
-                </div>
-              </Spinner>
+              <div className={`flex gap-4 flex-col ${isAuthenticated ? 'authenticated-view' : ''}`}>
+                {sessionData && !isEmptyObject(sessionData) && sessionData.address && <Balance />}
+                <Routes
+                  sessionData={sessionData}
+                  toggleLoader={toggleLoader}
+                  network={networkData}
+                />
+              </div>
             </Container>
           </div>
         </div>

packages/renderer/src/components/UI/Spinner.tsx

@@ -11,13 +11,13 @@ interface IProps {
 const Spinner = ({show, className, children, fullscreen = true}: IProps) => {
   const [deelayedShow, setDeelayedShow] = useState(show);
   useEffect(() => {
-    if (show) {
+    if (!show && deelayedShow) {
       setTimeout(() => {
         setDeelayedShow(false);
       }, 500);
     }
-  }, [show]);
-  return deelayedShow ? (
+  }, [show, deelayedShow]);
+  return show ? (
     <div
       className={`spinner-container center animate__animated animate__fadeIn ${
         fullscreen ? 'no-max-height' : ''
@@ -27,18 +27,6 @@ const Spinner = ({show, className, children, fullscreen = true}: IProps) => {
         color="#9e8cff"
         className="show"
       />
-      {/* <div className="show">
-        <div className="lds-roller">
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
-          <div></div>
-        </div>
-      </div> */}
     </div>
   ) : (
     <div className="animate__animated animate__fadeIn">{children || <></>}</div>

packages/renderer/src/components/UI/sidebar/NetworkSettings.tsx

@@ -79,7 +79,7 @@ export default function NetworkSettings({
       >
         <div className="settings-modal-container">
           <h1 className="w-100 text-center">Settings</h1>
-          <p className="w-100 text-center small">Current version: 2.0.0</p>
+          <p className="w-100 text-center small">Current version: 2.1.1</p>
           <hr />
           <div className="flex flex-col gap-4">
             <div className="flex flex-col gap-2">

packages/renderer/src/components/transactionsTable/TransactionsTable.tsx

@@ -16,6 +16,7 @@ import {mempoolQueryRowToTableRow, transactionQueryRowToTableRow} from './Transa
 import WalletCreationTransaction from './WalletCreationTransaction';
 import RefetchTransactions from './RefetchTransactions';
 import type {Blacklist} from '../../types/Blacklist';
+import {TRANSACTIONS_TABLE_ITEMS_PER_PAGE} from '/@/tools';
 
 const TransactionsTable = ({
   transactions,
@@ -44,7 +45,9 @@ const TransactionsTable = ({
     (error ||
       !transactions ||
       transactions?.transactions === null ||
-      (transactions?.transactions && transactions?.transactions.length === 0))
+      (transactions?.transactions && transactions?.transactions.length === 0) ||
+      !totalData ||
+      totalData?.transactionsCount?.count === 0)
   ) {
     return TransactionsTableError(balance, error, refetchData);
   }
@@ -103,10 +106,12 @@ const TransactionsTable = ({
    * @returns HTMLElement
    */
   const lastTransaction = () => {
-    const totalRows = totalData?.user_commands_aggregate?.aggregate?.count || 0;
+    const totalRows = totalData?.transactionsCount?.count || 0;
     const isLastPage = +page === +getTotalPages(totalRows);
-    if (isLastPage) {
-      return WalletCreationTransaction(totalRows + 1);
+    if (transactions?.transactions?.length) {
+      if (transactions?.transactions?.length < TRANSACTIONS_TABLE_ITEMS_PER_PAGE || isLastPage) {
+        return WalletCreationTransaction(totalRows + 1);
+      }
     }
   };
 
@@ -132,7 +137,7 @@ const TransactionsTable = ({
         <Pagination
           page={page}
           setOffset={setOffset}
-          total={getTotalPages(totalData?.user_commands_aggregate?.aggregate?.count || 0)}
+          total={getTotalPages(totalData?.transactionsCount?.count || 0)}
         />
       </div>
     </div>

packages/renderer/src/components/transactionsTable/TransactionsTypes.ts

@@ -1,7 +1,7 @@
 export interface ITransactionQueryData {
   type: string;
-  sender_public_key?:string;
-  receiver_public_key?:string;
+  sender_public_key?: string;
+  receiver_public_key?: string;
   fee?: number;
   memo: string;
   amount: string;
@@ -56,9 +56,7 @@ export interface IMempoolQueryResult {
 }
 
 export interface ITransactionTotalQueryResult {
-  user_commands_aggregate: {
-    aggregate: {
-      count: number;
-    };
+  transactionsCount: {
+    count: number;
   };
 }

packages/renderer/src/pages/Overview.tsx

@@ -11,7 +11,7 @@ import {
   TRANSACTIONS_TABLE_ITEMS_PER_PAGE,
   DEFAULT_QUERY_REFRESH_INTERVAL,
 } from '/@/tools';
-import {GET_MEMPOOL, GET_TRANSACTIONS, GET_HOME_NEWS} from '/@/graphql/query';
+import {GET_MEMPOOL, GET_TRANSACTIONS, GET_HOME_NEWS, GET_ID} from '/@/graphql/query';
 import NewsBanner from '../components/UI/NewsBanner';
 import type {IWalletData} from '/@/types/WalletData';
 import type {
@@ -20,8 +20,9 @@ import type {
 } from '../components/transactionsTable/TransactionsTypes';
 import type {IHomeNewsQuery} from '/@/types/NewsData';
 import {useWallet} from '../contexts/WalletContext';
-import {useRecoilValue} from 'recoil';
+import {useRecoilState, useRecoilValue} from 'recoil';
 import {walletState} from '../store';
+import {IWalletIdData} from '../types';
 
 interface IProps {
   sessionData: IWalletData;
@@ -31,10 +32,16 @@ const Overview = ({sessionData}: IProps) => {
   const {balanceData} = useContext<Partial<IBalanceContext>>(BalanceContext);
   const balance = balanceData?.balances[sessionData.address];
   const {wallet} = useWallet();
-  const {id} = useRecoilValue(walletState);
+  const [{id, address}, updateWalletState] = useRecoilState(walletState);
   const [offset, setOffset] = useState<number>(0);
   const [walletId, setWalletId] = useState<number>(+sessionData.id);
+  const [loading, setLoading] = useState(true);
   const {data: newsData} = useQuery<IHomeNewsQuery>(GET_HOME_NEWS);
+  const {data: walletIDData} = useQuery<IWalletIdData>(GET_ID, {
+    variables: {
+      publicKey: address,
+    },
+  });
   const lastNews = newsData?.newsHome && newsData?.newsHome.length > 0 && newsData?.newsHome[0];
   const {
     data: transactionsData,
@@ -68,6 +75,24 @@ const Overview = ({sessionData}: IProps) => {
     readWalletData();
   });
 
+  useEffect(() => {
+    if (walletIDData) {
+      const newId = walletIDData?.idByPublicKey?.id;
+      if (newId && newId !== id) {
+        updateWalletState(state => ({
+          ...state,
+          id: newId,
+        }));
+      }
+      if (newId === null) {
+        updateWalletState(state => ({
+          ...state,
+          id: -1,
+        }));
+      }
+    }
+  }, [walletIDData]);
+
   /**
    * Read session data and set the wallet id in the component state
    */
@@ -83,6 +108,7 @@ const Overview = ({sessionData}: IProps) => {
    * @param {number} page Page number
    */
   const changeOffset = (page: number) => {
+    setLoading(true);
     const data = (page - 1) * TRANSACTIONS_TABLE_ITEMS_PER_PAGE;
     setOffset(data);
   };
@@ -104,6 +130,12 @@ const Overview = ({sessionData}: IProps) => {
     }, 500);
   };
 
+  useEffect(() => {
+    if (transactionsData && mempoolData) {
+      setLoading(false);
+    }
+  }, [transactionsData, mempoolData]);
+
   return (
     <Hoc className="main-container">
       <div>
@@ -112,7 +144,7 @@ const Overview = ({sessionData}: IProps) => {
           transactions={transactionsData}
           mempool={mempoolData}
           error={transactionsError}
-          loading={transactionsLoading || mempoolLoading}
+          loading={loading}
           balance={+(balance?.total || 0)}
           setOffset={changeOffset}
           page={getPageFromOffset(offset)}

packages/renderer/src/tools/const/transactions.ts

@@ -1,6 +1,6 @@
 export const MINIMUM_AMOUNT = 1;
 export const MINIMUM_FEE = 1000000;
-export const TRANSACTIONS_TABLE_ITEMS_PER_PAGE = 10;
+export const TRANSACTIONS_TABLE_ITEMS_PER_PAGE = 15;
 export const VALIDATORS_TABLE_ITEMS_PER_PAGE = 100;
 export const DEFAULT_FEE = 0.1;
 export const DEFAULT_AMOUNT = 0;

packages/renderer/src/tools/utils.ts

@@ -305,7 +305,7 @@ function buildSignTxBody(params) {
   const sendAmount = +params.amount || 0.1;
   const signBody = {
     to: params.to || params.receiverAddress,
-    from: params.to || params.senderAddress,
+    from: params.from || params.senderAddress,
     fee: sendFee,
     nonce: params.nonce || 0,
     memo: params.memo || '',
@@ -341,7 +341,6 @@ export async function signTransaction(privateKey: string, params: unknown) {
     //   };
     // } else {
     signBody = buildSignTxBody(params);
-    console.log('🚀 ~ signTransaction ~ signBody:', signBody);
     // }
     signResult = signClient.signTransaction(signBody, privateKey);
     return signResult;