Profiles: several bug fixes

src/apollo/queries.ts

@@ -256,6 +256,9 @@ export type EnsAccountRegistratonsData = {
     registrations: {
       domain: {
         name: string;
+        owner: {
+          id: string;
+        };
       };
     }[];
   };
@@ -267,6 +270,9 @@ export const ENS_ACCOUNT_REGISTRATIONS = gql`
       registrations(first: 99, orderBy: registrationDate) {
         domain {
           name
+          owner {
+            id
+          }
         }
       }
     }

src/components/discover-sheet/DiscoverSearch.js

@@ -62,6 +62,14 @@ export default function DiscoverSearch() {
     ensResults,
   ]);
 
+  const currencyListDataLength = useMemo(
+    () =>
+      uniswapCurrencyList?.[0]?.data?.length ||
+      0 + ensResults?.[0]?.data?.length ||
+      0,
+    [ensResults, uniswapCurrencyList]
+  );
+
   useHardwareBackOnFocus(() => {
     cancelSearch();
     // prevent other back handlers from firing
@@ -179,7 +187,10 @@ export default function DiscoverSearch() {
   }, [isSearchModeEnabled]);
 
   return (
-    <View style={{ height: deviceUtils.dimensions.height - 140 }}>
+    <View
+      key={currencyListDataLength}
+      style={{ height: deviceUtils.dimensions.height - 140 }}
+    >
       <SearchContainer>
         <CurrencySelectionList
           footerSpacer

src/components/ens-registration/PendingRegistrations/PendingRegistrations.tsx

@@ -54,11 +54,13 @@ const PendingRegistration = ({
   return (
     <Box>
       <Columns alignVertical="center">
-        <Column width="content">
-          <Box paddingRight="10px">
-            <ImageAvatar image={avatarUrl || ''} size="small" />
-          </Box>
-        </Column>
+        {avatarUrl ?? (
+          <Column width="content">
+            <Box paddingRight="10px">
+              <ImageAvatar image={avatarUrl} size="small" />
+            </Box>
+          </Column>
+        )}
         <Column>
           <Box>
             <Text color="primary" numberOfLines={1} size="16px" weight="heavy">

src/components/ens-registration/RegistrationReviewRows/RegistrationReviewRows.tsx

@@ -21,11 +21,13 @@ function StepButton({
   onLongPressEnded,
   onPress,
   type,
+  disabled,
 }: {
   onPress: () => void;
   onLongPress: () => void;
   onLongPressEnded: () => void;
   type: 'increment' | 'decrement';
+  disabled: boolean;
 }) {
   return (
     <Box
@@ -35,10 +37,10 @@ function StepButton({
       onLongPress={onLongPress}
       onLongPressEnded={onLongPressEnded}
       onPress={onPress}
-      scaleTo={0.75}
+      scaleTo={disabled ? 1 : 0.75}
       shouldLongPressHoldPress
     >
-      <Text color="accent" weight="heavy">
+      <Text color={disabled ? 'secondary10' : 'accent'} weight="heavy">
         {type === 'increment' ? '􀁍' : '􀁏'}
       </Text>
     </Box>
@@ -120,6 +122,7 @@ export default function RegistrationReviewRows({
               <Columns>
                 <Column width="content">
                   <StepButton
+                    disabled={duration === 1}
                     onLongPress={handleLongPressDecrement}
                     onLongPressEnded={endLongPress}
                     onPress={handlePressDecrement}
@@ -137,6 +140,7 @@ export default function RegistrationReviewRows({
                 </Box>
                 <Column width="content">
                   <StepButton
+                    disabled={false}
                     onLongPress={handleLongPressIncrement}
                     onLongPressEnded={endLongPress}
                     onPress={handlePressIncrement}

src/components/expanded-state/UniqueTokenExpandedState.tsx

@@ -255,7 +255,7 @@ const UniqueTokenExpandedState = ({
   const isNFT = uniqueTokenType === UniqueTokenType.NFT;
 
   // Fetch the ENS profile if the unique token is an ENS name.
-  const cleanENSName = isENS ? uniqueId.split(' ')?.[0] : uniqueId;
+  const cleanENSName = isENS && uniqueId ? uniqueId?.split(' ')?.[0] : uniqueId;
   const ensProfile = useENSProfile(cleanENSName, { enabled: isENS });
   const ensData = ensProfile.data;
 
@@ -355,8 +355,8 @@ const UniqueTokenExpandedState = ({
   const isActionsEnabled = !external && !isReadOnlyWallet;
   const hasSendButton = isActionsEnabled && isSendable;
 
-  const hasEditButton =
-    isActionsEnabled && profilesEnabled && isENS && ensProfile.isOwner;
+  const isENSActionsEnabled = isActionsEnabled && profilesEnabled && isENS;
+  const hasEditButton = isENSActionsEnabled && ensProfile.isOwner;
 
   const familyLinkDisplay = useMemo(
     () =>
@@ -529,7 +529,7 @@ const UniqueTokenExpandedState = ({
                               registrationDate={
                                 ensData?.registration.registrationDate
                               }
-                              showEditButton={hasEditButton}
+                              showEditButton={isENSActionsEnabled}
                             />
                           )}
                         </Bleed>

src/components/expanded-state/unique-token/ENSBriefTokenInfoRow.tsx

@@ -29,9 +29,10 @@ export default function ENSBriefTokenInfoRow({
   }, []);
 
   const handlePressEditExpiryDate = useCallback(() => {
-    startRegistration(ensName, REGISTRATION_MODES.RENEW);
+    const cleanENSName = ensName?.split(' ')?.[0] ?? ensName;
+    startRegistration(cleanENSName, REGISTRATION_MODES.RENEW);
     navigate(Routes.ENS_CONFIRM_REGISTER_SHEET, {
-      ensName,
+      ensName: cleanENSName,
       mode: REGISTRATION_MODES.RENEW,
     });
   }, [startRegistration, ensName, navigate]);

src/hooks/useENSRecordDisplayProperties.tsx

@@ -56,28 +56,32 @@ export default function useENSRecordDisplayProperties({
     () => Object.keys(imageKeyMap).includes(recordKey),
     [recordKey]
   );
-  const isUrlValue = useMemo(
+
+  const isUrlRecord = useMemo(
     () =>
-      recordValue.match(/^http/) ||
       [ENS_RECORDS.url, ENS_RECORDS.website].includes(recordKey as ENS_RECORDS),
-    [recordKey, recordValue]
+    [recordKey]
   );
+  const isUrlValue = useMemo(() => recordValue.match(/^http/), [recordValue]);
 
   const url = useMemo(() => {
-    if (isUrlValue) {
+    if (isUrlValue || isUrlRecord) {
       return recordValue.match(/^http/)
         ? recordValue
         : `https://${recordValue}`;
     }
     if (links[recordKey]) {
       return `${links[recordKey]}${recordValue.replace('@', '')}`;
     }
-  }, [isUrlValue, recordKey, recordValue]);
+  }, [isUrlRecord, isUrlValue, recordKey, recordValue]);
 
-  const displayUrl = useMemo(
-    () => (url ? new URL(url).hostname.replace(/^www\./, '') : undefined),
-    [url]
-  );
+  const { displayUrl, displayUrlUsername } = useMemo(() => {
+    const urlObj = url ? new URL(url) : { hostname: '', pathname: '' };
+    return {
+      displayUrl: urlObj?.hostname?.replace(/^www\./, ''),
+      displayUrlUsername: urlObj?.pathname?.replace('/', ''),
+    };
+  }, [url]);
 
   const label = useMemo(() => {
     // @ts-expect-error
@@ -92,17 +96,28 @@ export default function useENSRecordDisplayProperties({
   }, [recordKey, type]);
 
   const value = useMemo(() => {
-    if (isUrlValue && displayUrl) {
+    if (isUrlRecord && displayUrl) {
       return `􀤆 ${displayUrl}`;
     }
+    if (isUrlValue && displayUrlUsername) {
+      return displayUrlUsername;
+    }
     if (recordKey === ENS_RECORDS.email) {
       return `􀍕 ${recordValue}`;
     }
     if (type === 'address') {
       return formatAddressForDisplay(recordValue, 4, 4) || '';
     }
     return recordValue;
-  }, [displayUrl, isUrlValue, recordKey, recordValue, type]);
+  }, [
+    displayUrl,
+    displayUrlUsername,
+    isUrlRecord,
+    isUrlValue,
+    recordKey,
+    recordValue,
+    type,
+  ]);
 
   const icon = useMemo(() => icons[recordKey], [recordKey]);
 

src/hooks/useENSRegistration.ts

@@ -109,10 +109,11 @@ export default function useENSRegistration({
       Object.entries(initialRecords),
       isEqual
     ) as [keyof Records, string][];
+
     const changedRecords = entriesToChange.reduce(
       (recordsToAdd: Partial<Records>, [key, value]) => ({
         ...recordsToAdd,
-        [key]: value,
+        ...(value ? { [key]: value } : {}),
       }),
       {}
     );
@@ -122,6 +123,7 @@ export default function useENSRegistration({
       Object.keys(records),
       isEqual
     ) as (keyof Records)[];
+
     const removedRecords = keysToRemove.reduce(
       (recordsToAdd: Partial<Records>, key) => ({
         ...recordsToAdd,
@@ -135,6 +137,7 @@ export default function useENSRegistration({
       ...removedRecords,
     };
   }, [initialRecords, records]);
+
   useEffect(() => {
     dispatch(ensRedux.setChangedRecords(accountAddress, changedRecords));
   }, [accountAddress, changedRecords, dispatch]);
@@ -163,7 +166,9 @@ export default function useENSRegistration({
             token.asset_contract.address === contractAddress &&
             token.id === tokenId
         );
-        if (uniqueToken?.image_thumbnail_url) {
+        if (uniqueToken?.image_url) {
+          avatarUrl = uniqueToken?.image_url;
+        } else if (uniqueToken?.image_thumbnail_url) {
           avatarUrl = uniqueToken?.image_thumbnail_url;
         }
       } else if (

src/hooks/useENSRegistrationActionHandler.ts

@@ -1,6 +1,10 @@
 import { useNavigation } from '@react-navigation/core';
 import { differenceInSeconds } from 'date-fns';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  // @ts-ignore
+  IS_TESTING,
+} from 'react-native-dotenv';
 import { Image } from 'react-native-image-crop-picker';
 import { useDispatch } from 'react-redux';
 import { useRecoilValue } from 'recoil';
@@ -86,7 +90,7 @@ export default function useENSRegistrationActionHandler(
   );
 
   const isTesting = useMemo(
-    () => IS_TESTING && isHardHat(web3Provider.connection.url),
+    () => IS_TESTING === 'true' && isHardHat(web3Provider.connection.url),
     []
   );
 

src/hooks/useENSRegistrationForm.ts

@@ -120,7 +120,7 @@ export default function useENSRegistrationForm({
         };
       }, {});
       updateRecords(records);
-    } else if (mode === 'edit' && !isEmpty(defaultRecords)) {
+    } else if (mode === REGISTRATION_MODES.EDIT && !isEmpty(defaultRecords)) {
       updateRecords(defaultRecords);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -197,8 +197,9 @@ export default function useENSRegistrationForm({
   const [isLoading, setIsLoading] = useState(
     mode === REGISTRATION_MODES.EDIT && isEmpty(values)
   );
+
   useEffect(() => {
-    if (mode === 'edit') {
+    if (mode === REGISTRATION_MODES.EDIT) {
       if (profileQuery.isSuccess || !isEmpty(values)) {
         setTimeout(() => setIsLoading(false), 200);
       } else {

src/languages/_english.json

@@ -630,6 +630,7 @@
         "bio_placeholder": "Add a bio to your profile",
         "website_placeholder": "Add your website",
         "review": "Review",
+        "cancel": "Cancel",
         "choose_nft": "Choose NFT",
         "upload_photo": "Upload photo",
         "remove": "Remove",

src/screens/ENSAssignRecordsSheet.js

@@ -81,12 +81,13 @@ export default function ENSAssignRecordsSheet() {
   });
 
   const [avatarUrl, setAvatarUrl] = useState(initialAvatarUrl);
-
   const [accentColor, setAccentColor] = useRecoilState(accentColorAtom);
+
   const { result: dominantColor } = usePersistentDominantColorFromImage(
-    avatarUrl || ''
+    avatarUrl
   );
   const [prevDominantColor, setPrevDominantColor] = useState(dominantColor);
+
   useEffect(() => {
     setAccentColor(dominantColor || prevDominantColor || colors.purple);
     if (dominantColor) {
@@ -185,7 +186,7 @@ export default function ENSAssignRecordsSheet() {
 }
 
 export function ENSAssignRecordsBottomActions({ visible: defaultVisible }) {
-  const { navigate } = useNavigation();
+  const { navigate, goBack } = useNavigation();
   const keyboardHeight = useKeyboardHeight();
   const [accentColor] = useRecoilState(accentColorAtom);
 
@@ -295,16 +296,25 @@ export function ENSAssignRecordsBottomActions({ visible: defaultVisible }) {
                       {lang.t('profiles.create.skip')}
                     </TintButton>
                   ) : (
-                    <Box style={{ opacity: disabled ? 0.5 : 1 }}>
-                      <SheetActionButton
-                        color={accentColor}
-                        disabled={disabled}
-                        label={lang.t('profiles.create.review')}
-                        onPress={handlePressContinue}
-                        size="big"
-                        testID="ens-assign-records-review"
-                        weight="heavy"
-                      />
+                    <Box>
+                      {!disabled ? (
+                        <SheetActionButton
+                          color={accentColor}
+                          label={lang.t('profiles.create.review')}
+                          onPress={handlePressContinue}
+                          size="big"
+                          testID="ens-assign-records-review"
+                          weight="heavy"
+                        />
+                      ) : (
+                        <TintButton
+                          color="secondary60"
+                          onPress={goBack}
+                          testID="ens-assign-records-cancel"
+                        >
+                          {lang.t(`profiles.create.cancel`)}
+                        </TintButton>
+                      )}
                     </Box>
                   )}
                 </SheetActionButtonRow>