From 960e5b4016ee5df01b65d3b2bb901a23f0a61715 Mon Sep 17 00:00:00 2001
From: devsalmon <54852257+devsalmon@users.noreply.github.com>
Date: Mon, 26 Sep 2022 09:47:17 +0100
Subject: [PATCH] Your account panel (#1057)

* update my account panel

* update for plugins

* ui update your account details

added dao image and conditionally display the withdraw button on the panel

* ui updates VSR plugin DAOs

* deposit change to secondary button

* rename label to 'my governance power'

* fix deposit button not appearing

* Revert "fix deposit button not appearing"

This reverts commit 32185d150083c731f19e4686b978e43d862013ec.

* deposit button fix

* max width for buttons

* Update TokenBalanceCard.tsx

* Update TokenBalanceCard.tsx

* governance power panel logic

* fix governance power bug

* availabletokens change

* change realm to dao

Co-authored-by: Bruno Ceccolini <34370581+BrunoCecco@users.noreply.github.com>
---
 .../components/Account/Account.tsx            |  54 +++--
 .../components/Account/LockTokensAccount.tsx  |  21 +-
 .../DepositCommunityTokensBtn.tsx             |  21 +-
 .../LockPluginTokenBalanceCard.tsx            |  95 +++++---
 .../TokenBalance/VotingPowerBox.tsx           |  55 +++--
 .../WithdrawCommunityTokensBtn.tsx            |   6 +-
 components/TokenBalance/TokenBalanceCard.tsx  | 215 +++++++++++++-----
 .../TokenBalance/TokenBalanceCardWrapper.tsx  |  15 +-
 8 files changed, 346 insertions(+), 136 deletions(-)

diff --git a/VoteStakeRegistry/components/Account/Account.tsx b/VoteStakeRegistry/components/Account/Account.tsx
index 0c90ad9f92..9ac5797e37 100644
--- a/VoteStakeRegistry/components/Account/Account.tsx
+++ b/VoteStakeRegistry/components/Account/Account.tsx
@@ -3,9 +3,18 @@ import { LinkIcon } from '@heroicons/react/outline'
 import MyProposalsBtn from 'pages/dao/[symbol]/proposal/components/MyProposalsBtn'
 import useWalletStore from 'stores/useWalletStore'
 import DelegateCard from '@components/DelegateCard'
+import TokenBalanceCardWrapper from '@components/TokenBalance/TokenBalanceCardWrapper'
+import useRealm from '@hooks/useRealm'
 
-const AccountInner = ({ withHeader = true }: { withHeader?: boolean }) => {
+const AccountInner = ({
+  displayPanel,
+  withHeader = true,
+}: {
+  displayPanel?: boolean
+  withHeader?: boolean
+}) => {
   const connected = useWalletStore((s) => s.connected)
+  const { realmInfo } = useRealm()
   return (
     <div className="bg-bkg-2 col-span-12 p-4 md:p-6 rounded-lg">
       {withHeader && (
@@ -14,30 +23,49 @@ const AccountInner = ({ withHeader = true }: { withHeader?: boolean }) => {
             <PreviousRouteBtn />
           </div>
           <div className="flex items-center justify-between mb-4">
-            <h1 className="leading-none mb-0">Account</h1>
+            <div className="flex items-center justify-center">
+              {realmInfo?.ogImage && (
+                <img
+                  src={realmInfo?.ogImage}
+                  className="mr-2 rouninded-full w-8 h-8"
+                />
+              )}
+              <h1 className="leading-none mb-0">My governance power</h1>
+            </div>
+            {connected && <MyProposalsBtn></MyProposalsBtn>}
           </div>
         </>
       )}
 
+      {!withHeader && connected && <MyProposalsBtn></MyProposalsBtn>}
+
       <div>
-        {connected ? (
-          <MyProposalsBtn></MyProposalsBtn>
-        ) : (
-          <div className="border border-fgd-4 flex flex-col items-center justify-center p-6 rounded-lg">
-            <LinkIcon className="h-6 mb-1 text-primary-light w-6" />
-            <span className="text-fgd-1 text-sm">Connect your wallet</span>
-          </div>
-        )}
+        {displayPanel ? (
+          !connected ? (
+            <div className="border border-fgd-4 flex flex-col items-center justify-center p-6 rounded-lg">
+              <LinkIcon className="h-6 mb-1 text-primary-light w-6" />
+              <span className="text-fgd-1 text-sm">Connect your wallet</span>
+            </div>
+          ) : (
+            <TokenBalanceCardWrapper inAccountDetails={true} />
+          )
+        ) : null}
       </div>
     </div>
   )
 }
 
-const Account = ({ withHeader = true }: { withHeader?: boolean }) => {
+const Account = ({
+  displayPanel = true,
+  withHeader = true,
+}: {
+  displayPanel?: boolean
+  withHeader?: boolean
+}) => {
   if (withHeader) {
     return (
       <div className="grid grid-cols-12 gap-4">
-        <AccountInner withHeader={withHeader} />
+        <AccountInner withHeader={withHeader} displayPanel={displayPanel} />
         <div className="md:w-1/2 col-span-12">
           <DelegateCard />
         </div>
@@ -46,7 +74,7 @@ const Account = ({ withHeader = true }: { withHeader?: boolean }) => {
   } else {
     return (
       <>
-        <AccountInner withHeader={withHeader} />
+        <AccountInner withHeader={withHeader} displayPanel={displayPanel} />
         <div className="md:w-1/2 col-span-12">
           <DelegateCard />
         </div>
diff --git a/VoteStakeRegistry/components/Account/LockTokensAccount.tsx b/VoteStakeRegistry/components/Account/LockTokensAccount.tsx
index 475d858d6b..f44335970c 100644
--- a/VoteStakeRegistry/components/Account/LockTokensAccount.tsx
+++ b/VoteStakeRegistry/components/Account/LockTokensAccount.tsx
@@ -213,15 +213,24 @@ const LockTokensAccount = ({ tokenOwnerRecordPk }) => {
           <PreviousRouteBtn />
         </div>
         <div className="flex items-center justify-between mb-4">
-          <h1 className="leading-none mb-0">
-            Your Account{' '}
-            <span className="font-normal text-fgd-2 text-xs">
-              ({realmInfo?.displayName})
+          {realmInfo?.ogImage && (
+            <img
+              src={realmInfo?.ogImage}
+              className="mr-2 rouninded-full w-8 h-8"
+            />
+          )}
+          <h1 className="leading-none flex flex-col mb-0">
+            <span className="font-normal text-fgd-2 text-xs mb-2">
+              {realmInfo?.displayName}
             </span>
+            My governance power{' '}
           </h1>
 
           <div className="ml-auto flex flex-row">
-            <DepositCommunityTokensBtn className="mr-3" />
+            <DepositCommunityTokensBtn
+              inAccountDetails={true}
+              className="mr-3"
+            />
             <WithDrawCommunityTokens />
           </div>
         </div>
@@ -372,7 +381,7 @@ const LockTokensAccount = ({ tokenOwnerRecordPk }) => {
           ></LockTokensModal>
         )}
       </div>
-      {connected && <Account withHeader={false}></Account>}
+      {connected && <Account withHeader={false} displayPanel={false}></Account>}
     </div>
   )
 }
diff --git a/VoteStakeRegistry/components/TokenBalance/DepositCommunityTokensBtn.tsx b/VoteStakeRegistry/components/TokenBalance/DepositCommunityTokensBtn.tsx
index ae410eb1a6..971bbacb29 100644
--- a/VoteStakeRegistry/components/TokenBalance/DepositCommunityTokensBtn.tsx
+++ b/VoteStakeRegistry/components/TokenBalance/DepositCommunityTokensBtn.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
-import Button from '@components/Button'
+import { SecondaryButton } from '@components/Button'
 import Loading from '@components/Loading'
 import useRealm from '@hooks/useRealm'
 import { getProgramVersionForRealm } from '@models/registry/api'
@@ -12,7 +12,7 @@ import { voteRegistryDepositWithoutLockup } from 'VoteStakeRegistry/actions/vote
 import useDepositStore from 'VoteStakeRegistry/stores/useDepositStore'
 import useVotePluginsClientStore from 'stores/useVotePluginsClientStore'
 
-const DepositCommunityTokensBtn = ({ className = '' }) => {
+const DepositCommunityTokensBtn = ({ className = '', inAccountDetails }) => {
   const { getOwnedDeposits } = useDepositStore()
   const { realm, realmInfo, realmTokenAccount, tokenRecords } = useRealm()
   const client = useVotePluginsClientStore((s) => s.state.vsrClient)
@@ -80,16 +80,25 @@ const DepositCommunityTokensBtn = ({ className = '' }) => {
     ? "You don't have any governance tokens in your wallet to deposit."
     : ''
 
-  return (
-    <Button
+  return hasTokensInWallet && !inAccountDetails ? (
+    <SecondaryButton
       tooltipMessage={depositTooltipContent}
       className={`sm:w-1/2 ${className}`}
       disabled={!connected || !hasTokensInWallet || isLoading}
       onClick={depositAllTokens}
     >
       {isLoading ? <Loading></Loading> : 'Deposit'}
-    </Button>
-  )
+    </SecondaryButton>
+  ) : inAccountDetails ? (
+    <SecondaryButton
+      tooltipMessage={depositTooltipContent}
+      className={`sm:w-1/2 ${className}`}
+      disabled={!connected || !hasTokensInWallet || isLoading}
+      onClick={depositAllTokens}
+    >
+      {isLoading ? <Loading></Loading> : 'Deposit'}
+    </SecondaryButton>
+  ) : null
 }
 
 export default DepositCommunityTokensBtn
diff --git a/VoteStakeRegistry/components/TokenBalance/LockPluginTokenBalanceCard.tsx b/VoteStakeRegistry/components/TokenBalance/LockPluginTokenBalanceCard.tsx
index 57d80d7577..751d04ba14 100644
--- a/VoteStakeRegistry/components/TokenBalance/LockPluginTokenBalanceCard.tsx
+++ b/VoteStakeRegistry/components/TokenBalance/LockPluginTokenBalanceCard.tsx
@@ -22,9 +22,13 @@ import { TokenDeposit } from '@components/TokenBalance/TokenBalanceCard'
 
 const LockPluginTokenBalanceCard = ({
   proposal,
+  inAccountDetails,
 }: {
   proposal?: Option<Proposal>
+  inAccountDetails?: boolean
 }) => {
+  const [hasGovPower, setHasGovPower] = useState<boolean>(false)
+
   const { fmtUrlWithCluster } = useQueryContext()
   const { councilMint, mint, realm, symbol, config } = useRealm()
   const [tokenOwnerRecordPk, setTokenOwneRecordPk] = useState('')
@@ -75,7 +79,7 @@ const LockPluginTokenBalanceCard = ({
   return (
     <div className="bg-bkg-2 p-4 md:p-6 rounded-lg">
       <div className="flex items-center justify-between">
-        <h3 className="mb-0">Your Account</h3>
+        <h3 className="mb-0">My governance power</h3>
         <Link
           href={fmtUrlWithCluster(
             `/dao/${symbol}/account/${tokenOwnerRecordPk}`
@@ -95,11 +99,23 @@ const LockPluginTokenBalanceCard = ({
       </div>
       {hasLoaded ? (
         <>
+          {!hasGovPower && !inAccountDetails && connected && (
+            <div className={'text-xs text-white/50 mt-8'}>
+              You do not have any governance power in this dao
+            </div>
+          )}
+          {!connected && (
+            <div className={'text-xs text-white/50 mt-8'}>
+              Connect your wallet to see governance power
+            </div>
+          )}
           {communityDepositVisible && (
             <TokenDepositLock
+              inAccountDetails={inAccountDetails}
               mint={mint}
               tokenRole={GoverningTokenRole.Community}
               councilVote={false}
+              setHasGovPower={setHasGovPower}
             />
           )}
           {councilDepositVisible && (
@@ -108,6 +124,7 @@ const LockPluginTokenBalanceCard = ({
                 mint={councilMint}
                 tokenRole={GoverningTokenRole.Council}
                 councilVote={true}
+                setHasGovPower={setHasGovPower}
               />
             </div>
           )}
@@ -126,10 +143,14 @@ const LockPluginTokenBalanceCard = ({
 const TokenDepositLock = ({
   mint,
   tokenRole,
+  inAccountDetails,
+  setHasGovPower,
 }: {
   mint: MintInfo | undefined
   tokenRole: GoverningTokenRole
   councilVote?: boolean
+  inAccountDetails?: boolean
+  setHasGovPower: (hasGovPower: boolean) => void
 }) => {
   const { realm, realmTokenAccount, councilTokenAccount } = useRealm()
   const connected = useWalletStore((s) => s.connected)
@@ -186,6 +207,12 @@ const TokenDepositLock = ({
       ? fmtMintAmount(mint, depositRecord.amountDepositedNative)
       : '0'
 
+  useEffect(() => {
+    if (availableTokens != '0' || hasTokensDeposited || hasTokensInWallet) {
+      setHasGovPower(true)
+    }
+  }, [availableTokens, hasTokensDeposited, hasTokensInWallet])
+
   const canShowAvailableTokensMessage =
     !hasTokensDeposited && hasTokensInWallet && connected
   const canExecuteAction = !hasTokensDeposited ? 'deposit' : 'withdraw'
@@ -207,37 +234,43 @@ const TokenDepositLock = ({
           />
         </div>
       ) : null}
-      <div className="flex space-x-4 items-center mt-4">
-        <VotingPowerBox
-          votingPower={votingPower}
-          mint={mint}
-          votingPowerFromDeposits={votingPowerFromDeposits}
-          className="w-full px-4 py-2"
-        ></VotingPowerBox>
-      </div>
-      <div className="pt-4 px-4">
-        <p className="flex mb-1.5 text-xs">
-          <span>{depositTokenName} Deposited</span>
-          <span className="font-bold ml-auto text-fgd-1">
-            {availableTokens}
-          </span>
-        </p>
-        <p className="flex text-xs">
-          <span>{depositTokenName} Locked</span>
-          <span className="font-bold ml-auto text-fgd-1">{lockTokensFmt}</span>
-        </p>
-      </div>
-      {/* <p
-        className={`mt-2 opacity-70 mb-4 text-xs ${
-          canShowAvailableTokensMessage ? 'block' : 'hidden'
-        }`}
-      >
-        You have {tokensToShow} tokens available to {canExecuteAction}.
-      </p> */}
-
+      {votingPower.toNumber() > 0 && (
+        <div className="flex space-x-4 items-center mt-4">
+          <VotingPowerBox
+            votingPower={votingPower}
+            mint={mint}
+            votingPowerFromDeposits={votingPowerFromDeposits}
+            className="w-full px-4 py-2"
+          ></VotingPowerBox>
+        </div>
+      )}
+      {(availableTokens != '0' || lockTokensFmt != '0') && (
+        <div className="pt-4 px-4">
+          {availableTokens != '0' && (
+            <p className="flex mb-1.5 text-xs">
+              <span>{depositTokenName} Deposited</span>
+              <span className="font-bold ml-auto text-fgd-1">
+                {availableTokens}
+              </span>
+            </p>
+          )}
+          {availableTokens != '0' && (
+            <p className="flex text-xs">
+              <span>{depositTokenName} Locked</span>
+              <span className="font-bold ml-auto text-fgd-1">
+                {lockTokensFmt}
+              </span>
+            </p>
+          )}
+        </div>
+      )}
       <div className="flex flex-col sm:flex-row sm:space-x-4 space-y-4 sm:space-y-0 mt-4">
-        <DepositCommunityTokensBtn></DepositCommunityTokensBtn>
-        <WithDrawCommunityTokens></WithDrawCommunityTokens>
+        <DepositCommunityTokensBtn
+          inAccountDetails={inAccountDetails}
+        ></DepositCommunityTokensBtn>
+        {inAccountDetails && (
+          <WithDrawCommunityTokens></WithDrawCommunityTokens>
+        )}
       </div>
     </>
   )
diff --git a/VoteStakeRegistry/components/TokenBalance/VotingPowerBox.tsx b/VoteStakeRegistry/components/TokenBalance/VotingPowerBox.tsx
index 4dcea3a375..d7c5e56b82 100644
--- a/VoteStakeRegistry/components/TokenBalance/VotingPowerBox.tsx
+++ b/VoteStakeRegistry/components/TokenBalance/VotingPowerBox.tsx
@@ -1,8 +1,10 @@
+import BigNumber from 'bignumber.js'
 import { BN } from '@project-serum/anchor'
 import { MintInfo } from '@solana/spl-token'
 import { getMintDecimalAmount } from '@tools/sdk/units'
 import { LightningBoltIcon } from '@heroicons/react/solid'
 import Tooltip from '@components/Tooltip'
+import VotingPowerPct from '@components/ProposalVotingPower/VotingPowerPct'
 
 const VotingPowerBox = ({
   votingPower,
@@ -22,23 +24,44 @@ const VotingPowerBox = ({
       ? getMintDecimalAmount(mint, votingPower).toFormat(0)
       : '0'
 
+  const max: BigNumber = new BigNumber(mint.supply.toString())
+
   return (
-    <div className={`bg-bkg-1 rounded-md ${className}`} style={style}>
-      <p className="text-fgd-3">Votes</p>
-      <span className="mb-0 flex font-bold items-center hero-text">
-        {votingPowerFmt}{' '}
-        {!votingPowerFromDeposits.isZero() && !votingPower.isZero() && (
-          <Tooltip content="Vote Weight Multiplier – Increase your vote weight by locking tokens">
-            <div className="cursor-help flex font-normal items-center text-xs ml-3 rounded-full bg-bkg-3 px-2 py-1">
-              <LightningBoltIcon className="h-3 mr-1 text-primary-light w-3" />
-              {`${(
-                votingPower.toNumber() / votingPowerFromDeposits.toNumber()
-              ).toFixed(2)}x`}
-            </div>
-          </Tooltip>
-        )}
-      </span>
-    </div>
+    <>
+      {' '}
+      <div
+        className={`bg-bkg-1 flex justify-between items-center rounded-md ${className}`}
+        style={style}
+      >
+        <div>
+          <p className="text-fgd-3">Votes</p>
+          <span className="mb-0 flex font-bold items-center hero-text">
+            {votingPowerFmt}{' '}
+            {!votingPowerFromDeposits.isZero() && !votingPower.isZero() && (
+              <Tooltip content="Vote Weight Multiplier – Increase your vote weight by locking tokens">
+                <div className="cursor-help flex font-normal items-center text-xs ml-3 rounded-full bg-bkg-3 px-2 py-1">
+                  <LightningBoltIcon className="h-3 mr-1 text-primary-light w-3" />
+                  {`${(
+                    votingPower.toNumber() / votingPowerFromDeposits.toNumber()
+                  ).toFixed(2)}x`}
+                </div>
+              </Tooltip>
+            )}
+          </span>
+        </div>
+        <div>
+          {Number(votingPowerFmt) > 0
+            ? max &&
+              !max.isZero() && (
+                <VotingPowerPct
+                  amount={new BigNumber(votingPowerFmt)}
+                  total={max}
+                />
+              )
+            : null}
+        </div>
+      </div>
+    </>
   )
 }
 
diff --git a/VoteStakeRegistry/components/TokenBalance/WithdrawCommunityTokensBtn.tsx b/VoteStakeRegistry/components/TokenBalance/WithdrawCommunityTokensBtn.tsx
index e74d3f0fa2..a7f259060b 100644
--- a/VoteStakeRegistry/components/TokenBalance/WithdrawCommunityTokensBtn.tsx
+++ b/VoteStakeRegistry/components/TokenBalance/WithdrawCommunityTokensBtn.tsx
@@ -1,4 +1,4 @@
-import Button from '@components/Button'
+import { SecondaryButton } from '@components/Button'
 import useRealm from '@hooks/useRealm'
 import { getUnrelinquishedVoteRecords } from '@models/api'
 import { BN } from '@project-serum/anchor'
@@ -180,7 +180,7 @@ const WithDrawCommunityTokens = () => {
     ? "You don't have any governance tokens to withdraw."
     : ''
   return (
-    <Button
+    <SecondaryButton
       tooltipMessage={withdrawTooltipContent}
       className="sm:w-1/2"
       disabled={
@@ -195,7 +195,7 @@ const WithDrawCommunityTokens = () => {
       onClick={withdrawAllTokens}
     >
       {isLoading ? <Loading></Loading> : 'Withdraw'}
-    </Button>
+    </SecondaryButton>
   )
 }
 
diff --git a/components/TokenBalance/TokenBalanceCard.tsx b/components/TokenBalance/TokenBalanceCard.tsx
index 27ddc09681..504450a374 100644
--- a/components/TokenBalance/TokenBalanceCard.tsx
+++ b/components/TokenBalance/TokenBalanceCard.tsx
@@ -1,3 +1,4 @@
+import { BigNumber } from 'bignumber.js'
 import {
   ASSOCIATED_TOKEN_PROGRAM_ID,
   MintInfo,
@@ -25,7 +26,7 @@ import { withWithdrawGoverningTokens } from '@solana/spl-governance'
 import useWalletStore from '../../stores/useWalletStore'
 import { sendTransaction } from '@utils/send'
 import { approveTokenTransfer } from '@utils/tokens'
-import Button from '../Button'
+import Button, { SecondaryButton } from '../Button'
 import { Option } from '@tools/core/option'
 import { GoverningTokenRole } from '@solana/spl-governance'
 import { fmtMintAmount } from '@tools/sdk/units'
@@ -47,9 +48,16 @@ import {
   PythBalance,
 } from 'pyth-staking-api'
 import DelegateTokenBalanceCard from '@components/TokenBalance/DelegateTokenBalanceCard'
-
-type Props = { proposal?: Option<Proposal> }
-const TokenBalanceCard: FC<Props> = ({ proposal, children }) => {
+import getNumTokens from '@components/ProposalVotingPower/getNumTokens'
+import VotingPowerPct from '@components/ProposalVotingPower/VotingPowerPct'
+
+type Props = { proposal?: Option<Proposal>; inAccountDetails?: boolean }
+const TokenBalanceCard: FC<Props> = ({
+  proposal,
+  inAccountDetails = false,
+  children,
+}) => {
+  const [hasGovPower, setHasGovPower] = useState<boolean>(false)
   const { councilMint, mint, realm, symbol } = useRealm()
   const connected = useWalletStore((s) => s.connected)
   const wallet = useWalletStore((s) => s.current)
@@ -95,33 +103,55 @@ const TokenBalanceCard: FC<Props> = ({ proposal, children }) => {
   const hasLoaded = mint || councilMint
 
   return (
-    <div className="p-4 rounded-lg bg-bkg-2 md:p-6">
-      <div className="flex items-center justify-between">
-        <h3 className="mb-0">Your account</h3>
-        <Link
-          href={fmtUrlWithCluster(
-            `/dao/${symbol}/account/${tokenOwnerRecordPk}`
-          )}
-        >
-          <a
-            className={`default-transition flex items-center text-fgd-2 text-sm transition-all hover:text-fgd-3 ${
-              !connected || !tokenOwnerRecordPk
-                ? 'opacity-50 pointer-events-none'
-                : ''
-            }`}
+    <div
+      className={`rounded-lg bg-bkg-2 + ${
+        !inAccountDetails ? 'p-4 md:p-6' : ''
+      }`}
+    >
+      {!inAccountDetails && (
+        <div className="flex items-center justify-between">
+          <h3 className="mb-0">My governance power</h3>
+          <Link
+            href={fmtUrlWithCluster(
+              `/dao/${symbol}/account/${tokenOwnerRecordPk}`
+            )}
           >
-            View
-            <ChevronRightIcon className="flex-shrink-0 w-6 h-6" />
-          </a>
-        </Link>
-      </div>
+            <a
+              className={`default-transition flex items-center text-fgd-2 text-sm transition-all hover:text-fgd-3 ${
+                !connected || !tokenOwnerRecordPk
+                  ? 'opacity-50 pointer-events-none'
+                  : ''
+              }`}
+            >
+              View
+              <ChevronRightIcon className="flex-shrink-0 w-6 h-6" />
+            </a>
+          </Link>
+        </div>
+      )}
       {hasLoaded ? (
-        <div className="space-y-4">
+        <div
+          className={`${
+            inAccountDetails ? `flex w-full gap-8 md:gap-12` : `space-y-4`
+          }`}
+        >
+          {!hasGovPower && !inAccountDetails && connected && (
+            <div className={'text-xs text-white/50 mt-8'}>
+              You do not have any governance power in this dao
+            </div>
+          )}
+          {!connected && (
+            <div className={'text-xs text-white/50 mt-8'}>
+              Connect your wallet to see governance power
+            </div>
+          )}
           {communityDepositVisible && (
             <TokenDeposit
               mint={mint}
               tokenRole={GoverningTokenRole.Community}
               councilVote={false}
+              inAccountDetails={inAccountDetails}
+              setHasGovPower={setHasGovPower}
             />
           )}
           {councilDepositVisible && (
@@ -129,6 +159,8 @@ const TokenBalanceCard: FC<Props> = ({ proposal, children }) => {
               mint={councilMint}
               tokenRole={GoverningTokenRole.Council}
               councilVote={true}
+              inAccountDetails={inAccountDetails}
+              setHasGovPower={setHasGovPower}
             />
           )}
           <DelegateTokenBalanceCard />
@@ -148,10 +180,14 @@ export const TokenDeposit = ({
   mint,
   tokenRole,
   councilVote,
+  inAccountDetails,
+  setHasGovPower,
 }: {
   mint: MintInfo | undefined
   tokenRole: GoverningTokenRole
   councilVote?: boolean
+  inAccountDetails?: boolean
+  setHasGovPower: (hasGovPower: boolean) => void
 }) => {
   const wallet = useWalletStore((s) => s.current)
   const connected = useWalletStore((s) => s.connected)
@@ -171,6 +207,7 @@ export const TokenDeposit = ({
     ownTokenRecord,
     ownCouncilTokenRecord,
     ownVoterWeight,
+    councilMint,
     councilTokenAccount,
     proposals,
     governances,
@@ -183,6 +220,21 @@ export const TokenDeposit = ({
     return null
   }
 
+  const amount =
+    councilMint && tokenRole === GoverningTokenRole.Council
+      ? getNumTokens(
+          ownVoterWeight,
+          ownCouncilTokenRecord,
+          councilMint,
+          realmInfo
+        )
+      : getNumTokens(ownVoterWeight, ownCouncilTokenRecord, mint, realmInfo)
+
+  const max: BigNumber =
+    councilMint && tokenRole === GoverningTokenRole.Council
+      ? new BigNumber(councilMint.supply.toString())
+      : new BigNumber(mint.supply.toString())
+
   const depositTokenRecord =
     tokenRole === GoverningTokenRole.Community
       ? ownTokenRecord
@@ -416,6 +468,12 @@ export const TokenDeposit = ({
       )
     : '0'
 
+  useEffect(() => {
+    if (availableTokens != '0' || hasTokensDeposited || hasTokensInWallet) {
+      setHasGovPower(true)
+    }
+  }, [availableTokens, hasTokensDeposited, hasTokensInWallet])
+
   const canShowAvailableTokensMessage =
     !hasTokensDeposited && hasTokensInWallet && connected
   const canExecuteAction = !hasTokensDeposited ? 'deposit' : 'withdraw'
@@ -428,17 +486,31 @@ export const TokenDeposit = ({
       : 0
 
   return (
-    <>
-      <div className="flex items-center mt-4 space-x-4">
-        <div className="w-full px-4 py-2 rounded-md bg-bkg-1 flex flex-row items-center justify-between">
-          <div>
-            <p className="text-xs text-fgd-3">{depositTokenName} Votes</p>
-            <p className="mb-0 text-xl font-bold text-fgd-1 hero-text">
-              {availableTokens}
-            </p>
+    <TokenDepositWrapper inAccountDetails={inAccountDetails}>
+      {inAccountDetails && (
+        <h4>
+          {tokenRole === GoverningTokenRole.Community ? `Community` : `Council`}
+        </h4>
+      )}
+
+      {(availableTokens != '0' || inAccountDetails) && (
+        <div className="flex items-center mt-4 space-x-4">
+          <div className="w-full px-4 py-2 rounded-md bg-bkg-1 flex flex-row items-center justify-between">
+            <div>
+              <p className="text-xs text-fgd-3">{depositTokenName} Votes</p>
+              <div className="flex items-center w-full justify-between mt-1">
+                <p className="mb-0 text-xl font-bold text-fgd-1 hero-text">
+                  {availableTokens}
+                </p>
+              </div>
+            </div>
+            {Number(availableTokens) > 0
+              ? max &&
+                !max.isZero() && <VotingPowerPct amount={amount} total={max} />
+              : null}
           </div>
         </div>
-      </div>
+      )}
 
       {!isPyth && (
         <>
@@ -451,30 +523,43 @@ export const TokenDeposit = ({
           </p>
 
           <div className="flex flex-col mt-6 space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-            <Button
-              tooltipMessage={depositTooltipContent}
-              className="sm:w-1/2"
-              disabled={!connected || !hasTokensInWallet}
-              onClick={depositAllTokens}
-            >
-              Deposit
-            </Button>
-
-            <Button
-              tooltipMessage={withdrawTooltipContent}
-              className="sm:w-1/2"
-              disabled={
-                !connected ||
-                !hasTokensDeposited ||
-                (!councilVote && toManyCommunityOutstandingProposalsForUser) ||
-                toManyCouncilOutstandingProposalsForUse ||
-                wallet?.publicKey?.toBase58() !==
-                  depositTokenRecord.account.governingTokenOwner.toBase58()
-              }
-              onClick={withdrawAllTokens}
-            >
-              Withdraw
-            </Button>
+            {hasTokensInWallet && !inAccountDetails ? (
+              <SecondaryButton
+                tooltipMessage={depositTooltipContent}
+                className="sm:w-1/2 max-w-[200px]"
+                disabled={!connected || !hasTokensInWallet}
+                onClick={depositAllTokens}
+              >
+                Deposit
+              </SecondaryButton>
+            ) : inAccountDetails ? (
+              <Button
+                tooltipMessage={depositTooltipContent}
+                className="sm:w-1/2 max-w-[200px]"
+                disabled={!connected || !hasTokensInWallet}
+                onClick={depositAllTokens}
+              >
+                Deposit
+              </Button>
+            ) : null}
+            {inAccountDetails && (
+              <SecondaryButton
+                tooltipMessage={withdrawTooltipContent}
+                className="sm:w-1/2 max-w-[200px]"
+                disabled={
+                  !connected ||
+                  !hasTokensDeposited ||
+                  (!councilVote &&
+                    toManyCommunityOutstandingProposalsForUser) ||
+                  toManyCouncilOutstandingProposalsForUse ||
+                  wallet?.publicKey?.toBase58() !==
+                    depositTokenRecord.account.governingTokenOwner.toBase58()
+                }
+                onClick={withdrawAllTokens}
+              >
+                Withdraw
+              </SecondaryButton>
+            )}
           </div>
         </>
       )}
@@ -489,8 +574,22 @@ export const TokenDeposit = ({
             power
           </small>
         )}
-    </>
+    </TokenDepositWrapper>
   )
 }
 
+const TokenDepositWrapper = ({
+  inAccountDetails,
+  children,
+}: {
+  inAccountDetails?: boolean
+  children: React.ReactNode
+}) => {
+  if (inAccountDetails) {
+    return <div className="space-y-4 w-1/2">{children}</div>
+  } else {
+    return <>{children}</>
+  }
+}
+
 export default TokenBalanceCard
diff --git a/components/TokenBalance/TokenBalanceCardWrapper.tsx b/components/TokenBalance/TokenBalanceCardWrapper.tsx
index b9c6ddd51d..22c0924a1b 100644
--- a/components/TokenBalance/TokenBalanceCardWrapper.tsx
+++ b/components/TokenBalance/TokenBalanceCardWrapper.tsx
@@ -24,8 +24,10 @@ const SwitchboardPermissionCard = dynamic(
 
 const TokenBalanceCardWrapper = ({
   proposal,
+  inAccountDetails,
 }: {
   proposal?: Option<Proposal>
+  inAccountDetails?: boolean
 }) => {
   const {
     ownTokenRecord,
@@ -51,7 +53,11 @@ const TokenBalanceCardWrapper = ({
       (!ownTokenRecord ||
         ownTokenRecord.account.governingTokenDepositAmount.isZero())
     ) {
-      return <LockPluginTokenBalanceCard></LockPluginTokenBalanceCard>
+      return (
+        <LockPluginTokenBalanceCard
+          inAccountDetails={inAccountDetails}
+        ></LockPluginTokenBalanceCard>
+      )
     }
     if (
       isNftMode &&
@@ -65,7 +71,10 @@ const TokenBalanceCardWrapper = ({
             !ownCouncilTokenRecord?.account.governingTokenDepositAmount.isZero()) ||
             (councilTokenAccount &&
               !councilTokenAccount?.account.amount.isZero())) && (
-            <TokenBalanceCard proposal={proposal}></TokenBalanceCard>
+            <TokenBalanceCard
+              proposal={proposal}
+              inAccountDetails={inAccountDetails}
+            ></TokenBalanceCard>
           )}
         </>
       )
@@ -79,7 +88,7 @@ const TokenBalanceCardWrapper = ({
     }
     //Default
     return (
-      <TokenBalanceCard proposal={proposal}>
+      <TokenBalanceCard proposal={proposal} inAccountDetails={inAccountDetails}>
         {/*Add the gateway card if this is a gated DAO*/}
         {isGatewayMode && <GatewayCard></GatewayCard>}
       </TokenBalanceCard>