Repository: lfglabs-dev/app.starknet.id
Pull request #1168: Subscription - Final review
Author: login: wheval
Labels: name: ❌ Change request
description: Change requested from reviewer
Created: 2025-04-29T11:27:42Z | Merged: 2025-04-30T13:38:54Z

Closes #1109 

![Screenshot (101)](https://github.com/user-attachments/assets/30615928-9abe-4e0a-bed3-7b6d217dc73a)
![Screenshot (102)](https://github.com/user-attachments/assets/b1e53ab1-7ca7-4aac-8846-60c64b02bad2)


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - The navigation button on the subscription confirmation page now dynamically redirects based on token presence.

- **UI Improvements**
  - The copy and renewal icons have been visually updated for a refreshed appearance.
  - Subscription benefits text includes a line break for improved readability.
  - A visual divider and enhanced layout were added to the subscription summary section.
  - Referral reward amount updated from $10 to $8.
  - Decorative elements on the confirmation page repositioned for better visual balance.
  - Reduced spacing in card layouts and introduced a new divider style.
  - Removed the top border from the summary section for a cleaner look.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Linked issue #1109: Enable Subscription Form - Final Review
## Description 📹

- [x] https://github.com/lfglabs-dev/app.starknet.id/issues/1101
- [x] https://github.com/lfglabs-dev/app.starknet.id/issues/1102
- [x] https://github.com/lfglabs-dev/app.starknet.id/issues/1103
- [x] https://github.com/lfglabs-dev/app.starknet.id/issues/1104
- [x] https://github.com/lfglabs-dev/app.starknet.id/issues/1105
- [x] https://github.com/lfglabs-dev/app.starknet.id/issues/1106
- [x] https://github.com/lfglabs-dev/app.starknet.id/issues/1107
- [x] https://github.com/lfglabs-dev/app.starknet.id/issues/1108

**Your task will be to check that all the issues have been correctly developed, that the components are properly arranged, and that everything matches exactly as in the Figma design:**

https://www.figma.com/design/S1UKYgWewNqNHZFAaBUilG/%F0%9F%8F%9D%EF%B8%8F-Starknet-ID?node-id=6935-17466&t=XCt8XQUo4vZRtmIv-1

The purpose of this issue is to conduct a final review of the subscription activation form on the Starknet ID platform. Here are the details:

### Purpose of the Issue
Verify that all elements of the subscription activation form have been correctly developed and align with the provided Figma design.

### Issue Details
- **Current State**: Individual components have been developed in separate issues.
- **Proposed State**: A comprehensive review to ensure all elements are properly integrated and aligned with the Figma design.
- **Design**: The reference design is available on Figma (link provided in the issue).

### Actions to Take
1. **Fork and Branch Creation**:
   - Fork the repository and create a new branch using the issue number.

2. **Verification and Adjustments**:
   - Review all components developed in previous issues.
   - Ensure the layout exactly matches the Figma design.
   - Make adjustments if necessary for perfect correspondence.

3. **Testing and Validation**:
   - Test the entire form to verify functionality and appearance.
   - Ensure that modifications do not affect existing functionalities.

4. **Commit and Submission**:
   - Make a commit with a clear message describing the final review.
   - Submit a pull request closing the issue.



## Proposed Actions 🛠️

Here’s a checklist of actions to follow for resolving this issue:

1. **Fork and Create Branch**:  
   Fork the repository and create a new branch using the issue number:
   ```bash
   git checkout -b fix-[issue-number]
   ```

2. **Implement Changes**:  
	[Insert Code snippet if needed with a mardown todo list]

3. **Run Tests and Commit Changes**:  
   Make sure your changes don't break existing functionality and commit with a clear message:
   ```bash
   git commit -m "Fix: [Short description of the fix]"
   ```

## Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

- **Assignment**: Don't create a pull request if you weren’t assigned to this issue.
- **Timeframe**: Complete the task within **3 business days**.
- **Closing the Issue**: In your PR description, close the issue by writing `Close #[issue_id]`.
- **Review Process**:
  - Once you've submitted your PR, change the label to **"ready for review"**.
  - If changes are requested, address them and then update the label back to **"ready for review"** once done.
- **Testing**: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

Linked issue comments: user: login: Isaacprogi
created_at: 2025-03-01T21:29:14Z
body: Hello, I am a software engineer with great expertise in react , next js, tailwindcss and backend technologies like express js etc.Please can i be assigned this task?
author_association: CONTRIBUTOR
user: login: EDOHWARES
created_at: 2025-03-06T12:03:45Z
body: Hi,

I'm EDOHWARES, a Software Developer. I specialize in transforming Figma designs into seamless, user-oriented interfaces.

I've reviewed the requirements and would love to work on this issue. I'll submit a PR within 24 hours.

If you have any doubts, feel free to check my profile—most of my projects and contributions are there.

Looking forward to your response!
author_association: NONE
user: login: wheval
created_at: 2025-03-21T11:19:51Z
body: Hello, @Kevils.
Can I handle this issue?
author_association: CONTRIBUTOR
user: login: Amarjeet325
created_at: 2025-03-21T13:30:30Z
body: Could I take on this issue?
author_association: CONTRIBUTOR
user: login: wheval
created_at: 2025-03-22T11:20:04Z
body: Thanks!!
author_association: CONTRIBUTOR

Diff:
diff --git a/components/UI/iconsComponents/icons/copyIcon.tsx b/components/UI/iconsComponents/icons/copyIcon.tsx
index 1327847a..5e1fa6d1 100644
--- a/components/UI/iconsComponents/icons/copyIcon.tsx
+++ b/components/UI/iconsComponents/icons/copyIcon.tsx
@@ -5,19 +5,18 @@ const CopyIcon: FunctionComponent<IconProps> = ({ color, width }) => {
     <svg
       width={width}
       height={width}
-      viewBox="0 0 14 14"
+      viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g id="CopyIcon">
-        <path
-          id="Union"
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M3.01703 11.0889V4.61101C3.06656 3.93747 3.60539 2.57851 5.36451 2.53097C7.12363 2.48342 8.98972 2.51116 9.70288 2.53097C9.9406 2.54087 10.4279 2.56663 10.4755 2.5904C10.5349 2.62011 10 1.31266 8.66286 1.31266H4.74049C3.76981 1.30275 1.82844 1.75244 1.82844 3.63042V9.42482C1.81853 9.74178 2.04238 10.5183 3.01703 11.0889ZM4.16732 8.64424V5.67275C4.10789 4.97941 5.06353 3.59271 6.56116 3.59271H10.4075C11.8112 3.5927 12.1606 3.93741 12.1606 5.67275V10.754C12.1705 11.3978 11.7922 12.6855 10.1995 12.6855H5.95023C5.33613 12.7152 4.10791 12.3883 4.10791 10.8431C4.10791 9.29797 4.14752 8.73339 4.16732 8.64424Z"
-          fill={color}
-        />
-      </g>
+      <path
+        d="M13.8346 11.2493V14.7493C13.8346 17.666 12.668 18.8327 9.7513 18.8327H6.2513C3.33464 18.8327 2.16797 17.666 2.16797 14.7493V11.2493C2.16797 8.33268 3.33464 7.16602 6.2513 7.16602H9.7513C12.668 7.16602 13.8346 8.33268 13.8346 11.2493Z"
+        fill={color}
+      />
+      <path
+        d="M14.7508 2.16602H11.2508C8.68155 2.16602 7.4766 3.07776 7.22557 5.28186C7.17305 5.74297 7.55494 6.12435 8.01903 6.12435H9.75078C13.2508 6.12435 14.8758 7.74935 14.8758 11.2493V12.9811C14.8758 13.4452 15.2572 13.8271 15.7183 13.7746C17.9224 13.5235 18.8341 12.3186 18.8341 9.74935V6.24935C18.8341 3.33268 17.6674 2.16602 14.7508 2.16602Z"
+        fill={color}
+      />
     </svg>
   );
 };
diff --git a/components/UI/iconsComponents/icons/renewalIcon.tsx b/components/UI/iconsComponents/icons/renewalIcon.tsx
index efecea6a..b1d7da70 100644
--- a/components/UI/iconsComponents/icons/renewalIcon.tsx
+++ b/components/UI/iconsComponents/icons/renewalIcon.tsx
@@ -9,29 +9,12 @@ const RenewalIcon: FunctionComponent<IconProps> = ({ color, width }) => {
       fill={color}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <ellipse
-        cx="17.137"
-        cy="15.0669"
-        rx="2.57449"
-        ry="2.33056"
-        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={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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.8658 7.89608C15.3706 5.50754 12.168 2.15994 6.85739 5.67564L8.08291 6.41579C8.28717 6.53915 8.57312 6.85988 8.08291 7.15594C7.59271 7.452 5.15528 8.38952 3.99784 8.82127C3.65742 9.00631 2.97657 9.19135 2.97657 8.4512V4.19535C2.97657 3.88695 3.13997 3.34418 3.79358 3.64024C4.4472 3.9363 5.15528 4.50374 5.42762 4.75046C6.85739 3.27016 12.0156 1.25511 15.4361 3.64024C18.2199 5.58148 18.4213 7.55698 18.4213 7.82703C18.4213 9.30893 17.2622 8.52922 16.8658 7.89608ZM4.53202 11.748C6.02727 14.1365 9.22986 17.4841 14.5405 13.9684L13.3149 13.2283C13.1107 13.1049 12.8247 12.7842 13.3149 12.4881C13.8051 12.192 16.2426 11.2545 17.4 10.8228C17.7404 10.6377 18.4213 10.4527 18.4213 11.1928V15.4487C18.4213 15.7571 18.2579 16.2999 17.6043 16.0038C16.9507 15.7077 16.2426 15.1403 15.9702 14.8936C14.5405 16.3739 9.38221 18.3889 5.9618 16.0038C3.17795 14.0626 2.97656 12.0871 2.97656 11.817C2.97656 10.3351 4.13567 11.1148 4.53202 11.748Z"
         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={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"
-        fill="white"
-      />
     </svg>
   );
 };
diff --git a/components/domains/autorenewal.tsx b/components/domains/autorenewal.tsx
index 6e3ae5dc..c180505c 100644
--- a/components/domains/autorenewal.tsx
+++ b/components/domains/autorenewal.tsx
@@ -330,7 +330,7 @@ const Subscription: FunctionComponent = () => {
             <div className="flex flex-col items-center gap-0 self-stretch">
               <h3 className={styles.domain}>Enable subscription</h3>
               <p className="py-2 text-center text-[#8C8989] text-sm leading-6"> Enable subscription to ensure 
-                uninterrupted ownership and benefits. Never worry about expiration dates again.
+                uninterrupted ownership and benefits.<br/> Never worry about expiration dates again.
                  </p>
             </div>
             <div className="flex flex-col items-start gap-6 self-stretch">
@@ -352,6 +352,8 @@ const Subscription: FunctionComponent = () => {
             </div>
           </div>
           <div className={styles.summary}>
+            <div className={styles.divider}></div>
+            <div className="flex flex-col items-start gap-2 self-stretch">
             <p className={styles.legend}>Your subscription currency</p>
             <ArCurrencyDropdown
               displayedCurrency={displayedCurrencies as CurrencyType[]}
@@ -359,6 +361,7 @@ const Subscription: FunctionComponent = () => {
                 setDisplayedCurrencies as (type: CurrencyType[]) => void
               }
             />
+            </div>
             <RegisterCheckboxes
               onChangeTermsBox={() => setTermsBox(!termsBox)}
               termsBox={termsBox}
diff --git a/pages/subscriptionConfirmation.tsx b/pages/subscriptionConfirmation.tsx
index 984b48b0..c68e7a2b 100644
--- a/pages/subscriptionConfirmation.tsx
+++ b/pages/subscriptionConfirmation.tsx
@@ -14,6 +14,11 @@ const SubscriptionConfirmation: NextPage = () => {
   const { copied, copyToClipboard } = useCopyToClipboard();
   const { address } = useAccount();
   const router = useRouter();
+  const tokenId: string = router.query.tokenId as string;
+  const redirect = () => {
+    if (tokenId) router.push(`/identities/${tokenId}?minting=true`);
+    else router.push("/identities");
+  };
 
   return (
     <>
@@ -36,7 +41,7 @@ const SubscriptionConfirmation: NextPage = () => {
         <div>
           <div>Refer your friends to Starknet ID and earn crypto ! </div>
           <div className="font-extrabold">
-            Earn up to 10$ per friends with your referral link below.
+            Earn up to 8$ per friends with your referral link below.
           </div>
         </div>
         <div
@@ -61,17 +66,15 @@ const SubscriptionConfirmation: NextPage = () => {
             />
           )}
         </div>
+        <div>
+          <Button onClick={redirect}>GO TO YOUR DOMAIN</Button>
+        </div>
         <div className={styles.coconutLeft}>
           <img alt="palm tree left" src="/visuals/leftTree.svg" />
         </div>
         <div className={styles.coconutRight}>
           <img alt="palm tree right" src="/visuals/rightTree.svg" />
         </div>
-        <div className="mt-5">
-          <Button onClick={() => router.push("/identities")}>
-            GO TO YOUR DOMAIN
-          </Button>
-        </div>
       </div>
     </>
   );
diff --git a/styles/components/confirmation.module.css b/styles/components/confirmation.module.css
index 7a35f1e4..7b844b9e 100644
--- a/styles/components/confirmation.module.css
+++ b/styles/components/confirmation.module.css
@@ -63,8 +63,8 @@
 
 .balloon {
   position: fixed;
-  top: 100px;
-  left: 100px;
+  top: 28%;
+  left: 18%;
   width: 115px;
   overflow: hidden;
   z-index: -1;
@@ -72,8 +72,8 @@
 
 .coconut {
   position: fixed;
-  top: 320px;
-  right: 160px;
+  top: 52%;
+  right: 19%;
   width: 55px;
   overflow: hidden;
   z-index: -1;
diff --git a/styles/components/registerV2.module.css b/styles/components/registerV2.module.css
index 6a46ab4a..31dfdac3 100644
--- a/styles/components/registerV2.module.css
+++ b/styles/components/registerV2.module.css
@@ -19,7 +19,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 48px;
+  gap: 24px;
   flex-shrink: 0;
   z-index: 1;
   background-color: #fff;
@@ -39,6 +39,13 @@
   white-space: nowrap;
 }
 
+.divider {
+  background-color: var(--background-light300);
+  width: 100%;
+  height: 1px;
+  margin-bottom: 4px;
+}
+
 .legend {
   color: var(--secondary);
   /* Body/small/medium */
@@ -106,7 +113,6 @@
   align-items: flex-start;
   gap: 24px;
   align-self: stretch;
-  border-top: 1px solid var(--content-400, #F8F7F7);
 }
 
 .pricesSummary {


Reviews:
user: login: Marchand-Nicolas
body: It doesn't build
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-04-30T12:59:30Z
user: login: wheval
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T13:08:51Z
user: login: wheval
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T13:09:15Z
user: login: Marchand-Nicolas
body: Great lgtm, well done :)
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-30T13:38:44Z

Review comments:
diff_hunk: @@ -1,6 +1,27 @@
 import React, { FunctionComponent } from "react";
 
-const CopyIcon: FunctionComponent<IconProps> = ({ color, width }) => {
+interface IconProps {
+  color: string;
+  width: string;
+  variant?: 'default' | 'new';
+}
+
+const CopyIcon: FunctionComponent<IconProps> = ({ color, width, variant = 'default' }) => {
+  if (variant === 'new') {
path: components/UI/iconsComponents/icons/copyIcon.tsx
user: login: Marchand-Nicolas
body: Why ?
created_at: 2025-04-30T12:58:00Z
author_association: COLLABORATOR
diff_hunk: @@ -1,6 +1,27 @@
 import React, { FunctionComponent } from "react";
 
-const CopyIcon: FunctionComponent<IconProps> = ({ color, width }) => {
+interface IconProps {
+  color: string;
+  width: string;
+  variant?: 'default' | 'new';
+}
+
+const CopyIcon: FunctionComponent<IconProps> = ({ color, width, variant = 'default' }) => {
+  if (variant === 'new') {
path: components/UI/iconsComponents/icons/copyIcon.tsx
user: login: Marchand-Nicolas
body: I think we can just keep the new version only
created_at: 2025-04-30T12:58:40Z
author_association: COLLABORATOR
diff_hunk: @@ -39,6 +39,13 @@
   white-space: nowrap;
 }
 
+.divider {
+  background-color: var(--background-light300, #F8F7F7);
path: styles/components/registerV2.module.css
user: login: Marchand-Nicolas
body: Only keep the variable, not both variable and color it's redudant. Variables should be defined in globals.css
created_at: 2025-04-30T12:59:19Z
author_association: COLLABORATOR
diff_hunk: @@ -1,6 +1,27 @@
 import React, { FunctionComponent } from "react";
 
-const CopyIcon: FunctionComponent<IconProps> = ({ color, width }) => {
+interface IconProps {
+  color: string;
+  width: string;
+  variant?: 'default' | 'new';
+}
+
+const CopyIcon: FunctionComponent<IconProps> = ({ color, width, variant = 'default' }) => {
+  if (variant === 'new') {
path: components/UI/iconsComponents/icons/copyIcon.tsx
user: login: wheval
body: okay
created_at: 2025-04-30T13:08:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -39,6 +39,13 @@
   white-space: nowrap;
 }
 
+.divider {
+  background-color: var(--background-light300, #F8F7F7);
path: styles/components/registerV2.module.css
user: login: wheval
body: okay
created_at: 2025-04-30T13:09:15Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-04-29T11:27:46Z
body: [vc]: #N3K4TVe2tjQra901JG9w0jT1wg7Q2hWbEO3mHOw3fqg=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJhcHAtc3RhcmtuZXQtaWQiLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbGZnbGFicy9hcHAtc3RhcmtuZXQtaWQvQUY5WVV5cGdrZjUzWkthcXp0OGNjM1VKVWtqNCIsInByZXZpZXdVcmwiOiJhcHAtc3RhcmtuZXQtaWQtZ2l0LWZvcmstd2hldmFsLXN1YnNjcmlwdGlvbi1maW4tMTQxYTc3LWxmZ2xhYnMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJhcHAtc3RhcmtuZXQtaWQtZ2l0LWZvcmstd2hldmFsLXN1YnNjcmlwdGlvbi1maW4tMTQxYTc3LWxmZ2xhYnMudmVyY2VsLmFwcCJ9fV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **app-starknet-id** | ✅ Ready ([Inspect](https://vercel.com/lfglabs/app-starknet-id/AF9YUypgkf53ZKaqzt8cc3UJUkj4)) | [Visit Preview](https://app-starknet-id-git-fork-wheval-subscription-fin-141a77-lfglabs.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/app-starknet-id-git-fork-wheval-subscription-fin-141a77-lfglabs.vercel.app?via=pr-comment-feedback-link) | Apr 30, 2025 1:40pm |


author_association: NONE
user: login: vercel[bot]
created_at: 2025-04-29T11:27:48Z
body: @wheval is attempting to deploy a commit to the **LFG Labs** Team on [Vercel](https://vercel.com).

A member of the Team first needs to [authorize it](https://vercel.com/git/authorize?team=LFG%20Labs&type=github&job=%7B%22headInfo%22%3A%7B%22sha%22%3A%22080ce192690e9af03ce86cb1e17235ebc252633a%22%7D%2C%22id%22%3A%22QmSbwh9gz7dSuEY4Yvw9khvhbfrwFjv3EHuziaD4DLXMgt%22%2C%22org%22%3A%22lfglabs-dev%22%2C%22prId%22%3A1168%2C%22repo%22%3A%22app.starknet.id%22%7D).


author_association: NONE
user: login: coderabbitai[bot]
created_at: 2025-04-29T11:27:48Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: failure by coderabbit.ai -->

> [!CAUTION]
> ## Review failed
> 
> The pull request is closed.

<!-- end of auto-generated comment: failure by coderabbit.ai -->
<!-- walkthrough_start -->

"""
## Walkthrough

This update introduces several UI and styling adjustments to the subscription confirmation and auto-renewal components. The `CopyIcon` component's SVG was replaced with a new structure using two paths while maintaining the same props interface. The `RenewalIcon` SVG was simplified from multiple elements to a single complex path. The referral reward amount on the subscription confirmation page was reduced from $10 to $8, and a new navigation button was added with conditional routing based on a query parameter. Layout improvements include added line breaks, dividers, and flex containers in the subscription form, along with CSS changes for positioning and spacing. No changes affect component logic or exported APIs beyond icon SVG updates.

## Changes

| File(s)                                                                                   | Change Summary                                                                                                                        |
|-------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
| components/UI/iconsComponents/icons/copyIcon.tsx                                          | Replaced SVG with new structure using two `<path>` elements; `viewBox` changed; component interface unchanged.                        |
| components/UI/iconsComponents/icons/renewalIcon.tsx                                       | Replaced multiple SVG elements (ellipse and paths) with a single complex `<path>` element; component interface unchanged.             |
| components/domains/autorenewal.tsx                                                        | Added `<br/>` in subscription benefits text; inserted a divider and wrapped currency selector in a flex container for layout.         |
| pages/subscriptionConfirmation.tsx                                                        | Reduced referral reward from $10 to $8; introduced `tokenId` from query; added redirect function; replaced button to use new redirect.|
| styles/components/confirmation.module.css                                                 | Changed `.balloon` and `.coconut` classes to use percentage-based positioning instead of fixed pixels.                                |
| styles/components/registerV2.module.css                                                   | Reduced `.card` gap from 48px to 24px; added `.divider` class for horizontal line; removed top border from `.summary` class.            |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant SubscriptionConfirmationPage
    participant Router

    User->>SubscriptionConfirmationPage: Clicks "GO TO YOUR DOMAIN" button
    alt tokenId exists in query
        SubscriptionConfirmationPage->>Router: Navigate to /identities/[tokenId]?minting=true
    else
        SubscriptionConfirmationPage->>Router: Navigate to /identities
    end
```

## Assessment against linked issues

| Objective                                                                                                 | Addressed | Explanation                                                                                 |
|-----------------------------------------------------------------------------------------------------------|-----------|---------------------------------------------------------------------------------------------|
| Review and adjustment of all subscription form components for Figma alignment (#1109)                      | ✅        |                                                                                             |
| Ensure layout, icons, and UI elements match Figma design (#1109)                                           | ✅        |                                                                                             |
| Update referral reward, referral link logic, and add navigation button as per requirements (#1109)         | ✅        |                                                                                             |
| Apply and update spacing/dividers/styles in accordance with Figma and integration (#1109)                  | ✅        |                                                                                             |

## Possibly related PRs

- #1167: Adds the "GO TO YOUR DOMAIN" button with navigation in `subscriptionConfirmation.tsx`, directly related to the new button added here.
"""

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 427c4a7ae69e4f892761e39b3944c892e8aa2f0e and 3721c1fc7dfafcf638aec641e31c3e3ce2dbc64b.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `components/UI/iconsComponents/icons/copyIcon.tsx` (1 hunks)
* `components/UI/iconsComponents/icons/renewalIcon.tsx` (1 hunks)
* `pages/subscriptionConfirmation.tsx` (3 hunks)

</details>

</details>
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=lfglabs-dev/app.starknet.id&utm_content=1168):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: wheval
created_at: 2025-04-30T13:39:32Z
body: Thanks!
author_association: CONTRIBUTOR