From 438e2734cbcb131ec354656b11e60ac8d9085f20 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 16 Oct 2023 17:31:20 +0100
Subject: [PATCH 1/7] add ability to add identity

---
 packages/ui/src/components/AccountDisplay.tsx |  45 ++-----
 .../components/EasySetup/BalancesTransfer.tsx |   2 +-
 .../EasySetup/IdentitySetIdentity.tsx         | 127 ++++++++++++++++++
 packages/ui/src/components/modals/Send.tsx    |  51 ++++---
 packages/ui/src/contexts/ModalsContext.tsx    |  23 +++-
 packages/ui/src/hooks/useIdentity.tsx         |  29 ++++
 .../ui/src/pages/Home/MultisigActionMenu.tsx  |  24 +++-
 7 files changed, 243 insertions(+), 58 deletions(-)
 create mode 100644 packages/ui/src/components/EasySetup/IdentitySetIdentity.tsx
 create mode 100644 packages/ui/src/hooks/useIdentity.tsx

diff --git a/packages/ui/src/components/AccountDisplay.tsx b/packages/ui/src/components/AccountDisplay.tsx
index 598b4732..a426a769 100644
--- a/packages/ui/src/components/AccountDisplay.tsx
+++ b/packages/ui/src/components/AccountDisplay.tsx
@@ -6,10 +6,10 @@ import { AccountBadge, IconSizeVariant } from '../types'
 import { getDisplayAddress } from '../utils'
 import IdenticonBadge from './IdenticonBadge'
 import { useApi } from '../contexts/ApiContext'
-import { DeriveAccountInfo, DeriveAccountRegistration } from '@polkadot/api-derive/types'
 import IdentityIcon from './IdentityIcon'
 import Balance from './library/Balance'
 import { useGetEncodedAddress } from '../hooks/useGetEncodedAddress'
+import { useIdentity } from '../hooks/useIdentity'
 
 interface Props {
   address: string
@@ -30,44 +30,27 @@ const AccountDisplay = ({
 }: Props) => {
   const { getNamesWithExtension } = useAccountNames()
   const localName = useMemo(() => getNamesWithExtension(address), [address, getNamesWithExtension])
-  const [identity, setIdentity] = useState<DeriveAccountRegistration | null>(null)
   const { api } = useApi()
   const [mainDisplay, setMainDisplay] = useState<string>('')
   const [sub, setSub] = useState<string | null>(null)
   const getEncodedAddress = useGetEncodedAddress()
   const encodedAddress = useMemo(() => getEncodedAddress(address), [address, getEncodedAddress])
+  const identity = useIdentity(address)
 
   useEffect(() => {
-    if (!api) {
-      return
-    }
-
-    let unsubscribe: () => void
-
-    api.derive.accounts
-      .info(address, (info: DeriveAccountInfo) => {
-        setIdentity(info.identity)
+    if (!identity) return
 
-        if (info.identity.displayParent && info.identity.display) {
-          // when an identity is a sub identity `displayParent` is set
-          // and `display` get the sub identity
-          setMainDisplay(info.identity.displayParent)
-          setSub(info.identity.display)
-        } else {
-          // There should not be a `displayParent` without a `display`
-          // but we can't be too sure.
-          setMainDisplay(
-            info.identity.displayParent || info.identity.display || info.nickname || ''
-          )
-        }
-      })
-      .then((unsub) => {
-        unsubscribe = unsub
-      })
-      .catch((e) => console.error(e))
-
-    return () => unsubscribe && unsubscribe()
-  }, [address, api])
+    if (identity.displayParent && identity.display) {
+      // when an identity is a sub identity `displayParent` is set
+      // and `display` get the sub identity
+      setMainDisplay(identity.displayParent)
+      setSub(identity.display)
+    } else {
+      // There should not be a `displayParent` without a `display`
+      // but we can't be too sure.
+      setMainDisplay(identity.displayParent || identity.display || '')
+    }
+  }, [address, api, identity])
 
   return (
     <div className={className}>
diff --git a/packages/ui/src/components/EasySetup/BalancesTransfer.tsx b/packages/ui/src/components/EasySetup/BalancesTransfer.tsx
index ac799483..4685af81 100644
--- a/packages/ui/src/components/EasySetup/BalancesTransfer.tsx
+++ b/packages/ui/src/components/EasySetup/BalancesTransfer.tsx
@@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles'
 import { SubmittableExtrinsic } from '@polkadot/api/types'
 import { ISubmittableResult } from '@polkadot/types/types'
 import GenericAccountSelection, { AccountBaseInfo } from '../select/GenericAccountSelection'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useApi } from '../../contexts/ApiContext'
 import { useCheckBalance } from '../../hooks/useCheckBalance'
 import BN from 'bn.js'
diff --git a/packages/ui/src/components/EasySetup/IdentitySetIdentity.tsx b/packages/ui/src/components/EasySetup/IdentitySetIdentity.tsx
new file mode 100644
index 00000000..43cb9554
--- /dev/null
+++ b/packages/ui/src/components/EasySetup/IdentitySetIdentity.tsx
@@ -0,0 +1,127 @@
+import { Grid } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { SubmittableExtrinsic } from '@polkadot/api/types'
+import { ISubmittableResult } from '@polkadot/types/types'
+import { useCallback, useEffect, useState } from 'react'
+import { useApi } from '../../contexts/ApiContext'
+import { TextFieldStyled } from '../library'
+import { useIdentity } from '../../hooks/useIdentity'
+
+interface Props {
+  className?: string
+  from: string
+  onSetExtrinsic: (ext?: SubmittableExtrinsic<'promise', ISubmittableResult>) => void
+}
+
+interface IdentityFields {
+  display: string | undefined
+  legal: string | undefined
+  web: string | undefined
+  riot: string | undefined
+  email: string | undefined
+  image: string | undefined
+  twitter: string | undefined
+}
+
+const getRawOrNone = (val: string | undefined) => {
+  return val
+    ? {
+        Raw: val
+      }
+    : { none: null }
+}
+const getExtrinsicsArgs = (identity: IdentityFields) => {
+  const { legal, display, email, image, riot, twitter, web } = identity
+
+  return {
+    additional: [],
+    display: getRawOrNone(display),
+    legal: getRawOrNone(legal),
+    web: getRawOrNone(web),
+    riot: getRawOrNone(riot),
+    email: getRawOrNone(email),
+    pgpFingerprint: null,
+    image: getRawOrNone(image),
+    twitter: getRawOrNone(twitter)
+  }
+}
+
+const IdentitySetIdentity = ({ className, onSetExtrinsic, from }: Props) => {
+  const { api, chainInfo } = useApi()
+  const [identity, setIdentity] = useState<IdentityFields | undefined>()
+  const chainIdentity = useIdentity(from)
+
+  useEffect(() => {
+    if (chainIdentity) {
+      const { display, email, legal, web, riot, twitter, image } = chainIdentity
+      setIdentity({
+        display,
+        legal,
+        web,
+        riot,
+        email,
+        image,
+        twitter
+      })
+    } else {
+      setIdentity({
+        display: undefined,
+        legal: undefined,
+        web: undefined,
+        riot: undefined,
+        email: undefined,
+        image: undefined,
+        twitter: undefined
+      })
+    }
+  }, [chainIdentity])
+
+  useEffect(() => {
+    if (!api) {
+      onSetExtrinsic(undefined)
+      return
+    }
+
+    if (!identity) {
+      onSetExtrinsic(undefined)
+      return
+    }
+
+    const extrinsicsArgs = getExtrinsicsArgs(identity)
+    onSetExtrinsic(api.tx.identity.setIdentity(extrinsicsArgs))
+  }, [api, chainInfo, identity, onSetExtrinsic])
+
+  const onChangeField = useCallback((field: keyof IdentityFields, value: string) => {
+    setIdentity((prev) => (prev ? { ...prev, [field]: value } : undefined))
+  }, [])
+
+  return (
+    <Grid
+      className={className}
+      container
+      spacing={1}
+    >
+      {identity &&
+        Object.entries(identity).map(([fieldName, value]) => (
+          <Grid
+            item
+            xs={12}
+            sm={6}
+            md={6}
+            alignItems="center"
+          >
+            <TextFieldStyled
+              data-cy={`${fieldName}-amount`}
+              label={fieldName}
+              onChange={(val) => onChangeField(fieldName as keyof IdentityFields, val.target.value)}
+              value={value || ''}
+            />
+          </Grid>
+        ))}
+    </Grid>
+  )
+}
+
+export default styled(IdentitySetIdentity)`
+  margin-top: 0.5rem;
+`
diff --git a/packages/ui/src/components/modals/Send.tsx b/packages/ui/src/components/modals/Send.tsx
index 6a3bf7c5..9b3b3e5c 100644
--- a/packages/ui/src/components/modals/Send.tsx
+++ b/packages/ui/src/components/modals/Send.tsx
@@ -20,19 +20,27 @@ import FromCallData from '../EasySetup/FromCallData'
 import { ModalCloseButton } from '../library/ModalCloseButton'
 import { formatBnBalance } from '../../utils/formatBnBalance'
 import { useGetMultisigTx } from '../../hooks/useGetMultisigTx'
+import IdentitySetIdentity from '../EasySetup/IdentitySetIdentity'
 
-const SEND_TOKEN_MENU = 'Send tokens'
-const FROM_CALL_DATA_MENU = 'From call data'
-const MANUEL_EXTRINSIC_MENU = 'Manual extrinsic'
+export const easyTransferTitle = [
+  'Send tokens',
+  'From call data',
+  'Manual extrinsic',
+  'Set identity'
+] as const
+
+export type EasyTransferTitle = (typeof easyTransferTitle)[number]
+export const DEFAULT_EASY_SETUP_SELECTION: EasyTransferTitle = 'Send tokens'
 
 interface Props {
+  preselected: EasyTransferTitle
   onClose: () => void
   className?: string
   onSuccess?: () => void
   onFinalized?: () => void
 }
 
-const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
+const Send = ({ onClose, className, onSuccess, onFinalized, preselected }: Props) => {
   const { getSubscanExtrinsicLink } = useGetSubscanLinks()
   const { api, chainInfo } = useApi()
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -66,7 +74,9 @@ const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
   const [extrinsicToCall, setExtrinsicToCall] = useState<
     SubmittableExtrinsic<'promise', ISubmittableResult> | undefined
   >()
-  const [selectedEasyOption, setSelectedEasyOption] = useState(SEND_TOKEN_MENU)
+  const [selectedEasyOption, setSelectedEasyOption] = useState<EasyTransferTitle>(
+    preselected || DEFAULT_EASY_SETUP_SELECTION
+  )
   const multisigTx = useGetMultisigTx({
     selectedMultisig,
     extrinsicToCall,
@@ -119,24 +129,30 @@ const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
     [getMultisigByAddress, selectedMultiProxy]
   )
 
-  const easySetupOptions: { [index: string]: ReactNode } = useMemo(() => {
+  const easySetupOptions: Record<EasyTransferTitle, ReactNode> = useMemo(() => {
     return {
-      [SEND_TOKEN_MENU]: (
+      'Send tokens': (
         <BalancesTransfer
           from={selectedOrigin.address}
           onSetExtrinsic={setExtrinsicToCall}
           onSetErrorMessage={setEasyOptionErrorMessage}
         />
       ),
-      [MANUEL_EXTRINSIC_MENU]: (
+      'Set identity': (
+        <IdentitySetIdentity
+          from={selectedOrigin.address}
+          onSetExtrinsic={setExtrinsicToCall}
+        />
+      ),
+      'Manual extrinsic': (
         <ManualExtrinsic
           onSetExtrinsic={setExtrinsicToCall}
           onSetErrorMessage={setEasyOptionErrorMessage}
-          onSelectFromCallData={() => setSelectedEasyOption(FROM_CALL_DATA_MENU)}
+          onSelectFromCallData={() => setSelectedEasyOption('From call data')}
           hasErrorMessage={!!easyOptionErrorMessage}
         />
       ),
-      [FROM_CALL_DATA_MENU]: (
+      'From call data': (
         <FromCallData
           onSetExtrinsic={setExtrinsicToCall}
           onSetErrorMessage={setEasyOptionErrorMessage}
@@ -218,16 +234,21 @@ const Send = ({ onClose, className, onSuccess, onFinalized }: Props) => {
     getSubscanExtrinsicLink
   ])
 
-  const onChangeEasySetupOption = useCallback(
-    ({ target: { value } }: SelectChangeEvent<unknown>) => {
-      if (typeof value !== 'string') {
-        console.error('Unexpected network value, expect string but received', value)
+  const onChangeEasySetupOption: (event: SelectChangeEvent<unknown>) => void = useCallback(
+    ({ target: { value } }) => {
+      if (typeof value !== 'string' && !easyTransferTitle.includes(value as EasyTransferTitle)) {
+        console.error(
+          'Unexpected selection, expect one of',
+          easyTransferTitle,
+          'but received',
+          value
+        )
         return
       }
 
       setErrorMessage('')
       setEasyOptionErrorMessage('')
-      setSelectedEasyOption(value)
+      setSelectedEasyOption(value as EasyTransferTitle)
     },
     []
   )
diff --git a/packages/ui/src/contexts/ModalsContext.tsx b/packages/ui/src/contexts/ModalsContext.tsx
index 99a600a0..c0d49a38 100644
--- a/packages/ui/src/contexts/ModalsContext.tsx
+++ b/packages/ui/src/contexts/ModalsContext.tsx
@@ -1,7 +1,7 @@
 import { useState, useContext, createContext, useCallback } from 'react'
 import ChangeMultisig from '../components/modals/ChangeMultisig'
 import EditNames from '../components/modals/EditNames'
-import Send from '../components/modals/Send'
+import Send, { DEFAULT_EASY_SETUP_SELECTION, EasyTransferTitle } from '../components/modals/Send'
 import { usePendingTx } from '../hooks/usePendingTx'
 import { SignClientTypes } from '@walletconnect/types'
 import WCSessionProposal from '../components/modals/WalletConnectSessionProposal'
@@ -11,7 +11,8 @@ import WalletConnectSigning from '../components/modals/WalletConnectSigning'
 interface ModalsContextProps {
   setIsEditModalOpen: (isOpen: boolean) => void
   setIsChangeMultiModalOpen: (isOpen: boolean) => void
-  setIsSendModalOpen: (isOpen: boolean) => void
+  onOpenSendModal: (preselected?: EasyTransferTitle) => void
+  onCloseSendModal: () => void
   openWalletConnectSessionModal: ({ sessionProposal }: OpenWCModalParams) => void
   onOpenSigningModal: (info: SigningInfo) => void
   onOpenWalletConnectSigning: (request: SignClientTypes.EventArguments['session_request']) => void
@@ -33,6 +34,9 @@ const ModalsContextProvider: React.FC<React.PropsWithChildren> = ({ children })
   const [isSigningModalOpen, setIsSigningModalOpen] = useState(false)
   const [signingModalInfo, setSigningModalInfo] = useState<SigningInfo | undefined>()
   const [isOpenWalletConnectSigning, setIsOpenWalletConnectSigning] = useState(false)
+  const [sendModalPreselection, setSendModalPreselection] = useState<EasyTransferTitle>(
+    DEFAULT_EASY_SETUP_SELECTION
+  )
   const [walletConnectRequest, setWalletConnectRequest] = useState<
     SignClientTypes.EventArguments['session_request'] | undefined
   >()
@@ -41,7 +45,6 @@ const ModalsContextProvider: React.FC<React.PropsWithChildren> = ({ children })
     OpenWCModalParams['sessionProposal'] | undefined
   >()
   const { refresh } = usePendingTx()
-  const onCloseSendModal = useCallback(() => setIsSendModalOpen(false), [setIsSendModalOpen])
   const onCloseEditModal = useCallback(() => setIsEditModalOpen(false), [setIsEditModalOpen])
   const onCloseChangeMultiModal = useCallback(
     () => setIsChangeMultiModalOpen(false),
@@ -52,6 +55,16 @@ const ModalsContextProvider: React.FC<React.PropsWithChildren> = ({ children })
     setSigningModalInfo(undefined)
   }, [])
 
+  const onOpenSendModal = useCallback((preselection?: EasyTransferTitle) => {
+    preselection && setSendModalPreselection(preselection)
+    setIsSendModalOpen(true)
+  }, [])
+
+  const onCloseSendModal = useCallback(() => {
+    setIsSendModalOpen(false)
+    setSendModalPreselection(DEFAULT_EASY_SETUP_SELECTION)
+  }, [])
+
   const onSuccessSendModal = useCallback(() => {
     onCloseSendModal()
     refresh()
@@ -93,7 +106,8 @@ const ModalsContextProvider: React.FC<React.PropsWithChildren> = ({ children })
       value={{
         setIsEditModalOpen,
         setIsChangeMultiModalOpen,
-        setIsSendModalOpen,
+        onOpenSendModal,
+        onCloseSendModal,
         openWalletConnectSessionModal,
         onOpenSigningModal,
         onOpenWalletConnectSigning
@@ -102,6 +116,7 @@ const ModalsContextProvider: React.FC<React.PropsWithChildren> = ({ children })
       {children}
       {isSendModalOpen && (
         <Send
+          preselected={sendModalPreselection}
           onClose={onCloseSendModal}
           onSuccess={onSuccessSendModal}
           onFinalized={onFinalizedSendModal}
diff --git a/packages/ui/src/hooks/useIdentity.tsx b/packages/ui/src/hooks/useIdentity.tsx
new file mode 100644
index 00000000..90f0bb28
--- /dev/null
+++ b/packages/ui/src/hooks/useIdentity.tsx
@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react'
+import { useApi } from '../contexts/ApiContext'
+import { DeriveAccountInfo, DeriveAccountRegistration } from '@polkadot/api-derive/types'
+
+export const useIdentity = (address: string) => {
+  const { api } = useApi()
+  const [identity, setIdentity] = useState<DeriveAccountRegistration | null>(null)
+
+  useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    let unsubscribe: () => void
+
+    api.derive.accounts
+      .info(address, (info: DeriveAccountInfo) => {
+        setIdentity(info.identity)
+      })
+      .then((unsub) => {
+        unsubscribe = unsub
+      })
+      .catch((e) => console.error(e))
+
+    return () => unsubscribe && unsubscribe()
+  }, [address, api])
+
+  return identity
+}
diff --git a/packages/ui/src/pages/Home/MultisigActionMenu.tsx b/packages/ui/src/pages/Home/MultisigActionMenu.tsx
index 2ffa0fbe..f2598deb 100644
--- a/packages/ui/src/pages/Home/MultisigActionMenu.tsx
+++ b/packages/ui/src/pages/Home/MultisigActionMenu.tsx
@@ -5,7 +5,10 @@ import { HiOutlinePencil } from 'react-icons/hi2'
 import { MdOutlineLockReset as LockResetIcon } from 'react-icons/md'
 import { useMultiProxy } from '../../contexts/MultiProxyContext'
 import { useModals } from '../../contexts/ModalsContext'
-import { HiOutlineArrowTopRightOnSquare as LaunchIcon } from 'react-icons/hi2'
+import {
+  HiOutlineArrowTopRightOnSquare as LaunchIcon,
+  HiOutlineUserPlus as IdentityIcon
+} from 'react-icons/hi2'
 import { useGetSubscanLinks } from '../../hooks/useSubscanLink'
 
 interface MultisigActionMenuProps {
@@ -18,7 +21,7 @@ const MultisigActionMenu = ({
   menuButtonBorder
 }: MultisigActionMenuProps) => {
   const { selectedHasProxy, selectedIsWatched, selectedMultiProxy } = useMultiProxy()
-  const { setIsEditModalOpen, setIsChangeMultiModalOpen, setIsSendModalOpen } = useModals()
+  const { setIsEditModalOpen, setIsChangeMultiModalOpen, onOpenSendModal } = useModals()
   const { getSubscanAccountLink } = useGetSubscanLinks()
 
   const options: MenuOption[] = useMemo(() => {
@@ -40,6 +43,12 @@ const MultisigActionMenu = ({
       }
     ]
 
+    !selectedIsWatched &&
+      opts.push({
+        text: 'Set identity',
+        icon: <IdentityIcon size={20} />,
+        onClick: () => onOpenSendModal('Set identity')
+      })
     // allow rotation only for the multisigs with a proxy
     selectedHasProxy &&
       !selectedIsWatched &&
@@ -62,12 +71,13 @@ const MultisigActionMenu = ({
 
     return opts
   }, [
-    selectedHasProxy,
     selectedIsWatched,
-    getSubscanAccountLink,
+    selectedHasProxy,
+    setIsEditModalOpen,
     selectedMultiProxy,
-    setIsChangeMultiModalOpen,
-    setIsEditModalOpen
+    getSubscanAccountLink,
+    onOpenSendModal,
+    setIsChangeMultiModalOpen
   ])
 
   return (
@@ -76,7 +86,7 @@ const MultisigActionMenu = ({
         <Button
           variant="primary"
           aria-label="send"
-          onClick={() => setIsSendModalOpen(true)}
+          onClick={() => onOpenSendModal()}
           data-cy="button-new-transaction"
         >
           New transaction

From 5f0d359c451f7c4ad907150344c4888c1a7953f0 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Tue, 17 Oct 2023 13:00:47 +0100
Subject: [PATCH 2/7] wip

---
 .../EasySetup/IdentitySetIdentity.tsx         | 127 -------------
 .../src/components/EasySetup/SetIdentity.tsx  | 173 ++++++++++++++++++
 packages/ui/src/components/modals/Send.tsx    |   2 +-
 3 files changed, 174 insertions(+), 128 deletions(-)
 delete mode 100644 packages/ui/src/components/EasySetup/IdentitySetIdentity.tsx
 create mode 100644 packages/ui/src/components/EasySetup/SetIdentity.tsx

diff --git a/packages/ui/src/components/EasySetup/IdentitySetIdentity.tsx b/packages/ui/src/components/EasySetup/IdentitySetIdentity.tsx
deleted file mode 100644
index 43cb9554..00000000
--- a/packages/ui/src/components/EasySetup/IdentitySetIdentity.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import { Grid } from '@mui/material'
-import { styled } from '@mui/material/styles'
-import { SubmittableExtrinsic } from '@polkadot/api/types'
-import { ISubmittableResult } from '@polkadot/types/types'
-import { useCallback, useEffect, useState } from 'react'
-import { useApi } from '../../contexts/ApiContext'
-import { TextFieldStyled } from '../library'
-import { useIdentity } from '../../hooks/useIdentity'
-
-interface Props {
-  className?: string
-  from: string
-  onSetExtrinsic: (ext?: SubmittableExtrinsic<'promise', ISubmittableResult>) => void
-}
-
-interface IdentityFields {
-  display: string | undefined
-  legal: string | undefined
-  web: string | undefined
-  riot: string | undefined
-  email: string | undefined
-  image: string | undefined
-  twitter: string | undefined
-}
-
-const getRawOrNone = (val: string | undefined) => {
-  return val
-    ? {
-        Raw: val
-      }
-    : { none: null }
-}
-const getExtrinsicsArgs = (identity: IdentityFields) => {
-  const { legal, display, email, image, riot, twitter, web } = identity
-
-  return {
-    additional: [],
-    display: getRawOrNone(display),
-    legal: getRawOrNone(legal),
-    web: getRawOrNone(web),
-    riot: getRawOrNone(riot),
-    email: getRawOrNone(email),
-    pgpFingerprint: null,
-    image: getRawOrNone(image),
-    twitter: getRawOrNone(twitter)
-  }
-}
-
-const IdentitySetIdentity = ({ className, onSetExtrinsic, from }: Props) => {
-  const { api, chainInfo } = useApi()
-  const [identity, setIdentity] = useState<IdentityFields | undefined>()
-  const chainIdentity = useIdentity(from)
-
-  useEffect(() => {
-    if (chainIdentity) {
-      const { display, email, legal, web, riot, twitter, image } = chainIdentity
-      setIdentity({
-        display,
-        legal,
-        web,
-        riot,
-        email,
-        image,
-        twitter
-      })
-    } else {
-      setIdentity({
-        display: undefined,
-        legal: undefined,
-        web: undefined,
-        riot: undefined,
-        email: undefined,
-        image: undefined,
-        twitter: undefined
-      })
-    }
-  }, [chainIdentity])
-
-  useEffect(() => {
-    if (!api) {
-      onSetExtrinsic(undefined)
-      return
-    }
-
-    if (!identity) {
-      onSetExtrinsic(undefined)
-      return
-    }
-
-    const extrinsicsArgs = getExtrinsicsArgs(identity)
-    onSetExtrinsic(api.tx.identity.setIdentity(extrinsicsArgs))
-  }, [api, chainInfo, identity, onSetExtrinsic])
-
-  const onChangeField = useCallback((field: keyof IdentityFields, value: string) => {
-    setIdentity((prev) => (prev ? { ...prev, [field]: value } : undefined))
-  }, [])
-
-  return (
-    <Grid
-      className={className}
-      container
-      spacing={1}
-    >
-      {identity &&
-        Object.entries(identity).map(([fieldName, value]) => (
-          <Grid
-            item
-            xs={12}
-            sm={6}
-            md={6}
-            alignItems="center"
-          >
-            <TextFieldStyled
-              data-cy={`${fieldName}-amount`}
-              label={fieldName}
-              onChange={(val) => onChangeField(fieldName as keyof IdentityFields, val.target.value)}
-              value={value || ''}
-            />
-          </Grid>
-        ))}
-    </Grid>
-  )
-}
-
-export default styled(IdentitySetIdentity)`
-  margin-top: 0.5rem;
-`
diff --git a/packages/ui/src/components/EasySetup/SetIdentity.tsx b/packages/ui/src/components/EasySetup/SetIdentity.tsx
new file mode 100644
index 00000000..1aa0c606
--- /dev/null
+++ b/packages/ui/src/components/EasySetup/SetIdentity.tsx
@@ -0,0 +1,173 @@
+import { Grid } from '@mui/material'
+import { styled } from '@mui/material/styles'
+import { SubmittableExtrinsic } from '@polkadot/api/types'
+import { ISubmittableResult } from '@polkadot/types/types'
+import { useCallback, useEffect, useState } from 'react'
+import { useApi } from '../../contexts/ApiContext'
+import { TextFieldStyled } from '../library'
+import { useIdentity } from '../../hooks/useIdentity'
+
+interface Props {
+  className?: string
+  from: string
+  onSetExtrinsic: (ext?: SubmittableExtrinsic<'promise', ISubmittableResult>) => void
+}
+
+interface IdentityFields {
+  display: string | undefined
+  legal: string | undefined
+  web: string | undefined
+  riot: string | undefined
+  email: string | undefined
+  twitter: string | undefined
+}
+
+const getRawOrNone = (val: string | undefined) => {
+  return val
+    ? {
+        Raw: val
+      }
+    : { none: null }
+}
+const getExtrinsicsArgs = ({ legal, display, email, riot, twitter, web }: IdentityFields) => {
+  return {
+    additional: [],
+    display: getRawOrNone(display),
+    legal: getRawOrNone(legal),
+    web: getRawOrNone(web),
+    riot: getRawOrNone(riot),
+    email: getRawOrNone(email),
+    pgpFingerprint: null,
+    twitter: getRawOrNone(twitter)
+  }
+}
+
+const fieldNameAndPlaceholder = (fieldName: keyof IdentityFields) => {
+  switch (fieldName) {
+    case 'display':
+      return {
+        field: 'display name',
+        placeholder: 'Luke'
+      }
+
+    case 'legal':
+      return {
+        field: 'legal name',
+        placeholder: 'Luke Skylwalker'
+      }
+
+    case 'riot':
+      return {
+        field: 'element handle',
+        placeholder: '@luke:matrix.org'
+      }
+
+    case 'web':
+      return {
+        field: 'website',
+        placeholder: 'https://luke.sky'
+      }
+
+    case 'twitter':
+      return {
+        field: 'twitter/X handle',
+        placeholder: '@luke'
+      }
+
+    case 'email':
+      return {
+        field: 'email',
+        placeholder: 'hello@luke.sky'
+      }
+
+    default:
+      return {
+        field: fieldName,
+        placeholder: ''
+      }
+  }
+}
+
+const SetIdentity = ({ className, onSetExtrinsic, from }: Props) => {
+  const { api, chainInfo } = useApi()
+  const [identityFields, setIdentityFields] = useState<IdentityFields | undefined>()
+  const chainIdentity = useIdentity(from)
+
+  useEffect(() => {
+    if (chainIdentity) {
+      const { display, email, legal, web, riot, twitter } = chainIdentity
+      setIdentityFields({
+        display,
+        legal,
+        web,
+        riot,
+        email,
+        twitter
+      })
+    } else {
+      setIdentityFields({
+        display: undefined,
+        legal: undefined,
+        web: undefined,
+        riot: undefined,
+        email: undefined,
+        twitter: undefined
+      })
+    }
+  }, [chainIdentity])
+
+  useEffect(() => {
+    if (!api) {
+      onSetExtrinsic(undefined)
+      return
+    }
+
+    if (!identityFields) {
+      onSetExtrinsic(undefined)
+      return
+    }
+
+    const extrinsicsArgs = getExtrinsicsArgs(identityFields)
+    onSetExtrinsic(api.tx.identity.setIdentity(extrinsicsArgs))
+  }, [api, chainInfo, identityFields, onSetExtrinsic])
+
+  const onChangeField = useCallback((field: keyof IdentityFields, value: string) => {
+    setIdentityFields((prev) => (prev ? { ...prev, [field]: value } : undefined))
+  }, [])
+
+  return (
+    <Grid
+      className={className}
+      container
+      spacing={1}
+    >
+      {identityFields &&
+        Object.entries(identityFields).map(([fieldName, value]) => {
+          const { field, placeholder } = fieldNameAndPlaceholder(fieldName as keyof IdentityFields)
+          return (
+            <Grid
+              item
+              xs={12}
+              sm={6}
+              md={6}
+              alignItems="center"
+            >
+              <TextFieldStyled
+                data-cy={`${fieldName}-identity`}
+                label={field}
+                placeholder={placeholder}
+                onChange={(val) =>
+                  onChangeField(fieldName as keyof IdentityFields, val.target.value)
+                }
+                value={value || ''}
+              />
+            </Grid>
+          )
+        })}
+    </Grid>
+  )
+}
+
+export default styled(SetIdentity)`
+  margin-top: 0.5rem;
+`
diff --git a/packages/ui/src/components/modals/Send.tsx b/packages/ui/src/components/modals/Send.tsx
index 9b3b3e5c..8d82b1dc 100644
--- a/packages/ui/src/components/modals/Send.tsx
+++ b/packages/ui/src/components/modals/Send.tsx
@@ -20,7 +20,7 @@ import FromCallData from '../EasySetup/FromCallData'
 import { ModalCloseButton } from '../library/ModalCloseButton'
 import { formatBnBalance } from '../../utils/formatBnBalance'
 import { useGetMultisigTx } from '../../hooks/useGetMultisigTx'
-import IdentitySetIdentity from '../EasySetup/IdentitySetIdentity'
+import IdentitySetIdentity from '../EasySetup/SetIdentity'
 
 export const easyTransferTitle = [
   'Send tokens',

From 7a9c7d3d991f950a21e54b36c9a33fea2673908b Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Tue, 17 Oct 2023 13:42:37 +0100
Subject: [PATCH 3/7] remove log

---
 packages/ui/src/components/EasySetup/ManualExtrinsic.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/src/components/EasySetup/ManualExtrinsic.tsx b/packages/ui/src/components/EasySetup/ManualExtrinsic.tsx
index c759aae3..429e0df8 100644
--- a/packages/ui/src/components/EasySetup/ManualExtrinsic.tsx
+++ b/packages/ui/src/components/EasySetup/ManualExtrinsic.tsx
@@ -118,7 +118,6 @@ const ManualExtrinsic = ({
   const isValidAmountString = useCallback(
     (value: any) => {
       if (!value.match(/^[0-9]+([.][0-9]+)?$/)) {
-        console.log('wrong boom')
         onSetErrorMessage('Only numbers and "." are accepted.')
         return false
       }

From b236a5db75186cafdbe085fdf278348f12774100 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Tue, 17 Oct 2023 14:56:49 +0100
Subject: [PATCH 4/7] with errors

---
 .../components/EasySetup/BalancesTransfer.tsx |  4 +-
 .../src/components/EasySetup/FromCallData.tsx |  4 +-
 .../src/components/EasySetup/SetIdentity.tsx  | 91 +++++++++++++++----
 packages/ui/src/components/library/index.tsx  |  4 +-
 .../src/components/modals/ProposalSigning.tsx |  4 +-
 packages/ui/src/components/modals/Send.tsx    |  5 +-
 .../select/GenericAccountSelection.tsx        |  4 +-
 .../ui/src/pages/Creation/NameSelection.tsx   |  4 +-
 .../src/pages/Creation/ThresholdSelection.tsx |  4 +-
 9 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/packages/ui/src/components/EasySetup/BalancesTransfer.tsx b/packages/ui/src/components/EasySetup/BalancesTransfer.tsx
index 4685af81..0937de14 100644
--- a/packages/ui/src/components/EasySetup/BalancesTransfer.tsx
+++ b/packages/ui/src/components/EasySetup/BalancesTransfer.tsx
@@ -8,7 +8,7 @@ import { useApi } from '../../contexts/ApiContext'
 import { useCheckBalance } from '../../hooks/useCheckBalance'
 import BN from 'bn.js'
 import { getGlobalMaxValue, inputToBn } from '../../utils'
-import { TextFieldStyled } from '../library'
+import { TextField } from '../library'
 import { getOptionLabel } from '../../utils/getOptionLabel'
 import { useAccountBaseFromAccountList } from '../../hooks/useAccountBaseFromAccountList'
 
@@ -123,7 +123,7 @@ const BalancesTransfer = ({ className, onSetExtrinsic, onSetErrorMessage, from }
         accountList={accountBase}
         testId="field-to"
       />
-      <TextFieldStyled
+      <TextField
         data-cy="field-amount"
         label={`Amount`}
         onChange={onAmountChange}
diff --git a/packages/ui/src/components/EasySetup/FromCallData.tsx b/packages/ui/src/components/EasySetup/FromCallData.tsx
index 7aa603ea..c2f08fa8 100644
--- a/packages/ui/src/components/EasySetup/FromCallData.tsx
+++ b/packages/ui/src/components/EasySetup/FromCallData.tsx
@@ -4,7 +4,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/types'
 import { ISubmittableResult } from '@polkadot/types/types'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useApi } from '../../contexts/ApiContext'
-import { TextFieldStyled } from '../library'
+import { TextField } from '../library'
 import CallInfo from '../CallInfo'
 import { useCallInfoFromCallData } from '../../hooks/useCallInfoFromCallData'
 import { HexString } from '../../types'
@@ -96,7 +96,7 @@ const FromCallData = ({ className, onSetExtrinsic, isProxySelected, onSetErrorMe
           Multix will override the proxy.proxy call with the proxy you have selected
         </AlertStyled>
       )}
-      <TextFieldStyled
+      <TextField
         label={`Call data`}
         onChange={onCallDataChange}
         value={pastedCallData || ''}
diff --git a/packages/ui/src/components/EasySetup/SetIdentity.tsx b/packages/ui/src/components/EasySetup/SetIdentity.tsx
index 1aa0c606..a44932c9 100644
--- a/packages/ui/src/components/EasySetup/SetIdentity.tsx
+++ b/packages/ui/src/components/EasySetup/SetIdentity.tsx
@@ -2,18 +2,19 @@ import { Grid } from '@mui/material'
 import { styled } from '@mui/material/styles'
 import { SubmittableExtrinsic } from '@polkadot/api/types'
 import { ISubmittableResult } from '@polkadot/types/types'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useApi } from '../../contexts/ApiContext'
-import { TextFieldStyled } from '../library'
+import { TextField } from '../library'
 import { useIdentity } from '../../hooks/useIdentity'
 
 interface Props {
   className?: string
   from: string
   onSetExtrinsic: (ext?: SubmittableExtrinsic<'promise', ISubmittableResult>) => void
+  onSetErrorMessage: React.Dispatch<React.SetStateAction<string>>
 }
 
-interface IdentityFields {
+type IdentityFields = {
   display: string | undefined
   legal: string | undefined
   web: string | undefined
@@ -46,52 +47,86 @@ const fieldNameAndPlaceholder = (fieldName: keyof IdentityFields) => {
   switch (fieldName) {
     case 'display':
       return {
-        field: 'display name',
-        placeholder: 'Luke'
+        field: 'Display name',
+        placeholder: 'Luke',
+        required: true
       }
 
     case 'legal':
       return {
-        field: 'legal name',
-        placeholder: 'Luke Skylwalker'
+        field: 'Legal name',
+        placeholder: 'Luke Skylwalker',
+        required: false
       }
 
     case 'riot':
       return {
-        field: 'element handle',
-        placeholder: '@luke:matrix.org'
+        field: 'Element handle',
+        placeholder: '@luke:matrix.org',
+        required: false
       }
 
     case 'web':
       return {
-        field: 'website',
-        placeholder: 'https://luke.sky'
+        field: 'Website',
+        placeholder: 'https://luke.sky',
+        required: false
       }
 
     case 'twitter':
       return {
-        field: 'twitter/X handle',
-        placeholder: '@luke'
+        field: 'Twitter/X handle',
+        placeholder: '@luke',
+        required: false
       }
 
     case 'email':
       return {
-        field: 'email',
-        placeholder: 'hello@luke.sky'
+        field: 'Email',
+        placeholder: 'hello@luke.sky',
+        required: false
       }
 
     default:
       return {
         field: fieldName,
-        placeholder: ''
+        placeholder: '',
+        required: false
       }
   }
 }
 
-const SetIdentity = ({ className, onSetExtrinsic, from }: Props) => {
+const MAX_ALLOWED_VAL_LENGTH = 32
+
+const SetIdentity = ({ className, onSetExtrinsic, from, onSetErrorMessage }: Props) => {
   const { api, chainInfo } = useApi()
   const [identityFields, setIdentityFields] = useState<IdentityFields | undefined>()
   const chainIdentity = useIdentity(from)
+  const fieldtooLongError = useMemo(() => {
+    const res: (keyof IdentityFields)[] = []
+    identityFields &&
+      Object.entries(identityFields).forEach(([field, value]) => {
+        if (typeof value === 'string' && value.length >= MAX_ALLOWED_VAL_LENGTH) {
+          res.push(field as keyof IdentityFields)
+        }
+      })
+
+    return res
+  }, [identityFields])
+
+  useEffect(() => {
+    if (fieldtooLongError.length > 0) {
+      onSetErrorMessage(`A field exceeds the ${MAX_ALLOWED_VAL_LENGTH} character limit`)
+      return
+    }
+
+    if (!identityFields?.display) {
+      onSetErrorMessage('Display name is required')
+      return
+    }
+
+    onSetErrorMessage('')
+  }, [fieldtooLongError, identityFields?.display, onSetErrorMessage])
 
   useEffect(() => {
     if (chainIdentity) {
@@ -127,9 +162,14 @@ const SetIdentity = ({ className, onSetExtrinsic, from }: Props) => {
       return
     }
 
+    if (fieldtooLongError.length > 0) {
+      onSetExtrinsic(undefined)
+      return
+    }
+
     const extrinsicsArgs = getExtrinsicsArgs(identityFields)
     onSetExtrinsic(api.tx.identity.setIdentity(extrinsicsArgs))
-  }, [api, chainInfo, identityFields, onSetExtrinsic])
+  }, [api, chainInfo, fieldtooLongError, identityFields, onSetErrorMessage, onSetExtrinsic])
 
   const onChangeField = useCallback((field: keyof IdentityFields, value: string) => {
     setIdentityFields((prev) => (prev ? { ...prev, [field]: value } : undefined))
@@ -143,7 +183,11 @@ const SetIdentity = ({ className, onSetExtrinsic, from }: Props) => {
     >
       {identityFields &&
         Object.entries(identityFields).map(([fieldName, value]) => {
-          const { field, placeholder } = fieldNameAndPlaceholder(fieldName as keyof IdentityFields)
+          const { field, placeholder, required } = fieldNameAndPlaceholder(
+            fieldName as keyof IdentityFields
+          )
+          const isFieldError = fieldtooLongError.includes(fieldName as keyof IdentityFields)
+          const isDiplayAndEmpty = fieldName === 'display' && !value
           return (
             <Grid
               item
@@ -160,6 +204,9 @@ const SetIdentity = ({ className, onSetExtrinsic, from }: Props) => {
                   onChangeField(fieldName as keyof IdentityFields, val.target.value)
                 }
                 value={value || ''}
+                required={required}
+                helperText={isFieldError && `Field has more than ${MAX_ALLOWED_VAL_LENGTH} chars`}
+                error={isFieldError || isDiplayAndEmpty}
               />
             </Grid>
           )
@@ -168,6 +215,12 @@ const SetIdentity = ({ className, onSetExtrinsic, from }: Props) => {
   )
 }
 
+const TextFieldStyled = styled(TextField)`
+  .MuiFormHelperText-root.Mui-error {
+    position: initial;
+  }
+`
+
 export default styled(SetIdentity)`
   margin-top: 0.5rem;
 `
diff --git a/packages/ui/src/components/library/index.tsx b/packages/ui/src/components/library/index.tsx
index d906028d..9d97caa9 100644
--- a/packages/ui/src/components/library/index.tsx
+++ b/packages/ui/src/components/library/index.tsx
@@ -1,7 +1,7 @@
 import { Button, ButtonWithIcon } from './Button'
 import { Link, RouterLink, NavLink } from './Link'
 import { InputField } from './InputField'
-import TextFieldStyled from './TextFieldStyled'
+import TextField from './TextFieldStyled'
 import TextFieldLargeStyled from './TextFieldLargeStyled'
 import Select from './Select'
 import Autocomplete from './Autocomplete'
@@ -16,7 +16,7 @@ export {
   NavLink,
   RouterLink,
   InputField,
-  TextFieldStyled,
+  TextField,
   TextFieldLargeStyled,
   Select
 }
diff --git a/packages/ui/src/components/modals/ProposalSigning.tsx b/packages/ui/src/components/modals/ProposalSigning.tsx
index 73532652..bc0a485f 100644
--- a/packages/ui/src/components/modals/ProposalSigning.tsx
+++ b/packages/ui/src/components/modals/ProposalSigning.tsx
@@ -1,5 +1,5 @@
 import { Alert, CircularProgress, Dialog, DialogContent, DialogTitle, Grid } from '@mui/material'
-import { Button, TextFieldStyled } from '../library'
+import { Button, TextField } from '../library'
 import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import { styled } from '@mui/material/styles'
 import { useAccounts } from '../../contexts/AccountsContext'
@@ -311,7 +311,7 @@ const ProposalSigning = ({
                 xs={12}
                 md={6}
               >
-                <TextFieldStyled
+                <TextField
                   className="addedCallData"
                   label={`Call data ${mustSubmitCallData ? '' : '(optional)'}`}
                   onChange={onAddedCallDataChange}
diff --git a/packages/ui/src/components/modals/Send.tsx b/packages/ui/src/components/modals/Send.tsx
index 8d82b1dc..59f29a39 100644
--- a/packages/ui/src/components/modals/Send.tsx
+++ b/packages/ui/src/components/modals/Send.tsx
@@ -20,7 +20,7 @@ import FromCallData from '../EasySetup/FromCallData'
 import { ModalCloseButton } from '../library/ModalCloseButton'
 import { formatBnBalance } from '../../utils/formatBnBalance'
 import { useGetMultisigTx } from '../../hooks/useGetMultisigTx'
-import IdentitySetIdentity from '../EasySetup/SetIdentity'
+import SetIdentity from '../EasySetup/SetIdentity'
 
 export const easyTransferTitle = [
   'Send tokens',
@@ -139,9 +139,10 @@ const Send = ({ onClose, className, onSuccess, onFinalized, preselected }: Props
         />
       ),
       'Set identity': (
-        <IdentitySetIdentity
+        <SetIdentity
           from={selectedOrigin.address}
           onSetExtrinsic={setExtrinsicToCall}
+          onSetErrorMessage={setEasyOptionErrorMessage}
         />
       ),
       'Manual extrinsic': (
diff --git a/packages/ui/src/components/select/GenericAccountSelection.tsx b/packages/ui/src/components/select/GenericAccountSelection.tsx
index 4d354466..9dcba8c4 100644
--- a/packages/ui/src/components/select/GenericAccountSelection.tsx
+++ b/packages/ui/src/components/select/GenericAccountSelection.tsx
@@ -6,7 +6,7 @@ import AccountDisplay from '../AccountDisplay'
 import { useAccountNames } from '../../contexts/AccountNamesContext'
 import IdenticonBadge from '../IdenticonBadge'
 import { AccountBadge } from '../../types'
-import { Autocomplete, TextFieldStyled } from '../library'
+import { Autocomplete, TextField } from '../library'
 import OptionMenuItem from './OptionMenuItem'
 import { AutocompleteRenderInputParams } from '@mui/material/Autocomplete/Autocomplete'
 
@@ -166,7 +166,7 @@ const GenericAccountSelection = ({
   }
 
   const getRenderInput = (params: AutocompleteRenderInputParams) => (
-    <TextFieldStyled
+    <TextField
       data-cy="input-account-address"
       {...params}
       inputRef={inputRef}
diff --git a/packages/ui/src/pages/Creation/NameSelection.tsx b/packages/ui/src/pages/Creation/NameSelection.tsx
index d918c66d..93005878 100644
--- a/packages/ui/src/pages/Creation/NameSelection.tsx
+++ b/packages/ui/src/pages/Creation/NameSelection.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@mui/material'
 import React, { useCallback, useState } from 'react'
-import { TextFieldStyled } from '../../components/library'
+import { TextField } from '../../components/library'
 
 interface Props {
   className?: string
@@ -28,7 +28,7 @@ const NameSelection = ({ className, name, setName }: Props) => {
 
   return (
     <Box className={className}>
-      <TextFieldStyled
+      <TextField
         fullWidth
         error={!!error}
         helperText={error}
diff --git a/packages/ui/src/pages/Creation/ThresholdSelection.tsx b/packages/ui/src/pages/Creation/ThresholdSelection.tsx
index 1253dccb..7c54392c 100644
--- a/packages/ui/src/pages/Creation/ThresholdSelection.tsx
+++ b/packages/ui/src/pages/Creation/ThresholdSelection.tsx
@@ -1,7 +1,7 @@
 import { Box, InputAdornment, Tooltip } from '@mui/material'
 import React, { useCallback, useEffect, useState } from 'react'
 import { styled } from '@mui/material/styles'
-import { TextFieldStyled } from '../../components/library'
+import { TextField } from '../../components/library'
 import { HiOutlineInformationCircle } from 'react-icons/hi2'
 
 interface Props {
@@ -58,7 +58,7 @@ const ThresholdSelection = ({ className, threshold, setThreshold, signatoriesNum
       <TitleBoxStyled>
         Threshold <InfoBox />
       </TitleBoxStyled>
-      <TextFieldStyled
+      <TextField
         fullWidth
         error={!!error}
         helperText={error}

From 18280cf597e926c2406892fcea304fbfa8612be1 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Tue, 17 Oct 2023 21:55:10 +0100
Subject: [PATCH 5/7] with enum

---
 packages/ui/src/components/modals/Send.tsx    | 31 ++++++++++---------
 .../ui/src/pages/Home/MultisigActionMenu.tsx  |  3 +-
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/ui/src/components/modals/Send.tsx b/packages/ui/src/components/modals/Send.tsx
index 59f29a39..a47ceb5c 100644
--- a/packages/ui/src/components/modals/Send.tsx
+++ b/packages/ui/src/components/modals/Send.tsx
@@ -22,15 +22,15 @@ import { formatBnBalance } from '../../utils/formatBnBalance'
 import { useGetMultisigTx } from '../../hooks/useGetMultisigTx'
 import SetIdentity from '../EasySetup/SetIdentity'
 
-export const easyTransferTitle = [
-  'Send tokens',
-  'From call data',
-  'Manual extrinsic',
-  'Set identity'
-] as const
+export enum EasyTransferTitle {
+  SendTokens = 'Send tokens',
+  FromCallData = 'From call data',
+  ManualExtrinsic = 'Manual extrinsic',
+  SetIdentity = 'Set identity'
+}
 
-export type EasyTransferTitle = (typeof easyTransferTitle)[number]
-export const DEFAULT_EASY_SETUP_SELECTION: EasyTransferTitle = 'Send tokens'
+// export type EasyTransferTitle = (typeof easyTransferTitle)[number]
+export const DEFAULT_EASY_SETUP_SELECTION: EasyTransferTitle = EasyTransferTitle.SendTokens
 
 interface Props {
   preselected: EasyTransferTitle
@@ -131,29 +131,29 @@ const Send = ({ onClose, className, onSuccess, onFinalized, preselected }: Props
 
   const easySetupOptions: Record<EasyTransferTitle, ReactNode> = useMemo(() => {
     return {
-      'Send tokens': (
+      [EasyTransferTitle.SendTokens]: (
         <BalancesTransfer
           from={selectedOrigin.address}
           onSetExtrinsic={setExtrinsicToCall}
           onSetErrorMessage={setEasyOptionErrorMessage}
         />
       ),
-      'Set identity': (
+      [EasyTransferTitle.SetIdentity]: (
         <SetIdentity
           from={selectedOrigin.address}
           onSetExtrinsic={setExtrinsicToCall}
           onSetErrorMessage={setEasyOptionErrorMessage}
         />
       ),
-      'Manual extrinsic': (
+      [EasyTransferTitle.ManualExtrinsic]: (
         <ManualExtrinsic
           onSetExtrinsic={setExtrinsicToCall}
           onSetErrorMessage={setEasyOptionErrorMessage}
-          onSelectFromCallData={() => setSelectedEasyOption('From call data')}
+          onSelectFromCallData={() => setSelectedEasyOption(EasyTransferTitle.FromCallData)}
           hasErrorMessage={!!easyOptionErrorMessage}
         />
       ),
-      'From call data': (
+      [EasyTransferTitle.FromCallData]: (
         <FromCallData
           onSetExtrinsic={setExtrinsicToCall}
           onSetErrorMessage={setEasyOptionErrorMessage}
@@ -237,10 +237,11 @@ const Send = ({ onClose, className, onSuccess, onFinalized, preselected }: Props
 
   const onChangeEasySetupOption: (event: SelectChangeEvent<unknown>) => void = useCallback(
     ({ target: { value } }) => {
-      if (typeof value !== 'string' && !easyTransferTitle.includes(value as EasyTransferTitle)) {
+      const acceptabledValues = Object.values(EasyTransferTitle)
+      if (typeof value !== 'string' && !acceptabledValues.includes(value as EasyTransferTitle)) {
         console.error(
           'Unexpected selection, expect one of',
-          easyTransferTitle,
+          JSON.stringify(acceptabledValues),
           'but received',
           value
         )
diff --git a/packages/ui/src/pages/Home/MultisigActionMenu.tsx b/packages/ui/src/pages/Home/MultisigActionMenu.tsx
index f2598deb..c3441f4d 100644
--- a/packages/ui/src/pages/Home/MultisigActionMenu.tsx
+++ b/packages/ui/src/pages/Home/MultisigActionMenu.tsx
@@ -10,6 +10,7 @@ import {
   HiOutlineUserPlus as IdentityIcon
 } from 'react-icons/hi2'
 import { useGetSubscanLinks } from '../../hooks/useSubscanLink'
+import { EasyTransferTitle } from '../../components/modals/Send'
 
 interface MultisigActionMenuProps {
   withNewTransactionButton?: boolean
@@ -47,7 +48,7 @@ const MultisigActionMenu = ({
       opts.push({
         text: 'Set identity',
         icon: <IdentityIcon size={20} />,
-        onClick: () => onOpenSendModal('Set identity')
+        onClick: () => onOpenSendModal(EasyTransferTitle.SetIdentity)
       })
     // allow rotation only for the multisigs with a proxy
     selectedHasProxy &&

From e863faa3642ebe00c4c87059576a41c3a13af3e3 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Tue, 17 Oct 2023 21:59:02 +0100
Subject: [PATCH 6/7] stray log

---
 packages/ui/src/components/modals/Send.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/src/components/modals/Send.tsx b/packages/ui/src/components/modals/Send.tsx
index a47ceb5c..66a418c4 100644
--- a/packages/ui/src/components/modals/Send.tsx
+++ b/packages/ui/src/components/modals/Send.tsx
@@ -29,7 +29,6 @@ export enum EasyTransferTitle {
   SetIdentity = 'Set identity'
 }
 
-// export type EasyTransferTitle = (typeof easyTransferTitle)[number]
 export const DEFAULT_EASY_SETUP_SELECTION: EasyTransferTitle = EasyTransferTitle.SendTokens
 
 interface Props {

From c4d4c865b2c7db22b0092690f409f9cabb07c4be Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Wed, 18 Oct 2023 16:17:37 +0100
Subject: [PATCH 7/7] no error if not touched

---
 packages/ui/src/components/EasySetup/SetIdentity.tsx | 10 ++++++----
 packages/ui/src/contexts/NetworkContext.tsx          |  4 ++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/EasySetup/SetIdentity.tsx b/packages/ui/src/components/EasySetup/SetIdentity.tsx
index a44932c9..6ee81739 100644
--- a/packages/ui/src/components/EasySetup/SetIdentity.tsx
+++ b/packages/ui/src/components/EasySetup/SetIdentity.tsx
@@ -102,6 +102,7 @@ const SetIdentity = ({ className, onSetExtrinsic, from, onSetErrorMessage }: Pro
   const { api, chainInfo } = useApi()
   const [identityFields, setIdentityFields] = useState<IdentityFields | undefined>()
   const chainIdentity = useIdentity(from)
+  const [hasChangedAtLeastAField, setHasChangedAtLeastAField] = useState(false)
   const fieldtooLongError = useMemo(() => {
     const res: (keyof IdentityFields)[] = []
     identityFields &&
@@ -120,13 +121,13 @@ const SetIdentity = ({ className, onSetExtrinsic, from, onSetErrorMessage }: Pro
       return
     }
 
-    if (!identityFields?.display) {
+    if (!identityFields?.display && hasChangedAtLeastAField) {
       onSetErrorMessage('Display name is required')
       return
     }
 
     onSetErrorMessage('')
-  }, [fieldtooLongError, identityFields?.display, onSetErrorMessage])
+  }, [fieldtooLongError, hasChangedAtLeastAField, identityFields, onSetErrorMessage])
 
   useEffect(() => {
     if (chainIdentity) {
@@ -172,6 +173,7 @@ const SetIdentity = ({ className, onSetExtrinsic, from, onSetErrorMessage }: Pro
   }, [api, chainInfo, fieldtooLongError, identityFields, onSetErrorMessage, onSetExtrinsic])
 
   const onChangeField = useCallback((field: keyof IdentityFields, value: string) => {
+    setHasChangedAtLeastAField(true)
     setIdentityFields((prev) => (prev ? { ...prev, [field]: value } : undefined))
   }, [])
 
@@ -187,7 +189,7 @@ const SetIdentity = ({ className, onSetExtrinsic, from, onSetErrorMessage }: Pro
             fieldName as keyof IdentityFields
           )
           const isFieldError = fieldtooLongError.includes(fieldName as keyof IdentityFields)
-          const isDiplayAndEmpty = fieldName === 'display' && !value
+          const isDiplayNameError = fieldName === 'display' && !value && hasChangedAtLeastAField
           return (
             <Grid
               item
@@ -206,7 +208,7 @@ const SetIdentity = ({ className, onSetExtrinsic, from, onSetErrorMessage }: Pro
                 value={value || ''}
                 required={required}
                 helperText={isFieldError && `Field has more than ${MAX_ALLOWED_VAL_LENGTH} chars`}
-                error={isFieldError || isDiplayAndEmpty}
+                error={isFieldError || isDiplayNameError}
               />
             </Grid>
           )
diff --git a/packages/ui/src/contexts/NetworkContext.tsx b/packages/ui/src/contexts/NetworkContext.tsx
index 9893d2f6..927f9c35 100644
--- a/packages/ui/src/contexts/NetworkContext.tsx
+++ b/packages/ui/src/contexts/NetworkContext.tsx
@@ -8,13 +8,13 @@ type NetworkContextProps = {
   children: React.ReactNode | React.ReactNode[]
 }
 
-export interface IToastContext {
+export interface INetworkContext {
   selectNetwork: (network: string) => void
   selectedNetworkInfo?: NetworkInfo
   selectedNetwork?: SupportedNetworks
 }
 
-const NetworkContext = React.createContext<IToastContext | undefined>(undefined)
+const NetworkContext = React.createContext<INetworkContext | undefined>(undefined)
 const isSupportedNetwork = (network: string): network is SupportedNetworks =>
   !!networkList[network as SupportedNetworks]