Skip to content

Commit

Permalink
Fix some UI stuff for stellar feature
Browse files Browse the repository at this point in the history 
related to #4697 #4698 #4696
  • Loading branch information
@mohammadranjbarz
mohammadranjbarz committed Sep 8, 2024
1 parent fe4a366 commit 7938cec
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 31 deletions.
31 changes: 16 additions & 15 deletions src/components/views/donate/OnTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,21 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
})}
/>
)}
{!isSignedIn && stellarToken?.isGivbackEligible && (
<InlineToast
noIcon
type={EToastType.Hint}
message={formatMessage({
id: 'label.sign_in_with_your_eth_wallet_for_givebacks',
})}
link={links.GIVBACK_DOC}
linkText={capitalizeAllWords(
formatMessage({
id: 'label.learn_more',
}),
)}
/>
)}
{!showQRCode ? (
<>
<StyledInputWrapper>
Expand Down Expand Up @@ -329,26 +344,12 @@ export const QRDonationCard: FC<QRDonationCardProps> = ({
alt='Next'
width={16}
height={16}
style={{ marginLeft: '8px' }} // Add margin to the right of the icon
/>
}
onClick={handleNext}
disabled={amount === 0n}
/>
{!isSignedIn && stellarToken?.isGivbackEligible && (
<InlineToast
noIcon
type={EToastType.Hint}
message={formatMessage({
id: 'label.sign_in_with_your_eth_wallet_for_givebacks',
})}
link={links.GIVBACK_DOC}
linkText={capitalizeAllWords(
formatMessage({
id: 'label.learn_more',
}),
)}
/>
)}
</CardBottom>
</>
) : (
Expand Down
108 changes: 92 additions & 16 deletions src/components/views/transaction/DonationStatusSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,10 @@ 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';
import { slugToProjectView } from '@/lib/routeCreators';

type IColor = 'golden' | 'jade' | 'punch' | 'blueSky';

interface TimerProps {
status: TQRStatus;
endDate: Date;
Expand Down Expand Up @@ -182,6 +184,7 @@ const Timer: React.FC<TimerProps> = ({
};

const transactionLink = 'https://stellar.expert/explorer/public/tx/';
const addressLink = 'https://stellar.expert/explorer/public/account/';

const formatComponent = (date: string | undefined, locale: string) => {
const timePassed = getHowManyPassed(new Date(date ?? ''), locale);
Expand Down Expand Up @@ -233,7 +236,14 @@ const DonationStatusSection: FC<TDonationStatusSectionProps> = ({
</Flex>
<DetailsSection>
<FlexWrap $alignItems='center'>
<Label>{formatMessage({ id: 'label.amount' })}</Label>
<Label
style={{
flex: '0 0 150px',
color: neutralColors.gray[700],
}}
>
{formatMessage({ id: 'label.amount' })}
</Label>
<FlexWrap $alignItems='center' gap='8px'>
<B>{draftDonationData?.amount}</B>
<UsdAmountCard>$ {usdAmount}</UsdAmountCard>
Expand All @@ -254,39 +264,105 @@ const DonationStatusSection: FC<TDonationStatusSectionProps> = ({
</FlexWrap>
</FlexWrap>
<FlexWrap $alignItems='center'>
<Label>{formatMessage({ id: 'label.from' })}</Label>
<Label
style={{
flex: '0 0 150px',
color: neutralColors.gray[700],
}}
>
{formatMessage({ id: 'label.from' })}
</Label>
{donationData?.fromWalletAddress ? (
<Link>{donationData.fromWalletAddress}</Link>
<ExternalLink
href={`${addressLink}${donationData.fromWalletAddress}`}
title={donationData.fromWalletAddress}
color={brandColors.giv[500]}
/>
) : (
<B>{'NA'}</B>
)}
</FlexWrap>
<FlexWrap $alignItems='center'>
<Label>{formatMessage({ id: 'label.donating_to' })}</Label>
<Label
style={{
flex: '0 0 150px',
color: neutralColors.gray[700],
}}
>
{formatMessage({ id: 'label.donating_to' })}
</Label>
{draftDonationData?.project?.title ? (
<Link>{draftDonationData.project.title}</Link>
<ExternalLink
title={draftDonationData.project.title}
color={brandColors.giv[500]}
href={slugToProjectView(
draftDonationData.project.slug,
)}
></ExternalLink>
) : (
<B>{'NA'}</B>
)}
</FlexWrap>
<FlexWrap $alignItems='center'>
<Label $capitalize>
<Flex $alignItems='center' style={{ width: '100%' }}>
<Label
$capitalize
style={{
flex: '0 0 150px',
color: neutralColors.gray[700],
}}
>
{formatMessage({ id: 'label.recipient_address' })}
</Label>
<B style={{ wordBreak: 'break-word' }}>
{draftDonationData?.toWalletAddress ?? 'NA'}
</B>
</FlexWrap>
{draftDonationData?.toWalletAddress ? (
<div
style={{
flex: '1',
wordBreak: 'break-all',
whiteSpace: 'normal',
overflowWrap: 'break-word',
}}
>
<ExternalLink
href={`${addressLink}${draftDonationData?.toWalletAddress}`}
title={draftDonationData?.toWalletAddress}
color={brandColors.giv[500]}
/>
</div>
) : (
<B>{'NA'}</B>
)}
</Flex>

<FlexWrap $alignItems='center'>
<Label>{formatMessage({ id: 'label.memo' })}</Label>
<Label
style={{
flex: '0 0 150px',
color: neutralColors.gray[700],
}}
>
{formatMessage({ id: 'label.memo' })}
</Label>
<B>{draftDonationData?.toWalletMemo ?? 'NA'}</B>
</FlexWrap>
<FlexWrap $alignItems='center'>
<Label>{formatMessage({ id: 'label.date' })}</Label>
<Label
style={{
flex: '0 0 150px',
color: neutralColors.gray[700],
}}
>
{formatMessage({ id: 'label.date' })}
</Label>
{formatComponent(draftDonationData?.createdAt, locale)}
</FlexWrap>
<FlexWrap $alignItems='center'>
<Label $capitalize>
<Label
$capitalize
style={{
flex: '0 0 150px',
color: neutralColors.gray[700],
}}
>
{formatMessage({
id: draftDonationData?.matchedDonationId
? 'label.transaction_link'
Expand All @@ -301,10 +377,10 @@ const DonationStatusSection: FC<TDonationStatusSectionProps> = ({
title={formatMessage({
id: 'label.view_details',
})}
color={brandColors.pinky[500]}
color={brandColors.giv[500]}
/>
<IconExternalLink
color={brandColors.pinky[500]}
color={brandColors.giv[500]}
/>
</Flex>
) : (
Expand Down

0 comments on commit 7938cec

Please sign in to comment.