Verified status: no visual representation in Pioneer UI

packages/ui/src/common/components/icons/VerifiedMemberIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+import { Icon } from './Icon'
+
+export const VerifiedMemberIcon = React.memo(({ className }: { className?: string }) => (
+  <Icon className={className} width="24" height="24" viewBox="0 0 24 24" fill="none" color="currentColor">
+    <path
+      d="M20 7.5975L9.90608 18L4 12.735L5.78463 11.0132L9.77205 14.5679L18.0857 6L20 7.5975Z"
+      fill="currentColor"
+    />
+  </Icon>
+))

packages/ui/src/common/components/icons/index.ts

@@ -31,3 +31,4 @@ export * from './WaitingIcon'
 export * from './WatchIcon'
 export * from './ApplicationIcon'
 export * from './CouncilMemberIcon'
+export * from './VerifiedMemberIcon'

packages/ui/src/memberships/components/MemberInfo.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { FounderMemberIcon, LeadMemberIcon, CouncilMemberIcon } from '@/common/components/icons'
+import { FounderMemberIcon, LeadMemberIcon, CouncilMemberIcon, VerifiedMemberIcon } from '@/common/components/icons'
 import {
   DarkTooltipInnerItemProps,
   DefaultTooltip,
@@ -88,7 +88,7 @@ export const MemberInfo = React.memo(
         <div>
           <MemberHead>
             <MemberHandle>{member.handle}</MemberHandle>
-            {(member.isFoundingMember || member.isCouncilMember) && (
+            {(member.isFoundingMember || member.isCouncilMember || member.isVerified) && (
               <MemberIcons>
                 {member.isFoundingMember && (
                   <Tooltip tooltipText="This member is founder">
@@ -104,6 +104,13 @@ export const MemberInfo = React.memo(
                     </MemberStatusTooltip>
                   </Tooltip>
                 )}
+                {member.isVerified && (
+                  <Tooltip tooltipText="This member is verified">
+                    <MemberStatusTooltip isOnDark={isOnDark} className={isOnDark ? 'tooltipondark' : 'tooltiponlight'}>
+                      <VerifiedMemberIcon />
+                    </MemberStatusTooltip>
+                  </Tooltip>
+                )}
               </MemberIcons>
             )}
           </MemberHead>

packages/ui/src/memberships/components/MemberListFilters/MemberListFilters.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { MembershipExternalResourceType } from '@/common/api/queries'
 import { TogglableIcon } from '@/common/components/forms'
 import { Fields, FilterBox, FilterLabel } from '@/common/components/forms/FilterBox'
-import { CheckboxIcon, CouncilMemberIcon, FounderMemberIcon } from '@/common/components/icons'
+import { CheckboxIcon, CouncilMemberIcon, FounderMemberIcon, VerifiedMemberIcon } from '@/common/components/icons'
 import { ItemCount } from '@/common/components/ItemCount'
 import { ColumnGapBlock } from '@/common/components/page/PageContent'
 import { MyProfileIcon } from '@/common/components/page/Sidebar/LinksIcons'
@@ -28,6 +28,7 @@ export interface MemberListFilter {
   onlyFounder: boolean
   searchFilter: MemberSearchFilter
   onlyCouncil: boolean
+  onlyVerified: boolean
 }
 
 type FilterKey = keyof MemberListFilter
@@ -58,6 +59,7 @@ export const MemberListEmptyFilter: MemberListFilter = {
   onlyFounder: false,
   searchFilter: 'Membership',
   onlyCouncil: false,
+  onlyVerified: false,
 }
 
 const memberListIcons = {
@@ -109,7 +111,7 @@ export interface MemberListFiltersProps {
 export const MemberListFilters = ({ memberCount, onApply }: MemberListFiltersProps) => {
   const [filters, dispatch] = useReducer(filterReducer, MemberListEmptyFilter)
   const searchSlot = useRef<HTMLDivElement>(null)
-  const { search, roles, onlyCouncil, onlyFounder } = filters
+  const { search, roles, onlyCouncil, onlyFounder, onlyVerified } = filters
 
   const applyFilters = () => onApply(filters)
   const clear = isFilterEmpty(filters)
@@ -181,6 +183,16 @@ export const MemberListFilters = ({ memberCount, onApply }: MemberListFiltersPro
           >
             <CouncilMemberIcon />
           </TogglableIcon>
+          <TogglableIcon
+            tooltipText="Verified Member"
+            value={onlyVerified}
+            onChange={(value) => {
+              dispatch({ type: 'change', field: 'onlyVerified', value })
+              onApply({ ...filters, onlyVerified: value })
+            }}
+          >
+            <VerifiedMemberIcon />
+          </TogglableIcon>
         </ToggleContainer>
       </MembersFilterBox>
     </Wrapper>
@@ -235,7 +247,7 @@ const ToggleContainer = styled.div`
   height: 48px;
 
   & > :first-child {
-    grid-column: span 2;
+    grid-column: span 3;
   }
 `
 

packages/ui/src/memberships/hooks/useMembers.ts

@@ -26,12 +26,12 @@ export const useMembers = ({ order, filter, perPage = 10 }: UseMemberProps) => {
     where,
     orderBy: toQueryOrderByInput<MembershipOrderByInput>(order),
   }
+
   const { data, loading, error: err } = useGetMembersWithDetailsQuery({ variables })
 
   if (err) {
     error(err)
   }
-
   return {
     isLoading: loading,
     members: data?.memberships.map(asMemberWithDetails) ?? [],
@@ -50,6 +50,7 @@ type FilterGqlInput = Pick<
   | 'controllerAccount_eq'
   | 'rootAccount_eq'
   | 'isCouncilMember_eq'
+  | 'isVerified_eq'
   | 'externalResources_some'
 >
 
@@ -58,12 +59,14 @@ const filterToGqlInput = ({
   roles,
   onlyCouncil,
   onlyFounder,
+  onlyVerified,
   searchFilter,
 }: MemberListFilter): FilterGqlInput => ({
   ...(roles.length ? { roles_some: { groupId_in: roles.map(toString) } } : {}),
   ...(onlyFounder ? { isFoundingMember_eq: true } : {}),
   ...(searchFilter ? searchFilterToGqlInput(searchFilter, search) : {}),
   ...(onlyCouncil ? { isCouncilMember_eq: true } : {}),
+  ...(onlyVerified ? { isVerified_eq: true } : {}),
 })
 
 const searchFilterToGqlInput = (