Use skillId corresponding to domainId for reputation query

src/data/generated.ts

@@ -975,7 +975,7 @@ export type QueryUserAddressArgs = {
 export type QueryUserReputationArgs = {
   address: Scalars['String'],
   colonyAddress: Scalars['String'],
-  skillId?: Maybe<Scalars['Int']>
+  domainId?: Maybe<Scalars['Int']>
 };
 
 
@@ -1345,7 +1345,7 @@ export type UserCompletedLevelsArgs = {
 
 export type UserReputationArgs = {
   colonyAddress: Scalars['String'],
-  skillId?: Maybe<Scalars['Int']>
+  domainId?: Maybe<Scalars['Int']>
 };
 
 export type UserProfile = {
@@ -1954,7 +1954,7 @@ export type UserQuery = { user: (
 export type UserWithReputationQueryVariables = {
   address: Scalars['String'],
   colonyAddress: Scalars['String'],
-  skillId?: Maybe<Scalars['Int']>
+  domainId?: Maybe<Scalars['Int']>
 };
 
 
@@ -1966,7 +1966,7 @@ export type UserWithReputationQuery = { user: (
 export type UserReputationQueryVariables = {
   address: Scalars['String'],
   colonyAddress: Scalars['String'],
-  skillId?: Maybe<Scalars['Int']>
+  domainId?: Maybe<Scalars['Int']>
 };
 
 
@@ -4737,7 +4737,7 @@ export type UserQueryHookResult = ReturnType<typeof useUserQuery>;
 export type UserLazyQueryHookResult = ReturnType<typeof useUserLazyQuery>;
 export type UserQueryResult = ApolloReactCommon.QueryResult<UserQuery, UserQueryVariables>;
 export const UserWithReputationDocument = gql`
-    query UserWithReputation($address: String!, $colonyAddress: String!, $skillId: Int) {
+    query UserWithReputation($address: String!, $colonyAddress: String!, $domainId: Int) {
   user(address: $address) {
     id
     profile {
@@ -4749,7 +4749,7 @@ export const UserWithReputationDocument = gql`
       website
       avatarHash
     }
-    reputation(colonyAddress: $colonyAddress, skillId: $skillId) @client
+    reputation(colonyAddress: $colonyAddress, domainId: $domainId) @client
   }
 }
     `;
@@ -4768,7 +4768,7 @@ export const UserWithReputationDocument = gql`
  *   variables: {
  *      address: // value for 'address'
  *      colonyAddress: // value for 'colonyAddress'
- *      skillId: // value for 'skillId'
+ *      domainId: // value for 'domainId'
  *   },
  * });
  */
@@ -4782,8 +4782,8 @@ export type UserWithReputationQueryHookResult = ReturnType<typeof useUserWithRep
 export type UserWithReputationLazyQueryHookResult = ReturnType<typeof useUserWithReputationLazyQuery>;
 export type UserWithReputationQueryResult = ApolloReactCommon.QueryResult<UserWithReputationQuery, UserWithReputationQueryVariables>;
 export const UserReputationDocument = gql`
-    query UserReputation($address: String!, $colonyAddress: String!, $skillId: Int) {
-  userReputation(address: $address, colonyAddress: $colonyAddress, skillId: $skillId) @client
+    query UserReputation($address: String!, $colonyAddress: String!, $domainId: Int) {
+  userReputation(address: $address, colonyAddress: $colonyAddress, domainId: $domainId) @client
 }
     `;
 
@@ -4801,7 +4801,7 @@ export const UserReputationDocument = gql`
  *   variables: {
  *      address: // value for 'address'
  *      colonyAddress: // value for 'colonyAddress'
- *      skillId: // value for 'skillId'
+ *      domainId: // value for 'domainId'
  *   },
  * });
  */

src/data/queries.graphql

@@ -158,7 +158,7 @@ query User($address: String!) {
 # This isn't currently being used anywhere, but... here it is anyways.
 # In most cases, we'll want to fetch the reputation *after* the user is already fetched,
 # as fetching reputation takes quite a bit longer.
-query UserWithReputation($address: String!, $colonyAddress: String!, $skillId: Int) {
+query UserWithReputation($address: String!, $colonyAddress: String!, $domainId: Int) {
   user(address: $address) {
     id
     profile {
@@ -170,12 +170,12 @@ query UserWithReputation($address: String!, $colonyAddress: String!, $skillId: I
       website
       avatarHash
     }
-    reputation(colonyAddress: $colonyAddress, skillId: $skillId) @client
+    reputation(colonyAddress: $colonyAddress, domainId: $domainId) @client
   }
 }
 
-query UserReputation($address: String!, $colonyAddress: String!, $skillId: Int) {
-  userReputation(address: $address, colonyAddress: $colonyAddress, skillId: $skillId) @client
+query UserReputation($address: String!, $colonyAddress: String!, $domainId: Int) {
+  userReputation(address: $address, colonyAddress: $colonyAddress, domainId: $domainId) @client
 }
 
 query UserTasks($address: String!) {

src/data/typeDefs.ts

@@ -59,7 +59,7 @@ export default gql`
 
   extend type User {
     tokens: [Token!]!
-    reputation(colonyAddress: String!, skillId: Int): String!
+    reputation(colonyAddress: String!, domainId: Int): String!
   }
 
   extend type Query {
@@ -72,7 +72,7 @@ export default gql`
     userReputation(
       address: String!
       colonyAddress: String!
-      skillId: Int
+      domainId: Int
     ): String!
     username(address: String!): String!
   }

src/data/user.ts

@@ -1,18 +1,23 @@
 import { Resolvers } from 'apollo-client';
 
+import { ROOT_DOMAIN } from '~constants';
 import { ContextType } from '~context/index';
 import ENS from '~lib/ENS';
 import { Address } from '~types/index';
 
 import { getToken } from './token';
 
 const getUserReputation = async (
-  { networkClient }: ContextType['colonyManager'],
+  colonyManager: ContextType['colonyManager'],
   address: Address,
   colonyAddress: Address,
-  skillId: number,
+  domainId: number,
 ): Promise<string> => {
-  const { reputationAmount } = await networkClient.getReputation({
+  const colonyClient = await colonyManager.getColonyClient(colonyAddress);
+  const { skillId } = await colonyClient.getDomain.call({
+    domainId,
+  });
+  const { reputationAmount } = await colonyManager.networkClient.getReputation({
     address,
     colonyAddress,
     skillId,
@@ -38,14 +43,14 @@ export const userResolvers = ({
       {
         address,
         colonyAddress,
-        skillId = 0,
-      }: { address: Address; colonyAddress: Address; skillId?: number },
+        domainId = ROOT_DOMAIN,
+      }: { address: Address; colonyAddress: Address; domainId?: number },
     ) {
       const reputation = await getUserReputation(
         colonyManager,
         address,
         colonyAddress,
-        skillId,
+        domainId,
       );
       return reputation;
     },
@@ -59,8 +64,8 @@ export const userResolvers = ({
       user,
       {
         colonyAddress,
-        skillId = 0,
-      }: { colonyAddress: Address; skillId: number },
+        domainId = ROOT_DOMAIN,
+      }: { colonyAddress: Address; domainId: number },
     ) {
       const {
         profile: { walletAddress },
@@ -69,7 +74,7 @@ export const userResolvers = ({
         colonyManager,
         walletAddress,
         colonyAddress,
-        skillId,
+        domainId,
       );
       return reputation;
     },

src/modules/core/components/Assignment/Assignment.tsx

@@ -55,8 +55,8 @@ interface Props {
   /** Should the funding be rendered (if set) */
   showFunding?: boolean;
 
-  /** Skill id (for reputation display) */
-  skillId?: number;
+  /** Domain id (for reputation display) */
+  domainId?: number;
 
   /** Ahem... */
   nativeTokenAddress: Address;
@@ -68,7 +68,7 @@ const Assignment = ({
   payouts,
   pending,
   reputation,
-  skillId,
+  domainId,
   showFunding,
   worker,
   workerAddress,
@@ -82,7 +82,7 @@ const Assignment = ({
       <UserInfo
         colonyAddress={colonyAddress}
         placeholder={MSG.placeholder}
-        skillId={skillId}
+        domainId={domainId}
         user={worker}
         userAddress={workerAddress}
       >

src/modules/core/components/InfoPopover/InfoPopover.tsx

@@ -20,7 +20,7 @@ interface BasicUserContentProps {
 
 interface MemberContentProps {
   colonyAddress: Address;
-  skillId: number | undefined;
+  domainId: number | undefined;
   user: AnyUser;
 }
 
@@ -48,11 +48,11 @@ const renderContent = (contentProps: ContentProps) => {
     'colonyAddress' in contentProps &&
     typeof contentProps.colonyAddress !== 'undefined'
   ) {
-    const { colonyAddress, skillId, user } = contentProps;
+    const { colonyAddress, domainId, user } = contentProps;
     return (
       <MemberInfoPopover
         colonyAddress={colonyAddress}
-        skillId={skillId}
+        domainId={domainId}
         user={user}
       />
     );

src/modules/core/components/InfoPopover/MemberInfoPopover.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import { DEFAULT_TOKEN_DECIMALS } from '~constants';
 import Badge from '~core/Badge';
 import Heading from '~core/Heading';
 import Numeral from '~core/Numeral';
@@ -9,6 +10,7 @@ import {
   AnyUser,
   useUserBadgesQuery,
   useUserReputationQuery,
+  useColonyNativeTokenQuery,
 } from '~data/index';
 import { Address } from '~types/index';
 
@@ -18,7 +20,7 @@ import styles from './InfoPopover.css';
 
 interface Props {
   colonyAddress: Address;
-  skillId?: number;
+  domainId?: number;
   user: AnyUser;
 }
 
@@ -47,7 +49,7 @@ const MSG = defineMessages({
 
 const displayName = 'InfoPopover.MemberInfoPopover';
 
-const MemberInfoPopover = ({ colonyAddress, skillId, user }: Props) => {
+const MemberInfoPopover = ({ colonyAddress, domainId, user }: Props) => {
   const { formatMessage } = useIntl();
   const {
     profile: { walletAddress },
@@ -58,7 +60,14 @@ const MemberInfoPopover = ({ colonyAddress, skillId, user }: Props) => {
     loading: loadingUserReputation,
     error: errorReputation,
   } = useUserReputationQuery({
-    variables: { address: walletAddress, colonyAddress, skillId },
+    variables: { address: walletAddress, colonyAddress, domainId },
+  });
+
+  const {
+    data: nativeTokenData,
+    loading: loadingNativeToken,
+  } = useColonyNativeTokenQuery({
+    variables: { address: colonyAddress },
   });
 
   const { data } = useUserBadgesQuery({
@@ -80,14 +89,15 @@ const MemberInfoPopover = ({ colonyAddress, skillId, user }: Props) => {
               text={MSG.headingReputation}
             />
           </div>
-          {userReputationData && (
+          {userReputationData && nativeTokenData && (
             <Numeral
               appearance={{ theme: 'blue', weight: 'medium' }}
               value={userReputationData.userReputation}
+              unit={DEFAULT_TOKEN_DECIMALS}
             />
           )}
         </div>
-        {loadingUserReputation && <SpinnerLoader />}
+        {(loadingUserReputation || loadingNativeToken) && <SpinnerLoader />}
         {userReputationData && (
           <>
             <FormattedMessage tagName="b" {...MSG.descriptionReputation} />

src/modules/core/components/MembersList/MembersList.tsx

@@ -11,7 +11,7 @@ interface Props<U> {
   extraItemContent?: (user: U) => ReactNode;
   onRowClick?: (user: U) => void;
   showUserInfo?: boolean;
-  skillId: number | undefined;
+  domainId: number | undefined;
   users: U[];
 }
 
@@ -22,7 +22,7 @@ const MembersList = <U extends AnyUser = AnyUser>({
   extraItemContent,
   onRowClick,
   showUserInfo = true,
-  skillId,
+  domainId,
   users,
 }: Props<U>) => (
   <ListGroup>
@@ -33,7 +33,7 @@ const MembersList = <U extends AnyUser = AnyUser>({
         key={user.id}
         onRowClick={onRowClick}
         showUserInfo={showUserInfo}
-        skillId={skillId}
+        domainId={domainId}
         user={user}
       />
     ))}

src/modules/core/components/MembersList/MembersListItem.tsx

@@ -14,7 +14,7 @@ interface Props<U> {
   colonyAddress: Address;
   onRowClick?: (user: U) => void;
   showUserInfo: boolean;
-  skillId: number | undefined;
+  domainId: number | undefined;
   user: U;
 }
 
@@ -24,11 +24,11 @@ const componentDisplayName = 'MembersList.MembersListItem';
 
 const MembersListItem = <U extends AnyUser = AnyUser>(props: Props<U>) => {
   const {
-    extraItemContent,
     colonyAddress,
+    domainId,
+    extraItemContent,
     onRowClick,
     showUserInfo,
-    skillId,
     user,
   } = props;
   const {
@@ -83,7 +83,7 @@ const MembersListItem = <U extends AnyUser = AnyUser>(props: Props<U>) => {
             }}
             user={user}
             showInfo={!onRowClick || showUserInfo}
-            skillId={skillId}
+            domainId={domainId}
           />
         </div>
         <div className={styles.usernameSection}>

src/modules/core/components/UserAvatar/UserAvatar.tsx

@@ -44,7 +44,7 @@ interface BaseProps {
 /** Used for the infopopover */
 interface PropsForReputation extends BaseProps {
   colonyAddress?: Address;
-  skillId?: number;
+  domainId?: number;
 }
 
 export type Props = BaseProps | PropsForReputation;
@@ -73,11 +73,11 @@ const UserAvatar = ({
     user,
   };
   if ('colonyAddress' in rest) {
-    const { colonyAddress, skillId } = rest;
+    const { colonyAddress, domainId } = rest;
     popoverProps = {
       ...popoverProps,
       colonyAddress,
-      skillId,
+      domainId,
     };
   }
   const avatar = (