add icon when account is delegated

components/TopBar.tsx

@@ -3,6 +3,7 @@ import {
   ArrowLeftIcon,
   ArrowRightIcon,
   ExclamationTriangleIcon,
+  UsersIcon,
 } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
@@ -19,6 +20,9 @@ import UserSetup from './UserSetup'
 import SolanaTps from './SolanaTps'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useOnlineStatus from 'hooks/useOnlineStatus'
+import { DEFAULT_DELEGATE } from './modals/DelegateModal'
+import Tooltip from './shared/Tooltip'
+import { abbreviateAddress } from 'utils/formatting'
 
 const TopBar = () => {
   const { t } = useTranslation('common')
@@ -96,7 +100,18 @@ const TopBar = () => {
               <p className="text-right text-xs">{t('accounts')}</p>
               <p className="text-left text-sm font-bold text-th-fgd-1">
                 {mangoAccount ? (
-                  mangoAccount.name
+                  <div className="flex items-center">
+                    {mangoAccount.name}
+                    {mangoAccount.delegate.toString() !== DEFAULT_DELEGATE ? (
+                      <Tooltip
+                        content={t('delegate-account-info', {
+                          address: abbreviateAddress(mangoAccount.delegate),
+                        })}
+                      >
+                        <UsersIcon className="ml-1.5 h-4 w-4 text-th-fgd-3" />
+                      </Tooltip>
+                    ) : null}
+                  </div>
                 ) : (
                   <span>
                     <span className="mr-1.5">🥭</span>

components/modals/DelegateModal.tsx

@@ -12,7 +12,7 @@ import useMangoAccount from 'hooks/useMangoAccount'
 import { abbreviateAddress } from 'utils/formatting'
 import InlineNotification from '@components/shared/InlineNotification'
 
-const DEFAULT_DELEGATE = '11111111111111111111111111111111'
+export const DEFAULT_DELEGATE = '11111111111111111111111111111111'
 
 const DelegateModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation('common')
@@ -49,9 +49,9 @@ const DelegateModal = ({ isOpen, onClose }: ModalProps) => {
       notify({
         title:
           address !== DEFAULT_DELEGATE
-            ? `Account delegated to ${abbreviateAddress(
-                new PublicKey(address)
-              )}`
+            ? t('delegate-account-info', {
+                address: abbreviateAddress(new PublicKey(address)),
+              })
             : 'Account delegation removed',
         type: 'success',
         txid: tx,

components/modals/MangoAccountsListModal.tsx

@@ -1,5 +1,10 @@
 import { useState } from 'react'
-import { CheckIcon, HeartIcon, PlusCircleIcon } from '@heroicons/react/20/solid'
+import {
+  CheckIcon,
+  HeartIcon,
+  PlusCircleIcon,
+  UsersIcon,
+} from '@heroicons/react/20/solid'
 import {
   HealthType,
   MangoAccount,
@@ -20,6 +25,9 @@ import { useRouter } from 'next/router'
 import useMangoAccount from 'hooks/useMangoAccount'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { notify } from 'utils/notifications'
+import { DEFAULT_DELEGATE } from './DelegateModal'
+import Tooltip from '@components/shared/Tooltip'
+import { abbreviateAddress } from 'utils/formatting'
 
 const MangoAccountsListModal = ({
   isOpen,
@@ -100,9 +108,20 @@ const MangoAccountsListModal = ({
                       >
                         <div className="flex w-full items-center justify-between">
                           <div className="text-left">
-                            <p className="mb-0.5 text-sm font-bold text-th-fgd-1">
-                              {acc.name}
-                            </p>
+                            <div className="mb-0.5 flex items-center">
+                              <p className="text-sm font-bold text-th-fgd-1">
+                                {acc.name}
+                              </p>
+                              {acc.delegate.toString() !== DEFAULT_DELEGATE ? (
+                                <Tooltip
+                                  content={t('delegate-account-info', {
+                                    address: abbreviateAddress(acc.delegate),
+                                  })}
+                                >
+                                  <UsersIcon className="ml-1.5 h-4 w-4 text-th-fgd-3" />
+                                </Tooltip>
+                              ) : null}
+                            </div>
                             <div className="flex">
                               <span className="text-sm text-th-fgd-3">
                                 {accountValue}

public/locales/en/common.json

@@ -44,6 +44,7 @@
   "date-to": "Date To",
   "delegate": "Delegate",
   "delegate-account": "Delegate Account",
+  "delegate-account-info": "Account delegated to {{address}}",
   "delegate-desc": "Delegate your Mango account to another wallet address",
   "delegate-placeholder": "Enter a wallet address to delegate to",
   "deposit": "Deposit",

public/locales/es/common.json

@@ -44,6 +44,7 @@
   "date-to": "Date To",
   "delegate": "Delegate",
   "delegate-account": "Delegate Account",
+  "delegate-account-info": "Account delegated to {{address}}",
   "delegate-desc": "Delegate your Mango account to another wallet address",
   "delegate-placeholder": "Enter a wallet address to delegate to",
   "deposit": "Deposit",

public/locales/ru/common.json

@@ -44,6 +44,7 @@
   "date-to": "Date To",
   "delegate": "Delegate",
   "delegate-account": "Delegate Account",
+  "delegate-account-info": "Account delegated to {{address}}",
   "delegate-desc": "Delegate your Mango account to another wallet address",
   "delegate-placeholder": "Enter a wallet address to delegate to",
   "deposit": "Deposit",

public/locales/zh/common.json

@@ -44,6 +44,7 @@
   "date-to": "Date To",
   "delegate": "Delegate",
   "delegate-account": "Delegate Account",
+  "delegate-account-info": "Account delegated to {{address}}",
   "delegate-desc": "Delegate your Mango account to another wallet address",
   "delegate-placeholder": "Enter a wallet address to delegate to",
   "deposit": "Deposit",

public/locales/zh_tw/common.json

@@ -44,6 +44,7 @@
   "date-to": "Date To",
   "delegate": "Delegate",
   "delegate-account": "Delegate Account",
+  "delegate-account-info": "Account delegated to {{address}}",
   "delegate-desc": "Delegate your Mango account to another wallet address",
   "delegate-placeholder": "Enter a wallet address to delegate to",
   "deposit": "Deposit",