Add new input to pool managers address

centrifuge · Jun 20, 2024 · 323355f · 323355f
1 parent 9ebb03b
commit 323355f
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 35 deletions.
diff --git a/centrifuge-app/src/components/PoolFees/EditFeesDrawer.tsx b/centrifuge-app/src/components/PoolFees/EditFeesDrawer.tsx
@@ -1,13 +1,12 @@
 import { AddFee, PoolMetadata, Rate } from '@centrifuge/centrifuge-js'
 import { useCentrifugeTransaction } from '@centrifuge/centrifuge-react'
 import {
+  AddressInput,
   Box,
   Button,
   Drawer,
   Flex,
   Grid,
-  IconButton,
-  IconCopy,
   IconMinusCircle,
   IconPlusCircle,
   NumberInput,
@@ -21,7 +20,6 @@ import { Field, FieldArray, FieldProps, Form, FormikProvider, useFormik } from '
 import React from 'react'
 import { useParams } from 'react-router'
 import { Dec } from '../../utils/Decimal'
-import { copyToClipboard } from '../../utils/copyToClipboard'
 import { formatPercentage } from '../../utils/formatting'
 import { usePoolAdmin, useSuitableAccounts } from '../../utils/usePermissions'
 import { usePool, usePoolFees, usePoolMetadata } from '../../utils/usePools'
@@ -254,18 +252,10 @@ export const EditFeesDrawer = ({ onClose, isOpen }: ChargeFeesProps) => {
                                   >
                                     {({ field, meta }: FieldProps) => {
                                       return (
-                                        <TextInput
+                                        <AddressInput
                                           {...field}
                                           disabled={!poolAdmin || updateFeeTxLoading}
                                           label="Receiving address"
-                                          symbol={
-                                            <IconButton
-                                              onClick={() => copyToClipboard(values.receivingAddress)}
-                                              title="Copy address to clipboard"
-                                            >
-                                              <IconCopy />
-                                            </IconButton>
-                                          }
                                           errorMessage={(meta.touched && meta.error) || ''}
                                         />
                                       )

diff --git a/centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx b/centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx
@@ -311,8 +311,8 @@ function AOForm({
       }
       execute(
         [
-          addedWithdraw.map((w) => getKeyForReceiver(api, w)),
-          removedWithdraw.map((w) => getKeyForReceiver(api, w)),
+          addedWithdraw.filter((w) => Object.keys(w).length !== 0).map((w) => getKeyForReceiver(api, w)),
+          removedWithdraw.filter((w) => Object.keys(w).length !== 0).map((w) => getKeyForReceiver(api, w)),
           null,
           addedPermissions,
           addedDelegates,

diff --git a/centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx b/centrifuge-app/src/pages/IssuerPool/Access/MultisigForm.tsx
@@ -1,4 +1,3 @@
-import { addressToHex } from '@centrifuge/centrifuge-js'
 import { Box, Button, IconMinusCircle, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
 import { ErrorMessage, Field, FieldArray, FieldProps, useFormikContext } from 'formik'
 import * as React from 'react'
@@ -10,6 +9,7 @@ import type { PoolManagersInput } from './PoolManagers'
 
 type Row = { address: string; index: number }
 type Props = { isEditing?: boolean; isLoading?: boolean; canRemoveFirst?: boolean }
+
 export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoading }: Props) {
   const form = useFormikContext<PoolManagersInput>()
   const { adminMultisig } = form.values
@@ -66,7 +66,7 @@ export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoadin
                   if (adminMultisig.signers.length === 1) {
                     form.setFieldValue('adminMultisig.threshold', 2, false)
                   }
-                  fldArr.push(addressToHex(address))
+                  fldArr.push(address)
                 }}
               />
             )}
@@ -79,7 +79,6 @@ export function MultisigForm({ isEditing = true, canRemoveFirst = true, isLoadin
               For additional security, changing the pool configuration (e.g. the tranche structure or write-off policy)
               requires multiple signers. Any such change will require the confirmation of:
             </Text>
-
             <Shelf gap={2}>
               {isEditing && (
                 <Box maxWidth={150}>

diff --git a/centrifuge-app/src/pages/IssuerPool/Configuration/AddAddressInput.tsx b/centrifuge-app/src/pages/IssuerPool/Configuration/AddAddressInput.tsx
@@ -1,6 +1,6 @@
-import { isSameAddress } from '@centrifuge/centrifuge-js'
+import { addressToHex, isSameAddress } from '@centrifuge/centrifuge-js'
 import { useCentrifugeUtils } from '@centrifuge/centrifuge-react'
-import { Button, Grid, SearchInput, Shelf, Text } from '@centrifuge/fabric'
+import { AddressInput, Button, Grid, Shelf, Text } from '@centrifuge/fabric'
 import Identicon from '@polkadot/react-identicon'
 import { useState } from 'react'
 import { truncate } from '../../../utils/web3'
@@ -15,22 +15,36 @@ export function AddAddressInput({
   const [address, setAddress] = useState('')
 
   const utils = useCentrifugeUtils()
-  let truncated
+  let truncated: string | undefined
   try {
     truncated = truncate(utils.formatAddress(address))
   } catch (e) {
-    //
+    truncated = undefined
   }
 
   const exists = !!truncated && existingAddresses.some((addr) => isSameAddress(addr, address))
 
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const newAddress = e.target.value
+    setAddress(newAddress)
+  }
+
+  function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
+    const address = e.target.value
+    if (truncated) {
+      onAdd(addressToHex(address))
+      setAddress('')
+    }
+  }
+
   return (
     <Grid columns={2} equalColumns gap={4} alignItems="center">
-      <SearchInput
-        name="search"
-        placeholder="Search to add address..."
+      <AddressInput
+        clearIcon
+        label="Search to add address..."
         value={address}
-        onChange={(e) => setAddress(e.target.value)}
+        onChange={handleChange}
+        onBlur={handleBlur}
       />
       {address &&
         (truncated ? (
@@ -44,7 +58,7 @@ export function AddAddressInput({
             <Button
               variant="secondary"
               onClick={() => {
-                onAdd(address)
+                onAdd(addressToHex(address))
                 setAddress('')
               }}
               small

diff --git a/centrifuge-app/src/pages/IssuerPool/Investors/InvestorStatus.tsx b/centrifuge-app/src/pages/IssuerPool/Investors/InvestorStatus.tsx
@@ -7,14 +7,14 @@ import {
   useWallet,
 } from '@centrifuge/centrifuge-react'
 import {
+  AddressInput,
   Button,
   Grid,
   IconAlertCircle,
   IconCheckCircle,
   IconInfoFailed,
   IconMinus,
   IconPlus,
-  SearchInput,
   Select,
   Shelf,
   Stack,
@@ -89,19 +89,18 @@ export function InvestorStatus() {
     setPendingTrancheId(trancheId)
   }
 
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setAddress(e.target.value)
+  }
+
   return (
     <PageSection
       title="Investor status"
       subtitle="Display investor status, and add or remove from investor memberlist."
     >
       <Stack gap={2}>
         <Grid columns={2} gap={2} alignItems="center">
-          <SearchInput
-            name="investorStatus"
-            value={address}
-            onChange={(e) => setAddress(e.target.value)}
-            placeholder="Enter address..."
-          />
+          <AddressInput label="" placeholder="Add an address" onChange={handleChange} />
           <Select
             value={chain}
             options={[

diff --git a/fabric/src/components/TextInput/index.tsx b/fabric/src/components/TextInput/index.tsx
@@ -252,7 +252,12 @@ export function TextAreaInput({
 }
 
 export type AddressInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value'> &
-  Omit<InputUnitProps, 'inputElement'>
+  Omit<InputUnitProps, 'inputElement'> & {
+    value?: string
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
+    clearIcon?: boolean
+  }
 
 export function AddressInput({
   id,
@@ -262,6 +267,8 @@ export function AddressInput({
   errorMessage,
   onBlur,
   onChange,
+  value,
+  clearIcon,
   ...inputProps
 }: AddressInputProps) {
   const defaultId = React.useId()
@@ -288,14 +295,15 @@ export function AddressInput({
 
   function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
     const address = e.target.value
-    if (!(isSubstrateAddress(address) || isEvmAddress(address))) {
+    if (!(isSubstrateAddress(address) || isEvmAddress(address)) || clearIcon) {
       setNetwork(null)
     }
 
     if (onBlur) {
       onBlur(e)
     }
   }
+
   return (
     <InputUnit
       label={label}
@@ -308,6 +316,7 @@ export function AddressInput({
           type="text"
           onChange={handleChange}
           onBlur={handleBlur}
+          value={value}
           action={
             network && (
               <Shelf