Fix (#950) Steps for purchasing a domain

components/UI/iconsComponents/icons/cartIcon.tsx

@@ -3,19 +3,17 @@ import React, { FunctionComponent } from "react";
 const CartIcon: FunctionComponent<IconProps> = ({
   width,
   color,
-  secondColor,
 }) => {
   return (
     <svg
+      xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={width}
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="11.6562" cy="12" r="11" fill={secondColor} />
       <path
-        d="M12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM5.95166 5.06982L8.0874 5.74072C8.37014 5.83358 8.55846 6.09614 8.5913 6.36474L8.71142 7.54098L18.3823 8.62056C18.7976 8.701 19.0894 9.07594 19.0312 9.46138L18.4307 12.8451C18.3542 13.1991 18.0611 13.4417 17.7349 13.4457H9.14356L8.9751 14.4052H17.1343C17.5609 14.4202 17.8734 14.7451 17.8784 15.1244C17.8607 15.5572 17.5119 15.8405 17.1343 15.8451H8.11084C7.65572 15.8075 7.3216 15.4468 7.3916 15.0058L7.77538 12.8935L7.1748 6.98876L5.51952 6.46144C5.32752 6.39744 5.1834 6.27706 5.0874 6.10106C4.90576 5.72042 5.07542 5.29898 5.39942 5.11668C5.58434 5.02056 5.76494 5.00858 5.95166 5.06982ZM9.20362 16.2598C9.82494 16.2598 10.3286 16.7634 10.3286 17.3848C10.3286 18.0061 9.82494 18.5098 9.20362 18.5098C8.58234 18.5098 8.07862 18.0061 8.07862 17.3848C8.07862 16.7634 8.5823 16.2598 9.20362 16.2598ZM15.8071 16.2598C16.4284 16.2598 16.9321 16.7634 16.9321 17.3848C16.9321 18.0061 16.4284 18.5098 15.8071 18.5098C15.1858 18.5098 14.6821 18.0061 14.6821 17.3848C14.6821 16.7634 15.1858 16.2598 15.8071 16.2598Z"
+        d="M1 1.76703C1 1.60789 1.06322 1.45527 1.17575 1.34274C1.28828 1.23021 1.4409 1.16699 1.60004 1.16699H2.04647C2.80653 1.16699 3.26256 1.67823 3.52258 2.15346C3.69619 2.47028 3.8218 2.83751 3.9202 3.17033L4.00021 3.16713H13.9993C14.6634 3.16713 15.1434 3.80238 14.961 4.44162L13.4985 9.56918C13.3673 10.0291 13.0899 10.4338 12.7082 10.7219C12.3266 11.0101 11.8614 11.166 11.3831 11.1661H6.62439C6.14235 11.1661 5.67365 11.0078 5.29032 10.7156C4.90699 10.4233 4.63025 10.0132 4.50264 9.54838L3.8946 7.33062L2.88653 3.93199L2.88573 3.92559C2.76092 3.47195 2.64411 3.04712 2.4697 2.7303C2.30249 2.42228 2.16808 2.36708 2.04727 2.36708H1.60004C1.4409 2.36708 1.28828 2.30386 1.17575 2.19133C1.06322 2.0788 1 1.92618 1 1.76703ZM6.20036 15.168C6.62474 15.168 7.03173 14.9994 7.33181 14.6993C7.63189 14.3992 7.80048 13.9922 7.80048 13.5679C7.80048 13.1435 7.63189 12.7365 7.33181 12.4364C7.03173 12.1363 6.62474 11.9677 6.20036 11.9677C5.77599 11.9677 5.36899 12.1363 5.06891 12.4364C4.76883 12.7365 4.60025 13.1435 4.60025 13.5679C4.60025 13.9922 4.76883 14.3992 5.06891 14.6993C5.36899 14.9994 5.77599 15.168 6.20036 15.168ZM11.8008 15.168C12.2251 15.168 12.6321 14.9994 12.9322 14.6993C13.2323 14.3992 13.4009 13.9922 13.4009 13.5679C13.4009 13.1435 13.2323 12.7365 12.9322 12.4364C12.6321 12.1363 12.2251 11.9677 11.8008 11.9677C11.3764 11.9677 10.9694 12.1363 10.6693 12.4364C10.3692 12.7365 10.2006 13.1435 10.2006 13.5679C10.2006 13.9922 10.3692 14.3992 10.6693 14.6993C10.9694 14.9994 11.3764 15.168 11.8008 15.168Z"
         fill={color}
       />
     </svg>

components/UI/iconsComponents/icons/contactCardIcon.tsx

@@ -3,16 +3,15 @@ import React, { FunctionComponent } from "react";
 const ContactCardIcon: FunctionComponent<IconProps> = ({ width, color }) => {
   return (
     <svg
+      xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={width}
-      viewBox="0 0 25 24"
+      viewBox="0 0 16 16"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <rect x="0.5" width="24" height="24" rx="12" fill={color} />
       <path
-        d="M7.25 6C6.78587 6 6.34075 6.18437 6.01256 6.51256C5.68437 6.84075 5.5 7.28587 5.5 7.75V14.25C5.5 15.216 6.284 16 7.25 16H9.535C9.43842 15.3181 9.5434 14.6229 9.837 14C9.4937 14.0065 9.15106 13.9675 8.818 13.884L8.765 13.871C8.40353 13.7806 8.08267 13.572 7.85345 13.2783C7.62422 12.9845 7.49981 12.6226 7.5 12.25C7.5 11.775 7.884 11.391 8.358 11.391H11.165C11.601 11.391 11.962 11.717 12.015 12.139C12.335 12.0459 12.6667 11.9988 13 11.999H17C17.98 11.999 18.865 12.401 19.5 13.049V7.749C19.4997 7.28504 19.3152 6.84018 18.9871 6.51221C18.6589 6.18424 18.214 6 17.75 6H7.25ZM11.118 9.357C11.1229 9.53824 11.0915 9.71862 11.0255 9.8875C10.9596 10.0564 10.8604 10.2103 10.734 10.3403C10.6075 10.4702 10.4563 10.5735 10.2893 10.644C10.1223 10.7145 9.9428 10.7508 9.7615 10.7508C9.5802 10.7508 9.40073 10.7145 9.2337 10.644C9.06667 10.5735 8.91547 10.4702 8.78902 10.3403C8.66257 10.2103 8.56344 10.0564 8.49748 9.8875C8.43153 9.71862 8.40008 9.53824 8.405 9.357C8.4146 9.00361 8.56172 8.66792 8.81507 8.42135C9.06842 8.17479 9.40798 8.03683 9.7615 8.03683C10.115 8.03683 10.4546 8.17479 10.7079 8.42135C10.9613 8.66792 11.1084 9.00361 11.118 9.357ZM13.5 9.5C13.5 9.36739 13.5527 9.24021 13.6464 9.14645C13.7402 9.05268 13.8674 9 14 9H17C17.1326 9 17.2598 9.05268 17.3536 9.14645C17.4473 9.24021 17.5 9.36739 17.5 9.5C17.5 9.63261 17.4473 9.75979 17.3536 9.85355C17.2598 9.94732 17.1326 10 17 10H14C13.8674 10 13.7402 9.94732 13.6464 9.85355C13.5527 9.75979 13.5 9.63261 13.5 9.5ZM13 13C12.337 13 11.7011 13.2634 11.2322 13.7322C10.7634 14.2011 10.5 14.837 10.5 15.5C10.5 16.163 10.7634 16.7989 11.2322 17.2678C11.7011 17.7366 12.337 18 13 18H13.5C13.6326 18 13.7598 17.9473 13.8536 17.8536C13.9473 17.7598 14 17.6326 14 17.5C14 17.3674 13.9473 17.2402 13.8536 17.1464C13.7598 17.0527 13.6326 17 13.5 17H13C12.6022 17 12.2206 16.842 11.9393 16.5607C11.658 16.2794 11.5 15.8978 11.5 15.5C11.5 15.1022 11.658 14.7206 11.9393 14.4393C12.2206 14.158 12.6022 14 13 14H13.5C13.6326 14 13.7598 13.9473 13.8536 13.8536C13.9473 13.7598 14 13.6326 14 13.5C14 13.3674 13.9473 13.2402 13.8536 13.1464C13.7598 13.0527 13.6326 13 13.5 13H13ZM16.5 13C16.3674 13 16.2402 13.0527 16.1464 13.1464C16.0527 13.2402 16 13.3674 16 13.5C16 13.6326 16.0527 13.7598 16.1464 13.8536C16.2402 13.9473 16.3674 14 16.5 14H17C17.3978 14 17.7794 14.158 18.0607 14.4393C18.342 14.7206 18.5 15.1022 18.5 15.5C18.5 15.8978 18.342 16.2794 18.0607 16.5607C17.7794 16.842 17.3978 17 17 17H16.5C16.3674 17 16.2402 17.0527 16.1464 17.1464C16.0527 17.2402 16 17.3674 16 17.5C16 17.6326 16.0527 17.7598 16.1464 17.8536C16.2402 17.9473 16.3674 18 16.5 18H17C17.663 18 18.2989 17.7366 18.7678 17.2678C19.2366 16.7989 19.5 16.163 19.5 15.5C19.5 14.837 19.2366 14.2011 18.7678 13.7322C18.2989 13.2634 17.663 13 17 13H16.5ZM13 15C12.8674 15 12.7402 15.0527 12.6464 15.1464C12.5527 15.2402 12.5 15.3674 12.5 15.5C12.5 15.6326 12.5527 15.7598 12.6464 15.8536C12.7402 15.9473 12.8674 16 13 16H17C17.1326 16 17.2598 15.9473 17.3536 15.8536C17.4473 15.7598 17.5 15.6326 17.5 15.5C17.5 15.3674 17.4473 15.2402 17.3536 15.1464C17.2598 15.0527 17.1326 15 17 15H13Z"
-        fill="white"
+        d="M2.75 2C2.28587 2 1.84075 2.18437 1.51256 2.51256C1.18437 2.84075 1 3.28587 1 3.75V10.25C1 11.216 1.784 12 2.75 12H5.035C4.93842 11.3181 5.0434 10.6229 5.337 10C4.9937 10.0065 4.65106 9.96748 4.318 9.884L4.265 9.871C3.90353 9.78064 3.58267 9.572 3.35345 9.27827C3.12422 8.98454 2.99981 8.62259 3 8.25C3 7.775 3.384 7.391 3.858 7.391H6.665C7.101 7.391 7.462 7.717 7.515 8.139C7.83505 8.04593 8.16669 7.9988 8.5 7.999H12.5C13.48 7.999 14.365 8.401 15 9.049V3.749C14.9997 3.28504 14.8152 2.84018 14.4871 2.51221C14.1589 2.18424 13.714 2 13.25 2H2.75ZM6.618 5.357C6.62292 5.53824 6.59147 5.71862 6.52552 5.8875C6.45956 6.05638 6.36043 6.21034 6.23398 6.34027C6.10753 6.4702 5.95633 6.57347 5.7893 6.64399C5.62227 6.7145 5.4428 6.75083 5.2615 6.75083C5.0802 6.75083 4.90073 6.7145 4.7337 6.64399C4.56667 6.57347 4.41547 6.4702 4.28902 6.34027C4.16257 6.21034 4.06344 6.05638 3.99748 5.8875C3.93153 5.71862 3.90008 5.53824 3.905 5.357C3.9146 5.00361 4.06172 4.66792 4.31507 4.42135C4.56842 4.17479 4.90798 4.03683 5.2615 4.03683C5.61502 4.03683 5.95459 4.17479 6.20793 4.42135C6.46128 4.66792 6.6084 5.00361 6.618 5.357ZM9 5.5C9 5.36739 9.05268 5.24021 9.14645 5.14645C9.24021 5.05268 9.36739 5 9.5 5H12.5C12.6326 5 12.7598 5.05268 12.8536 5.14645C12.9473 5.24021 13 5.36739 13 5.5C13 5.63261 12.9473 5.75979 12.8536 5.85355C12.7598 5.94732 12.6326 6 12.5 6H9.5C9.36739 6 9.24021 5.94732 9.14645 5.85355C9.05268 5.75979 9 5.63261 9 5.5ZM8.5 9C7.83696 9 7.20107 9.26339 6.73223 9.73223C6.26339 10.2011 6 10.837 6 11.5C6 12.163 6.26339 12.7989 6.73223 13.2678C7.20107 13.7366 7.83696 14 8.5 14H9C9.13261 14 9.25979 13.9473 9.35355 13.8536C9.44732 13.7598 9.5 13.6326 9.5 13.5C9.5 13.3674 9.44732 13.2402 9.35355 13.1464C9.25979 13.0527 9.13261 13 9 13H8.5C8.10218 13 7.72064 12.842 7.43934 12.5607C7.15804 12.2794 7 11.8978 7 11.5C7 11.1022 7.15804 10.7206 7.43934 10.4393C7.72064 10.158 8.10218 10 8.5 10H9C9.13261 10 9.25979 9.94732 9.35355 9.85355C9.44732 9.75979 9.5 9.63261 9.5 9.5C9.5 9.36739 9.44732 9.24021 9.35355 9.14645C9.25979 9.05268 9.13261 9 9 9H8.5ZM12 9C11.8674 9 11.7402 9.05268 11.6464 9.14645C11.5527 9.24021 11.5 9.36739 11.5 9.5C11.5 9.63261 11.5527 9.75979 11.6464 9.85355C11.7402 9.94732 11.8674 10 12 10H12.5C12.8978 10 13.2794 10.158 13.5607 10.4393C13.842 10.7206 14 11.1022 14 11.5C14 11.8978 13.842 12.2794 13.5607 12.5607C13.2794 12.842 12.8978 13 12.5 13H12C11.8674 13 11.7402 13.0527 11.6464 13.1464C11.5527 13.2402 11.5 13.3674 11.5 13.5C11.5 13.6326 11.5527 13.7598 11.6464 13.8536C11.7402 13.9473 11.8674 14 12 14H12.5C13.163 14 13.7989 13.7366 14.2678 13.2678C14.7366 12.7989 15 12.163 15 11.5C15 10.837 14.7366 10.2011 14.2678 9.73223C13.7989 9.26339 13.163 9 12.5 9H12ZM8.5 11C8.36739 11 8.24021 11.0527 8.14645 11.1464C8.05268 11.2402 8 11.3674 8 11.5C8 11.6326 8.05268 11.7598 8.14645 11.8536C8.24021 11.9473 8.36739 12 8.5 12H12.5C12.6326 12 12.7598 11.9473 12.8536 11.8536C12.9473 11.7598 13 11.6326 13 11.5C13 11.3674 12.9473 11.2402 12.8536 11.1464C12.7598 11.0527 12.6326 11 12.5 11H8.5Z"
+        fill={color}
       />
     </svg>
   );

components/UI/iconsComponents/icons/pfpIcon.tsx

@@ -3,32 +3,30 @@ import React, { FunctionComponent } from "react";
 const PfpIcon: FunctionComponent<IconProps> = ({
   width,
   color,
-  secondColor,
 }) => {
   return (
     <svg
+      xmlns="http://www.w3.org/2000/svg"
       width={width}
       height={width}
-      viewBox="0 0 24 24"
+      viewBox="0 0 16 16"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <rect width="24" height="24" rx="12" fill={color} />
       <path
-        d="M17.7718 10.2135C17.5275 8.52776 16.5235 7.36201 14.844 6.69601C15.1302 6.54476 15.3153 6.46901 15.3153 6.46901C14.5063 6.18401 13.804 6.01801 13.196 5.94251C13.5157 5.70176 13.7292 5.61026 13.7292 5.61026C8.79125 4.91376 6.35625 7.66026 6.20325 10.2173C5.23575 10.387 4.5 11.2278 4.5 12.2425C4.5 13.2468 5.22075 14.081 6.174 14.2625C6.283 16.6163 8.849 18.5003 11.9998 18.5003C15.151 18.5003 17.717 16.6163 17.826 14.2625C18.779 14.0808 19.5 13.2463 19.5 12.2425C19.5 11.2195 18.7513 10.373 17.7718 10.2135ZM6.22525 13.5345C5.64775 13.3845 5.2195 12.8658 5.2195 12.2425C5.2195 11.6385 5.62275 11.133 6.1735 10.966C6.18575 11.5065 6.328 12.0233 6.577 12.4995C6.40742 12.8245 6.28879 13.1735 6.22525 13.5345ZM15.137 13.9813C15.469 14.3953 15.6635 14.8788 15.6635 15.3975C15.6635 16.918 14.023 18.15 11.9998 18.15C9.9765 18.15 8.33625 16.918 8.33625 15.3975C8.33625 14.8788 8.5305 14.3953 8.863 13.9813C7.72375 13.2918 6.9945 12.2363 6.9945 11.0515C6.9945 6.81801 11.9998 9.51501 11.9998 9.51501C11.9998 9.51501 17.0052 6.81826 17.0052 11.0515C17.0052 12.236 16.276 13.2918 15.137 13.9813ZM17.7747 13.5345C17.7111 13.1735 17.5926 12.8244 17.4233 12.4993C17.6722 12.023 17.8142 11.5063 17.8265 10.9658C18.3772 11.133 18.7802 11.6383 18.7802 12.2423C18.7802 12.8658 18.3523 13.3845 17.7747 13.5345Z"
-        fill={secondColor}
+        d="M13.7718 6.21351C13.5275 4.52776 12.5235 3.36201 10.844 2.69601C11.1302 2.54476 11.3153 2.46901 11.3153 2.46901C10.5063 2.18401 9.804 2.01801 9.196 1.94251C9.51575 1.70176 9.72925 1.61026 9.72925 1.61026C4.79125 0.913758 2.35625 3.66026 2.20325 6.21726C1.23575 6.38701 0.5 7.22776 0.5 8.24251C0.5 9.24676 1.22075 10.081 2.174 10.2625C2.283 12.6163 4.849 14.5003 7.99975 14.5003C11.151 14.5003 13.717 12.6163 13.826 10.2625C14.779 10.0808 15.5 9.24626 15.5 8.24251C15.5 7.21951 14.7513 6.37301 13.7718 6.21351ZM2.22525 9.53451C1.64775 9.38451 1.2195 8.86576 1.2195 8.24251C1.2195 7.63851 1.62275 7.13301 2.1735 6.96601C2.18575 7.50651 2.328 8.02326 2.577 8.49951C2.40742 8.82445 2.28879 9.17353 2.22525 9.53451ZM11.137 9.98126C11.469 10.3953 11.6635 10.8788 11.6635 11.3975C11.6635 12.918 10.023 14.15 7.99975 14.15C5.9765 14.15 4.33625 12.918 4.33625 11.3975C4.33625 10.8788 4.5305 10.3953 4.863 9.98126C3.72375 9.29176 2.9945 8.23626 2.9945 7.05151C2.9945 2.81801 7.99975 5.51501 7.99975 5.51501C7.99975 5.51501 13.0052 2.81826 13.0052 7.05151C13.0052 8.23601 12.276 9.29176 11.137 9.98126ZM13.7747 9.53451C13.7111 9.17351 13.5926 8.82438 13.4233 8.49926C13.6722 8.02301 13.8142 7.50626 13.8265 6.96576C14.3772 7.13301 14.7802 7.63826 14.7802 8.24226C14.7802 8.86576 14.3523 9.38451 13.7747 9.53451Z"
+        fill={color}
       />
       <path
-        d="M12.5417 14.2014C12.68 14.2014 12.7917 13.9716 12.7917 13.6871C12.7917 13.4039 12.68 13.1724 12.5417 13.1724C12.4032 13.1724 12.2917 13.4039 12.2917 13.6871C12.2917 13.9716 12.4032 14.2014 12.5417 14.2014ZM11.4688 14.2014C11.607 14.2014 11.7188 13.9716 11.7188 13.6871C11.7188 13.4039 11.607 13.1724 11.4688 13.1724C11.3302 13.1724 11.2188 13.4039 11.2188 13.6871C11.2188 13.9716 11.3302 14.2014 11.4688 14.2014Z"
-        fill={secondColor}
+        d="M8.53784 10.2014C8.67609 10.2014 8.78784 9.97161 8.78784 9.68711C8.78784 9.40386 8.67609 9.17236 8.53784 9.17236C8.39934 9.17236 8.28784 9.40386 8.28784 9.68711C8.28784 9.97161 8.39934 10.2014 8.53784 10.2014ZM7.46484 10.2014C7.60309 10.2014 7.71484 9.97161 7.71484 9.68711C7.71484 9.40386 7.60309 9.17236 7.46484 9.17236C7.32634 9.17236 7.21484 9.40386 7.21484 9.68711C7.21484 9.97161 7.32634 10.2014 7.46484 10.2014Z"
+        fill={color}
       />
       <path
-        d="M14.1719 13.062C14.6551 13.062 15.0469 12.5583 15.0469 11.937C15.0469 11.3157 14.6551 10.812 14.1719 10.812C13.6886 10.812 13.2969 11.3157 13.2969 11.937C13.2969 12.5583 13.6886 13.062 14.1719 13.062Z"
-        fill={secondColor}
+        d="M10.1719 9.06201C10.6551 9.06201 11.0469 8.55833 11.0469 7.93701C11.0469 7.31569 10.6551 6.81201 10.1719 6.81201C9.68863 6.81201 9.29688 7.31569 9.29688 7.93701C9.29688 8.55833 9.68863 9.06201 10.1719 9.06201Z"
+        fill={color}
       />
       <path
-        d="M9.82812 13.062C10.3114 13.062 10.7031 12.5583 10.7031 11.937C10.7031 11.3157 10.3114 10.812 9.82812 10.812C9.34488 10.812 8.95312 11.3157 8.95312 11.937C8.95312 12.5583 9.34488 13.062 9.82812 13.062Z"
-        fill={secondColor}
+        d="M5.83008 9.06189C6.31333 9.06189 6.70508 8.55821 6.70508 7.93689C6.70508 7.31557 6.31333 6.81189 5.83008 6.81189C5.34683 6.81189 4.95508 7.31557 4.95508 7.93689C4.95508 8.55821 5.34683 9.06189 5.83008 9.06189Z"
+        fill={color}
       />
     </svg>
   );

components/domains/registerV3.tsx

@@ -5,9 +5,9 @@ import UserInfoForm from "./steps/userInfoForm";
 import { FormType } from "@/utils/constants";
 import CheckoutCard from "./steps/checkoutCard";
 import { useAccount } from "@starknet-react/core";
+import styles from "../../styles/components/registerV3.module.css";
 import SelectPfp from "./steps/selectPfp";
 import RegisterSteps from "./steps/registerSteps";
-import SearchBar from "../UI/searchBar";
 import evergreenDiscounts from "@/utils/discounts/evergreen";
 
 type RegisterV3Props = {
@@ -55,38 +55,57 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({
     }
   };
 
-  return currentStep === 1 ? (
+  return (
     <>
-      <div className="sm:w-2/5 w-4/5 mt-5 mb-5">
-        <SearchBar
-          onChangeTypedValue={(typeValue: string) => setDomain(typeValue)}
-          showHistory={false}
-        />
+      <div className="w-full flex flex-col lg:flex-row md:flex-row justify-center gap-4 px-8 py-4 lg:px-32 md:px-16 sm:py-12">
+        <aside className={`${styles.purchaseStepNav}`}>
+          <RegisterSteps
+            currentStep={currentStep}
+            setStep={goToStep}
+            showPfp={userNfts && userNfts.length > 0}
+            isLoading={isLoadingNfts}
+          />
+
+    <img 
+      src="/visuals/purchaseStepVisual.svg"
+      alt="Domain purchase steps visualization"
+    />
+        </aside>
+
+        <div className={`${styles.purchaseStepNavMobile}`}>
+          <RegisterSteps
+            currentStep={currentStep}
+            setStep={goToStep}
+            showPfp={userNfts && userNfts.length > 0}
+            isLoading={isLoadingNfts}
+          />
+
+  <div className="flex justify-center">
+    <img 
+      src="/visuals/purchaseStepVisualMobile.svg" 
+      alt="Domain purchase steps visualization"
+    />
+  </div>
+        </div>
+
+        <div className="flex-1">
+          {currentStep === 1 && (
+            <UserInfoForm
+              type={FormType.REGISTER}
+              goToNextStep={goToNextStep}
+              imageUrl="/visuals/register.webp"
+            />
+          )}
+          {currentStep === 2 && <SelectPfp goToNextStep={goToNextStep} />}
+          {currentStep === 3 && (
+            <CheckoutCard
+              type={FormType.REGISTER}
+              discount={evergreenDiscounts.registration}
+            />
+          )}
+        </div>
       </div>
-      <UserInfoForm
-        type={FormType.REGISTER}
-        goToNextStep={goToNextStep}
-        imageUrl="/visuals/register.webp"
-      />
     </>
-  ) : (
-    <div
-      className="w-full flex flex-col justify-center gap-4 px-8 py-4 lg:px-32 md:px-16 sm:py-12 sm:flex-row"
-    >
-      <RegisterSteps
-        currentStep={currentStep}
-        setStep={goToStep}
-        showPfp={userNfts && userNfts.length > 0}
-        isLoading={isLoadingNfts}
-      />
-      {currentStep === 2 && <SelectPfp goToNextStep={goToNextStep} />}
-      {currentStep === 3 && (
-        <CheckoutCard
-          type={FormType.REGISTER}
-          discount={evergreenDiscounts.registration}
-        />
-      )}
-    </div>
   );
 };