src/components/layout/Navbar/Navbar.tsx

@@ -50,6 +50,8 @@ interface Props {
   userAvatar: string;
   authenticate: () => void;
   setTheme: (val: string) => void;
+  accountNames: { name: string }[];
+  setActiveName: (name: string) => void;
 }
 
 const NavBar: React.FC<Props> = ({
@@ -58,6 +60,8 @@ const NavBar: React.FC<Props> = ({
   userAvatar,
   authenticate,
   setTheme,
+  accountNames,
+  setActiveName,
 }) => {
   const windowSize = useWindowSize();
   const searchValRef = useRef("");
@@ -426,6 +430,22 @@ const NavBar: React.FC<Props> = ({
             horizontal: "left",
           }}
         >
+          {accountNames
+            .filter(n => n.name)
+            .map(n => (
+              <DropdownContainer
+                key={n.name}
+                onClick={() => {
+                  setActiveName(n.name);
+                  handleCloseUserDropdown();
+                }}
+              >
+                <DropdownText>
+                  {n.name === userName ? "✔︎ " : ""}
+                  {n.name}
+                </DropdownText>
+              </DropdownContainer>
+            ))}
           <DropdownContainer
             onClick={() => {
               setIsOpenBlockedNamesModal(true);

src/pages/Home/FileListComponentLevel.tsx

@@ -46,7 +46,7 @@ export const FileListComponentLevel = ({ mode }: VideoListProps) => {
   const getVideos = React.useCallback(async () => {
     try {
       const offset = videos.length;
-      const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSHARE_FILE_BASE}_&limit=50&includemetadata=false&reverse=true&excludeblocked=true&name=${paramName}&exactmatchnames=true&offset=${offset}`;
+      const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QSHARE_FILE_BASE}&limit=50&includemetadata=false&reverse=true&excludeblocked=true&name=${paramName}&exactmatchnames=true&offset=${offset}`;
       const response = await fetch(url, {
         method: "GET",
         headers: {

src/state/features/authSlice.ts

@@ -1,13 +1,21 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+export interface NameRecord {
+  name: string
+  owner: string
+}
+
+interface User {
+  address: string
+  publicKey: string
+  name?: string
+  names?: NameRecord[]
+}
 
 interface AuthState {
-  user: {
+  user: User | null
-    address: string;
-    publicKey: string;
-    name?: string;
-  } | null;
 }
+
 const initialState: AuthState = {
   user: null
 };

src/utils/qortalRequestFunctions.ts

@@ -0,0 +1,29 @@
+export interface NameRecord {
+  name: string;
+  owner: string;
+}
+
+export async function getAccountNames(address: string): Promise<NameRecord[]> {
+  try {
+    const list = await qortalRequest({
+      action: 'GET_ACCOUNT_NAMES',
+      address,
+    });
+    if (Array.isArray(list) && list.length) return list;
+    return [{ name: '', owner: address }];
+  } catch {
+    return [{ name: '', owner: address }];
+  }
+}
+
+export async function getPrimaryAccountName(address: string): Promise<string> {
+  try {
+    const res = await qortalRequest({
+      action: 'GET_PRIMARY_NAME',
+      address,
+    });
+    return typeof res === 'string' ? res : '';
+  } catch {
+    return '';
+  }
+}

src/wrappers/GlobalWrapper.tsx

@@ -8,6 +8,11 @@ import React, {
 import { useDispatch, useSelector } from "react-redux";
 
 import { addUser } from "../state/features/authSlice";
+import {
+  getAccountNames,
+  getPrimaryAccountName,
+  NameRecord,
+} from "../utils/qortalRequestFunctions";
 import NavBar from "../components/layout/Navbar/Navbar";
 import PageLoader from "../components/common/PageLoader";
 import { RootState } from "../state/store";
@@ -69,10 +74,17 @@ const GlobalWrapper: React.FC<Props> = ({ children, setTheme }) => {
 
   useEffect(() => {
     if (!username) return;
-
     getAvatar(username);
   }, [username, getAvatar]);
 
+  const switchActiveName = useCallback(
+    (newName: string) => {
+      if (!user) return;
+      dispatch(addUser({ ...user, name: newName }));
+    },
+    [user, dispatch]
+  );
+
   const { isLoadingGlobal } = useSelector((state: RootState) => state.global);
 
   async function getNameInfo(address: string) {
@@ -95,8 +107,9 @@ const GlobalWrapper: React.FC<Props> = ({ children, setTheme }) => {
         action: "GET_USER_ACCOUNT",
       });
 
-      const name = await getNameInfo(account.address);
+      const names = await getAccountNames(account.address);
-      dispatch(addUser({ ...account, name }));
+      const primary = await getPrimaryAccountName(account.address);
+      dispatch(addUser({ ...account, name: primary, names }));
     } catch (error) {
       console.error(error);
     }
@@ -136,6 +149,8 @@ const GlobalWrapper: React.FC<Props> = ({ children, setTheme }) => {
         setTheme={(val: string) => setTheme(val)}
         isAuthenticated={!!user?.name}
         userName={user?.name || ""}
+        accountNames={user?.names || []}
+        setActiveName={switchActiveName}
         userAvatar={userAvatar}
         authenticate={askForAccountInformation}
       />