Merge pull request #1911 from solana-labs:agrippa/fix-no-gov-power-bug

[bugfix] show deposit buttons if user has balance

components/GovernancePower/GovernancePowerCard.tsx

@@ -1,12 +1,19 @@
 import { ChevronRightIcon } from '@heroicons/react/solid'
-import { useGovernancePowerAsync } from '@hooks/queries/governancePower'
+import {
+  determineVotingPowerType,
+  useGovernancePowerAsync,
+} from '@hooks/queries/governancePower'
 import { useRealmConfigQuery } from '@hooks/queries/realmConfig'
+import useSelectedRealmPubkey from '@hooks/selectedRealm/useSelectedRealmPubkey'
 import useQueryContext from '@hooks/useQueryContext'
 import useWalletOnePointOh from '@hooks/useWalletOnePointOh'
 import { GoverningTokenType } from '@solana/spl-governance'
+import { useConnection } from '@solana/wallet-adapter-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { useAsync } from 'react-async-hook'
 import GovernancePowerForRole from './GovernancePowerForRole'
+import { Deposit } from './Vanilla/Deposit'
 
 const GovernancePowerTitle = () => {
   const { symbol } = useRouter().query
@@ -30,6 +37,20 @@ const GovernancePowerTitle = () => {
   )
 }
 
+// TODO: refactor deposit components to their own generic DepositForRole component
+const VanillaDeposit = ({ role }: { role: 'community' | 'council' }) => {
+  const { connection } = useConnection()
+
+  const realmPk = useSelectedRealmPubkey()
+
+  const { result: kind } = useAsync(async () => {
+    if (realmPk === undefined) return undefined
+    return determineVotingPowerType(connection, realmPk, role)
+  }, [connection, realmPk, role])
+
+  return kind === 'vanilla' ? <Deposit role={role} /> : <></>
+}
+
 const GovernancePowerCard = () => {
   const connected = useWalletOnePointOh()?.connected ?? false
 
@@ -61,6 +82,10 @@ const GovernancePowerCard = () => {
       ) : bothZero ? (
         <div className={'text-xs text-white/50 mt-8'}>
           You do not have any governance power in this dao
+          <div className="flex flex-col">
+            <VanillaDeposit role="community" />
+            <VanillaDeposit role="council" />
+          </div>
         </div>
       ) : (
         <div className="flex flex-col gap-2">

components/GovernancePower/GovernancePowerForRole.tsx

@@ -26,7 +26,6 @@ export default function GovernancePowerForRole({
 
   const { result: kind } = useAsync(async () => {
     if (realmPk === undefined) return undefined
-
     return determineVotingPowerType(connection, realmPk, role)
   }, [connection, realmPk, role])
 
@@ -40,9 +39,10 @@ export default function GovernancePowerForRole({
     <>
       {role === 'community' ? (
         kind === 'vanilla' ? (
-          <VanillaVotingPower role="community" {...props}>
+          <div>
+            <VanillaVotingPower role="community" {...props} />
             <Deposit role="community" />
-          </VanillaVotingPower>
+          </div>
         ) : kind === 'VSR' ? (
           <LockedCommunityVotingPower />
         ) : kind === 'NFT' ? (
@@ -51,9 +51,10 @@ export default function GovernancePowerForRole({
           <LockedCommunityNFTRecordVotingPower />
         ) : null
       ) : kind === 'vanilla' ? (
-        <VanillaVotingPower role="council" {...props}>
+        <div>
+          <VanillaVotingPower role="council" {...props} />
           <Deposit role="council" />
-        </VanillaVotingPower>
+        </div>
       ) : null}
     </>
   )