UXDProtocol · sjillen · Jan 4, 2022 · Jan 3, 2022 · Jan 3, 2022 · Jan 3, 2022
diff --git a/actions/registerRealm.ts b/actions/registerRealm.ts
diff --git a/components/Button.tsx b/components/Button.tsx
@@ -9,6 +9,7 @@ interface ButtonProps {
   disabled?: boolean
   small?: boolean
   tooltipMessage?: string
+  style?: any
 }
 
 const Button: FunctionComponent<ButtonProps> = ({
@@ -18,6 +19,7 @@ const Button: FunctionComponent<ButtonProps> = ({
   isLoading,
   small,
   tooltipMessage = '',
+  style,
   ...props
 }) => {
   return (
@@ -30,6 +32,7 @@ const Button: FunctionComponent<ButtonProps> = ({
           : 'bg-primary-light text-bkg-2 hover:bg-primary-dark'
       }`}
       {...props}
+      style={style}
       disabled={disabled}
     >
       <Tooltip content={tooltipMessage}>

diff --git a/components/Divider.tsx b/components/Divider.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const Divider: React.FC<{
+  className?: string
+  dashed?: boolean
+}> = ({ className, dashed }) => (
+  <div
+    className={`border-b border-${
+      dashed ? 'dashed' : 'solid'
+    } opacity-20 w-full my-3 ${className}`}
+  />
+)
+
+export default Divider
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -3,73 +3,77 @@ import GithubIcon from './GithubIcon'
 import TwitterIcon from './TwitterIcon'
 
 const Footer = () => {
-  return (
-    <div className="flex justify-around bottom-0 bg-bkg-1  w-full absolute left-0 h-20 px-12 border-t border-primary-light">
-      <div className="flex justify-center items-center gap-x-6">
-        <a
-          rel="noreferrer"
-          href="https://docs.realms.today/"
-          target="_blank"
-          className="text-white text-base font-bold hover:text-primary-dark transition-all duration-200"
-        >
-          Docs
-        </a>
+  const { REALM } = process.env
 
-        <a
-          rel="noreferrer"
-          href="https://github.com/solana-labs/solana-program-library/blob/master/governance/README.md"
-          target="_blank"
-          className="text-white text-base font-light hover:text-primary-dark transition-all duration-200"
-        >
-          Programs Github
-        </a>
-      </div>
+  if (REALM) return null
+  else
+    return (
+      <div className="flex justify-around bottom-0 bg-bkg-1  w-full absolute left-0 h-20 px-12 border-t border-primary-light">
+        <div className="flex justify-center items-center gap-x-6">
+          <a
+            rel="noreferrer"
+            href="https://docs.realms.today/"
+            target="_blank"
+            className="text-white text-base font-bold hover:text-primary-dark transition-all duration-200"
+          >
+            Docs
+          </a>
 
-      <div className="flex justify-center items-center gap-x-24">
-        <a
-          rel="noreferrer"
-          target="_blank"
-          href="https://twitter.com/solana"
-          className="text-primary-light text-base font-light"
-        >
-          <TwitterIcon className="" />
-        </a>
+          <a
+            rel="noreferrer"
+            href="https://github.com/solana-labs/solana-program-library/blob/master/governance/README.md"
+            target="_blank"
+            className="text-white text-base font-light hover:text-primary-dark transition-all duration-200"
+          >
+            Programs Github
+          </a>
+        </div>
 
-        <a
-          rel="noreferrer"
-          target="_blank"
-          href="https://github.com/solana-labs/governance-ui"
-          className="text-primary-light text-base font-light"
-        >
-          <GithubIcon className="" />
-        </a>
+        <div className="flex justify-center items-center gap-x-24">
+          <a
+            rel="noreferrer"
+            target="_blank"
+            href="https://twitter.com/solana"
+            className="text-primary-light text-base font-light"
+          >
+            <TwitterIcon className="" />
+          </a>
 
-        <a
-          rel="noreferrer"
-          target="_blank"
-          href="https://discord.com/invite/VsPbrK2hJk"
-          className="text-primary-light text-base font-light"
-        >
-          <DiscordIcon className="" />
-        </a>
-      </div>
+          <a
+            rel="noreferrer"
+            target="_blank"
+            href="https://github.com/solana-labs/governance-ui"
+            className="text-primary-light text-base font-light"
+          >
+            <GithubIcon className="" />
+          </a>
+
+          <a
+            rel="noreferrer"
+            target="_blank"
+            href="https://discord.com/invite/VsPbrK2hJk"
+            className="text-primary-light text-base font-light"
+          >
+            <DiscordIcon className="" />
+          </a>
+        </div>
 
-      <div className="flex justify-center items-center gap-x-1">
-        <p className="text-white text-base font-light cursor-default">
-          Powered by
-        </p>
+        <div className="flex justify-center items-center gap-x-1">
+          <p className="text-white text-base font-light cursor-default">
+            Powered by
+          </p>
 
-        <a
-          rel="noreferrer"
-          href="https://solana.com/"
-          target="_blank"
-          className="text-white text-base font-bold hover:text-primary-dark transition-all duration-200"
-        >
-          Solana
-        </a>
+          <a
+            rel="noreferrer"
+            href="https://solana.com/"
+            target="_blank"
+            className="text-white text-base font-bold hover:text-primary-dark transition-all duration-200"
+          >
+            Solana
+          </a>
+        </div>
       </div>
-    </div>
-  )
+    )
 }
 
 export default Footer
diff --git a/components/Members/MemberItem.tsx b/components/Members/MemberItem.tsx
@@ -22,6 +22,7 @@ const MemberItem = ({ item }: { item: Member }) => {
     communityVotes,
     votesCasted,
     hasCouncilTokenOutsideRealm,
+    hasCommunityTokenOutsideRealm,
   } = item
   const walletPublicKey = tryParsePublicKey(walletAddress)
   const tokenName = tokenService.tokenList.find(
@@ -45,8 +46,6 @@ const MemberItem = ({ item }: { item: Member }) => {
     setCurrentCompactViewMember(item)
   }
   return (
-    //TODO: implement dynamic height with CellMeasurer
-    //for now every member item element has to be same height
     <div
       onClick={handleGoToMemberOverview}
       className="cursor-pointer default-transition flex items-start text-fgd-1 border border-fgd-4 p-3 rounded-lg w-full hover:bg-bkg-3"
@@ -59,16 +58,15 @@ const MemberItem = ({ item }: { item: Member }) => {
         <div className="text-fgd-3 text-xs flex flex-col">
           Votes cast: {totalVotes}
         </div>
-        <div className="text-fgd-3 text-xs flex flex-row">
-          {/* until we have community tokens match from wallets we show 0 if someone withdrawn tokens */}
+        <div className="text-fgd-3 text-xs flex flex-col">
           {(communityAmount || !councilAmount) && (
-            <span>
+            <span className="flex items-center">
               {tokenName} Votes {communityAmount || 0}
+              {hasCommunityTokenOutsideRealm && (
+                <LogoutIcon className="w-3 h-3 ml-1"></LogoutIcon>
+              )}
             </span>
           )}
-          {communityAmount && councilAmount && (
-            <span className="ml-1 mr-1">|</span>
-          )}
           {councilAmount && (
             <span className="flex items-center">
               Council Votes {councilAmount}{' '}

diff --git a/components/Members/MembersCompactWrapper.tsx b/components/Members/MembersCompactWrapper.tsx
@@ -18,9 +18,9 @@ const MembersCompactWrapper = () => {
     toManyCouncilOutstandingProposalsForUse,
     toManyCommunityOutstandingProposalsForUser,
   } = useRealm()
-  const { members } = useMembers()
+  const { members, activeMembers } = useMembers()
   const connected = useWalletStore((s) => s.connected)
-  const membersCount = members.length
+  const activeMembersCount = activeMembers.length
   const { setCurrentCompactView, resetCompactViewState } = useMembersListStore()
   const {
     canUseMintInstruction,
@@ -51,7 +51,7 @@ const MembersCompactWrapper = () => {
         return (
           <>
             <h3 className="mb-4 flex items-center">
-              Members ({membersCount})
+              Members ({activeMembersCount})
               {councilMint && (
                 <Tooltip
                   contentClassName="ml-auto"
@@ -82,7 +82,7 @@ const MembersCompactWrapper = () => {
               <h3 className="mb-0">{totalVotesCast}</h3>
             </div>
             <div style={{ maxHeight: '350px' }}>
-              <MembersItems></MembersItems>
+              <MembersItems activeMembers={activeMembers}></MembersItems>
             </div>
           </>
         )

diff --git a/components/Members/MembersItems.tsx b/components/Members/MembersItems.tsx
@@ -1,29 +1,41 @@
 import MemberItem from './MemberItem'
-import useMembers from './useMembers'
 import { List, AutoSizer } from 'react-virtualized'
+import { Member } from '@utils/uiTypes/members'
 
-const MembersItems = () => {
-  const { members } = useMembers()
-  //TODO implement auto height if needed;
+const MembersItems = ({ activeMembers }: { activeMembers: Member[] }) => {
   const minRowHeight = 84
-  const rowHeight = members.length > 4 ? 350 : members.length * minRowHeight
+  const listHeight =
+    activeMembers.length > 4
+      ? 350
+      : activeMembers.reduce((acc, member) => {
+          const hasBothVotes =
+            !member?.communityVotes.isZero() && !member?.councilVotes.isZero()
+
+          return acc + (hasBothVotes ? 100 : minRowHeight)
+        }, 0)
+  const getRowHeight = ({ index }) => {
+    const currentMember = activeMembers[index]
+    const hasBothVotes =
+      !currentMember?.communityVotes.isZero() &&
+      !currentMember?.councilVotes.isZero()
+    return hasBothVotes ? 100 : minRowHeight
+  }
   function rowRenderer({ key, index, style }) {
     return (
       <div key={key} style={style}>
-        <MemberItem item={members[index]}></MemberItem>
+        <MemberItem item={activeMembers[index]}></MemberItem>
       </div>
     )
   }
-  //TODO implement CellMeasurer for now every row has to be same height
   return (
     <div className="space-y-3">
       <AutoSizer disableHeight>
         {({ width }) => (
           <List
             width={width}
-            height={rowHeight}
-            rowCount={members.length}
-            rowHeight={minRowHeight}
+            height={listHeight}
+            rowCount={activeMembers.length}
+            rowHeight={getRowHeight}
             rowRenderer={rowRenderer}
           />
         )}