Skip to content

Bug: Resolve stewards UI issues. Closes #275 #293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
L03TJ3 merged 3 commits into from
Mar 31, 2025
Merged

Bug: Resolve stewards UI issues. Closes #275 #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d7f31c3
Rename steward for recipient in interface
vtamara Mar 27, 2025
3cf80f7
Stewards order by actions
vtamara Mar 27, 2025
5a21898
List of stewards as seen from the stewards page scales to vertical he…
vtamara Mar 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/app/src/components/AboutCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,15 @@ const AboutCard = () => {
GoodCollective makes visible the climate stewardship activities of individuals, and provides a direct channel
of payment to them. We work in partnership with project developers and community organizations already
providing climate-positive services, leveraging their impact verification approaches which correspond a
steward’s individual activity to an intended climate outcome.
recipient’s individual activity to an intended climate outcome.
</Text>
<Text {...subTitle}>How it works</Text>
<Text {...paragraph}>
The GoodCollective dApp allows donors to contribute to individual climate stewards performing critical climate
activities across a variety of projects. Each time a steward makes a verified climate-positive activity, it
triggers a payment directly to their wallet. Any climate-positive organization or project developer can use
activities associated with their preferred impact verification methodology to initiate direct payments to
their stewards.
The GoodCollective dApp allows donors to contribute to individual climate recipients performing critical
climate activities across a variety of projects. Each time a recipient makes a verified climate-positive
activity, it triggers a payment directly to their wallet. Any climate-positive organization or project
developer can use activities associated with their preferred impact verification methodology to initiate
direct payments to their recipients.
</Text>
<Text {...subTitle}>Why we built GoodCollective</Text>
<Text {...paragraph}>
Expand Down
12 changes: 6 additions & 6 deletions packages/app/src/components/StewardsList/StewardsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { StewardCollective } from '../../models/models';
import { useMemo } from 'react';
import { StewardBlue, StewardGreen } from '../../assets';
import { useFetchFullNames } from '../../hooks/useFetchFullName';
import { orderBy } from 'lodash';

interface StewardListProps {
listType: 'viewCollective' | 'viewStewards';
Expand All @@ -17,6 +18,8 @@ interface StewardListProps {
function StewardList({ listType, stewards, titleStyle, listStyle }: StewardListProps) {
const titleIcon = listType === 'viewCollective' ? StewardGreen : StewardBlue;

const stewardsInOrder = useMemo(() => orderBy(stewards, 'actions', 'desc'), [stewards]);

const userAddresses = useMemo(() => {
return stewards.map((steward) => steward.steward as `0x${string}`);
}, [stewards]);
Expand All @@ -26,10 +29,10 @@ function StewardList({ listType, stewards, titleStyle, listStyle }: StewardListP
<View style={styles.stewardsListContainer}>
<View style={[styles.row, { marginBottom: 24, ...(titleStyle ?? {}) }]}>
<Image source={titleIcon} style={styles.titleIcon} />
<Text style={styles.title}>Stewards</Text>
<Text style={styles.title}>Recipients</Text>
</View>
<View style={[styles.list, overflowStyle.overflow, { ...(listStyle ?? {}) }]}>
{stewards.map((steward) => (
<View style={[overflowStyle.overflow, { ...(listStyle ?? {}) }]}>
{stewardsInOrder.map((steward) => (
<StewardsListItem
steward={steward}
showActions={listType === 'viewStewards'}
Expand Down Expand Up @@ -94,9 +97,6 @@ const styles = StyleSheet.create({
stewardRow: {
...InterSemiBold,
},
list: {
maxHeight: 400,
},
});

const overflowStyle = StyleSheet.create({
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/TransactionList/ClaimTransactionListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function ClaimTransactionListItem({ transaction }: ClaimTransactionListIt
if (stewards.length === 1) {
userAddress = stewards[0] as `0x${string}`;
} else {
multipleStewardsText = `${stewards.length} Stewards`;
multipleStewardsText = `${stewards.length} Recipients`;
}

const { data: ensName } = useEnsName({ address: userAddress, chainId: 1 });
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/TransactionList/TransactionListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function TransactionListItem({
const formattedHash = formatAddress(txHash);
const formattedTimestamp = moment(timeStamp * 1000).format('MM.DD.YYYY HH:mm');

const title = !isDonation ? (isUBIPool ? 'Recipient claim' : 'Steward Payout') : isStream;
const title = !isDonation ? (isUBIPool ? 'Recipient claim' : 'Recipient Payout') : isStream;
Copy link

@korbit-ai korbit-ai bot Mar 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing Default Title for Non-Stream Donations category Functionality

Tell me more
What is the issue?

The title assignment logic fails to handle the case when isDonation is true and isStream is undefined or falsy, resulting in an undefined title.

Why this matters

This could lead to UI inconsistencies and potential rendering issues when displaying transaction types for donations without streams.

Suggested change ∙ Feature Preview

Add a default title for donations that are not streams:

const title = !isDonation 
  ? (isUBIPool ? 'Recipient claim' : 'Recipient Payout') 
  : (isStream || 'Donation');
Provide feedback to improve future suggestions

Nice Catch Incorrect Not in Scope Not in coding standard Other

💬 Looking for more details? Reply to this comment to chat with Korbit.

const color = title?.includes('Ended') ? 'goodRed.300' : isDonation ? 'goodGreen.200' : 'goodOrange.200';

return (
Expand Down
8 changes: 4 additions & 4 deletions packages/app/src/components/ViewCollective.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
<View style={styles.collectiveDesktopTimeline}>
<View style={{ flex: 1, gap: 16 }}>
<RowItem imageUrl={CalendarIcon} rowInfo="Creation Date" rowData={formatTime(timestamp)} />
<RowItem imageUrl={StewardGreen} rowInfo="Stewards Paid" rowData={stewardsPaid ?? 0} />
<RowItem imageUrl={StewardGreen} rowInfo="Recipients Paid" rowData={stewardsPaid ?? 0} />
<RowItem imageUrl={ListGreenIcon} rowInfo="# of Payments Made" rowData={paymentsMade ?? 0} currency="" />
</View>
<View style={{ flex: 1, gap: 16 }}>
Expand Down Expand Up @@ -320,7 +320,7 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
<View style={[styles.container, styles.desktopContainer]}>
<StewardList stewards={stewardCollectives.slice(0, 6)} listType="viewCollective" />
<RoundedButton
title="See all stewards"
title="See all recipients"
backgroundColor={Colors.purple[100]}
color={Colors.purple[200]}
onPress={() => navigate(`/collective/${poolAddress}/stewards`)}
Expand Down Expand Up @@ -373,7 +373,7 @@ function ViewCollective({ collective }: ViewCollectiveProps) {

<View style={styles.rowContainer}>
<RowItem imageUrl={CalendarIcon} rowInfo="Creation Date" rowData={formatTime(timestamp)} />
<RowItem imageUrl={StewardGreen} rowInfo="Stewards Paid" rowData={stewardsPaid ?? 0} />
<RowItem imageUrl={StewardGreen} rowInfo="Recipients Paid" rowData={stewardsPaid ?? 0} />
<RowItem imageUrl={ListGreenIcon} rowInfo="# of Payments Made" rowData={paymentsMade ?? 0} currency="" />
<FlowingDonationsRowItem
imageUrl={ReceiveLightIcon}
Expand Down Expand Up @@ -410,7 +410,7 @@ function ViewCollective({ collective }: ViewCollectiveProps) {
<View style={[styles.container]}>
<StewardList stewards={stewardCollectives.slice(0, 5)} listType="viewCollective" />
<RoundedButton
title="See all stewards"
title="See all recipients"
backgroundColor={Colors.purple[100]}
color={Colors.purple[200]}
fontSize={18}
Expand Down
3 changes: 2 additions & 1 deletion packages/app/src/pages/ViewStewardsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function ViewStewardsPage() {
<Layout
breadcrumbPath={[
{ text: collective?.ipfs.name ?? collectiveId, route: `/collective/${collectiveId}` },
{ text: 'Stewards', route: `/collective/${collectiveId}/stewards` },
{ text: 'Recipients', route: `/collective/${collectiveId}/stewards` },
]}>
{!collective ? (
<Text>Loading...</Text>
Expand All @@ -38,6 +38,7 @@ function ViewStewardsPage() {
titleStyle={styles.desktopTitleUnderline}
stewards={collective?.stewardCollectives}
listType="viewStewards"
listStyle={{ height: '60vh' }}

This comment was marked as resolved.

Sign in to view

/>
</View>
</View>
Expand Down
Loading