re-add edit account name (#410)

components/AccountNameModal.tsx

@@ -43,7 +43,7 @@ const AccountNameModal: FunctionComponent<AccountNameModalProps> = ({
         name
       )
       actions.fetchAllMangoAccounts(wallet)
-      actions.reloadMangoAccount()
+      await actions.reloadMangoAccount()
       onClose?.()
       notify({
         title: t('name-updated'),

components/Layout.tsx

@@ -90,6 +90,7 @@ const TopBar = () => {
   const { connected, publicKey } = useWallet()
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const initialLoad = useMangoStore((s) => s.selectedMangoAccount.initialLoad)
+  const loading = useMangoStore((s) => s.selectedMangoAccount.loading)
   const router = useRouter()
   const [showAccountsModal, setShowAccountsModal] = useState(false)
   const [showSettingsModal, setShowSettingsModal] = useState(false)
@@ -132,7 +133,7 @@ const TopBar = () => {
                 : ''}
             </span>
             {connected || pubkey ? (
-              !initialLoad ? (
+              !initialLoad && !loading ? (
                 mangoAccount ? (
                   <div
                     className="default-transition flex items-center font-bold text-th-fgd-1 hover:text-th-fgd-3"

pages/account.tsx

@@ -13,6 +13,7 @@ import {
   ExclamationCircleIcon,
   GiftIcon,
   LinkIcon,
+  PencilIcon,
   SwitchHorizontalIcon,
   TrashIcon,
   UsersIcon,
@@ -425,6 +426,17 @@ export default function Account() {
                               </button>
                             </Menu.Item>
                           ) : null}
+                          <Menu.Item>
+                            <button
+                              className="flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-primary"
+                              onClick={() => setShowNameModal(true)}
+                            >
+                              <div className="flex items-center">
+                                <PencilIcon className="mr-1.5 h-4 w-4" />
+                                {t('edit-account-name')}
+                              </div>
+                            </button>
+                          </Menu.Item>
                           <Menu.Item>
                             <button
                               className="flex w-full flex-row items-center rounded-none py-0.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-primary"

public/locales/en/common.json

@@ -134,6 +134,7 @@
    "disconnect": "Disconnect",
    "done": "Done",
    "edit": "Edit",
+   "edit-account-name": "Edit Account Name",
    "edit-columns": "Edit Columns",
    "edit-name": "Edit Name",
    "edit-nickname": "Edit the public nickname for your account",

public/locales/es/common.json

@@ -134,6 +134,7 @@
    "disconnect": "Desconectar",
    "done": "Hecho",
    "edit": "Editar",
+   "edit-account-name": "Edit Account Name",
    "edit-columns": "Edit Columns",
    "edit-name": "Actualizar nombre",
    "edit-nickname": "Edite el apodo público de su cuenta",

public/locales/kr/common.json

@@ -134,6 +134,7 @@
    "disconnect": "Disconnect",
    "done": "Done",
    "edit": "Edit",
+   "edit-account-name": "Edit Account Name",
    "edit-columns": "Edit Columns",
    "edit-table-columns": "Edit Table Columns",
    "edit-name": "Edit Name",

public/locales/ru/common.json

@@ -134,6 +134,7 @@
    "disconnect": "Отключить",
    "done": "Готово",
    "edit": "Редактировать",
+   "edit-account-name": "Edit Account Name",
    "edit-columns": "Edit Columns",
    "edit-name": "Редактировать имя",
    "edit-nickname": "Редактировать публичный ник для вашего аккаунтв",

public/locales/zh/common.json

@@ -134,6 +134,7 @@
     "disconnect": "断开连结",
     "done": "完成",
     "edit": "编辑",
+    "edit-account-name": "Edit Account Name",
     "edit-columns": "编辑表列",
     "edit-name": "编辑帐户标签",
     "edit-nickname": "编辑帐户标签",

public/locales/zh_tw/common.json

@@ -134,6 +134,7 @@
   "disconnect": "斷開連結",
   "done": "完成",
   "edit": "編輯",
+  "edit-account-name": "Edit Account Name",
   "edit-columns": "編輯表列",
   "edit-name": "編輯帳戶標籤",
   "edit-nickname": "編輯帳戶標籤",

stores/useMangoStore.tsx

@@ -246,6 +246,7 @@ export type MangoStore = {
     initialLoad: boolean
     lastUpdatedAt: string
     lastSlot: number
+    loading: boolean
     openOrders: any[]
     totalOpenOrders: number
     spotBalances: SpotBalance[]
@@ -422,6 +423,7 @@ const useMangoStore = create<
         initialLoad: true,
         lastUpdatedAt: '0',
         lastSlot: 0,
+        loading: false,
         openOrders: [],
         totalOpenOrders: 0,
         spotBalances: [],
@@ -802,10 +804,18 @@ const useMangoStore = create<
 
           if (!mangoAccount) return
 
+          set((state) => {
+            state.selectedMangoAccount.loading = true
+          })
+
           const [reloadedMangoAccount, lastSlot] =
             await mangoAccount.reloadFromSlot(connection, mangoClient.lastSlot)
           const lastSeenSlot = get().selectedMangoAccount.lastSlot
 
+          set((state) => {
+            state.selectedMangoAccount.loading = false
+          })
+
           if (lastSlot > lastSeenSlot) {
             set((state) => {
               state.selectedMangoAccount.current = reloadedMangoAccount