Adds a ENS address selector to the Profile page

codegen.yml

@@ -1,5 +1,9 @@
 overrideExisting: true
-schema: 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3'
+schema:
+  [
+    'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3',
+    'https://api.thegraph.com/subgraphs/name/ensdomains/ens',
+  ]
 documents: 'src/**/!(*.d).{ts,tsx}'
 generates:
   ./src/state/data/generated.ts:

package.json

@@ -102,7 +102,7 @@
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "ethers": "^5.4.6",
     "graphql": "^15.5.0",
-    "graphql-request": "^3.4.0",
+    "graphql-request": "^4.2.0",
     "inter-ui": "^3.13.1",
     "ipfs-deploy": "^8.0.1",
     "jazzicon": "^1.5.0",

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 { isAddress } from '@ethersproject/address'
+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 'hook/utils'
 
 type ReferralQueryValue = {
   value: string
@@ -13,20 +14,25 @@ type ReferralQueryValue = {
  */
 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(() => {
-    const referralAddress = parsedQs[REFERRAL_QUERY_PARAM]
-    if (typeof referralAddress === 'string' && isAddress(referralAddress)) {
-      return { value: referralAddress, isValid: true }
+    if (loading || result.loading || !referralAddress) {
+      if (result.loading) {
+        setLoading(false)
+      }
+      return null
     }
 
-    if (referralAddress) {
-      console.warn('Invalid referral address')
-      return { value: '', isValid: false }
+    if (result.address) {
+      return { value: result.address, isValid: true }
     }
 
-    return null
-  }, [parsedQs])
+    console.warn('Invalid referral address')
+    return { value: '', isValid: false }
+  }, [result.loading, result.address, referralAddress, loading])
 
   return referral
 }

src/custom/pages/Profile/AddressSelector.tsx

@@ -0,0 +1,227 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import styled, { css } from 'styled-components/macro'
+import { Check, ChevronDown } from 'react-feather'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import { useActiveWeb3React } from 'hooks/web3'
+import { ensNames } from './ens'
+import { useAddress } from 'state/affiliate/hooks'
+import { updateAddress } from 'state/affiliate/actions'
+import { useAppDispatch } from 'state/hooks'
+import { isAddress, shortenAddress } from 'utils'
+
+type AddressSelectorProps = {
+  address: string
+}
+
+export default function AddressSelector(props: AddressSelectorProps) {
+  const { address } = props
+  const dispatch = useAppDispatch()
+  const selectedAddress = useAddress()
+  const { chainId, library } = useActiveWeb3React()
+  const [open, setOpen] = useState(false)
+  const [items, setItems] = useState<string[]>([address])
+  const toggle = useCallback(() => setOpen((open) => !open), [])
+  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))
+      toggle()
+    },
+    [dispatch, toggle]
+  )
+
+  useEffect(() => {
+    if (!chainId) {
+      return
+    }
+
+    ensNames(chainId, address).then((response) => {
+      if ('error' in response) {
+        console.info(response.error)
+        setItems([address])
+        return
+      }
+      setItems([...response, address])
+    })
+  }, [address, chainId])
+
+  useEffect(() => {
+    if (selectedAddress) {
+      return
+    }
+
+    dispatch(updateAddress(address))
+  }, [selectedAddress, address, dispatch])
+
+  useEffect(() => {
+    if (!selectedAddress) {
+      return
+    }
+
+    // if the user switches accounts, reset the selected address
+    if (isAddress(selectedAddress) && selectedAddress !== address) {
+      dispatch(updateAddress(address))
+      return
+    }
+
+    // the selected address is a ens name, verify that resolves to the correct address
+    const verify = async () => {
+      const resolvedAddress = await library?.resolveName(selectedAddress)
+      if (resolvedAddress !== address) {
+        dispatch(updateAddress(address))
+      }
+    }
+
+    verify()
+  }, [selectedAddress, address, dispatch, library])
+
+  return (
+    <>
+      {items.length === 1 ? (
+        <strong>{tryShortenAddress(address)}</strong>
+      ) : (
+        <Wrapper ref={node}>
+          <AddressInfo onClick={toggle}>
+            <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} />{' '}
+                  {tryShortenAddress(item)}
+                </ButtonMenuItem>
+              ))}
+            </MenuFlyout>
+          )}
+        </Wrapper>
+      )}
+    </>
+  )
+}
+
+const Wrapper = styled.div`
+  position: relative;
+  display: inline;
+  margin-right: 0.4rem;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    justify-self: end;
+  `};
+
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    margin: 0 0.5rem 0 0;
+    width: initial;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+  `};
+`
+
+const MenuFlyout = styled.span`
+  background-color: ${({ theme }) => theme.bg4};
+  border: 1px solid ${({ theme }) => theme.bg0};
+
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
+    0px 24px 32px rgba(0, 0, 0, 0.01);
+  border-radius: 12px;
+  padding: 0.3rem;
+  display: flex;
+  flex-direction: column;
+  font-size: 1rem;
+  position: absolute;
+  left: 0;
+  top: 1.75rem;
+  z-index: 100;
+  min-width: 350px;
+  ${({ theme }) => theme.mediaWidth.upToMedium`;
+    min-width: 145px
+  `};
+
+  > {
+    padding: 12px;
+  }
+`
+const MenuItem = css`
+  align-items: center;
+  background-color: transparent;
+  border-radius: 12px;
+  color: ${({ theme }) => theme.text2};
+  cursor: pointer;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  font-size: 16px;
+  font-weight: 400;
+  justify-content: start;
+  :hover {
+    text-decoration: none;
+  }
+`
+
+export const AddressInfo = styled.button`
+  align-items: center;
+  background-color: ${({ theme }) => theme.bg4};
+  border-radius: 12px;
+  border: 1px solid ${({ theme }) => theme.bg0};
+  color: ${({ theme }) => theme.text1};
+  display: inline-flex;
+  flex-direction: row;
+  font-weight: 700;
+  font-size: 12px;
+  height: 100%;
+  margin: 0 0.4rem;
+  padding: 0.2rem 0.4rem;
+
+  :hover,
+  :focus {
+    cursor: pointer;
+    outline: none;
+    border: 1px solid ${({ theme }) => theme.bg3};
+  }
+`
+const ButtonMenuItem = styled.button<{ $selected?: boolean }>`
+  ${MenuItem}
+  cursor: ${({ $selected }) => ($selected ? 'initial' : 'pointer')};
+  border: none;
+  box-shadow: none;
+  color: ${({ theme, $selected }) => ($selected ? theme.text2 : theme.text1)};
+  background-color: ${({ theme, $selected }) => $selected && theme.primary1};
+  outline: none;
+  font-weight: ${({ $selected }) => ($selected ? '700' : '500')};
+  font-size: 12px;
+  text-transform: lowercase;
+  padding: 6px 10px 6px 5px;
+
+  ${({ $selected }) => $selected && `margin: 3px 0;`}
+
+  > ${AddressInfo} {
+    margin: 0 auto 0 8px;
+  }
+
+  &:hover {
+    color: ${({ theme, $selected }) => !$selected && theme.text1};
+    background: ${({ theme, $selected }) => !$selected && theme.bg4};
+  }
+
+  transition: background 0.13s ease-in-out;
+`
+
+const GreenCheck = styled(Check)<{ $visible: boolean }>`
+  margin-right: 5px;
+  color: ${({ theme }) => theme.success};
+  visibility: ${({ $visible }) => ($visible ? 'visible' : 'hidden')};
+`

src/custom/pages/Profile/ens.ts

@@ -0,0 +1,54 @@
+import { SupportedChainId } from 'constants/chains'
+import { ClientError, gql, GraphQLClient } from 'graphql-request'
+import { EnsNamesQuery } from 'state/data/generated'
+
+const CHAIN_SUBGRAPH_URL: Record<number, string> = {
+  [SupportedChainId.MAINNET]: 'https://api.thegraph.com/subgraphs/name/ensdomains/ens',
+  [SupportedChainId.RINKEBY]: 'https://api.thegraph.com/subgraphs/name/ensdomains/ensrinkeby',
+}
+
+const DOMAINS_BY_ADDRESS_QUERY = gql`
+  query ensNames($resolvedAddress: String!) {
+    domains(where: { resolvedAddress_contains: $resolvedAddress }, orderBy: name) {
+      name
+    }
+  }
+`
+
+export async function ensNames(
+  chainId: SupportedChainId,
+  address: string
+): Promise<
+  | {
+      error: { name: string; message: string; stack: string | undefined }
+    }
+  | string[]
+> {
+  try {
+    const subgraphUrl = chainId ? CHAIN_SUBGRAPH_URL[chainId] : undefined
+
+    if (!subgraphUrl) {
+      return {
+        error: {
+          name: 'UnsupportedChainId',
+          message: `Subgraph queries against ChainId ${chainId} are not supported.`,
+          stack: '',
+        },
+      }
+    }
+
+    const data = await new GraphQLClient(subgraphUrl).request<EnsNamesQuery>(DOMAINS_BY_ADDRESS_QUERY, {
+      resolvedAddress: address.toLocaleLowerCase(),
+    })
+
+    return data.domains
+      .map((domain) => domain.name)
+      .filter((domainName): domainName is string => domainName !== null && domainName !== undefined)
+  } catch (error) {
+    if (error instanceof ClientError) {
+      const { name, message, stack } = error
+      return { error: { name, message, stack } }
+    }
+    throw error
+  }
+}