Show not member hint for whitelist

next/components/postCreate/information.js

@@ -20,7 +20,8 @@ import {
 } from "../../store/reducers/statusSlice";
 import BalanceRow from "@/components/postCreate/BalanceRow";
 import { hasBalanceStrategy } from "frontedUtils/strategy";
-import SocietyMemberHit from "./societyMemberHit";
+import SocietyMemberHint from "./societyMemberHint";
+import WhitelistMemberHint from "./whitelistMemberHint";
 
 const Hint = styled.div`
   margin-top: 4px !important;
@@ -107,7 +108,12 @@ export default function Information({ space }) {
         />
       )}
       <InfoHint space={space} />
-      {space.accessibility === "society" && <SocietyMemberHit space={space} />}
+      {space.accessibility === "society" && <SocietyMemberHint space={space} />}
+      {space.accessibility === "whitelist" && (
+        <WhitelistMemberHint whitelist={space?.whitelist}>
+          Only members can create a proposal
+        </WhitelistMemberHint>
+      )}
       <Proxy space={space} />
     </>
   );

next/components/postCreate/societyMemberHint.js

@@ -0,0 +1,15 @@
+import { useIsSocietyMember } from "hooks/useIsSocietyMember";
+import { Hint } from "./styled";
+import { loginAddressSelector } from "store/reducers/accountSlice";
+import { useSelector } from "react-redux";
+
+export default function SocietyMemberHint() {
+  const loginAddress = useSelector(loginAddressSelector);
+  const isSocietyMember = useIsSocietyMember();
+
+  if (!loginAddress || isSocietyMember) {
+    return null;
+  }
+
+  return <Hint>You are not a society member</Hint>;
+}

next/components/postCreate/styled.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const Hint = styled.div`
+  margin-top: 4px !important;
+  color: var(--textFeedbackError);
+`;

next/components/postCreate/whitelistMemberHint.js

@@ -0,0 +1,14 @@
+import { loginAddressSelector } from "store/reducers/accountSlice";
+import { Hint } from "./styled";
+import { useIsWhitelistMember } from "hooks/useIsWhitelistMember";
+import { useSelector } from "react-redux";
+
+export default function WhitelistMemberHint({ whitelist, children }) {
+  const loginAddress = useSelector(loginAddressSelector);
+  const isMember = useIsWhitelistMember(whitelist);
+  if (!loginAddress || isMember) {
+    return null;
+  }
+
+  return <Hint>{children}</Hint>;
+}

next/components/postDetail/postVote.js

@@ -41,8 +41,9 @@ import { Tooltip } from "@osn/common-ui";
 import VoteBalanceDetail from "./VoteBalanceDetail";
 import DelegationInfo from "./delegationInfo";
 import { hasBalanceStrategy } from "frontedUtils/strategy";
-import SocietyMemberHit from "../postCreate/societyMemberHit";
+import SocietyMemberHint from "../postCreate/societyMemberHint";
 import SocietyMemberButton from "../societyMemberButton";
+import WhitelistMemberHint from "../postCreate/whitelistMemberHint";
 
 const Wrapper = styled.div`
   > :not(:first-child) {
@@ -145,6 +146,8 @@ function BalanceInfo({ proposal, balance, balanceDetail, delegation }) {
   const proxyDelegation = useSelector(proxyDelegationSelector);
   const isSocietyProposal =
     proposal.networksConfig?.accessibility === "society";
+  const isWhitelistProposal =
+    proposal.networksConfig?.accessibility === "whitelist";
 
   const { network: loginNetwork } = useSelector(loginNetworkSelector) || {};
 
@@ -181,7 +184,13 @@ function BalanceInfo({ proposal, balance, balanceDetail, delegation }) {
       );
     }
   } else if (isSocietyProposal) {
-    balanceInfo = <SocietyMemberHit />;
+    balanceInfo = <SocietyMemberHint />;
+  } else if (isWhitelistProposal) {
+    balanceInfo = (
+      <WhitelistMemberHint whitelist={proposal?.networksConfig?.whitelist}>
+        Only members can vote
+      </WhitelistMemberHint>
+    );
   }
 
   return (

next/hooks/useIsWhitelistMember.js

@@ -0,0 +1,10 @@
+import { isSameAddress } from "frontedUtils/address";
+import { useSelector } from "react-redux";
+import { loginAddressSelector } from "store/reducers/accountSlice";
+
+export function useIsWhitelistMember(whitelist) {
+  const loginAddress = useSelector(loginAddressSelector);
+  return (whitelist || []).some((address) =>
+    isSameAddress(address, loginAddress),
+  );
+}