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

Update the Domain Expiration feature - Remove buttons #1089

Merged
merged 3 commits into from
Feb 27, 2025
Merged

Update the Domain Expiration feature - Remove buttons #1089

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
6159b6c
Update the Domain Expiration feature - Remove buttons
tali-creator Feb 27, 2025
2ce90db
fix several issues
Marchand-Nicolas Feb 27, 2025
cf273e7
Merge branch 'testnet' into pr/tali-creator/1089
Marchand-Nicolas Feb 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
6 changes: 5 additions & 1 deletion components/UI/iconsComponents/clickableAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ type ClickableActionProps = {
description?: string;
style?: "primary" | "secondary";
width?: "fixed" | "auto";
severe?: boolean;
};

const ClickableAction: FunctionComponent<ClickableActionProps> = ({
Expand All @@ -17,6 +18,7 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
description,
style = "secondary",
width = "fixed",
severe = false,
}) => {
return (
<div
Expand All @@ -26,7 +28,9 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
? styles.clickableActionSecondary
: styles.clickableActionPrimary
}
${width === "auto" ? styles.clickableActionAutoWidth : ""}`}
${width === "auto" ? styles.clickableActionAutoWidth : ""}
${severe ? styles.clickableActionSevere : ""}
`}
onClick={onClick}
>
<div
Expand Down
8 changes: 4 additions & 4 deletions components/UI/iconsComponents/icons/renewalIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,19 @@ const RenewalIcon: FunctionComponent<IconProps> = ({ color, width }) => {
cy="15.0669"
rx="2.57449"
ry="2.33056"
fill="#0C8654"
fill={color}
/>
<path
d="M19.7089 6.00473V6.28565C19.7089 6.62899 19.3034 6.90991 18.8078 6.90991H2.58857C2.09298 6.90991 1.6875 6.62899 1.6875 6.28565V5.99849C1.6875 4.56894 3.35448 3.41406 5.41793 3.41406H15.9695C18.0329 3.41406 19.7089 4.57518 19.7089 6.00473Z"
fill="#0C8654"
fill={color}
/>
<path
d="M1.6875 8.88911V12.8909C1.6875 14.7386 3.35448 16.2312 5.41793 16.2312H11.0586C11.5812 16.2312 12.0318 15.8358 11.9867 15.3679C11.8606 14.1334 12.3021 12.7941 13.5276 11.7291C14.0322 11.2854 14.6539 10.9465 15.3297 10.7529C16.456 10.4301 17.5463 10.4705 18.5105 10.7609C19.0962 10.9384 19.7089 10.5592 19.7089 10.0025V8.88104C19.7089 8.43729 19.3034 8.07422 18.8078 8.07422H2.58857C2.09298 8.08229 1.6875 8.44536 1.6875 8.88911ZM7.09392 13.5283H5.29178C4.92234 13.5283 4.61598 13.254 4.61598 12.9232C4.61598 12.5924 4.92234 12.3181 5.29178 12.3181H7.09392C7.46336 12.3181 7.76972 12.5924 7.76972 12.9232C7.76972 13.254 7.46336 13.5283 7.09392 13.5283Z"
fill="#0C8654"
fill={color}
/>
<path
d="M16.71 11.5703C14.8135 11.5703 13.2773 12.9609 13.2773 14.6777C13.2773 15.2604 13.4576 15.8119 13.7751 16.278C14.3672 17.1792 15.4571 17.7851 16.71 17.7851C17.9629 17.7851 19.0528 17.1792 19.6449 16.278C19.9624 15.8119 20.1426 15.2604 20.1426 14.6777C20.1426 12.9609 18.6065 11.5703 16.71 11.5703ZM18.4864 14.3437L16.6585 15.8741C16.5384 15.9751 16.3753 16.0295 16.2208 16.0295C16.0578 16.0295 15.8947 15.9751 15.766 15.8585L14.9164 15.0895C14.6676 14.8642 14.6676 14.4913 14.9164 14.266C15.1653 14.0407 15.5772 14.0407 15.8261 14.266L16.238 14.6389L17.6111 13.4891C17.8685 13.2716 18.2804 13.2872 18.5207 13.5202C18.761 13.7533 18.7438 14.1184 18.4864 14.3437Z"
fill="#0C8654"
fill={color}
/>
<path
d="M16.0143 16.6933C15.7049 16.3283 14.7723 15.5553 14.3446 15.2145C14.088 15.0071 14.3363 14.5244 14.8486 14.8644C15.2585 15.1364 15.8747 15.6594 16.1316 15.887C16.3732 14.8493 17.877 13.109 18.1283 12.8765C18.3796 12.6439 18.3796 12.6439 18.6351 12.7564C18.8395 12.8464 18.7231 13.024 18.6393 13.1015C17.2612 14.7255 16.6426 16.112 16.6468 16.457C16.6509 16.8021 16.401 17.1496 16.0143 16.6933Z"
Expand Down
15 changes: 8 additions & 7 deletions components/domains/steps/checkoutCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,6 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
.catch((err) => console.log("Error on sending metadata:", err));
}


addTransaction({
timestamp: Date.now(),
subtext:
Expand Down Expand Up @@ -239,8 +238,8 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
return (
<>
{reducedDuration > 0 &&
invalidBalance &&
reducedDuration !== formState.durationInYears * 365 ? (
invalidBalance &&
reducedDuration !== formState.durationInYears * 365 ? (
<ReduceDuration
newDuration={reducedDuration}
currentDuration={formState.durationInYears}
Expand Down Expand Up @@ -300,7 +299,11 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
/>
<div className={styles.checkoutButton}>
<div
className={(!termsBox || invalidBalance) ? "flex flex-col-reverse gap-2" : "flex gap-4"}
className={
!termsBox || invalidBalance
? "flex flex-col-reverse gap-2"
: "flex gap-4"
}
>
<div className="flex sm:hidden">
<div
Expand Down Expand Up @@ -332,9 +335,7 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
</div>
</div>
<div className={styles.closeIcon}>
<button
onClick={() => router.push("/")}
>
<button onClick={() => router.back()}>
<CloseIcon />
</button>
</div>
Expand Down
4 changes: 1 addition & 3 deletions components/domains/steps/selectPfp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,7 @@ const SelectPfp: FunctionComponent<SelectPfpProps> = ({ goToNextStep }) => {
</div>
</div>
<div className={styles.closeIcon}>
<button
onClick={() => router.push("/")}
>
<button onClick={() => router.back()}>
<CloseIcon />
</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/domains/steps/userInfoForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const UserInfoForm: FunctionComponent<UserInfoFormProps> = ({
};

const handleClose = () => {
router.push("/");
router.back();
};

return (
Expand Down
185 changes: 103 additions & 82 deletions components/identities/actions/identityActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,104 +245,125 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
)}
{identity && isOwner && address && (
<div className={styles.identityActions}>
{callDataEncodedDomain[0] === "1" ? (
{isExpired ? (
<ClickableAction
title="RENEW YOUR DOMAIN"
severe={true}
style="primary"
description={`${
isExpired ? "Expired" : "Will expire"
} on ${timestampToReadableDate(identity?.domainExpiry ?? 0)}`}
icon={
<RenewalIcon
width="18"
color={theme.palette.primary.main}
/>
}
description={`Expired on ${timestampToReadableDate(
identity?.domainExpiry ?? 0
)}`}
icon={<RenewalIcon width="18" color="#d32f2f" />}
onClick={() => router.push("/renewal")}
/>
) : null}

<ClickableAction
title="CHANGE DOMAIN TARGET"
description="Change target address"
icon={
<SignsIcon width="23" color={theme.palette.secondary.main} />
}
onClick={() => setIsAddressFormOpen(true)}
/>

{viewMoreClicked ? (
) : (
<>
{callDataEncodedDomain[0] === "1" ? (
<ClickableAction
title="RENEW YOUR DOMAIN"
style="primary"
description={`Will expire on ${timestampToReadableDate(
identity?.domainExpiry ?? 0
)}`}
icon={
<RenewalIcon
width="18"
color={theme.palette.primary.main}
/>
}
onClick={() => router.push("/renewal")}
/>
) : null}

<ClickableAction
title="MOVE YOUR IDENTITY NFT"
description="Transfer your identity to another wallet"
title="CHANGE DOMAIN TARGET"
description="Change target address"
icon={
<TransferIcon
width="20"
<SignsIcon
width="23"
color={theme.palette.secondary.main}
/>
}
onClick={() => setIsTransferFormOpen(true)}
onClick={() => setIsAddressFormOpen(true)}
/>
<ClickableAction
title="CREATE A SUBDOMAIN"
description="Create a new subdomain"
icon={
<PlusIcon
width="18"
color={theme.palette.secondary.main}

{viewMoreClicked ? (
<>
<ClickableAction
title="MOVE YOUR IDENTITY NFT"
description="Transfer your identity to another wallet"
icon={
<TransferIcon
width="20"
color={theme.palette.secondary.main}
/>
}
onClick={() => setIsTransferFormOpen(true)}
/>
}
onClick={() => setIsSubdomainFormOpen(true)}
/>
{!isMainDomain && (
<ClickableAction
title="Set as main domain"
description="Set this identity as your main id"
icon={
<MainIcon
width="21"
firstColor={theme.palette.secondary.main}
secondColor={theme.palette.secondary.main}
<ClickableAction
title="CREATE A SUBDOMAIN"
description="Create a new subdomain"
icon={
<PlusIcon
width="18"
color={theme.palette.secondary.main}
/>
}
onClick={() => setIsSubdomainFormOpen(true)}
/>
{!isMainDomain && (
<ClickableAction
title="Set as main domain"
description="Set this identity as your main id"
icon={
<MainIcon
width="21"
firstColor={theme.palette.secondary.main}
secondColor={theme.palette.secondary.main}
/>
}
onClick={() => setMainId()}
/>
}
onClick={() => setMainId()}
/>
)}
)}

{callDataEncodedDomain[0] === "1" && !isAutoRenewalEnabled ? (
<ClickableAction
title="ENABLE SUBSCRIPTION"
description={nextAutoRenew}
style="primary"
icon={<div className={styles.renewalIcon}>ON</div>}
onClick={() => router.push("/subscription")}
/>
) : null}
{callDataEncodedDomain[0] === "1" && isAutoRenewalEnabled ? (
<ClickableAction
title="DISABLE SUBSCRIPTION"
description={nextAutoRenew}
icon={<div className={styles.renewalIconOff}>OFF</div>}
onClick={() => disableRenewal()}
/>
) : null}
<p
onClick={() => setViewMoreClicked(false)}
className={styles.viewMore}
>
View less
</p>
{callDataEncodedDomain[0] === "1" &&
!isAutoRenewalEnabled ? (
<ClickableAction
title="ENABLE SUBSCRIPTION"
description={nextAutoRenew}
style="primary"
icon={<div className={styles.renewalIcon}>ON</div>}
onClick={() => router.push("/subscription")}
/>
) : null}
{callDataEncodedDomain[0] === "1" &&
isAutoRenewalEnabled ? (
<ClickableAction
title="DISABLE SUBSCRIPTION"
description={nextAutoRenew}
icon={
<div className={styles.renewalIconOff}>OFF</div>
}
onClick={() => disableRenewal()}
/>
) : null}

<p
onClick={() => setViewMoreClicked(false)}
className={styles.viewMore}
>
View less
</p>
</>
) : (
<p
onClick={() => setViewMoreClicked(true)}
className={styles.viewMore}
>
View more
</p>
)}
</>
) : (
<p
onClick={() => {
setViewMoreClicked(true);
}}
className={styles.viewMore}
>
View more
</p>
)}
</div>
)}
Expand Down
8 changes: 8 additions & 0 deletions styles/components/identityMenu.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,14 @@
justify-content: center;
}

.clickableActionSevere {
border-color: var(--negative);
}

.clickableActionSevere .clickableIconPrimary {
background-color: #f6d5d5;
}

@media (max-width: 1024px) {
.clickableActionPrimary,
.clickableActionSecondary {
Expand Down
2 changes: 1 addition & 1 deletion styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
--tertiary-600: #ccb297;
--light-tertiary: #f5f0eb;
--border-color: #cdcccc;
--background: #FCFFFE;
--background: #fcfffe;
--background-light: #ffffff;
--background-light300: #f8f7f7;
--background-white: #ffffff;
Expand Down