feat: show public delegate name under address input in delegation form

modules/delegation/ui/DelegationForm/DelegationForm.tsx

@@ -10,6 +10,7 @@ import { DelegationFormSubmitButton } from './DelegationFormSubmitButton'
 import { DelegationFormFootNote } from './DelegationFormFootNote'
 import { DelegationFormController } from './DelegationFormController'
 import { DelegationTxStatus } from './DelegationTxStatus'
+import { DelegationFormPublicDelegateTooltip } from './DelegationFormPublicDelegateTooltip'
 
 type Props = DelegationFormProviderProps & {
   onCustomizeClick?: () => void
@@ -22,6 +23,7 @@ export function DelegationForm({ onCustomizeClick, ...providerProps }: Props) {
         <DelegationFormSubtitle />
         <DelegationStatus />
         <DelegationAddressInput />
+        <DelegationFormPublicDelegateTooltip />
         <DelegationFormBalance onCustomizeClick={onCustomizeClick} />
         <DelegationFormSubmitButton onCustomizeClick={onCustomizeClick} />
         <DelegationFormFootNote />

modules/delegation/ui/DelegationForm/DelegationFormPublicDelegateTooltip.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react'
+import { useDelegationFormData } from 'modules/delegation/providers/DelegationFormContext'
+import { PublicDelegate } from 'modules/delegation/types'
+import { getPublicDelegateByAddress } from 'modules/delegation/utils/getPublicDelegateName'
+import { isValidAddress } from 'modules/shared/utils/addressValidation'
+import { DelegationFormFootNoteStyled } from './DelegationFormStyle'
+
+export function DelegationFormPublicDelegateTooltip() {
+  const { watch } = useDelegationFormData()
+  const [selectedPublicDelegate, setSelectedPublicDelegate] =
+    useState<PublicDelegate | null>(null)
+
+  useEffect(() => {
+    const { unsubscribe } = watch(({ delegateAddress }) => {
+      if (!delegateAddress) return
+
+      if (isValidAddress(delegateAddress)) {
+        const publicDelegate = getPublicDelegateByAddress(delegateAddress)
+        if (
+          publicDelegate &&
+          publicDelegate.address !== selectedPublicDelegate?.address
+        ) {
+          setSelectedPublicDelegate(publicDelegate)
+        }
+      }
+    })
+    return () => unsubscribe()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watch])
+
+  if (!selectedPublicDelegate) return null
+
+  return (
+    <DelegationFormFootNoteStyled>
+      Public delegate: <b>{selectedPublicDelegate.name}</b>
+    </DelegationFormFootNoteStyled>
+  )
+}