Adds a ENS address selector to the Profile page

src/custom/components/AffiliateStatusCheck/index.tsx

@@ -106,7 +106,6 @@ export default function AffiliateStatusCheck() {
       return
     }
 
-    setAffiliateState(null)
     setError('')
 
     if (!account) {

src/custom/hooks/useParseReferralQueryParam.ts

@@ -1,7 +1,8 @@
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import { REFERRAL_QUERY_PARAM } from 'hooks/useReferralLink'
 import useENS from 'hooks/useENS'
+import { isAddress } from '../utils'
 
 type ReferralQueryValue = {
   value: string
@@ -15,9 +16,13 @@ export default function useParseReferralQueryParam(): ReferralQueryValue {
   const parsedQs = useParsedQueryString()
   const referralAddress = parsedQs[REFERRAL_QUERY_PARAM] as string
   const result = useENS(referralAddress)
+  const [loading, setLoading] = useState(isAddress(referralAddress) === false) // this is a hack to force a initial loading state to true in case of referralAddress is a ens name because the useENS hook returns loading as false when initialized
 
   const referral = useMemo(() => {
-    if (result.loading || !referralAddress) {
+    if (loading || result.loading || !referralAddress) {
+      if (result.loading) {
+        setLoading(false)
+      }
       return null
     }
 
@@ -27,7 +32,7 @@ export default function useParseReferralQueryParam(): ReferralQueryValue {
 
     console.warn('Invalid referral address')
     return { value: '', isValid: false }
-  }, [result.loading, result.address, referralAddress])
+  }, [result.loading, result.address, referralAddress, loading])
 
   return referral
 }

src/custom/pages/Profile/AddressSelector.tsx

@@ -24,6 +24,18 @@ export default function AddressSelector(props: AddressSelectorProps) {
   const node = useRef<HTMLDivElement>(null)
   useOnClickOutside(node, open ? toggle : undefined)
 
+  const tryShortenAddress = useCallback((item?: string) => {
+    if (!item) {
+      return item
+    }
+
+    try {
+      return shortenAddress(item)
+    } catch (error) {
+      return item
+    }
+  }, [])
+
   const handleSelectItem = useCallback(
     (item: string) => {
       dispatch(updateAddress(item))
@@ -80,19 +92,19 @@ export default function AddressSelector(props: AddressSelectorProps) {
   return (
     <>
       {items.length === 1 ? (
-        <strong>{address}</strong>
+        <strong>{tryShortenAddress(address)}</strong>
       ) : (
         <Wrapper ref={node}>
           <AddressInfo onClick={toggle}>
-            <span style={{ marginRight: '2px' }}>{selectedAddress}</span>
+            <span style={{ marginRight: '2px' }}>{tryShortenAddress(selectedAddress)}</span>
             <ChevronDown size={16} style={{ marginTop: '2px' }} strokeWidth={2.5} />
           </AddressInfo>
           {open && (
             <MenuFlyout>
               {items.map((item) => (
                 <ButtonMenuItem key={item} $selected={item === ''} onClick={() => handleSelectItem(item)}>
                   <GreenCheck size={16} strokeWidth={2.5} $visible={item === selectedAddress} />{' '}
-                  {isAddress(item) ? shortenAddress(item) : item}
+                  {tryShortenAddress(item)}
                 </ButtonMenuItem>
               ))}
             </MenuFlyout>

src/custom/pages/Profile/index.tsx

@@ -27,7 +27,7 @@ import { RefreshCcw } from 'react-feather'
 import Web3Status from 'components/Web3Status'
 import useReferralLink from 'hooks/useReferralLink'
 import useFetchProfile from 'hooks/useFetchProfile'
-import { getBlockExplorerUrl } from 'utils'
+import { getBlockExplorerUrl, shortenAddress } from 'utils'
 import { formatMax, formatSmartLocaleAware, numberFormatter } from 'utils/format'
 import { getExplorerAddressLink } from 'utils/explorer'
 import useTimeAgo from 'hooks/useTimeAgo'
@@ -306,7 +306,7 @@ export default function Profile() {
                   <span style={{ wordBreak: 'break-all', display: 'inline-block' }}>
                     {referralLink.prefix}
                     {chainId === ChainId.XDAI ? (
-                      <strong>{referralLink.address}</strong>
+                      <strong>{shortenAddress(referralLink.address)}</strong>
                     ) : (
                       <AddressSelector address={referralLink.address} />
                     )}