feat: integrate with trust relationships table,remove unneeded files

src/pages/SendTokens/SendTokensForm/SelectWallet.js

@@ -3,7 +3,14 @@ import { Autocomplete, Button, TextField } from '@mui/material';
 import { getWallets } from '../../../api/wallets';
 import AuthContext from '../../../store/auth-context';
 
-function SelectWallet({ wallet, onChangeWallet, label, createdWalletName }) {
+function SelectWallet({
+  wallet,
+  onChangeWallet,
+  label,
+  createdWalletName,
+  isError,
+  errorMessage,
+}) {
   const filterLoadMore = 'LOAD_MORE';
 
   const [walletPage, setWalletPage] = useState(0);
@@ -187,12 +194,19 @@ function SelectWallet({ wallet, onChangeWallet, label, createdWalletName }) {
           setWalletSearchString(newVal);
         }}
         renderInput={(params) => {
-          return <TextField {...params} label={label} />;
+          return (
+            <TextField
+              error={isError}
+              helperText={errorMessage}
+              {...params}
+              label={label}
+            />
+          );
         }}
         renderOption={handleWalletRenderOption}
       />
     </>
   );
 }
 
-export default React.memo(SelectWallet);
+export default React.memo(SelectWallet);

src/pages/TrustRelationsips/CreateTrustRelationship/CreateTrustRelationship.js → src/pages/TrustRelationship/CreateTrustRelationship/CreateTrustRelationship.js

@@ -28,6 +28,7 @@ import { ArrowDropDown } from '@mui/icons-material';
 import AuthContext from '../../../store/auth-context';
 import { requestTrustRelationship } from '../../../api/trustRelationships';
 import Message from '../../../components/UI/components/Message/Message';
+import { useTrustRelationshipsContext } from '../../../store/TrustRelationshipsContext';
 
 const trustRequestTypeList = [
   {
@@ -87,6 +88,7 @@ const CreateNewRelationshipDialog = ({ open, handleClose }) => {
   const [sendRequestError, setSendRequestError] = useState('');
 
   const authContext = useContext(AuthContext);
+  const { loadData } = useTrustRelationshipsContext();
 
   const closeDialog = () => {
     setRequestSuccess(false);
@@ -163,6 +165,7 @@ const CreateNewRelationshipDialog = ({ open, handleClose }) => {
       console.log(trustRelationshipRequest);
       setRequestSuccess(true);
       resetFields();
+      loadData();
     } catch (error) {
       console.log(error);
       setSendRequestError(error.message);
@@ -201,6 +204,7 @@ const CreateNewRelationshipDialog = ({ open, handleClose }) => {
                 </InputLabel>
                 <Select
                   displayEmpty
+                  labelId="trust-request-type"
                   value={formFields.requestType}
                   onChange={(event) =>
                     setFormFields((prevState) => ({
@@ -223,17 +227,13 @@ const CreateNewRelationshipDialog = ({ open, handleClose }) => {
               </FormControl>
             </Grid>
             <Grid item xs={8}>
-              {/*TODO refactor select wallet to display error outline*/}
-              <FormControl fullWidth error={!!formFieldErrors.requestingWallet}>
-                <SelectWallet
-                  wallet={formFields.requestingWallet}
-                  onChangeWallet={handleChangeRequestingWallet}
-                  label={'Requesting Wallet'}
-                />
-                <FormHelperText>
-                  {formFieldErrors.requestingWallet}
-                </FormHelperText>
-              </FormControl>
+              <SelectWallet
+                wallet={formFields.requestingWallet}
+                onChangeWallet={handleChangeRequestingWallet}
+                label={'Requesting Wallet'}
+                isError={!!formFieldErrors.requestingWallet}
+                errorMessage={formFieldErrors.requestingWallet}
+              />
             </Grid>
             <Grid item xs={8}>
               <TextField

src/pages/TrustRelationsips/CreateTrustRelationship/CreateTrustRelationship.styled.js → src/pages/TrustRelationship/CreateTrustRelationship/CreateTrustRelationship.styled.js

@@ -7,7 +7,6 @@ export const CreateNewRelationship = styled(Button)({
   height: '2.5rem',
   boxShadow: 'none',
   padding: '0.5rem 0.5rem 0.5rem 0.625rem',
-  margin: '1rem 0rem',
 });
 
 export const CreateSuccessIcon = styled(CheckCircleOutlineIcon)({

src/pages/TrustRelationship/TrustRelationship.styled.js

@@ -1,49 +1,35 @@
 import styled from '@emotion/styled';
 import { Button, TextField } from '@mui/material';
 
-export const CreateButton = styled(Button)({
-    color: '#fff',
-    backgroundColor: 'rgba(118, 187, 35, 1)',
+export const SearchTextField = styled(TextField)({
+  color: '#000',
+  backgroundColor: '#ffffff',
+  padding: '0',
+  width: '19rem',
+  fontWeight: 'bold',
+  borderRadius: '8px',
+  '& .MuiOutlinedInput-root': {
     height: '2.5rem',
-    width: '6.3rem',
-    boxShadow: 'none',
-    fontSize: '0.9rem',
-    fontWeight: 'bold',
-    textTransform: 'lowercase',
-    padding: '0.5rem 1rem 0.5rem 1rem',
-    borderRadius: '20px',
-  });
-
-  export const SearchTextField = styled(TextField)({
-    color: '#000',
-    backgroundColor: '#ffffff',
-    padding: '0',
-    width: '19rem',
-    fontWeight: 'bold',
-    borderRadius: '8px',
-    '& .MuiOutlinedInput-root': {
-      height: '2.75rem',
-      '& fieldset': {
-        borderColor: '#86C232',
-        padding: '0',
-      },
-      '&:hover fieldset': {
-        borderColor: '#86C232',
-        borderWidth: '2px', 
-      },
-
+    '& fieldset': {
+      borderColor: '#86C232',
+      padding: '0',
+    },
+    '&:hover fieldset': {
+      borderColor: '#86C232',
+      borderWidth: '2px',
     },
-  });
+  },
+});
 
-  export const FilterButton = styled(Button)({
-    color: '#373A3E',
-    backgroundColor: '#ffffff',
-    height: '2.5rem',
-    dispay: 'flex',
-    width: '6.8rem',
-    fontSize: '0.8rem',
-    fontWeight: '400',
-    textTransform: 'capitalize',
-    padding: '0.5rem 1rem 0.5rem 1rem',
-    borderRadius: '4px',
-  });
+export const FilterButton = styled(Button)({
+  color: '#373A3E',
+  backgroundColor: '#ffffff',
+  height: '2.5rem',
+  dispay: 'flex',
+  width: '6.8rem',
+  fontSize: '0.8rem',
+  fontWeight: '400',
+  textTransform: 'capitalize',
+  padding: '0.5rem 1rem 0.5rem 1rem',
+  borderRadius: '4px',
+});