add account naming

components/AccountNameModal.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent, useState } from 'react'
-import useMangoStore from '../stores/useMangoStore'
+import useMangoStore, { mangoClient } from '../stores/useMangoStore'
 import {
   ExclamationCircleIcon,
   InformationCircleIcon,
@@ -9,9 +9,6 @@ import Button from './Button'
 import Modal from './Modal'
 import { ElementTitle } from './styles'
 import Tooltip from './Tooltip'
-import useConnection from '../hooks/useConnection'
-import { PublicKey } from '@solana/web3.js'
-// import { addMarginAccountInfo } from '../utils/mango'
 import { notify } from '../utils/notifications'
 
 interface AccountNameModalProps {
@@ -27,34 +24,35 @@ const AccountNameModal: FunctionComponent<AccountNameModalProps> = ({
 }) => {
   const [name, setName] = useState(accountName || '')
   const [invalidNameMessage, setInvalidNameMessage] = useState('')
-  const wallet = useMangoStore.getState().wallet.current
+  const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
-  const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
   const actions = useMangoStore((s) => s.actions)
-  const { connection, programId } = useConnection()
 
   const submitName = async () => {
-    // addMarginAccountInfo(
+    const wallet = useMangoStore.getState().wallet.current
-    //   connection,
+
-    //   new PublicKey(programId),
+    try {
-    //   selectedMangoGroup,
+      const txid = await mangoClient.addMangoAccountInfo(
-    //   mangoAccount,
+        mangoGroup,
-    //   wallet,
+        mangoAccount,
-    //   name
+        wallet,
-    // )
+        name
-    //   .then(() => {
+      )
-    //     actions.fetchMarginAccounts()
+      actions.fetchMangoAccounts()
-    //     onClose()
+      onClose()
-    //   })
+      notify({
-    //   .catch((err) => {
+        title: 'Account name updated',
-    //     console.warn('Error setting account name:', err)
+        txid,
-    //     notify({
+      })
-    //       message: 'Could not set account name',
+    } catch (err) {
-    //       description: `${err}`,
+      console.warn('Error setting account name:', err)
-    //       txid: err.txid,
+      notify({
-    //       type: 'error',
+        title: 'Could not set account name',
-    //     })
+        description: `${err}`,
-    //   })
+        txid: err.txid,
+        type: 'error',
+      })
+    }
   }
 
   const validateNameInput = () => {

components/AccountsModal.tsx

@@ -81,7 +81,7 @@ const AccountsModal: FunctionComponent<AccountsModalProps> = ({
         !showNewAccountForm ? (
           <>
             <Modal.Header>
-              <ElementTitle noMarignBottom>Margin Accounts</ElementTitle>
+              <ElementTitle noMarignBottom>Mango Accounts</ElementTitle>
             </Modal.Header>
             <div className="flex items-center justify-between pb-3 text-th-fgd-1">
               <div className="font-semibold">
@@ -104,7 +104,7 @@ const AccountsModal: FunctionComponent<AccountsModalProps> = ({
               onChange={(acc) => handleMangoAccountChange(acc)}
             >
               <RadioGroup.Label className="sr-only">
-                Select a Margin Account
+                Select a Mango Account
               </RadioGroup.Label>
               <div className="space-y-2">
                 {mangoAccounts.map((account) => (
@@ -129,7 +129,8 @@ const AccountsModal: FunctionComponent<AccountsModalProps> = ({
                                 <CurrencyDollarIcon className="h-5 w-5 mr-2.5" />
                                 <div>
                                   <div className="pb-0.5">
-                                    {abbreviateAddress(account.publicKey)}
+                                    {account.name ||
+                                      abbreviateAddress(account.publicKey)}
                                   </div>
                                   {mangoGroup ? (
                                     <div className="text-th-fgd-3 text-xs">

components/DepositWithdraw.tsx

@@ -7,45 +7,26 @@ import { ElementTitle } from './styles'
 import useMangoStore from '../stores/useMangoStore'
 import DepositModal from './DepositModal'
 import WithdrawModal from './WithdrawModal'
-// import BorrowModal from './BorrowModal'
 import Button, { IconButton } from './Button'
 import AccountsModal from './AccountsModal'
 
 export default function MarginBalances() {
-  const selectedMangoAccount = useMangoStore(
+  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
-    (s) => s.selectedMangoAccount.current
-  )
   const loadingMangoAccount = useMangoStore(
     (s) => s.selectedMangoAccount.initialLoad
   )
   const connected = useMangoStore((s) => s.wallet.connected)
-
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showWithdrawModal, setShowWithdrawModal] = useState(false)
   const [showAccountsModal, setShowAccountsModal] = useState(false)
-  // const [showBorrowModal, setShowBorrowModal] = useState(false)
-
-  const handleCloseDeposit = useCallback(() => {
-    setShowDepositModal(false)
-  }, [])
-
-  const handleCloseWithdraw = useCallback(() => {
-    setShowWithdrawModal(false)
-  }, [])
-
-  // const handleCloseBorrow = useCallback(() => {
-  //   setShowBorrowModal(false)
-  // }, [])
-
-  const handleCloseAccounts = useCallback(() => {
-    setShowAccountsModal(false)
-  }, [])
 
   return (
     <>
       <FloatingElement>
         <div className="flex justify-center">
-          <ElementTitle noMarignBottom>Mango Account</ElementTitle>
+          <ElementTitle noMarignBottom>
+            {mangoAccount.name || 'Mango Account'}
+          </ElementTitle>
           <div className="absolute right-0 pr-4">
             <Menu>
               <Menu.Button disabled={!connected}>
@@ -62,41 +43,15 @@ export default function MarginBalances() {
                     <div className="pl-2 text-left">Change Account</div>
                   </button>
                 </Menu.Item>
-                {/* <Menu.Item>
-                  <button
-                    className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                    disabled={!selectedMangoAccount}
-                    onClick={() => setShowBorrowModal(true)}
-                  >
-                    <div className="pl-2 text-left">Borrow</div>
-                  </button>
-                </Menu.Item>
-                <Menu.Item>
-                  <button
-                    className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
-                    onClick={() => setShowDepositModal(true)}
-                  >
-                    <div className="pl-2 text-left">Deposit</div>
-                  </button>
-                </Menu.Item>
-                <Menu.Item>
-                  <button
-                    className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-                    disabled={!selectedMangoAccount}
-                    onClick={() => setShowWithdrawModal(true)}
-                  >
-                    <div className="pl-2 text-left">Withdraw</div>
-                  </button>
-                </Menu.Item> */}
               </Menu.Items>
             </Menu>
           </div>
         </div>
         <div className="flex justify-center mt-2">
-          {selectedMangoAccount ? (
+          {mangoAccount ? (
             <Link href={'/account'}>
               <a className="pt-1 text-th-fgd-3 text-xs underline hover:no-underline">
-                {selectedMangoAccount?.publicKey.toString()}
+                {mangoAccount?.publicKey.toString()}
               </a>
             </Link>
           ) : connected ? (
@@ -116,26 +71,27 @@ export default function MarginBalances() {
           <Button
             onClick={() => setShowWithdrawModal(true)}
             className="ml-4 w-1/2"
-            disabled={
+            disabled={!connected || !mangoAccount || loadingMangoAccount}
-              !connected || !selectedMangoAccount || loadingMangoAccount
-            }
           >
             <span>Withdraw</span>
           </Button>
         </div>
       </FloatingElement>
       {showDepositModal && (
-        <DepositModal isOpen={showDepositModal} onClose={handleCloseDeposit} />
+        <DepositModal
+          isOpen={showDepositModal}
+          onClose={() => setShowDepositModal(false)}
+        />
       )}
       {showWithdrawModal && (
         <WithdrawModal
           isOpen={showWithdrawModal}
-          onClose={handleCloseWithdraw}
+          onClose={() => setShowWithdrawModal(false)}
         />
       )}
       {showAccountsModal ? (
         <AccountsModal
-          onClose={handleCloseAccounts}
+          onClose={() => setShowAccountsModal(false)}
           isOpen={showAccountsModal}
         />
       ) : null}

pages/account.tsx

@@ -26,7 +26,6 @@ import AccountOverview from '../components/account-page/AccountOverview'
 import AccountNameModal from '../components/AccountNameModal'
 import Button from '../components/Button'
 import EmptyState from '../components/EmptyState'
-import { MangoAccount } from '@blockworks-foundation/mango-client'
 
 const TABS = [
   'Overview',
@@ -38,15 +37,6 @@ const TABS = [
   'Activity',
 ]
 
-export function getMarginInfoString(marginAccount: MangoAccount) {
-  return marginAccount?.info
-    ? String.fromCharCode(...marginAccount?.info).replaceAll(
-        String.fromCharCode(0),
-        ''
-      )
-    : ''
-}
-
 export default function Account() {
   const [activeTab, setActiveTab] = useState(TABS[0])
   const [showAccountsModal, setShowAccountsModal] = useState(false)
@@ -62,9 +52,6 @@ export default function Account() {
   const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
   const wallet = useMangoStore((s) => s.wallet.current)
 
-  const marginInfoString = getMarginInfoString(mangoAccount)
-  const [accountName, setAccountName] = useState(marginInfoString)
-
   const handleTabChange = (tabName) => {
     setActiveTab(tabName)
   }
@@ -143,6 +130,7 @@ export default function Account() {
     })
     setPortfolio(portfolio.sort((a, b) => b.value - a.value))
   }, [perpAccounts])
+
   const handleCopyPublicKey = (code) => {
     setIsCopied(true)
     copyToClipboard(code)
@@ -169,7 +157,7 @@ export default function Account() {
             <>
               <div className="flex flex-col sm:flex-row sm:items-end pb-4 md:pb-0">
                 <h1 className={`font-semibold mr-3 text-th-fgd-1 text-2xl`}>
-                  {accountName ? accountName : 'Account'}
+                  {mangoAccount.name || 'Account'}
                 </h1>
                 <div className="flex items-center pb-0.5 text-th-fgd-3 ">
                   {abbreviateAddress(mangoAccount.publicKey)}
@@ -183,17 +171,15 @@ export default function Account() {
                 </div>
               </div>
               <div className="flex items-center">
-                {/* Re-instate when added to program code */}
+                <Button
-
-                {/* <Button
                   className="text-xs flex flex-grow items-center justify-center mr-2 pt-0 pb-0 h-8 pl-3 pr-3"
                   onClick={() => setShowNameModal(true)}
                 >
                   <div className="flex items-center">
                     <PencilIcon className="h-4 w-4 mr-1.5" />
-                    {accountName ? 'Edit Name' : 'Add Name'}
+                    {mangoAccount.name ? 'Edit Name' : 'Add Name'}
                   </div>
-                </Button> */}
+                </Button>
                 <a
                   className="bg-th-bkg-4 default-transition flex flex-grow font-bold h-8 items-center justify-center pl-3 pr-3 rounded-full text-th-fgd-1 text-xs hover:bg-th-bkg-3 hover:text-th-fgd-1 focus:outline-none"
                   href={`https://explorer.solana.com/address/${mangoAccount?.publicKey}`}
@@ -267,7 +253,7 @@ export default function Account() {
       ) : null}
       {showNameModal ? (
         <AccountNameModal
-          accountName={accountName}
+          accountName={mangoAccount.name}
           isOpen={showNameModal}
           onClose={handleCloseNameModal}
         />

yarn.lock

@@ -995,7 +995,7 @@
 
 "@blockworks-foundation/mango-client@git+https://github.com/blockworks-foundation/mango-client-v3.git":
   version "3.0.2"
-  resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#34dc2dbb28c23a657855b9c4cf0b25a972673b80"
+  resolved "git+https://github.com/blockworks-foundation/mango-client-v3.git#24f503fa06d586008d8a496e2707946174f2510f"
   dependencies:
     "@project-serum/serum" "^0.13.45"
     "@project-serum/sol-wallet-adapter" "^0.2.0"
@@ -1891,9 +1891,9 @@
   integrity sha512-7eQ2xYLLI/LsicL2nejW9Wyko3lcpN6O/z0ZLHrEQsg280zIdCv1t/0m6UtBjUHokCGBQ3gYTbHzDkZ1xOBwwg==
 
 "@types/node@*":
-  version "16.4.6"
+  version "16.4.7"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.6.tgz#1734d119dfa8fede5606d35ae10f9fc9c84d889b"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.7.tgz#f7afa78769d4b477f5092d7c3468e2e8653d779c"
-  integrity sha512-FKyawK3o5KL16AwbeFajen8G4K3mmqUrQsehn5wNKs8IzlKHE8TfnSmILXVMVziAEcnB23u1RCFU1NT6hSyr7Q==
+  integrity sha512-aDDY54sst8sx47CWT6QQqIZp45yURq4dic0+HCYfYNcY5Ejlb/CLmFnRLfy3wQuYafOeh3lB/DAKaqRKBtcZmA==
 
 "@types/node@^12.12.54":
   version "12.20.17"