Your account panel (solana-labs#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 32185d1. * 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 <[email protected]>
d0bby5 · Sep 26, 2022 · 960e5b4 · 960e5b4
1 parent be39020
commit 960e5b4
Show file tree

Hide file tree

Showing 8 changed files with 346 additions and 136 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
     </>
   )