fix: custom receive address overlay on long addies (#8284)

* fix: custom receive address overlay on long addies * fix: textinputarea size and auto shrink text on longer size * fix: make textarea a teeny tiny bit smaller for regular sends * feat: teeny tiny bicicleta bit smaller fontSize for <= 42 chars in shared component * feat: mobile improvements --------- Co-authored-by: NeOMakinG <[email protected]>
shapeshift · Dec 8, 2024 · e9f4855 · e9f4855
1 parent 4951e9c
commit e9f4855
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/src/components/Modals/Send/AddressInput/AddressInput.tsx b/src/components/Modals/Send/AddressInput/AddressInput.tsx
@@ -1,5 +1,7 @@
+import type { SpaceProps } from '@chakra-ui/react'
 import { IconButton, Input, InputGroup, InputRightElement } from '@chakra-ui/react'
 import { useCallback } from 'react'
+import { isMobile } from 'react-device-detect'
 import type { ControllerProps, ControllerRenderProps, FieldValues } from 'react-hook-form'
 import { Controller, useFormContext } from 'react-hook-form'
 import { useTranslate } from 'react-polyglot'
@@ -13,11 +15,17 @@ type AddressInputProps = {
   rules: ControllerProps['rules']
   enableQr?: boolean
   placeholder?: string
+  pe?: SpaceProps['pe']
 }
 
 const qrCodeIcon = <QRCodeIcon />
 
-export const AddressInput = ({ rules, placeholder, enableQr = false }: AddressInputProps) => {
+export const AddressInput = ({
+  rules,
+  placeholder,
+  enableQr = false,
+  pe = 10,
+}: AddressInputProps) => {
   const history = useHistory()
   const translate = useTranslate()
   const isValid = useFormContext<SendInput>().formState.isValid
@@ -43,11 +51,24 @@ export const AddressInput = ({ rules, placeholder, enableQr = false }: AddressIn
         data-test='send-address-input'
         data-1p-ignore
         // Because the InputRightElement is hover the input, we need to let this space free
-        pe={10}
+        pe={pe}
         isInvalid={!isValid}
+        // This is already a `useCallback()`
+        // eslint-disable-next-line react-memo/require-usememo
+        sx={
+          isMobile
+            ? {
+                fontSize: value && value.length > 42 ? '9.8px' : '11px',
+                transition: 'font-size 0.2s ease-in-out',
+              }
+            : {
+                fontSize: value && value.length > 42 ? '12px' : '13.5px',
+                transition: 'font-size 0.2s ease-in-out',
+              }
+        }
       />
     ),
-    [isValid, placeholder],
+    [isValid, pe, placeholder],
   )
 
   return (

diff --git a/src/components/Modals/Send/views/Address.tsx b/src/components/Modals/Send/views/Address.tsx
@@ -2,6 +2,7 @@ import { Button, FormControl, FormLabel, Stack } from '@chakra-ui/react'
 import { ethChainId } from '@shapeshiftoss/caip'
 import get from 'lodash/get'
 import { useCallback, useEffect, useMemo, useState } from 'react'
+import { isMobile } from 'react-device-detect'
 import { useFormContext, useWatch } from 'react-hook-form'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router-dom'
@@ -108,6 +109,7 @@ export const Address = () => {
             {translate('modals.send.sendForm.sendTo')}
           </FormLabel>
           <AddressInput
+            pe={isMobile ? 12 : 9.5}
             rules={addressInputRules}
             enableQr={true}
             placeholder={translate(

diff --git a/src/components/MultiHopTrade/components/SharedTradeInput/SharedRecipientAddress.tsx b/src/components/MultiHopTrade/components/SharedTradeInput/SharedRecipientAddress.tsx
@@ -40,6 +40,8 @@ const editIcon = <EditIcon />
 const checkIcon = <CheckIcon />
 const closeIcon = <CloseIcon />
 
+const iconButtonHoverSx = { bg: 'gray.600' }
+
 type ManualRecipientAddressLabelsProps = {
   buyAsset: Asset
   manualAddressEntryDescription: string | undefined
@@ -266,6 +268,7 @@ export const SharedRecipientAddress = ({
             <AddressInput
               rules={rules}
               placeholder={translate('trade.enterCustomRecipientAddress')}
+              pe={16}
             />
             <InputRightElement
               width='full'
@@ -286,6 +289,9 @@ export const SharedRecipientAddress = ({
                 onClick={handleFormSubmit}
                 icon={checkIcon}
                 isLoading={isValidating}
+                borderRadius='full'
+                bg='gray.700'
+                _hover={iconButtonHoverSx}
               />
               <IconButton
                 pointerEvents='auto'
@@ -295,6 +301,9 @@ export const SharedRecipientAddress = ({
                 size='xs'
                 onClick={handleCancelClick}
                 isDisabled={isValidating}
+                borderRadius='full'
+                bg='gray.700'
+                _hover={iconButtonHoverSx}
               />
             </InputRightElement>
           </InputGroup>