feat: display all tabs on public profile (#2141)

web-marketplace/src/hooks/useQueryIfCreditClassCreator.ts

@@ -4,20 +4,27 @@ import { queryParams } from 'lib/ecocredit/api';
 
 import { useWallet } from '../lib/wallet/wallet';
 
-export function useQueryIfCreditClassCreator(): boolean {
+type Props = {
+  address?: string;
+};
+
+export function useQueryIfCreditClassCreator({ address }: Props): boolean {
   const [isCreator, setIsCreator] = useState(false);
   const { wallet } = useWallet();
+  const walletAddress = wallet?.address;
+  const activeAddress = address ?? walletAddress;
+
   useEffect(() => {
     const queryIfCreator = async (): Promise<void> => {
-      if (!wallet?.address) {
+      if (!activeAddress) {
         setIsCreator(false);
       } else {
         try {
           const result = await queryParams({});
           const allowlistEnabled = result.params?.allowlistEnabled;
           if (allowlistEnabled) {
             const _isCreator =
-              result.params?.allowedClassCreators.includes(wallet.address) ===
+              result.params?.allowedClassCreators.includes(activeAddress) ===
               true;
             setIsCreator(_isCreator);
           } else {
@@ -31,6 +38,6 @@ export function useQueryIfCreditClassCreator(): boolean {
     };
 
     queryIfCreator();
-  }, [wallet?.address]);
+  }, [activeAddress]);
   return isCreator;
 }

web-marketplace/src/hooks/useQueryIsIssuer.ts

@@ -8,24 +8,29 @@ import { useQuery } from '@tanstack/react-query';
 import { getClassesByIssuerQuery } from 'lib/queries/react-query/registry-server/graphql/indexer/getClassesByIssuer/getClassesByIssuer';
 import { useWallet } from 'lib/wallet/wallet';
 
-function useQueryIsIssuer(): boolean {
+type Props = {
+  address?: string;
+};
+
+function useQueryIsIssuer({ address }: Props) {
   const graphqlClient =
     useApolloClient() as ApolloClient<NormalizedCacheObject>;
   const { wallet } = useWallet();
-  const address = wallet?.address;
+  const walletAddress = wallet?.address;
+  const activeAddress = address ?? walletAddress;
 
-  const { data: classesByIssuerData } = useQuery(
+  const { data: classesByIssuerData, isFetching } = useQuery(
     getClassesByIssuerQuery({
-      enabled: !!address && !!graphqlClient,
+      enabled: !!activeAddress && !!graphqlClient,
       client: graphqlClient,
-      issuer: address,
+      issuer: activeAddress,
     }),
   );
 
   const isIssuer =
     (classesByIssuerData?.data.allClassIssuers?.nodes?.length ?? 0) > 0;
 
-  return isIssuer;
+  return { isIssuer, isLoadingIsIssuer: isFetching };
 }
 
 export { useQueryIsIssuer };

web-marketplace/src/hooks/useQueryIsProjectAdmin.ts

@@ -4,20 +4,25 @@ import { useLedger } from 'ledger';
 import { getProjectsByAdminQuery } from 'lib/queries/react-query/ecocredit/getProjectsByAdmin/getProjectsByAdmin';
 import { useWallet } from 'lib/wallet/wallet';
 
-export function useQueryIsProjectAdmin(): boolean {
+type Props = {
+  address?: string;
+};
+
+export function useQueryIsProjectAdmin({ address }: Props) {
   const { ecocreditClient } = useLedger();
   const { wallet } = useWallet();
-  const address = wallet?.address;
+  const walletAddress = wallet?.address;
+  const activeAddress = address ?? walletAddress;
 
-  const { data: projectsByAdmin } = useQuery(
+  const { data: projectsByAdmin, isFetching } = useQuery(
     getProjectsByAdminQuery({
       enabled: !!address && !!ecocreditClient,
       client: ecocreditClient,
-      request: { admin: address },
+      request: { admin: address ?? activeAddress },
     }),
   );
 
   const isProjectAdmin = (projectsByAdmin?.projects?.length ?? 0) > 0;
 
-  return isProjectAdmin;
+  return { isProjectAdmin, isLoadingIsProjectAdmin: isFetching };
 }

web-marketplace/src/pages/CreateCreditClass/CreateCreditClass.tsx

@@ -13,7 +13,7 @@ import { useQueryIfCreditClassCreator } from 'hooks/useQueryIfCreditClassCreator
 
 export const CreateCreditClass = (): JSX.Element => {
   const { wallet } = useWallet();
-  const isCreditClassCreator = useQueryIfCreditClassCreator();
+  const isCreditClassCreator = useQueryIfCreditClassCreator({});
   const formValues: CreditClassValues = {
     ...creditClassBaseValues,
     admin: wallet?.address || '',

web-marketplace/src/pages/Dashboard/MyCreditBatches/MyCreditBatches.Table.tsx

@@ -0,0 +1,85 @@
+import { Link } from 'react-router-dom';
+import { useTheme } from '@mui/material';
+import { Box } from '@mui/system';
+
+import OutlinedButton from 'web-components/lib/components/buttons/OutlinedButton';
+import PlusIcon from 'web-components/lib/components/icons/PlusIcon';
+import { TablePaginationParams } from 'web-components/lib/components/table/ActionsTable';
+import { Subtitle } from 'web-components/lib/components/typography';
+
+import { BatchInfoWithSupply } from 'types/ledger/ecocredit';
+import { UseStateSetter } from 'types/react/use-state';
+
+import WithLoader from 'components/atoms/WithLoader';
+import { CreditBatches } from 'components/organisms';
+
+type Props = {
+  hasNoBatches?: boolean;
+  batchesWithSupply?: BatchInfoWithSupply[];
+  paginationParams: TablePaginationParams;
+  setPaginationParams: UseStateSetter<TablePaginationParams>;
+  useCreate?: boolean;
+};
+
+export const MyCreditBatchesTable = ({
+  hasNoBatches,
+  batchesWithSupply,
+  paginationParams,
+  setPaginationParams,
+  useCreate,
+}: Props) => {
+  const theme = useTheme();
+
+  return (
+    <WithLoader
+      isLoading={batchesWithSupply === undefined}
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        flexDirection: 'col',
+        alignItems: 'center',
+      }}
+    >
+      <>
+        <Box
+          sx={{
+            display: hasNoBatches ? 'none' : 'flex',
+            flexDirection: ['column', 'row'],
+            justifyContent: 'space-between',
+            alignItems: ['flex-start', 'center'],
+            backgroundColor: 'primary.main',
+            px: 6.25,
+            py: 6.25,
+            border: theme => `1px solid ${theme.palette.info.light}`,
+            borderRadius: '8px 8px 0 0',
+          }}
+        >
+          <Subtitle
+            sx={{
+              color: 'primary.contrastText',
+            }}
+            size="xl"
+          >
+            Successfully issued credit batches
+          </Subtitle>
+          {useCreate && (
+            <OutlinedButton
+              startIcon={<PlusIcon color={theme.palette.secondary.main} />}
+              component={Link}
+              to="/ecocredits/create-batch"
+            >
+              create credit batch
+            </OutlinedButton>
+          )}
+        </Box>
+        <CreditBatches
+          creditBatches={batchesWithSupply}
+          onTableChange={setPaginationParams}
+          initialPaginationParams={paginationParams}
+          isIgnoreOffset
+          sx={{ root: { borderTop: 0 } }}
+        />
+      </>
+    </WithLoader>
+  );
+};

web-marketplace/src/pages/Dashboard/MyCreditBatches/MyCreditBatches.tsx

@@ -6,68 +6,32 @@ import OutlinedButton from 'web-components/lib/components/buttons/OutlinedButton
 import EmptyState from 'web-components/lib/components/empty-state';
 import NoEcocreditsIcon from 'web-components/lib/components/icons/NoEcocreditsIcon';
 import PlusIcon from 'web-components/lib/components/icons/PlusIcon';
-import { Label } from 'web-components/lib/components/typography';
 
 import { useWallet } from 'lib/wallet/wallet';
 
-import WithLoader from 'components/atoms/WithLoader';
-import { CreditBatches } from 'components/organisms';
 import { useFetchPaginatedBatches } from 'hooks/batches/useFetchPaginatedBatches';
 
 import { NO_CREDIT_BATCHES_MESSAGE } from './MyCreditBatches.constants';
+import { MyCreditBatchesTable } from './MyCreditBatches.Table';
 
 export const MyCreditBatches = (): JSX.Element => {
   const theme = useTheme();
   const { wallet } = useWallet();
   const { batchesWithSupply, setPaginationParams, paginationParams } =
-    useFetchPaginatedBatches({ address: wallet?.address });
+    useFetchPaginatedBatches({
+      address: wallet?.address,
+    });
   const hasNoBatches = batchesWithSupply && batchesWithSupply?.length === 0;
 
   return (
     <Box sx={{ width: '100%' }}>
-      <WithLoader
-        isLoading={batchesWithSupply === undefined}
-        sx={{
-          display: 'flex',
-          justifyContent: 'center',
-          flexDirection: 'col',
-          alignItems: 'center',
-        }}
-      >
-        <>
-          <Box
-            sx={{
-              display: hasNoBatches ? 'none' : 'flex',
-              flexDirection: ['column', 'row'],
-              justifyContent: 'space-between',
-              alignItems: ['flex-start', 'center'],
-              mb: 10.5,
-            }}
-          >
-            <Label
-              sx={{
-                color: 'info.dark',
-                mb: [3.5, 0],
-              }}
-            >
-              Successfully issued credit batches
-            </Label>
-            <OutlinedButton
-              startIcon={<PlusIcon color={theme.palette.secondary.main} />}
-              component={Link}
-              to="/profile/create-batch"
-            >
-              create credit batch
-            </OutlinedButton>
-          </Box>
-          <CreditBatches
-            creditBatches={batchesWithSupply}
-            onTableChange={setPaginationParams}
-            initialPaginationParams={paginationParams}
-            isIgnoreOffset
-          />
-        </>
-      </WithLoader>
+      <MyCreditBatchesTable
+        hasNoBatches={hasNoBatches}
+        paginationParams={paginationParams}
+        setPaginationParams={setPaginationParams}
+        batchesWithSupply={batchesWithSupply}
+        useCreate
+      />
       {hasNoBatches && (
         <EmptyState
           message={NO_CREDIT_BATCHES_MESSAGE}
@@ -77,7 +41,7 @@ export const MyCreditBatches = (): JSX.Element => {
           <OutlinedButton
             startIcon={<PlusIcon color={theme.palette.secondary.main} />}
             component={Link}
-            to="/profile/create-batch"
+            to="/ecocredits/create-batch"
           >
             create credit batch
           </OutlinedButton>

web-marketplace/src/pages/Dashboard/hooks/useProfileItems.tsx

@@ -4,9 +4,9 @@ import { useQueryIsIssuer } from 'hooks/useQueryIsIssuer';
 import { useQueryIsProjectAdmin } from 'hooks/useQueryIsProjectAdmin';
 
 export const useProfileItems = () => {
-  const isIssuer = useQueryIsIssuer();
-  const isCreditClassCreator = useQueryIfCreditClassCreator();
-  const isProjectAdmin = useQueryIsProjectAdmin();
+  const { isIssuer } = useQueryIsIssuer({});
+  const isCreditClassCreator = useQueryIfCreditClassCreator({});
+  const { isProjectAdmin } = useQueryIsProjectAdmin({});
   const isCreditClassAdmin = useQueryIsClassAdmin();
 
   const showProjects = isIssuer || isProjectAdmin;
@@ -17,7 +17,7 @@ export const useProfileItems = () => {
     // Explicitly set to false until we enable the class creation flow
     showCreditClasses: false && showCreditClasses,
     isCreditClassCreator: false && isCreditClassCreator,
-    isProjectAdmin,
-    isIssuer,
+    isProjectAdmin: isProjectAdmin,
+    isIssuer: isIssuer,
   };
 };

web-marketplace/src/pages/EcocreditsByAccount/CreditBatchesTab/CreditBatchesTab.constants.ts

@@ -0,0 +1 @@
+export const PROFILE_NO_CREDIT_BATCHES_MESSAGE = 'No credit batches to display';

web-marketplace/src/pages/EcocreditsByAccount/CreditBatchesTab/CreditBatchesTab.tsx

@@ -0,0 +1,27 @@
+import { Box } from '@mui/system';
+
+import { MyCreditBatchesTable } from 'pages/Dashboard/MyCreditBatches/MyCreditBatches.Table';
+import { useFetchPaginatedBatches } from 'hooks/batches/useFetchPaginatedBatches';
+
+import { useProfileData } from '../hooks/useProfileData';
+
+export const CreditBatchesTab = () => {
+  const { address } = useProfileData();
+  const { batchesWithSupply, setPaginationParams, paginationParams } =
+    useFetchPaginatedBatches({
+      address,
+    });
+
+  const hasNoBatches = batchesWithSupply && batchesWithSupply?.length === 0;
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <MyCreditBatchesTable
+        hasNoBatches={hasNoBatches}
+        paginationParams={paginationParams}
+        setPaginationParams={setPaginationParams}
+        batchesWithSupply={batchesWithSupply}
+      />
+    </Box>
+  );
+};

web-marketplace/src/pages/EcocreditsByAccount/CreditClassTab/CreditClassTab.tsx

@@ -0,0 +1,9 @@
+import { Grid } from '@mui/material';
+
+export const CreditClassTab = () => {
+  return (
+    <Grid container spacing={8}>
+      <Grid item xs={12} md={6} lg={4}></Grid>
+    </Grid>
+  );
+};