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 some UI stuff for stellar feature #4700

Merged
merged 2 commits into from
Sep 9, 2024
Merged

Fix some UI stuff for stellar feature #4700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7938cec
Fix some UI stuff for stellar feature
mohammadranjbarz Sep 8, 2024
519b32c
fix: transaction page UI issues
Meriem-BM Sep 9, 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
1 change: 1 addition & 0 deletions lang/ca.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -604,6 +604,7 @@
"label.look_for_the_share_and_get_rewarded": "Busca el botó 'Comparteix i guanya recompenses' per generar enllaços a pàgines específiques a tot el lloc de Giveth.",
"label.make_a_recurring_donation_with": "Fes una donació recurrent amb ",
"label.make_it_anonymous": "Fes-ho anònim",
"label.transaction_detail": "Detall de la transacció",
"label.qr_code_error": "S'ha produït un error en generar el codi QR. Torneu-ho a provar.",
"label.make_it_easier_for_donors_to_find_your_project": "Fes més fàcil que els donants trobin el teu projecte proporcionant una ubicació.",
"label.make_it_unique_and_memorable_to_stand_out_from_other_projects": "Fes-ho únic i memorable per destacar entre altres projectes.",
Expand Down
1 change: 1 addition & 0 deletions lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1233,6 +1233,7 @@
"label.valid_for": "Valid for",
"label.new_qr_code_needed": "If you didn’t make it in time, you need to generate a new QR code.",
"label.please_wait_for_you_donation_to_come_through": "Do not close this page until your donation is successful.",
"label.transaction_detail": "Transaction detail",
"label.please_wait": "Please wait",
"label.the_time_is_up": "The time is up.",
"label.the_community_of_makers": "The community of makers",
Expand Down
1 change: 1 addition & 0 deletions lang/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1244,6 +1244,7 @@
"label.the_donation_was_successful": "La donación fue exitosa. Guarda esta URL si deseas mantener un registro de tu donación.",
"label.view_details": "Ver detalles",
"label.transaction_link": "Enlace de la transacción",
"label.transaction_detail": "Detalles de la transacción",
"label.your_transactions_have_been_submitted": "Tus transacciones han sido enviadas",
"label.your_withdrawal_from_this_stream_balance_is_being_processed": "Tu retiro de este saldo de transmisión se está procesando.",
"label.your_withdrawal_from_this_stream_balance_was_successful": "Tu retiro de este saldo de transmisión ha sido exitoso.",
Expand Down
31 changes: 16 additions & 15 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 @@ -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
127 changes: 90 additions & 37 deletions src/components/views/transaction/DonationStatusSection.tsx
View file
Open in desktop
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 @@ -170,18 +172,19 @@ const Timer: React.FC<TimerProps> = ({

return (time.minutes === 0 && time.seconds === 0) || status === 'failed' ? (
<FlexWrap $alignItems='center' gap='8px'>
<P>{'15 Minutes'}</P>
<B>{'15 Minutes'}</B>
<TextBox>{'Expired at ' + formatTime(_endDate, locale)}</TextBox>
</FlexWrap>
) : (
<P>
<TextBox>
{time.minutes.toString().padStart(2, '0')} {' Minutes '}
{time.seconds.toString().padStart(2, '0')} {' Seconds '}
</P>
</TextBox>
);
};

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

const formatComponent = (date: string | undefined, locale: string) => {
const timePassed = getHowManyPassed(new Date(date ?? ''), locale);
Expand All @@ -190,14 +193,14 @@ const formatComponent = (date: string | undefined, locale: string) => {
<FlexWrap $alignItems='center' gap='8px'>
{date ? (
<>
<P style={{ minWidth: 'fit-content' }}>
<B style={{ minWidth: 'fit-content' }}>
{timePassed.value} {timePassed.unit} ago
</P>
</B>
<TextBox>{smallDashedFormatDate(new Date(date))}</TextBox>
<TextBox>{formatTime(new Date(date), locale)}</TextBox>
</>
) : (
'NA'
<B>NA</B>
)}
</FlexWrap>
);
Expand Down Expand Up @@ -237,14 +240,14 @@ const DonationStatusSection: FC<TDonationStatusSectionProps> = ({
<FlexWrap $alignItems='center' gap='8px'>
<B>{draftDonationData?.amount}</B>
<UsdAmountCard>$ {usdAmount}</UsdAmountCard>
<TokenIcon
symbol={
config.NETWORKS_CONFIG[ChainType.STELLAR]
.nativeCurrency.symbol
}
size={32}
/>
<TokenSymbol>
<TokenIcon
symbol={
config.NETWORKS_CONFIG[ChainType.STELLAR]
.nativeCurrency.symbol
}
size={32}
/>
{
config.NETWORKS_CONFIG[ChainType.STELLAR]
.nativeCurrency.symbol
Expand All @@ -253,30 +256,46 @@ const DonationStatusSection: FC<TDonationStatusSectionProps> = ({
</TokenSymbol>
</FlexWrap>
</FlexWrap>
<FlexWrap $alignItems='center'>
<FlexAddress $alignItems='center'>
<Label>{formatMessage({ id: 'label.from' })}</Label>
{donationData?.fromWalletAddress ? (
<Link>{donationData.fromWalletAddress}</Link>
<ExternalLink
href={`${STELLAR_ADDRESS_LINK}${donationData.fromWalletAddress}`}
>
<Link>{donationData.fromWalletAddress}</Link>
</ExternalLink>
) : (
<B>{'NA'}</B>
)}
</FlexWrap>
</FlexAddress>
<FlexWrap $alignItems='center'>
<Label>{formatMessage({ id: 'label.donating_to' })}</Label>
{draftDonationData?.project?.title ? (
<Link>{draftDonationData.project.title}</Link>
<ExternalLink
href={slugToProjectView(
draftDonationData.project.slug,
)}
>
<Link>{draftDonationData.project.title}</Link>
</ExternalLink>
) : (
<B>{'NA'}</B>
)}
</FlexWrap>
<FlexWrap $alignItems='center'>
<FlexAddress $alignItems='center' style={{ width: '100%' }}>
<Label $capitalize>
{formatMessage({ id: 'label.recipient_address' })}
</Label>
<B style={{ wordBreak: 'break-word' }}>
{draftDonationData?.toWalletAddress ?? 'NA'}
</B>
</FlexWrap>
{draftDonationData?.toWalletAddress ? (
<ExternalLink
href={`${STELLAR_ADDRESS_LINK}${draftDonationData?.toWalletAddress}`}
>
<Link>{draftDonationData?.toWalletAddress}</Link>
</ExternalLink>
) : (
<B>{'NA'}</B>
)}
</FlexAddress>
<FlexWrap $alignItems='center'>
<Label>{formatMessage({ id: 'label.memo' })}</Label>
<B>{draftDonationData?.toWalletMemo ?? 'NA'}</B>
Expand All @@ -297,12 +316,14 @@ const DonationStatusSection: FC<TDonationStatusSectionProps> = ({
donationData?.transactionId ? (
<Flex $alignItems='center' gap='8px'>
<ExternalLink
href={`${transactionLink}${donationData.transactionId}`}
title={formatMessage({
id: 'label.view_details',
})}
color={brandColors.pinky[500]}
/>
href={`${STELLAR_TRANSACTION_LINK}${donationData.transactionId}`}
>
<Link color={brandColors.pinky[500]}>
{formatMessage({
id: 'label.transaction_detail',
})}
</Link>
</ExternalLink>
<IconExternalLink
color={brandColors.pinky[500]}
/>
Expand Down Expand Up @@ -421,7 +442,10 @@ const ColorfulDot = styled.div<{ status: string }>`
semanticColors[StatusMap[status].color][700]};
`;

const TokenSymbol = styled(B)`
const TokenSymbol = styled(Flex)`
align-items: center;
gap: 8px;
font-weight: 500;
white-space: nowrap;
`;

Expand All @@ -440,7 +464,11 @@ const Label = styled(B)<{ $capitalize?: boolean }>`
width: 50%;
text-transform: ${({ $capitalize }) =>
$capitalize ? 'capitalize' : 'none'};
color: ${neutralColors.gray[700]};
color: ${neutralColors.gray[700]} !important;

${mediaQueries.tablet} {
width: 30%;
}

${mediaQueries.laptopS} {
width: 19%;
Expand All @@ -453,12 +481,6 @@ const Hr = styled.div`
background-color: ${neutralColors.gray[300]};
`;

const Link = styled(B)`
color: ${semanticColors.blueSky[500]};
cursor: pointer;
word-break: break-word;
`;

const TextBox = styled(P)`
padding: 2px 8px;
border: 1px solid ${neutralColors.gray[300]};
Expand All @@ -477,6 +499,31 @@ const FlexWrap = styled(Flex)`
gap: 10px;
`;

const FlexAddress = styled(Flex)`
flex-wrap: wrap;
gap: 10px;

${mediaQueries.tablet} {
flex-wrap: nowrap;
}

> :last-child {
width: 100% !important;
}

${mediaQueries.laptopL} {
> :last-child {
width: 81% !important;
}
}

${mediaQueries.tablet} {
> :last-child {
width: 50% !important;
}
}
`;

const FlexDirection = styled(Flex)`
flex-direction: column;
gap: 16px;
Expand All @@ -486,4 +533,10 @@ const FlexDirection = styled(Flex)`
}
`;

const Link = styled(B)<{ color?: string }>`
color: ${({ color }) => color || semanticColors.blueSky[500]} !important;
word-break: break-all;
font-weight: 500 !important;
`;

export default DonationStatusSection;
Loading