fix nft govpower card

components/ProposalVotingPower/NftVotingPower.tsx

@@ -104,57 +104,43 @@ export default function NftVotingPower(props: Props) {
 
   if (nfts.length === 0) {
     return (
-      <Wrapper inAccountDetails={props.inAccountDetails}>
-        <div
-          className={classNames(props.className, 'text-xs', 'text-white/50')}
-        >
-          You do not have any voting power in this dao.
-        </div>
-      </Wrapper>
+      <div className={classNames(props.className, 'text-xs', 'text-white/50')}>
+        You do not have any voting power in this dao.
+      </div>
     )
   }
 
   return (
-    <Wrapper inAccountDetails={props.inAccountDetails}>
-      <div className={props.className}>
-        <div className={classNames('p-3', 'rounded-md', 'bg-bkg-1')}>
-          <div className="text-white/50 text-xs">My NFT Votes</div>
-          <div className="flex items-center justify-between mt-1">
-            <div className="text-white flex items-center gap-1">
-              {displayNfts.slice(0, 3).map((nft, index) => (
-                <div
-                  className="h-12 w-12 rounded-sm bg-bkg-2 bg-cover"
-                  key={nft.content.metadata.name + index}
-                  style={{
-                    backgroundImage: `url("${nft.content.links.image}")`,
-                  }}
-                />
-              ))}
-              {!!remainingCount && (
-                <div className="text-sm text-white ml-2">
-                  +{remainingCount} more
-                </div>
-              )}
-            </div>
-            {max && !max.isZero() && (
-              <VotingPowerPct amount={amount} total={max} />
+    <div className={props.className}>
+      <div className={classNames('p-3', 'rounded-md', 'bg-bkg-1')}>
+        <div className="text-white/50 text-xs">My NFT Votes</div>
+        <div className="flex items-center justify-between mt-1">
+          <div className="text-white flex items-center gap-1">
+            {displayNfts.slice(0, 3).map((nft, index) => (
+              <div
+                className="h-12 w-12 rounded-sm bg-bkg-2 bg-cover"
+                key={nft.content.metadata.name + index}
+                style={{
+                  backgroundImage: `url("${nft.content.links.image}")`,
+                }}
+              />
+            ))}
+            {!!remainingCount && (
+              <div className="text-sm text-white ml-2">
+                +{remainingCount} more
+              </div>
             )}
           </div>
+          {max && !max.isZero() && (
+            <VotingPowerPct amount={amount} total={max} />
+          )}
         </div>
-        {connected && !ownTokenRecord && (
-          <Button className="w-full mt-3" onClick={handleRegister}>
-            Join
-          </Button>
-        )}
       </div>
-    </Wrapper>
+      {connected && !ownTokenRecord && (
+        <Button className="w-full mt-3" onClick={handleRegister}>
+          Join
+        </Button>
+      )}
+    </div>
   )
 }
-
-const Wrapper = (props: Props) => {
-  if (props.inAccountDetails) {
-    return <div className="my-4 space-y-4 w-1/2">{props.children}</div>
-  } else {
-    return <>{props.children}</>
-  }
-}

components/TokenBalance/TokenBalanceCardWrapper.tsx

@@ -8,10 +8,7 @@ import ClaimUnreleasedNFTs from './ClaimUnreleasedNFTs'
 import Link from 'next/link'
 import { useAddressQuery_CommunityTokenOwner } from '@hooks/queries/addresses/tokenOwnerRecord'
 import useWalletOnePointOh from '@hooks/useWalletOnePointOh'
-import {
-  useUserCommunityTokenOwnerRecord,
-  useUserCouncilTokenOwnerRecord,
-} from '@hooks/queries/tokenOwnerRecord'
+import { useUserCommunityTokenOwnerRecord } from '@hooks/queries/tokenOwnerRecord'
 import { useRealmConfigQuery } from '@hooks/queries/realmConfig'
 import ClaimUnreleasedPositions from 'HeliumVotePlugin/components/ClaimUnreleasedPositions'
 import VanillaAccountDetails from './VanillaAccountDetails'
@@ -68,10 +65,9 @@ const TokenBalanceCardInner = ({
   inAccountDetails?: boolean
 }) => {
   const ownTokenRecord = useUserCommunityTokenOwnerRecord().data?.result
-  const ownCouncilTokenRecord = useUserCouncilTokenOwnerRecord().data?.result
   const config = useRealmConfigQuery().data?.result
 
-  const { councilTokenAccount, vsrMode } = useRealm()
+  const { vsrMode } = useRealm()
   const currentPluginPk = config?.account?.communityTokenConfig.voterWeightAddin
   const isNftMode =
     currentPluginPk && NFT_PLUGINS_PKS.includes(currentPluginPk?.toBase58())
@@ -100,35 +96,15 @@ const TokenBalanceCardInner = ({
     )
   }
 
-  if (
-    isNftMode &&
-    (!ownTokenRecord ||
-      ownTokenRecord.account.governingTokenDepositAmount.isZero())
-  ) {
+  if (isNftMode && inAccountDetails) {
     return (
-      <>
-        {(ownCouncilTokenRecord &&
-          !ownCouncilTokenRecord?.account.governingTokenDepositAmount.isZero()) ||
-        (councilTokenAccount &&
-          !councilTokenAccount?.account.amount.isZero()) ? (
-          <>
-            {!inAccountDetails && <GovernancePowerTitle />}
-            <NftVotingPower inAccountDetails={inAccountDetails} />
-            {inAccountDetails ? (
-              <VanillaAccountDetails />
-            ) : (
-              <GovernancePowerCard />
-            )}
-            <ClaimUnreleasedNFTs inAccountDetails={inAccountDetails} />
-          </>
-        ) : (
-          <>
-            {!inAccountDetails && <GovernancePowerTitle />}
-            <NftVotingPower inAccountDetails={inAccountDetails} />
-            <ClaimUnreleasedNFTs inAccountDetails={inAccountDetails} />
-          </>
-        )}
-      </>
+      <div className="grid grid-cols-2 gap-x-2 w-full">
+        <div>
+          <NftVotingPower inAccountDetails={inAccountDetails} />
+          <ClaimUnreleasedNFTs inAccountDetails={inAccountDetails} />
+        </div>
+        <VanillaAccountDetails />
+      </div>
     )
   }
 

components/TokenBalance/TokenDeposit.tsx

@@ -303,15 +303,9 @@ export const TokenDeposit = ({
   }
 
   return (
-    <TokenDepositWrapper inAccountDetails={inAccountDetails}>
-      {inAccountDetails && (
-        <h4>
-          {tokenRole === GoverningTokenRole.Community ? `Community` : `Council`}
-        </h4>
-      )}
-
+    <div className="w-full">
       {(availableTokens != '0' || inAccountDetails) && (
-        <div className="flex items-center mt-4 space-x-4">
+        <div className="flex items-center space-x-4">
           {tokenRole === GoverningTokenRole.Community ? (
             <VanillaVotingPower className="w-full" role="community" />
           ) : (
@@ -378,19 +372,6 @@ export const TokenDeposit = ({
           Please withdraw your tokens and deposit again to get governance power
         </small>
       )}
-    </TokenDepositWrapper>
+    </div>
   )
 }
-const TokenDepositWrapper = ({
-  children,
-  inAccountDetails,
-}: {
-  inAccountDetails?: boolean
-  children: React.ReactNode
-}) => {
-  if (inAccountDetails) {
-    return <div className="space-y-4 w-1/2">{children}</div>
-  } else {
-    return <div>{children}</div>
-  }
-}