add account naming

2021-07-29 15:05:16 -04:00 · 2021-07-29 15:05:16 -04:00 · caa4a29b23
parent 8076afecc4
commit caa4a29b23
5 changed files with 53 additions and 112 deletions
--- a/components/AccountNameModal.tsx
+++ b/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 selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
+  const mangoGroup = 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(
-    //   connection,
-    //   new PublicKey(programId),
-    //   selectedMangoGroup,
-    //   mangoAccount,
-    //   wallet,
-    //   name
-    // )
-    //   .then(() => {
-    //     actions.fetchMarginAccounts()
-    //     onClose()
-    //   })
-    //   .catch((err) => {
-    //     console.warn('Error setting account name:', err)
-    //     notify({
-    //       message: 'Could not set account name',
-    //       description: `${err}`,
-    //       txid: err.txid,
-    //       type: 'error',
-    //     })
-    //   })
+    const wallet = useMangoStore.getState().wallet.current
+
+    try {
+      const txid = await mangoClient.addMangoAccountInfo(
+        mangoGroup,
+        mangoAccount,
+        wallet,
+        name
+      )
+      actions.fetchMangoAccounts()
+      onClose()
+      notify({
+        title: 'Account name updated',
+        txid,
+      })
+    } catch (err) {
+      console.warn('Error setting account name:', err)
+      notify({
+        title: 'Could not set account name',
+        description: `${err}`,
+        txid: err.txid,
+        type: 'error',
+      })
+    }
  }

  const validateNameInput = () => {
--- a/components/AccountsModal.tsx
+++ b/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">
--- a/components/DepositWithdraw.tsx
+++ b/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(
-    (s) => s.selectedMangoAccount.current
-  )
+  const mangoAccount = useMangoStore((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={
-              !connected || !selectedMangoAccount || loadingMangoAccount
-            }
+            disabled={!connected || !mangoAccount || 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}
--- a/pages/account.tsx
+++ b/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}
        />
--- a/yarn.lock
+++ b/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"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.6.tgz#1734d119dfa8fede5606d35ae10f9fc9c84d889b"
-  integrity sha512-FKyawK3o5KL16AwbeFajen8G4K3mmqUrQsehn5wNKs8IzlKHE8TfnSmILXVMVziAEcnB23u1RCFU1NT6hSyr7Q==
+  version "16.4.7"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.4.7.tgz#f7afa78769d4b477f5092d7c3468e2e8653d779c"
+  integrity sha512-aDDY54sst8sx47CWT6QQqIZp45yURq4dic0+HCYfYNcY5Ejlb/CLmFnRLfy3wQuYafOeh3lB/DAKaqRKBtcZmA==

 "@types/node@^12.12.54":
  version "12.20.17"