From d1233cc1ad3227f2f1fb96ad846a89a6be33d089 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Tue, 20 May 2025 14:34:38 +0300
Subject: [PATCH] fixed ts , added update and sell conditions

---
 package-lock.json                             |   9 +-
 package.json                                  |   2 +-
 src/AppWrapper.tsx                            |   9 +-
 src/common/Spinners/BarSpinner/BarSpinner.tsx |  25 +-
 src/components/RegisterName.tsx               |  32 ++-
 src/components/Tables/ForSaleTable.tsx        |  70 ++---
 src/components/Tables/NameTable.tsx           | 239 +++++++++++-------
 src/components/Tables/PendingTxsTable.tsx     |  14 +-
 src/hooks/useFetchNames.tsx                   |  20 ++
 src/hooks/useHandleNameData.tsx               |  23 +-
 src/hooks/useModal.tsx                        |  39 ++-
 src/interfaces/index.ts                       |   9 +
 src/pages/Market.tsx                          |   7 +-
 src/pages/MyNames.tsx                         |  24 +-
 src/state/contexts/FetchNamesProvider.tsx     |  42 +++
 src/state/contexts/PendingTxsProvider.tsx     |  18 +-
 src/state/global/names.ts                     | 107 +++++++-
 17 files changed, 481 insertions(+), 208 deletions(-)
 create mode 100644 src/hooks/useFetchNames.tsx
 create mode 100644 src/interfaces/index.ts
 create mode 100644 src/state/contexts/FetchNamesProvider.tsx

diff --git a/package-lock.json b/package-lock.json
index 11103c5..d724763 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@mui/icons-material": "^7.0.1",
         "@mui/material": "^7.0.1",
         "jotai": "^2.12.3",
-        "qapp-core": "^1.0.27",
+        "qapp-core": "^1.0.30",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-router-dom": "^7.3.0",
@@ -3429,9 +3429,10 @@
       }
     },
     "node_modules/qapp-core": {
-      "version": "1.0.27",
-      "resolved": "https://registry.npmjs.org/qapp-core/-/qapp-core-1.0.27.tgz",
-      "integrity": "sha512-RNoHo1vx2K592X3w26+BAUSmDjfk4PIwDdUEyl+YIipYMRZDSCf1+TP3Rh93UGBMIxgcF58lQyXnKV1ttlHNQA==",
+      "version": "1.0.30",
+      "resolved": "https://registry.npmjs.org/qapp-core/-/qapp-core-1.0.30.tgz",
+      "integrity": "sha512-6UBeFrsFyOKMRNpQiWDENCuF9PXlbgkwiChh542i46cVFEUd7yuT+i8vlP3wWOrbQwsZtAAs4NI+zpiQuA7+KQ==",
+      "license": "MIT",
       "dependencies": {
         "@tanstack/react-virtual": "^3.13.2",
         "bloom-filters": "^3.0.4",
diff --git a/package.json b/package.json
index ac16f31..e487405 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@mui/icons-material": "^7.0.1",
     "@mui/material": "^7.0.1",
     "jotai": "^2.12.3",
-    "qapp-core": "^1.0.27",
+    "qapp-core": "^1.0.30",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.3.0",
diff --git a/src/AppWrapper.tsx b/src/AppWrapper.tsx
index d9d1649..43d68a6 100644
--- a/src/AppWrapper.tsx
+++ b/src/AppWrapper.tsx
@@ -2,6 +2,7 @@ import { Routes } from './Routes';
 import { GlobalProvider } from 'qapp-core';
 import { publicSalt } from './qapp-config.ts';
 import { PendingTxsProvider } from './state/contexts/PendingTxsProvider.tsx';
+import { FetchNamesProvider } from './state/contexts/FetchNamesProvider.tsx';
 
 export const AppWrapper = () => {
   return (
@@ -18,9 +19,11 @@ export const AppWrapper = () => {
         appName: 'names',
       }}
     >
-      <PendingTxsProvider>
-        <Routes />
-      </PendingTxsProvider>
+      <FetchNamesProvider>
+        <PendingTxsProvider>
+          <Routes />
+        </PendingTxsProvider>
+      </FetchNamesProvider>
     </GlobalProvider>
   );
 };
diff --git a/src/common/Spinners/BarSpinner/BarSpinner.tsx b/src/common/Spinners/BarSpinner/BarSpinner.tsx
index a51a512..25303e1 100644
--- a/src/common/Spinners/BarSpinner/BarSpinner.tsx
+++ b/src/common/Spinners/BarSpinner/BarSpinner.tsx
@@ -1,10 +1,17 @@
-import React from 'react'
-import './barSpinner.css'
-export const BarSpinner = ({width = '20px', color}) => {
-  return (
-    <div style={{
-        width,
-        color: color || 'green'
-    }} className="loader-bar"></div>
-  )
+import './barSpinner.css';
+
+interface BarSpinnerProps {
+  width: string | number;
+  color: string;
 }
+export const BarSpinner = ({ width = '20px', color }: BarSpinnerProps) => {
+  return (
+    <div
+      style={{
+        width,
+        color: color || 'green',
+      }}
+      className="loader-bar"
+    ></div>
+  );
+};
diff --git a/src/components/RegisterName.tsx b/src/components/RegisterName.tsx
index f3d9250..9a3865d 100644
--- a/src/components/RegisterName.tsx
+++ b/src/components/RegisterName.tsx
@@ -24,12 +24,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import ErrorIcon from '@mui/icons-material/Error';
 import { useSetAtom } from 'jotai';
 import { namesAtom, pendingTxsAtom } from '../state/global/names';
-export enum Availability {
-  NULL = 'null',
-  LOADING = 'loading',
-  AVAILABLE = 'available',
-  NOT_AVAILABLE = 'not-available',
-}
+import { Availability } from '../interfaces';
 
 const Label = styled('label')`
   display: block;
@@ -53,7 +48,7 @@ const RegisterName = () => {
 
   const [isLoadingRegisterName, setIsLoadingRegisterName] = useState(false);
   const theme = useTheme();
-  const [nameFee, setNameFee] = useState(null);
+  const [nameFee, setNameFee] = useState<number | null>(null);
   const registerNameFunc = async () => {
     if (!address) return;
     const loadId = showLoading('Registering name...please wait');
@@ -88,14 +83,18 @@ const RegisterName = () => {
       setNameValue('');
       setIsOpen(false);
     } catch (error) {
-      showError(error?.message || 'Unable to register name');
+      if (error instanceof Error) {
+        showError(error.message);
+      } else {
+        showError('Unable to register name');
+      }
     } finally {
       setIsLoadingRegisterName(false);
       dismissToast(loadId);
     }
   };
 
-  const checkIfNameExisits = async (name) => {
+  const checkIfNameExisits = async (name: string) => {
     if (!name?.trim()) {
       setIsNameAvailable(Availability.NULL);
 
@@ -112,7 +111,6 @@ const RegisterName = () => {
       }
     } catch (error) {
       console.error(error);
-    } finally {
     }
   };
 
@@ -133,7 +131,7 @@ const RegisterName = () => {
         const data = await fetch(`/transactions/unitfee?txType=REGISTER_NAME`);
         const fee = await data.text();
 
-        setNameFee((Number(fee) / 1e8).toFixed(8));
+        setNameFee(Number((Number(fee) / 1e8).toFixed(8)));
       } catch (error) {
         console.error(error);
       }
@@ -263,13 +261,13 @@ const RegisterName = () => {
             Close
           </Button>
           <Button
-            disabled={
+            disabled={Boolean(
               !nameValue.trim() ||
-              isLoadingRegisterName ||
-              isNameAvailable !== Availability.AVAILABLE ||
-              !balance ||
-              (balance && nameFee && +balance < +nameFee)
-            }
+                isLoadingRegisterName ||
+                isNameAvailable !== Availability.AVAILABLE ||
+                !balance ||
+                (balance && nameFee && +balance < +nameFee)
+            )}
             variant="contained"
             onClick={registerNameFunc}
             autoFocus
diff --git a/src/components/Tables/ForSaleTable.tsx b/src/components/Tables/ForSaleTable.tsx
index b760028..54d569d 100644
--- a/src/components/Tables/ForSaleTable.tsx
+++ b/src/components/Tables/ForSaleTable.tsx
@@ -8,30 +8,24 @@ import {
   Paper,
   Button,
 } from '@mui/material';
-import { useAtom, useSetAtom } from 'jotai';
-import { forwardRef, useMemo } from 'react';
+import { useSetAtom } from 'jotai';
+import { forwardRef } from 'react';
 import { TableVirtuoso, TableComponents } from 'react-virtuoso';
 import {
   forSaleAtom,
+  Names,
   namesAtom,
+  NamesForSale,
   pendingTxsAtom,
+  PendingTxsState,
 } from '../../state/global/names';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import {
-  dismissToast,
-  showError,
-  showLoading,
-  showSuccess,
-  useGlobal,
-} from 'qapp-core';
+import { dismissToast, showError, showLoading, showSuccess } from 'qapp-core';
+import { SetStateAction } from 'jotai';
+import { SortBy, SortDirection } from '../../interfaces';
 
-interface NameData {
-  name: string;
-  isSelling?: boolean;
-}
-
-const VirtuosoTableComponents: TableComponents<NameData> = {
+const VirtuosoTableComponents: TableComponents<NamesForSale> = {
   Scroller: forwardRef<HTMLDivElement>((props, ref) => (
     <TableContainer component={Paper} {...props} ref={ref} />
   )),
@@ -53,7 +47,7 @@ const VirtuosoTableComponents: TableComponents<NameData> = {
 function fixedHeaderContent(
   sortBy: string,
   sortDirection: string,
-  setSort: (field: 'name' | 'salePrice') => void
+  setSort: (field: SortBy) => void
 ) {
   const renderSortIcon = (field: string) => {
     if (sortBy !== field) return null;
@@ -89,13 +83,18 @@ function fixedHeaderContent(
   );
 }
 
+type SetPendingTxs = (update: SetStateAction<PendingTxsState>) => void;
+
+type SetNames = (update: SetStateAction<Names[]>) => void;
+
+type SetNamesForSale = (update: SetStateAction<NamesForSale[]>) => void;
+
 function rowContent(
   _index: number,
-  row: NameData,
-  setPendingTxs,
-  setNames,
-  setNamesForSale,
-  address
+  row: NamesForSale,
+  setPendingTxs: SetPendingTxs,
+  setNames: SetNames,
+  setNamesForSale: SetNamesForSale
 ) {
   const handleBuy = async (name: string) => {
     const loadId = showLoading('Attempting to purchase name...please wait');
@@ -131,9 +130,11 @@ function rowContent(
         };
       });
     } catch (error) {
-      showError(error?.message || 'Unable to purchase name');
-
-      console.log('error', error);
+      if (error instanceof Error) {
+        showError(error?.message);
+        return;
+      }
+      showError('Unable to purchase name');
     } finally {
       dismissToast(loadId);
     }
@@ -156,13 +157,19 @@ function rowContent(
   );
 }
 
+interface ForSaleTable {
+  namesForSale: NamesForSale[];
+  sortDirection: SortDirection;
+  sortBy: SortBy;
+  handleSort: (sortBy: SortBy) => void;
+}
+
 export const ForSaleTable = ({
   namesForSale,
   sortDirection,
   sortBy,
   handleSort,
-}) => {
-  const address = useGlobal().auth.address;
+}: ForSaleTable) => {
   const setNames = useSetAtom(namesAtom);
   const setNamesForSale = useSetAtom(forSaleAtom);
   const setPendingTxs = useSetAtom(pendingTxsAtom);
@@ -180,15 +187,8 @@ export const ForSaleTable = ({
         fixedHeaderContent={() =>
           fixedHeaderContent(sortBy, sortDirection, handleSort)
         }
-        itemContent={(index, row) =>
-          rowContent(
-            index,
-            row,
-            setPendingTxs,
-            setNames,
-            setNamesForSale,
-            address
-          )
+        itemContent={(index, row: NamesForSale) =>
+          rowContent(index, row, setPendingTxs, setNames, setNamesForSale)
         }
       />
     </Paper>
diff --git a/src/components/Tables/NameTable.tsx b/src/components/Tables/NameTable.tsx
index 9aedde4..7a93194 100644
--- a/src/components/Tables/NameTable.tsx
+++ b/src/components/Tables/NameTable.tsx
@@ -20,19 +20,26 @@ import {
   CircularProgress,
   Avatar,
 } from '@mui/material';
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { TableVirtuoso, TableComponents } from 'react-virtuoso';
 import {
   forceRefreshAtom,
   forSaleAtom,
+  Names,
   namesAtom,
+  NamesForSale,
   pendingTxsAtom,
+  PendingTxsState,
   refreshAtom,
-  sortedPendingTxsByCategoryAtom,
 } from '../../state/global/names';
 import PersonIcon from '@mui/icons-material/Person';
-import { useModal } from '../../hooks/useModal';
+import {
+  ModalFunctions,
+  ModalFunctionsAvatar,
+  ModalFunctionsSellName,
+  useModal,
+} from '../../hooks/useModal';
 import {
   dismissToast,
   ImagePicker,
@@ -43,11 +50,13 @@ import {
   Spacer,
   useGlobal,
 } from 'qapp-core';
-import { Availability } from '../RegisterName';
 import CheckIcon from '@mui/icons-material/Check';
 import ErrorIcon from '@mui/icons-material/Error';
 import { BarSpinner } from '../../common/Spinners/BarSpinner/BarSpinner';
 import { usePendingTxs } from '../../hooks/useHandlePendingTxs';
+import { FetchPrimaryNameType, useFetchNames } from '../../hooks/useFetchNames';
+import { Availability } from '../../interfaces';
+import { SetStateAction } from 'jotai';
 interface NameData {
   name: string;
   isSelling?: boolean;
@@ -87,40 +96,48 @@ function fixedHeaderContent() {
   );
 }
 
-const ManageAvatar = ({ name, modalFunctionsAvatar }) => {
+interface ManageAvatarProps {
+  name: string;
+  modalFunctionsAvatar: ModalFunctionsAvatar;
+}
+
+const ManageAvatar = ({ name, modalFunctionsAvatar }: ManageAvatarProps) => {
   const { setHasAvatar, getHasAvatar } = usePendingTxs();
   const [refresh] = useAtom(refreshAtom); // just to subscribe
   const [hasAvatarState, setHasAvatarState] = useState<boolean | null>(null);
 
-  const checkIfAvatarExists = useCallback(async (name) => {
-    try {
-      const res = getHasAvatar(name);
-      if (res !== null) {
-        setHasAvatarState(res);
-        return;
-      }
-      const identifier = `qortal_avatar`;
-      const url = `/arbitrary/resources/searchsimple?mode=ALL&service=THUMBNAIL&identifier=${identifier}&limit=1&name=${name}&includemetadata=false&prefix=true`;
-      const response = await getNameQueue.enqueue(() =>
-        fetch(url, {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        })
-      );
+  const checkIfAvatarExists = useCallback(
+    async (name: string) => {
+      try {
+        const res = getHasAvatar(name);
+        if (res !== null) {
+          setHasAvatarState(res);
+          return;
+        }
+        const identifier = `qortal_avatar`;
+        const url = `/arbitrary/resources/searchsimple?mode=ALL&service=THUMBNAIL&identifier=${identifier}&limit=1&name=${name}&includemetadata=false&prefix=true`;
+        const response = await getNameQueue.enqueue(() =>
+          fetch(url, {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          })
+        );
 
-      const responseData = await response.json();
-      if (responseData?.length > 0) {
-        setHasAvatarState(true);
-        setHasAvatar(name, true);
-      } else {
-        setHasAvatarState(false);
+        const responseData = await response.json();
+        if (responseData?.length > 0) {
+          setHasAvatarState(true);
+          setHasAvatar(name, true);
+        } else {
+          setHasAvatarState(false);
+        }
+      } catch (error) {
+        console.log(error);
       }
-    } catch (error) {
-      console.log(error);
-    }
-  }, []);
+    },
+    [getHasAvatar, setHasAvatar]
+  );
   useEffect(() => {
     if (!name) return;
     checkIfAvatarExists(name);
@@ -131,7 +148,7 @@ const ManageAvatar = ({ name, modalFunctionsAvatar }) => {
       size="small"
       disabled={hasAvatarState === null}
       onClick={() =>
-        modalFunctionsAvatar.show({ name, hasAvatar: hasAvatarState })
+        modalFunctionsAvatar.show({ name, hasAvatar: Boolean(hasAvatarState) })
       }
     >
       {hasAvatarState === null ? (
@@ -145,23 +162,35 @@ const ManageAvatar = ({ name, modalFunctionsAvatar }) => {
   );
 };
 
+type SetPendingTxs = (update: SetStateAction<PendingTxsState>) => void;
+type SetNames = (update: SetStateAction<Names[]>) => void;
+
+type SetNamesForSale = (update: SetStateAction<NamesForSale[]>) => void;
 function rowContent(
   _index: number,
   row: NameData,
-  primaryName?: string,
-  modalFunctions?: any,
-  modalFunctionsUpdateName?: any,
-  modalFunctionsAvatar?: any,
-  modalFunctionsSellName?: any,
-  setPendingTxs?: any,
-  setNames?: any,
-  setNamesForSale?: any
+  primaryName: string,
+  address: string,
+  fetchPrimaryName: FetchPrimaryNameType,
+  numberOfNames: number,
+  modalFunctions: ModalFunctions,
+  modalFunctionsUpdateName: ReturnType<typeof useModal>,
+  modalFunctionsAvatar: ModalFunctionsAvatar,
+  modalFunctionsSellName: ReturnType<typeof useModal>,
+  setPendingTxs: SetPendingTxs,
+  setNames: SetNames,
+  setNamesForSale: SetNamesForSale
 ) {
   const handleUpdate = async (name: string) => {
+    if (name === primaryName && numberOfNames > 1) {
+      showError('Cannot update primary name while having other names');
+      return;
+    }
     const loadId = showLoading('Updating name...please wait');
 
     try {
-      const response = await modalFunctionsUpdateName.show();
+      const response = await modalFunctionsUpdateName.show(undefined);
+      if (typeof response !== 'string') throw new Error('Invalid name');
       const res = await qortalRequest({
         action: 'UPDATE_NAME',
         newName: response,
@@ -189,13 +218,18 @@ function rowContent(
                   };
                   return copyArray;
                 });
+                fetchPrimaryName(address);
               },
             }, // add or overwrite this transaction
           },
         };
       });
     } catch (error) {
-      showError(error?.message || 'Unable to update name');
+      if (error instanceof Error) {
+        showError(error?.message);
+        return;
+      }
+      showError('Unable to update name');
       console.log('error', error);
     } finally {
       dismissToast(loadId);
@@ -205,16 +239,22 @@ function rowContent(
   };
 
   const handleSell = async (name: string) => {
+    if (name === primaryName && numberOfNames > 1) {
+      showError('Cannot sell primary name while having other names');
+      return;
+    }
     const loadId = showLoading('Placing name for sale...please wait');
     try {
       if (name === primaryName) {
         await modalFunctions.show({ name });
       }
       const price = await modalFunctionsSellName.show(name);
+      if (typeof price !== 'string' && typeof price !== 'number')
+        throw new Error('Invalid price');
       const res = await qortalRequest({
         action: 'SELL_NAME',
         nameForSale: name,
-        salePrice: price,
+        salePrice: +price,
       });
       showSuccess('Placed name for sale');
       setPendingTxs((prev) => {
@@ -241,7 +281,12 @@ function rowContent(
         };
       });
     } catch (error) {
-      showError(error?.message || 'Unable to place name for sale');
+      if (error instanceof Error) {
+        showError(error?.message);
+
+        return;
+      }
+      showError('Unable to place name for sale');
       console.log('error', error);
     } finally {
       dismissToast(loadId);
@@ -275,7 +320,11 @@ function rowContent(
       });
       showSuccess('Removed name from market');
     } catch (error) {
-      showError(error?.message || 'Unable to remove name from market');
+      if (error instanceof Error) {
+        showError(error?.message);
+        return;
+      }
+      showError('Unable to remove name from market');
       console.log('error', error);
     } finally {
       dismissToast(loadId);
@@ -349,18 +398,20 @@ function rowContent(
   );
 }
 
-export const NameTable = ({ names, primaryName }) => {
+interface NameTableProps {
+  names: Names[];
+  primaryName: string;
+}
+export const NameTable = ({ names, primaryName }: NameTableProps) => {
   const setNames = useSetAtom(namesAtom);
+  const { auth } = useGlobal();
   const [namesForSale, setNamesForSale] = useAtom(forSaleAtom);
-  const modalFunctions = useModal();
+  const modalFunctions = useModal<{ name: string }>();
   const modalFunctionsUpdateName = useModal();
-  const modalFunctionsAvatar = useModal();
+  const modalFunctionsAvatar = useModal<{ name: string; hasAvatar: boolean }>();
   const modalFunctionsSellName = useModal();
-  const categoryAtom = useMemo(
-    () => sortedPendingTxsByCategoryAtom('REGISTER_NAME'),
-    []
-  );
-  const txs = useAtomValue(categoryAtom);
+  const { fetchPrimaryName } = useFetchNames();
+
   const setPendingTxs = useSetAtom(pendingTxsAtom);
 
   const namesToDisplay = useMemo(() => {
@@ -389,6 +440,9 @@ export const NameTable = ({ names, primaryName }) => {
             index,
             row,
             primaryName,
+            auth?.address || '',
+            fetchPrimaryName,
+            names?.length,
             modalFunctions,
             modalFunctionsUpdateName,
             modalFunctionsAvatar,
@@ -422,7 +476,7 @@ export const NameTable = ({ names, primaryName }) => {
             <Button
               color="warning"
               variant="contained"
-              onClick={modalFunctions.onOk}
+              onClick={() => modalFunctions.onOk(undefined)}
               autoFocus
             >
               continue
@@ -446,45 +500,45 @@ export const NameTable = ({ names, primaryName }) => {
   );
 };
 
-const AvatarModal = ({ modalFunctionsAvatar }) => {
+interface PickedAvatar {
+  base64: string;
+  name: string;
+}
+
+interface AvatarModalProps {
+  modalFunctionsAvatar: ModalFunctionsAvatar;
+}
+const AvatarModal = ({ modalFunctionsAvatar }: AvatarModalProps) => {
   const { setHasAvatar } = usePendingTxs();
   const forceRefresh = useSetAtom(forceRefreshAtom);
 
-  const [arbitraryFee, setArbitraryFee] = useState('');
-  const [pickedAvatar, setPickedAvatar] = useState<any>(null);
+  const [pickedAvatar, setPickedAvatar] = useState<null | PickedAvatar>(null);
   const [isLoadingPublish, setIsLoadingPublish] = useState(false);
-  useEffect(() => {
-    const getArbitraryName = async () => {
-      try {
-        const data = await fetch(`/transactions/unitfee?txType=ARBITRARY`);
-        const fee = await data.text();
-
-        setArbitraryFee((Number(fee) / 1e8).toFixed(8));
-      } catch (error) {
-        console.error(error);
-      }
-    };
-    getArbitraryName();
-  }, []);
 
   const publishAvatar = async () => {
     const loadId = showLoading('Publishing avatar...please wait');
     try {
+      if (!modalFunctionsAvatar?.data || !pickedAvatar?.base64)
+        throw new Error('Missing data');
       setIsLoadingPublish(true);
       await qortalRequest({
         action: 'PUBLISH_QDN_RESOURCE',
         base64: pickedAvatar?.base64,
         service: 'THUMBNAIL',
         identifier: 'qortal_avatar',
-        name: modalFunctionsAvatar.data.name,
+        name: modalFunctionsAvatar?.data?.name,
       });
-      setHasAvatar(modalFunctionsAvatar.data.name, true);
+      setHasAvatar(modalFunctionsAvatar?.data?.name, true);
       forceRefresh();
 
       showSuccess('Successfully published avatar');
-      modalFunctionsAvatar.onOk();
+      modalFunctionsAvatar.onOk(undefined);
     } catch (error) {
-      showError(error?.message || 'Unable to publish avatar');
+      if (error instanceof Error) {
+        showError(error?.message);
+        return;
+      }
+      showError('Unable to publish avatar');
     } finally {
       dismissToast(loadId);
       setIsLoadingPublish(false);
@@ -513,7 +567,7 @@ const AvatarModal = ({ modalFunctionsAvatar }) => {
             width: '100%',
           }}
         >
-          {modalFunctionsAvatar.data.hasAvatar && !pickedAvatar?.base64 && (
+          {modalFunctionsAvatar?.data?.hasAvatar && !pickedAvatar?.base64 && (
             <Avatar
               sx={{
                 height: '138px',
@@ -532,7 +586,7 @@ const AvatarModal = ({ modalFunctionsAvatar }) => {
                 width: '138px',
               }}
               src={`data:image/webp;base64,${pickedAvatar?.base64}`}
-              alt={modalFunctionsAvatar.data.name}
+              alt={modalFunctionsAvatar?.data?.name}
             >
               <CircularProgress />
             </Avatar>
@@ -575,18 +629,24 @@ const AvatarModal = ({ modalFunctionsAvatar }) => {
   );
 };
 
-const UpdateNameModal = ({ modalFunctionsUpdateName }) => {
+interface UpdateNameModalProps {
+  modalFunctionsUpdateName: ReturnType<typeof useModal>;
+}
+
+const UpdateNameModal = ({
+  modalFunctionsUpdateName,
+}: UpdateNameModalProps) => {
   const [step, setStep] = useState(1);
   const [newName, setNewName] = useState('');
   const [isNameAvailable, setIsNameAvailable] = useState<Availability>(
     Availability.NULL
   );
-  const [nameFee, setNameFee] = useState(null);
+  const [nameFee, setNameFee] = useState<null | number>(null);
   const balance = useGlobal().auth.balance;
 
   const theme = useTheme();
 
-  const checkIfNameExisits = async (name) => {
+  const checkIfNameExisits = async (name: string) => {
     if (!name?.trim()) {
       setIsNameAvailable(Availability.NULL);
 
@@ -603,7 +663,6 @@ const UpdateNameModal = ({ modalFunctionsUpdateName }) => {
       }
     } catch (error) {
       console.error(error);
-    } finally {
     }
   };
 
@@ -624,7 +683,7 @@ const UpdateNameModal = ({ modalFunctionsUpdateName }) => {
         const data = await fetch(`/transactions/unitfee?txType=REGISTER_NAME`);
         const fee = await data.text();
 
-        setNameFee((Number(fee) / 1e8).toFixed(8));
+        setNameFee(+(Number(fee) / 1e8).toFixed(8));
       } catch (error) {
         console.error(error);
       }
@@ -758,12 +817,12 @@ const UpdateNameModal = ({ modalFunctionsUpdateName }) => {
             <Button
               color="primary"
               variant="contained"
-              disabled={
+              disabled={Boolean(
                 !newName?.trim() ||
-                isNameAvailable !== Availability.AVAILABLE ||
-                !balance ||
-                (balance && nameFee && +balance < +nameFee)
-              }
+                  isNameAvailable !== Availability.AVAILABLE ||
+                  !balance ||
+                  (balance && nameFee && +balance < +nameFee)
+              )}
               onClick={() => modalFunctionsUpdateName.onOk(newName.trim())}
               autoFocus
             >
@@ -783,7 +842,11 @@ const UpdateNameModal = ({ modalFunctionsUpdateName }) => {
   );
 };
 
-const SellNameModal = ({ modalFunctionsSellName }) => {
+interface SellNameModalProps {
+  modalFunctionsSellName: ModalFunctionsSellName;
+}
+
+const SellNameModal = ({ modalFunctionsSellName }: SellNameModalProps) => {
   const [price, setPrice] = useState(0);
 
   return (
diff --git a/src/components/Tables/PendingTxsTable.tsx b/src/components/Tables/PendingTxsTable.tsx
index 37e0f80..d9427f4 100644
--- a/src/components/Tables/PendingTxsTable.tsx
+++ b/src/components/Tables/PendingTxsTable.tsx
@@ -11,15 +11,13 @@ import {
 import { useAtomValue } from 'jotai';
 import { forwardRef } from 'react';
 import { TableVirtuoso, TableComponents } from 'react-virtuoso';
-import { allSortedPendingTxsAtom } from '../../state/global/names';
+import {
+  allSortedPendingTxsAtom,
+  NameTransactions,
+} from '../../state/global/names';
 import { Spacer } from 'qapp-core';
 
-interface NameData {
-  name: string;
-  isSelling?: boolean;
-}
-
-const VirtuosoTableComponents: TableComponents<NameData> = {
+const VirtuosoTableComponents: TableComponents<NameTransactions> = {
   Scroller: forwardRef<HTMLDivElement>((props, ref) => (
     <TableContainer component={Paper} {...props} ref={ref} />
   )),
@@ -47,7 +45,7 @@ function fixedHeaderContent() {
   );
 }
 
-function rowContent(_index: number, row: NameData) {
+function rowContent(_index: number, row: NameTransactions) {
   return (
     <>
       <TableCell>{row.type}</TableCell>
diff --git a/src/hooks/useFetchNames.tsx b/src/hooks/useFetchNames.tsx
new file mode 100644
index 0000000..ec40e54
--- /dev/null
+++ b/src/hooks/useFetchNames.tsx
@@ -0,0 +1,20 @@
+// PendingTxsContext.tsx
+import { createContext, useContext } from 'react';
+
+export type FetchPrimaryNameType = (address: string) => void;
+
+type FetchNamesContextType = {
+  fetchPrimaryName: FetchPrimaryNameType;
+};
+
+export const FetchNamesContext = createContext<
+  FetchNamesContextType | undefined
+>(undefined);
+
+export const useFetchNames = () => {
+  const context = useContext(FetchNamesContext);
+  if (!context) {
+    throw new Error('useFetchNames must be used within a FetchNamesProvider');
+  }
+  return context;
+};
diff --git a/src/hooks/useHandleNameData.tsx b/src/hooks/useHandleNameData.tsx
index 3194791..5f13ec2 100644
--- a/src/hooks/useHandleNameData.tsx
+++ b/src/hooks/useHandleNameData.tsx
@@ -1,15 +1,16 @@
 import { useSetAtom } from 'jotai';
-import { forSaleAtom, namesAtom } from '../state/global/names';
+import { forSaleAtom, Names, namesAtom } from '../state/global/names';
 import { useCallback, useEffect } from 'react';
 import { useGlobal } from 'qapp-core';
 import { usePendingTxs } from './useHandlePendingTxs';
+import { useFetchNames } from './useFetchNames';
 
 export const useHandleNameData = () => {
   const setNamesForSale = useSetAtom(forSaleAtom);
   const setNames = useSetAtom(namesAtom);
   const address = useGlobal().auth.address;
   const { clearPendingTxs } = usePendingTxs();
-
+  const { fetchPrimaryName } = useFetchNames();
   const getNamesForSale = useCallback(async () => {
     try {
       const res = await fetch('/names/forsale?limit=0&reverse=true');
@@ -33,13 +34,22 @@ export const useHandleNameData = () => {
       clearPendingTxs(
         'REGISTER_NAMES',
         'name',
-        res?.map((item) => item.name)
+        res?.map((item: Names) => item.name)
       );
       setNames(res);
     } catch (error) {
       console.error(error);
     }
-  }, [address, setNames]);
+  }, [address, setNames, clearPendingTxs]);
+
+  const getPrimaryName = useCallback(async () => {
+    if (!address) return;
+    try {
+      fetchPrimaryName(address);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [address, fetchPrimaryName]);
 
   // Initial fetch + interval
   useEffect(() => {
@@ -50,9 +60,8 @@ export const useHandleNameData = () => {
 
   useEffect(() => {
     getMyNames();
-    // const interval = setInterval(getMyNames, 120_000); // every 2 minutes
-    // return () => clearInterval(interval);
-  }, [getMyNames]);
+    getPrimaryName();
+  }, [getMyNames, getPrimaryName]);
 
   return null;
 };
diff --git a/src/hooks/useModal.tsx b/src/hooks/useModal.tsx
index dc96ad9..501122a 100644
--- a/src/hooks/useModal.tsx
+++ b/src/hooks/useModal.tsx
@@ -4,13 +4,34 @@ interface State {
   isShow: boolean;
 }
 
-export const useModal = () => {
-  const [state, setState] = useState<State>({ isShow: false });
-  const [data, setData] = useState(null);
-  const promiseConfig = useRef<any>(null);
+export type ModalFunctions<
+  TData = { name: string },
+  TResult = unknown,
+> = ReturnType<typeof useModal<TData, TResult>>;
 
-  const show = useCallback((data) => {
-    setData(data);
+export type ModalFunctionsAvatar<
+  TData = { name: string; hasAvatar: boolean },
+  TResult = unknown,
+> = ReturnType<typeof useModal<TData, TResult>>;
+
+export type ModalFunctionsSellName<
+  TData = unknown,
+  TResult = unknown,
+> = ReturnType<typeof useModal<TData, TResult>>;
+
+export const useModal = <TData = unknown, TResult = unknown>() => {
+  const [state, setState] = useState<State>({ isShow: false });
+  const [data, setData] = useState<TData | undefined>(undefined);
+
+  const promiseConfig = useRef<{
+    resolve: (value: TResult) => void;
+    reject: () => void;
+  } | null>(null);
+
+  const show = useCallback((inputData?: TData): Promise<TResult> => {
+    if (inputData !== undefined && inputData !== null) {
+      setData(inputData);
+    }
     return new Promise((resolve, reject) => {
       promiseConfig.current = { resolve, reject };
       setState({ isShow: true });
@@ -19,14 +40,14 @@ export const useModal = () => {
 
   const hide = useCallback(() => {
     setState({ isShow: false });
-    setData(null);
+    setData(undefined);
   }, []);
 
   const onOk = useCallback(
-    (payload: any) => {
+    (result: TResult) => {
       const { resolve } = promiseConfig.current || {};
       hide();
-      resolve?.(payload);
+      resolve?.(result);
     },
     [hide]
   );
diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts
new file mode 100644
index 0000000..4c4b38e
--- /dev/null
+++ b/src/interfaces/index.ts
@@ -0,0 +1,9 @@
+export enum Availability {
+  NULL = 'null',
+  LOADING = 'loading',
+  AVAILABLE = 'available',
+  NOT_AVAILABLE = 'not-available',
+}
+
+export type SortDirection = 'asc' | 'desc';
+export type SortBy = 'name' | 'salePrice';
diff --git a/src/pages/Market.tsx b/src/pages/Market.tsx
index 4c115ff..c393b71 100644
--- a/src/pages/Market.tsx
+++ b/src/pages/Market.tsx
@@ -3,11 +3,12 @@ import { ForSaleTable } from '../components/Tables/ForSaleTable';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { forSaleAtom } from '../state/global/names';
 import { useAtom } from 'jotai';
+import { SortBy, SortDirection } from '../interfaces';
 
 export const Market = () => {
   const [namesForSale] = useAtom(forSaleAtom);
-  const [sortBy, setSortBy] = useState<'name' | 'salePrice'>('name');
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [sortBy, setSortBy] = useState<SortBy>('name');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
   const [filterValue, setFilterValue] = useState('');
   const [value, setValue] = useState('');
   const namesForSaleFiltered = useMemo(() => {
@@ -52,7 +53,7 @@ export const Market = () => {
   }, [value]);
 
   const handleSort = useCallback(
-    (field: 'name' | 'salePrice') => {
+    (field: SortBy) => {
       if (sortBy === field) {
         // Toggle direction
         setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'));
diff --git a/src/pages/MyNames.tsx b/src/pages/MyNames.tsx
index 14377bc..7e91186 100644
--- a/src/pages/MyNames.tsx
+++ b/src/pages/MyNames.tsx
@@ -1,16 +1,15 @@
-import { useAtom, useSetAtom } from 'jotai';
-import { useGlobal } from 'qapp-core';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { namesAtom } from '../state/global/names';
+import { useAtom } from 'jotai';
+import { useEffect, useMemo, useState } from 'react';
+import { namesAtom, primaryNameAtom } from '../state/global/names';
 import { NameTable } from '../components/Tables/NameTable';
-import { Box, Button, TextField } from '@mui/material';
+import { Box, TextField } from '@mui/material';
 import RegisterName from '../components/RegisterName';
 
 export const MyNames = () => {
   const [names] = useAtom(namesAtom);
   const [value, setValue] = useState('');
   const [filterValue, setFilterValue] = useState('');
-
+  const [primaryName] = useAtom(primaryNameAtom);
   useEffect(() => {
     const handler = setTimeout(() => {
       setFilterValue(value);
@@ -27,12 +26,15 @@ export const MyNames = () => {
     const filtered = !lowerFilter
       ? names
       : names.filter((item) => item.name.toLowerCase().includes(lowerFilter));
-    return filtered;
-  }, [names, filterValue]);
 
-  const primaryName = useMemo(() => {
-    return names[0]?.name || '';
-  }, [names]);
+    // Sort to move primaryName to the top if it exists in the list
+    return [...filtered].sort((a, b) => {
+      if (a.name === primaryName) return -1;
+      if (b.name === primaryName) return 1;
+      return 0;
+    });
+  }, [names, filterValue, primaryName]);
+
   return (
     <div>
       <Box
diff --git a/src/state/contexts/FetchNamesProvider.tsx b/src/state/contexts/FetchNamesProvider.tsx
new file mode 100644
index 0000000..9f0276d
--- /dev/null
+++ b/src/state/contexts/FetchNamesProvider.tsx
@@ -0,0 +1,42 @@
+// PendingTxsProvider.tsx
+import { ReactNode, useCallback, useMemo } from 'react';
+import { useSetAtom } from 'jotai';
+import { primaryNameAtom } from '../global/names';
+import { FetchNamesContext } from '../../hooks/useFetchNames';
+
+export const FetchNamesProvider = ({ children }: { children: ReactNode }) => {
+  const setPrimaryName = useSetAtom(primaryNameAtom);
+  const fetchPrimaryName = useCallback(
+    async (address: string) => {
+      if (!address) return;
+      try {
+        const res = await qortalRequest({
+          action: 'GET_ACCOUNT_NAMES',
+          address,
+          limit: 0,
+          offset: 0,
+          reverse: false,
+        });
+        if (res?.length > 0) {
+          setPrimaryName(res[0]?.name);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [setPrimaryName]
+  );
+
+  const value = useMemo(
+    () => ({
+      fetchPrimaryName,
+    }),
+    [fetchPrimaryName]
+  );
+
+  return (
+    <FetchNamesContext.Provider value={value}>
+      {children}
+    </FetchNamesContext.Provider>
+  );
+};
diff --git a/src/state/contexts/PendingTxsProvider.tsx b/src/state/contexts/PendingTxsProvider.tsx
index 92df7a6..6ab6aa2 100644
--- a/src/state/contexts/PendingTxsProvider.tsx
+++ b/src/state/contexts/PendingTxsProvider.tsx
@@ -1,20 +1,20 @@
 // PendingTxsProvider.tsx
 import { ReactNode, useEffect, useCallback, useMemo, useRef } from 'react';
 import { useAtom } from 'jotai';
-import { pendingTxsAtom } from '../global/names';
+import { pendingTxsAtom, TransactionCategory } from '../global/names';
 import { PendingTxsContext } from '../../hooks/useHandlePendingTxs';
 
 const TX_CHECK_INTERVAL = 80000;
 
 export const PendingTxsProvider = ({ children }: { children: ReactNode }) => {
   const [pendingTxs, setPendingTxs] = useAtom(pendingTxsAtom);
-  const hasAvatarRef = useRef({});
+  const hasAvatarRef = useRef<Record<string, boolean>>({});
   useEffect(() => {
     const interval = setInterval(() => {
       const categories = Object.keys(pendingTxs);
 
       categories.forEach((category) => {
-        const txs = pendingTxs[category];
+        const txs = pendingTxs[category as TransactionCategory];
         if (!txs) return;
 
         Object.entries(txs).forEach(async ([signature, tx]) => {
@@ -27,7 +27,9 @@ export const PendingTxsProvider = ({ children }: { children: ReactNode }) => {
 
             if (data?.blockHeight) {
               setPendingTxs((prev) => {
-                const newCategory = { ...prev[category] };
+                const newCategory = {
+                  ...prev[category as TransactionCategory],
+                };
                 delete newCategory[signature];
 
                 const updated = {
@@ -36,7 +38,7 @@ export const PendingTxsProvider = ({ children }: { children: ReactNode }) => {
                 };
 
                 if (Object.keys(newCategory).length === 0) {
-                  delete updated[category];
+                  delete updated[category as TransactionCategory];
                 }
 
                 return updated;
@@ -57,12 +59,12 @@ export const PendingTxsProvider = ({ children }: { children: ReactNode }) => {
   const clearPendingTxs = useCallback(
     (category: string, fieldName: string, values: string[]) => {
       setPendingTxs((prev) => {
-        const categoryTxs = prev[category];
+        const categoryTxs = prev[category as TransactionCategory];
         if (!categoryTxs) return prev;
 
         const filtered = Object.fromEntries(
           Object.entries(categoryTxs).filter(
-            ([_, tx]) => !values.includes(tx[fieldName])
+            ([_, tx]) => !values.includes(tx[fieldName as 'name'])
           )
         );
 
@@ -72,7 +74,7 @@ export const PendingTxsProvider = ({ children }: { children: ReactNode }) => {
         };
 
         if (Object.keys(filtered).length === 0) {
-          delete updated[category];
+          delete updated[category as TransactionCategory];
         }
 
         return updated;
diff --git a/src/state/global/names.ts b/src/state/global/names.ts
index e204c0d..2473eec 100644
--- a/src/state/global/names.ts
+++ b/src/state/global/names.ts
@@ -1,16 +1,113 @@
 import { atom } from 'jotai';
 
-type TransactionCategory = 'REGISTER_NAME';
+interface AdditionalFields {
+  callback: () => void;
+  status: 'PENDING';
+}
+interface RegisterNameTransaction {
+  type: 'REGISTER_NAME';
+  timestamp: number;
+  reference: string;
+  fee: string;
+  signature: string;
+  txGroupId: number;
+  blockHeight: number;
+  approvalStatus: 'NOT_REQUIRED';
+  creatorAddress: string;
+  registrantPublicKey: string;
+  name: string;
+  data: string;
+}
+
+interface UpdateNameTransaction {
+  type: 'UPDATE_NAME';
+  timestamp: number;
+  reference: string;
+  fee: string;
+  signature: string;
+  txGroupId: number;
+  blockHeight: number;
+  approvalStatus: 'NOT_REQUIRED';
+  creatorAddress: string;
+  ownerPublicKey: string;
+  name: string;
+  newName: string;
+  newData: string;
+}
+
+interface SellNameTransaction {
+  type: 'SELL_NAME';
+  timestamp: number;
+  reference: string;
+  fee: string;
+  signature: string;
+  txGroupId: number;
+  blockHeight: number;
+  approvalStatus: 'NOT_REQUIRED';
+  creatorAddress: string;
+  ownerPublicKey: string;
+  name: string;
+  amount: string;
+}
+
+interface CancelSellNameTransaction {
+  type: 'CANCEL_SELL_NAME';
+  timestamp: number;
+  reference: string;
+  fee: string;
+  signature: string;
+  txGroupId: number;
+  blockHeight: number;
+  approvalStatus: 'NOT_REQUIRED';
+  creatorAddress: string;
+  ownerPublicKey: string;
+  name: string;
+}
+
+interface BuyNameTransaction {
+  type: 'BUY_NAME';
+  timestamp: number;
+  reference: string;
+  fee: string;
+  signature: string;
+  txGroupId: number;
+  blockHeight: number;
+  approvalStatus: 'NOT_REQUIRED';
+  creatorAddress: string;
+  buyerPublicKey: string;
+  name: string;
+  amount: string;
+  seller: string;
+}
+
+export type NameTransactions =
+  | (RegisterNameTransaction & AdditionalFields)
+  | (UpdateNameTransaction & AdditionalFields)
+  | (SellNameTransaction & AdditionalFields)
+  | (CancelSellNameTransaction & AdditionalFields)
+  | (BuyNameTransaction & AdditionalFields);
 
 type TransactionMap = {
-  [signature: string]: any; // replace `any` with your transaction type if known
+  [signature: string]: NameTransactions;
 };
 
-type PendingTxsState = {
+export type TransactionCategory = NameTransactions['type'];
+
+export type PendingTxsState = {
   [key in TransactionCategory]?: TransactionMap;
 };
-export const namesAtom = atom([]);
-export const forSaleAtom = atom([]);
+
+export interface Names {
+  name: string;
+  owner: string;
+}
+export interface NamesForSale {
+  name: string;
+  salePrice: number;
+}
+export const namesAtom = atom<Names[]>([]);
+export const primaryNameAtom = atom('');
+export const forSaleAtom = atom<NamesForSale[]>([]);
 export const pendingTxsAtom = atom<PendingTxsState>({});
 
 export const sortedPendingTxsByCategoryAtom = (category: string) =>