Fix: AddressInput identicon (#2393)

safe-global · Aug 14, 2023 · 085aebc · 085aebc
1 parent a824270
commit 085aebc
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/components/common/AddressInput/index.tsx b/src/components/common/AddressInput/index.tsx
@@ -22,6 +22,7 @@ import SaveAddressIcon from '@/public/images/common/save-address.svg'
 import classnames from 'classnames'
 import css from './styles.module.css'
 import inputCss from '@/styles/inputs.module.css'
+import Identicon from '../Identicon'
 
 export type AddressInputProps = TextFieldProps & {
   name: string
@@ -128,8 +129,13 @@ const AddressInput = ({
 
           // Display the current short name in the adornment, unless the value contains the same prefix
           startAdornment: (
-            <InputAdornment position="end" sx={{ ml: 0 }}>
-              <Skeleton variant="circular" width={32} height={32} animation={false} sx={{ marginRight: '0.5em' }} />
+            <InputAdornment position="end" sx={{ ml: 0, gap: 1 }}>
+              {watchedValue && !fieldError ? (
+                <Identicon address={watchedValue} size={32} />
+              ) : (
+                <Skeleton variant="circular" width={32} height={32} animation={false} />
+              )}
+
               {!rawValueRef.current.startsWith(`${currentShortName}:`) && <>{currentShortName}:</>}
             </InputAdornment>
           ),