FET-987: new avatar uploader

public/locales/en/transactionFlow.json

@@ -3,9 +3,13 @@
     "profileEditor": {
       "tabs": {
         "avatar": {
+          "change": "Change avatar",
+          "add": "Add avatar",
+          "label": "Avatar",
           "dropdown": {
             "selectNFT": "Select NFT",
-            "uploadImage": "Upload Image"
+            "uploadImage": "Upload Image",
+            "enterManually": "Enter manually"
           },
           "nft": {
             "title": "Select an NFT",

src/components/@molecules/ProfileEditor/Avatar/AvatarButton.tsx

@@ -1,18 +1,13 @@
-import { ComponentProps, Dispatch, SetStateAction, useRef } from 'react'
+import { ComponentProps, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import { Avatar, Dropdown } from '@ensdomains/thorin'
+import { Avatar, Button, Dropdown, mq } from '@ensdomains/thorin'
 import { DropdownItem } from '@ensdomains/thorin/dist/types/components/molecules/Dropdown/Dropdown'
 
-import CameraIcon from '@app/assets/Camera.svg'
-import { LegacyDropdown } from '@app/components/@molecules/LegacyDropdown/LegacyDropdown'
-
-const Container = styled.button<{ $error?: boolean; $validated?: boolean; $dirty?: boolean }>(
+const AvatarWrapper = styled.button<{ $error?: boolean; $validated?: boolean; $dirty?: boolean }>(
   ({ theme, $validated, $dirty, $error }) => css`
     position: relative;
-    width: 90px;
-    height: 90px;
     border-radius: 50%;
     background-color: ${theme.colors.backgroundPrimary};
     cursor: pointer;
@@ -61,29 +56,30 @@ const Container = styled.button<{ $error?: boolean; $validated?: boolean; $dirty
   `,
 )
 
-const IconMask = styled.div(
+const ActionContainer = styled.div(
   ({ theme }) => css`
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 90px;
-    height: 90px;
-    border-radius: 50%;
     display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
-    border: 4px solid ${theme.colors.grey};
+    flex-direction: column;
+    align-items: flex-start;
+    gap: ${theme.space[2]};
     overflow: hidden;
+  `,
+)
 
-    svg {
-      width: 40px;
-      display: block;
-    }
+const Container = styled.div(
+  ({ theme }) => css`
+    width: 100%;
+    display: grid;
+    grid-template-columns: 120px 1fr;
+    align-items: center;
+    gap: ${theme.space[4]};
+    ${mq.xs.max(css`
+      grid-template-columns: 80px 1fr;
+    `)}
   `,
 )
 
-export type AvatarClickType = 'upload' | 'nft'
+export type AvatarClickType = 'upload' | 'nft' | 'manual'
 
 type PickedDropdownProps = Pick<ComponentProps<typeof Dropdown>, 'isOpen' | 'setIsOpen'>
 
@@ -100,8 +96,8 @@ type Props = {
 
 const AvatarButton = ({
   validated,
-  dirty,
   error,
+  dirty,
   src,
   onSelectOption,
   onAvatarChange,
@@ -125,59 +121,79 @@ const AvatarButton = ({
   }
 
   const dropdownProps = setIsOpen
-    ? ({ isOpen, setIsOpen } as { isOpen: boolean; setIsOpen: Dispatch<SetStateAction<boolean>> })
+    ? ({ isOpen, setIsOpen } as {
+        isOpen: boolean
+        setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
+      })
     : ({} as { isOpen: never; setIsOpen: never })
 
   return (
-    <LegacyDropdown
-      items={
-        [
-          {
-            label: t('input.profileEditor.tabs.avatar.dropdown.selectNFT'),
-            color: 'black',
-            onClick: handleSelectOption('nft'),
-          },
-          {
-            label: t('input.profileEditor.tabs.avatar.dropdown.uploadImage'),
-            color: 'black',
-            onClick: handleSelectOption('upload'),
-          },
-          ...(validated
-            ? [
-                {
-                  label: t('action.remove', { ns: 'common' }),
-                  color: 'red',
-                  onClick: handleSelectOption('remove'),
-                },
-              ]
-            : []),
-        ] as DropdownItem[]
-      }
-      keepMenuOnTop
-      shortThrow
-      {...dropdownProps}
-    >
-      <Container $validated={validated && dirty} $error={error} $dirty={dirty} type="button">
+    <Container>
+      <AvatarWrapper $validated={validated && dirty} $error={error} $dirty={dirty} type="button">
         <Avatar label="profile-button-avatar" src={src} noBorder />
-        {!validated && !error && (
-          <IconMask>
-            <CameraIcon />
-          </IconMask>
-        )}
-        <input
-          type="file"
-          style={{ display: 'none' }}
-          accept="image/*"
-          ref={fileInputRef}
-          onChange={(e) => {
-            if (e.target.files?.[0]) {
-              onSelectOption?.('upload')
-              onAvatarFileChange?.(e.target.files[0])
-            }
-          }}
-        />
-      </Container>
-    </LegacyDropdown>
+      </AvatarWrapper>
+
+      <Dropdown
+        width={150}
+        direction="down"
+        items={
+          [
+            {
+              label: t('input.profileEditor.tabs.avatar.dropdown.selectNFT'),
+              color: 'black',
+              onClick: handleSelectOption('nft'),
+            },
+            {
+              label: t('input.profileEditor.tabs.avatar.dropdown.uploadImage'),
+              color: 'black',
+              onClick: handleSelectOption('upload'),
+            },
+            {
+              label: t('input.profileEditor.tabs.avatar.dropdown.enterManually'),
+              color: 'black',
+              onClick: handleSelectOption('manual'),
+            },
+            ...(validated
+              ? [
+                  {
+                    label: t('action.remove', { ns: 'common' }),
+                    color: 'red',
+                    onClick: handleSelectOption('remove'),
+                  },
+                ]
+              : []),
+          ] as DropdownItem[]
+        }
+        {...dropdownProps}
+      >
+        <ActionContainer>
+          {!!src && (
+            <Button disabled colorStyle="accentSecondary">
+              {src}
+            </Button>
+          )}
+          <div>
+            <Button colorStyle="accentSecondary">
+              {!!src
+                ? t('input.profileEditor.tabs.avatar.change')
+                : t('input.profileEditor.tabs.avatar.add')}
+            </Button>
+          </div>
+          <input
+            type="file"
+            style={{ display: 'none' }}
+            accept="image/*"
+            ref={fileInputRef}
+            onChange={(e) => {
+              if (e.target.files?.[0]) {
+                onSelectOption?.('upload')
+                onAvatarFileChange?.(e.target.files[0])
+              }
+            }}
+          />
+        </ActionContainer>
+      </Dropdown>
+    </Container>
   )
 }
 

src/components/@molecules/ProfileEditor/Avatar/AvatarManual.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Button, Dialog, Input } from '@ensdomains/thorin'
+
+type AvatarManualProps = {
+  avatar?: string
+  handleCancel: () => void
+  handleSubmit: (uri: string, display?: string) => void
+}
+
+function isValidValue(value: string, prevValue?: string) {
+  return !(prevValue && value === prevValue) && !!value.length
+}
+
+export function AvatarManual({ avatar, handleCancel, handleSubmit }: AvatarManualProps) {
+  const { t } = useTranslation('transactionFlow')
+
+  const [value, setValue] = useState<string>('')
+
+  const handleConfirm = () => {
+    try {
+      handleSubmit(value, value)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  return (
+    <>
+      <Dialog.Heading title={t('input.profileEditor.tabs.avatar.dropdown.enterManually')} />
+      <Dialog.Content>
+        <Input
+          label={t('input.profileEditor.tabs.avatar.label')}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </Dialog.Content>
+      <Dialog.Footer
+        leading={
+          <Button colorStyle="accentSecondary" onClick={() => handleCancel()}>
+            {t('action.back', { ns: 'common' })}
+          </Button>
+        }
+        trailing={
+          <Button disabled={!isValidValue(value, avatar)} onClick={handleConfirm}>
+            {t('action.confirm', { ns: 'common' })}
+          </Button>
+        }
+      />
+    </>
+  )
+}

src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.test.tsx

@@ -6,8 +6,8 @@ import { useAccount, useClient } from 'wagmi'
 
 import * as ThorinComponents from '@ensdomains/thorin'
 
-import { AvatarNFT } from './AvatarNFT'
 import { makeMockIntersectionObserver } from '../../../../../test/mock/makeMockIntersectionObserver'
+import { AvatarNFT } from './AvatarNFT'
 
 vi.mock('wagmi')
 
@@ -118,7 +118,6 @@ describe('<AvatarNFT />', () => {
     fireEvent.click(screen.getByText('action.confirm'))
     await waitFor(() =>
       expect(mockHandleSubmit).toHaveBeenCalledWith(
-        'nft',
         'eip155:1/erc1155:0x0/0',
         'https://localhost/test-media-gateway.png',
       ),

src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.tsx

@@ -264,7 +264,7 @@ export const AvatarNFT = ({
   handleSubmit,
 }: {
   handleCancel: () => void
-  handleSubmit: (type: 'nft', uri: string, display: string) => void
+  handleSubmit: (uri: string, display: string) => void
 }) => {
   const chain = useChainName()
   const { t } = useTranslation('transactionFlow')
@@ -333,7 +333,7 @@ export const AvatarNFT = ({
       const string = `eip155:1/${nftReference.id.tokenMetadata.tokenType.toLowerCase()}:${
         nftReference.contract.address
       }/${BigInt(nftReference.id.tokenId).toString()}`
-      handleSubmit('nft', string, nftReference.media[0].gateway)
+      handleSubmit(string, nftReference.media[0].gateway)
     }
 
     return (

src/components/@molecules/ProfileEditor/Avatar/AvatarUpload.test.tsx

@@ -5,8 +5,8 @@ import { useAccount, useSignTypedData } from 'wagmi'
 
 import { useChainName } from '@app/hooks/chain/useChainName'
 
-import { AvatarUpload } from './AvatarUpload'
 import { makeMockIntersectionObserver } from '../../../../../test/mock/makeMockIntersectionObserver'
+import { AvatarUpload } from './AvatarUpload'
 
 vi.mock('wagmi')
 
@@ -88,11 +88,7 @@ describe('<AvatarUpload />', () => {
     )
 
     await waitFor(() =>
-      expect(mockHandleSubmit).toHaveBeenCalledWith(
-        'upload',
-        'https://euc.li/test.eth',
-        mockFileDataURL,
-      ),
+      expect(mockHandleSubmit).toHaveBeenCalledWith('https://euc.li/test.eth', mockFileDataURL),
     )
   })
   it('calls handleSubmit with network path if network is not mainnet', async () => {