Skip to content
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

Jump to bottom

Fix: show GiveBack Toast when token is eligible #4661

Merged
merged 8 commits into from
Sep 3, 2024
Merged

Fix: show GiveBack Toast when token is eligible #4661

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fb2cf50
show GiveBack Toast when token is eligible
Meriem-BM Sep 2, 2024
3ce7e69
Merge branch 'develop' into feat/stellar_integration
Meriem-BM Sep 2, 2024
fd8876a
update GivBack Toast UI
Meriem-BM Sep 2, 2024
575dd1e
Merge branch 'feat/stellar_integration' of https://github.com/Giveth/…
Meriem-BM Sep 2, 2024
6bcd5f0
fix: add project address UI
Meriem-BM Sep 2, 2024
e8cc1cc
fix: Timer not stopping when donation is detected
Meriem-BM Sep 2, 2024
5353be6
fix: eslint errors
Meriem-BM Sep 2, 2024
87fdcac
fix: case when owner donate to his own peoject (Stellar chain)
Meriem-BM Sep 2, 2024
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
2 changes: 1 addition & 1 deletion lang/ca.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -632,7 +632,7 @@
"label.modify_stream_balance": "Modificar el Saldo de la Transmissió",
"label.month": "{count, plural, one { Mes} other { Mesos} }",
"label.monthly": "Mensualment",
"label.sign_in_with_your_eth_wallet_for_givebacks": "Inicia la sessió amb la teva cartera Ethereum per a GIVbacks",
"label.sign_in_with_your_eth_wallet_for_givebacks": "Inicia la sessió amb la teva cartera Ethereum per a GIVbacks.",
"label.monthly_across_all_projects": "mensualment a tots els projectes",
"label.months": "{count, plural, one { Mes} other { Mesos} }",
"label.more_about_us": "Més sobre nosaltres",
Expand Down
2 changes: 1 addition & 1 deletion lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -635,7 +635,7 @@
"label.modify_stream_balance": "Modify Stream Balance",
"label.month": "{count, plural, one { Month} other { Months} }",
"label.monthly": "Monthly",
"label.sign_in_with_your_eth_wallet_for_givebacks": "Sign in with your ETH wallet to claim GIVbacks",
"label.sign_in_with_your_eth_wallet_for_givebacks": "Sign in with your ETH wallet to claim GIVbacks.",
"label.monthly_across_all_projects": "monthly, across all projects",
"label.months": "{count, plural, one { Month} other { Months} }",
"label.more_about_us": "More about us",
Expand Down
2 changes: 1 addition & 1 deletion lang/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -632,7 +632,7 @@
"label.modify_stream_balance": "Modificar el Saldo de Transmisión",
"label.month": "{count, plural, one { Mes} other { Meses} }",
"label.monthly": "Mensualmente",
"label.sign_in_with_your_eth_wallet_for_givebacks": "Inicia sesión con tu billetera ETH para GIVbacks",
"label.sign_in_with_your_eth_wallet_for_givebacks": "Inicia sesión con tu billetera ETH para GIVbacks.",
"label.monthly_across_all_projects": "mensualmente en todos los proyectos",
"label.months": "{count, plural, one { Mes} other { Meses} }",
"label.more_about_us": "Más acerca de nosotros",
Expand Down
16 changes: 14 additions & 2 deletions src/components/views/create/WalletAddressInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,14 @@ const WalletAddressInput: FC<IProps> = ({
const isProjectPrevAddress = (newAddress: string) => {
// Do not validate if the input address is the same as project prev wallet address
if (userAddresses.length === 0) return false;
if (isStellarChain) {
const isAddressMatch = userAddresses.some(
address =>
address === newAddress &&
(!memoValue || memoValue === prevMemo),
);
return isAddressMatch;
}
return userAddresses
.map(prevAddress => prevAddress.toLowerCase())
.includes(newAddress.toLowerCase());
Expand Down Expand Up @@ -345,14 +353,18 @@ const Container = styled.div`
background: ${neutralColors.gray[100]};
border-radius: 12px;
padding: 16px;

${mediaQueries.tablet} {
position: relative;
}
`;

const ButtonWrapper = styled.div`
position: absolute;
right: 20px; // Adjust the distance from the right edge as per your need
right: 15px; // Adjust the distance from the right edge as per your need
bottom: 78px; // Adjust the distance from the bottom edge as per your need
${mediaQueries.tablet} {
bottom: 20px;
bottom: -50px;
}
`;

Expand Down
2 changes: 1 addition & 1 deletion src/components/views/donate/DonateIndex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
setPendingDonationExists,
startTimer,
} = useDonateData();
const { renewExpirationDate, retrieveDraftDonation } = useQRCodeDonation();
const { renewExpirationDate, retrieveDraftDonation } = useQRCodeDonation(project);

Check failure on line 64 in src/components/views/donate/DonateIndex.tsx

View workflow job for this annotation

GitHub Actions / build 

Replace `·` with `⏎↹↹`
const { isSignedIn, isEnabled } = useAppSelector(state => state.user);

const alreadyDonated = useAlreadyDonatedToProject(project);
Expand Down
36 changes: 17 additions & 19 deletions src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
IconArrowLeft,
brandColors,
mediaQueries,
IconGIVBack24,
} from '@giveth/ui-design-system';
import { useIntl } from 'react-intl';
import { formatUnits } from 'viem';
Expand Down Expand Up @@ -58,14 +57,10 @@ const formatAmountToDisplay = (amount: bigint) => {

const GivBackToast: FC<IMessage> = ({ text, link, linkText }) => (
<GivBackWrapper>
<IconGIVBack24 color={brandColors.giv[500]} />
<B>
{text}
{'. '}
<StyledLink onClick={() => window.open(link, '_blank')}>
{linkText}.
</StyledLink>
</B>
<P>{text}</P>
<StyledLink onClick={() => window.open(link, '_blank')}>
{linkText}
</StyledLink>
</GivBackWrapper>
);

Expand All @@ -83,12 +78,6 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
setShowDonateModal(true),
);

const {
createDraftDonation,
markDraftDonationAsFailed,
checkDraftDonationStatus,
retrieveDraftDonation,
} = useQRCodeDonation();
const {
project,
setQRDonationStatus,
Expand All @@ -100,6 +89,12 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
draftDonationData,
draftDonationLoading,
} = useDonateData();
const {
createDraftDonation,
markDraftDonationAsFailed,
checkDraftDonationStatus,
retrieveDraftDonation,
} = useQRCodeDonation(project);

const { addresses, id } = project;
const draftDonationId = Number(router.query.draft_donation!);
Expand Down Expand Up @@ -198,7 +193,7 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
projectId: Number(id),
amount: Number(formatAmountToDisplay(amount)),
token: stellarToken,
anonymous: true,
anonymous: isSignedIn && isEnabled ? false : true,
symbol: stellarToken.symbol,
setFailedModalType: () => {},
useDonationBox: false,
Expand Down Expand Up @@ -345,7 +340,7 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
onClick={handleNext}
disabled={amount === 0n}
/>
{!isSignedIn && (
{!isSignedIn && stellarToken?.isGivbackEligible && (
<GivBackToast
text={formatMessage({
id: 'label.sign_in_with_your_eth_wallet_for_givebacks',
Expand Down Expand Up @@ -458,9 +453,12 @@ const MarginLessInlineToast = styled(InlineToast)`

const GivBackWrapper = styled(Flex)`
align-items: center;
justify-content: space-between;
border-radius: 8px;
border: 1px solid ${brandColors.giv[500]};
padding: 16px 8px;
background: ${brandColors.giv[50]};
color: ${brandColors.giv[500]};
padding: 16px;
margin-top: 10px;
gap: 10px;

Expand All @@ -472,6 +470,6 @@ const GivBackWrapper = styled(Flex)`
const StyledLink = styled.div`
display: inline;
margin-left: 4px;
color: ${brandColors.pinky[500]};
font-weight: 500;
cursor: pointer;
`;
14 changes: 10 additions & 4 deletions src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
const QRDonationDetails = () => {
const { formatMessage } = useIntl();
const router = useRouter();
const { checkDraftDonationStatus } = useQRCodeDonation();
const {
project,
draftDonationData,
Expand All @@ -38,8 +37,10 @@
setQRDonationStatus,
setDraftDonationData,
} = useDonateData();
const { checkDraftDonationStatus } = useQRCodeDonation(project);

const [tokenPrice, setTokenPrice] = useState(0);
const [stopTimer, setStopTimer] = React.useState<void | (() => void)>();
Copy link
Contributor

Choose a reason for hiding this comment

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

LGTM, but please address the static analysis hint.

The code change is approved. Defining stopTimer as a state variable using the useState hook enhances the control flow and allows the timer to be stopped based on the qrDonationStatus.

Please apply the following diff to fix the union type based on the static analysis hint:

-const [stopTimer, setStopTimer] = React.useState<void | (() => void)>();
+const [stopTimer, setStopTimer] = React.useState<undefined | (() => void)>();
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const [stopTimer, setStopTimer] = React.useState<void | (() => void)>();
const [stopTimer, setStopTimer] = React.useState<undefined | (() => void)>();
Tools
Biome

[error] 43-43: void is confusing inside a union type.

Unsafe fix: Use undefined instead.

(lint/suspicious/noConfusingVoidType)


const { title, addresses } = project;

Expand Down Expand Up @@ -71,20 +72,25 @@
};

useEffect(() => {
let stopTimer: void | (() => void);

if (
draftDonationData?.id === draftDonationId &&
draftDonationData?.expiresAt
) {
stopTimer = startTimer?.(new Date(draftDonationData?.expiresAt));
const stopTimerFun = startTimer?.(new Date(draftDonationData?.expiresAt));

Check failure on line 79 in src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationDetails.tsx

View workflow job for this annotation

GitHub Actions / build 

Replace `new·Date(draftDonationData?.expiresAt)` with `⏎↹↹↹↹new·Date(draftDonationData?.expiresAt),⏎↹↹↹`
setStopTimer(() => stopTimerFun);
Copy link
Contributor

Choose a reason for hiding this comment

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

LGTM!

The code change is approved. Setting the stopTimer variable using the setStopTimer function ensures that the timer can be stopped based on the qrDonationStatus, enhancing the responsiveness of the component.

Please apply the following diff to fix the formatting issue:

-const stopTimerFun = startTimer?.(new Date(draftDonationData?.expiresAt));
+const stopTimerFun = startTimer?.(
+  new Date(draftDonationData?.expiresAt),
+);
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const stopTimerFun = startTimer?.(new Date(draftDonationData?.expiresAt));
setStopTimer(() => stopTimerFun);
const stopTimerFun = startTimer?.(
new Date(draftDonationData?.expiresAt),
);
setStopTimer(() => stopTimerFun);
Tools
GitHub Check: build

[failure] 79-79:
Replace new·Date(draftDonationData?.expiresAt) with ⏎↹↹↹↹new·Date(draftDonationData?.expiresAt),⏎↹↹↹

}

return () => {
stopTimer?.();
};
}, [draftDonationData?.expiresAt]);

useEffect(() => {
if (qrDonationStatus === 'failed') {
stopTimer?.();
}
}, [qrDonationStatus]);

useEffect(() => {
if (!stellarAddress) return;

Expand Down
4 changes: 3 additions & 1 deletion src/components/views/transaction/DonationStatusSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import links from '@/lib/constants/links';
import { useQRCodeDonation } from '@/hooks/useQRCodeDonation';
import { client } from '@/apollo/apolloClient';
import { MARK_DRAFT_DONATION_AS_FAILED } from '@/apollo/gql/gqlDonations';
import { useDonateData } from '@/context/donate.context';

type IColor = 'golden' | 'jade' | 'punch' | 'blueSky';
interface TimerProps {
Expand Down Expand Up @@ -210,7 +211,8 @@ const DonationStatusSection: FC<TDonationStatusSectionProps> = ({
setStatus,
}) => {
const { locale, formatMessage } = useIntl();
const { checkDraftDonationStatus } = useQRCodeDonation();
const { project } = useDonateData();
const { checkDraftDonationStatus } = useQRCodeDonation(project);

return (
<DetailsWapper>
Expand Down
2 changes: 1 addition & 1 deletion src/context/donate.context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export const DonateProvider: FC<IProviderProps> = ({ children, project }) => {
setStatus,
loading,
setDraftDonation,
} = useQRCodeDonation();
} = useQRCodeDonation(project);

const hasActiveQFRound = hasActiveRound(project?.qfRounds);

Expand Down
8 changes: 3 additions & 5 deletions src/hooks/useQRCodeDonation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,12 @@
import { ICreateDraftDonation } from '@/components/views/donate/helpers';
import StorageLabel from '@/lib/localStorage';
import { IDraftDonation } from '@/apollo/types/gqlTypes';
import { useDonateData } from '@/context/donate.context';
import { IProject } from '@/apollo/types/types';

export type TQRStatus = 'waiting' | 'failed' | 'success' | 'expired';

export const useQRCodeDonation = () => {
const { project } = useDonateData();
export const useQRCodeDonation = (project: IProject) => {

Check failure on line 19 in src/hooks/useQRCodeDonation.ts

View workflow job for this annotation

GitHub Actions / build 

Delete `⏎`
const [draftDonation, setDraftDonation] = useState<IDraftDonation | null>(
null,
);
Expand Down Expand Up @@ -187,7 +186,6 @@
});

if (
!draftDonationId ||
!getDraftDonationById ||
getDraftDonationById.status !== 'pending' ||
getDraftDonationById.projectId != project.id
Expand Down Expand Up @@ -260,8 +258,8 @@
Number(draftDonation.id),
);
if (retDraftDonation?.status === 'matched') {
setDraftDonation(retDraftDonation);
setStatus('success');
setDraftDonation(draftDonation);
return;
} else {
await markDraftDonationAsFailed(draftDonation?.id!);
Expand Down
Loading