Feedback updates

centrifuge-app/src/components/PoolFees/EditFeesDrawer.tsx

@@ -1,5 +1,5 @@
 import { AddFee, PoolMetadata, Rate, evmToSubstrateAddress } from '@centrifuge/centrifuge-js'
-import { useCentrifuge, useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
+import { useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
 import {
   AddressInput,
   Box,
@@ -17,12 +17,13 @@ import {
   TextInput,
 } from '@centrifuge/fabric'
 import { Field, FieldArray, FieldProps, Form, FormikProvider, useFormik } from 'formik'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useParams } from 'react-router'
 import { feeCategories } from '../../config'
 import { Dec } from '../../utils/Decimal'
 import { isEvmAddress } from '../../utils/address'
 import { formatPercentage } from '../../utils/formatting'
+import { useFetchChainId } from '../../utils/useFetchChainId'
 import { usePoolAdmin, useSuitableAccounts } from '../../utils/usePermissions'
 import { usePool, usePoolFees, usePoolMetadata } from '../../utils/usePools'
 import { combine, max, positiveNumber, required } from '../../utils/validation'
@@ -45,7 +46,6 @@ type FormValues = {
 }
 
 export const EditFeesDrawer = ({ onClose, isOpen }: ChargeFeesProps) => {
-  const [chainId, setChainId] = useState<number>(0)
   const { pid: poolId } = useParams<{ pid: string }>()
   if (!poolId) throw new Error('Pool not found')
 
@@ -54,16 +54,7 @@ export const EditFeesDrawer = ({ onClose, isOpen }: ChargeFeesProps) => {
   const { data: poolMetadata, isLoading } = usePoolMetadata(pool)
   const poolAdmin = usePoolAdmin(poolId)
   const account = useSuitableAccounts({ poolId, poolRole: ['PoolAdmin'] })[0]
-  const cent = useCentrifuge()
-
-  useEffect(() => {
-    const fetchChainId = async () => {
-      const id = await cent.getChainId()
-      setChainId(id)
-    }
-
-    fetchChainId()
-  }, [cent])
+  const chainId = useFetchChainId()
 
   const initialFormData = React.useMemo(() => {
     return poolFees

centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx

@@ -9,6 +9,7 @@ import {
   WithdrawAddress,
 } from '@centrifuge/centrifuge-js'
 import {
+  useCentEvmChainId,
   useCentrifuge,
   useCentrifugeApi,
   useCentrifugeConsts,
@@ -119,7 +120,7 @@ function AOForm({
   poolId: string
 }) {
   const [isEditing, setIsEditing] = React.useState(false)
-  const [chainId, setChainId] = React.useState<number>(0)
+  const chainId = useCentEvmChainId()
   const [account] = useSuitableAccounts({ poolId, actingAddress: [ao.address] }).filter((a) => a.proxies?.length === 2)
   const identity = useIdentity(ao.address)
   const api = useCentrifugeApi()
@@ -158,15 +159,6 @@ function AOForm({
     transferAllowlist: { receiverDeposit },
   } = useCentrifugeConsts()
 
-  React.useEffect(() => {
-    const fetchChainId = async () => {
-      const id = await cent.getChainId()
-      setChainId(id)
-    }
-
-    fetchChainId()
-  }, [cent])
-
   const initialValues: AOFormValues = React.useMemo(
     () => ({
       name: identity?.display,

centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx

@@ -1,12 +1,11 @@
 import { evmToSubstrateAddress } from '@centrifuge/centrifuge-js'
-import { useCentrifuge } from '@centrifuge/centrifuge-react'
 import { Button, IconMinusCircle, Stack, Text } from '@centrifuge/fabric'
 import { FieldArray, useFormikContext } from 'formik'
 import * as React from 'react'
-import { useEffect, useState } from 'react'
 import { DataTable } from '../../../components/DataTable'
 import { Identity } from '../../../components/Identity'
 import { isEvmAddress } from '../../../utils/address'
+import { useFetchChainId } from '../../../utils/useFetchChainId'
 import { AddAddressInput } from '../Configuration/AddAddressInput'
 import { ChangeThreshold } from './ChangeTreshold'
 import type { PoolManagersInput } from './PoolManagers'
@@ -15,24 +14,14 @@ type Row = { address: string; index: number }
 type Props = { isEditing?: boolean; isLoading?: boolean; canRemoveFirst?: boolean }
 
 export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoading }: Props) {
-  const cent = useCentrifuge()
-  const [chainId, setChainId] = useState<number>(0)
+  const chainId = useFetchChainId()
   const form = useFormikContext<PoolManagersInput>()
   const { adminMultisig } = form.values
   const rows = React.useMemo(
     () => adminMultisig.signers.map((a, i) => ({ address: a, index: i })),
     [adminMultisig.signers]
   )
 
-  useEffect(() => {
-    const fetchChainId = async () => {
-      const id = await cent.getChainId()
-      setChainId(id)
-    }
-
-    fetchChainId()
-  }, [cent])
-
   return (
     <FieldArray name="adminMultisig.signers">
       {(fldArr) => (

centrifuge-app/src/utils/useFetchChainId.tsx

@@ -0,0 +1,18 @@
+import { useCentrifuge } from '@centrifuge/centrifuge-react'
+import { useEffect, useState } from 'react'
+
+export const useFetchChainId = () => {
+  const [chainId, setChainId] = useState<number>(0)
+  const cent = useCentrifuge()
+
+  useEffect(() => {
+    const fetchChainId = async () => {
+      const id = await cent.getChainId()
+      setChainId(id)
+    }
+
+    fetchChainId()
+  }, [cent])
+
+  return chainId
+}

fabric/src/components/TextInput/index.tsx

@@ -272,24 +272,21 @@ export function AddressInput({
   const defaultId = React.useId()
   id ??= defaultId
 
-  const [inputVal, setInputVal] = React.useState<string>(value)
   const [network, setNetwork] = React.useState<'ethereum' | 'centrifuge' | 'loading' | null>(null)
 
   React.useEffect(() => {
-    if (isEvmAddress(inputVal) && inputVal.length > 3) {
+    if (isEvmAddress(value) && value.length > 3) {
       setNetwork('ethereum')
-    } else if (isSubstrateAddress(inputVal) && inputVal.length > 3) {
+    } else if (isSubstrateAddress(value) && value.length > 3) {
       setNetwork('centrifuge')
-    } else if (inputVal !== '') {
+    } else if (value !== '') {
       setNetwork('loading')
     } else {
       setNetwork(null)
     }
-  }, [inputVal])
+  }, [value])
 
   function handleChange(e: React.FocusEvent<HTMLInputElement>) {
-    const address = e.target.value
-    setInputVal(address)
     if (onChange) {
       onChange(e)
     }