Addes "use grpc transport" checkbox to bridge pages (view/add/edit)

src/components/Form/BridgeForm.test.tsx

@@ -15,6 +15,7 @@ describe('BridgeForm', () => {
       url: '',
       minimumContractPayment: '0',
       confirmations: 0,
+      useConnectionManager: false,
     }
 
     render(
@@ -38,6 +39,7 @@ describe('BridgeForm', () => {
       url: '',
       minimumContractPayment: '0',
       confirmations: 0,
+      useConnectionManager: false,
     }
 
     render(
@@ -59,6 +61,7 @@ describe('BridgeForm', () => {
       url: '',
       minimumContractPayment: '0',
       confirmations: 0,
+      useConnectionManager: false,
     }
 
     render(
@@ -92,9 +95,45 @@ describe('BridgeForm', () => {
           url: 'https://www.test.com',
           minimumContractPayment: '1',
           confirmations: 2,
+          useConnectionManager: false,
         },
         expect.anything(),
       ),
     )
   })
+
+  it('submits useConnectionManager when checked', async () => {
+    const handleSubmit = jest.fn()
+    const initialValues: FormValues = {
+      name: '',
+      url: '',
+      minimumContractPayment: '0',
+      confirmations: 0,
+      useConnectionManager: false,
+    }
+
+    render(
+      <BridgeForm
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+        submitButtonText="Submit"
+      />,
+    )
+
+    userEvent.type(getByRole('textbox', { name: /name */i }), 'bridge1')
+    userEvent.type(
+      getByRole('textbox', { name: /bridge url */i }),
+      'https://www.test.com',
+    )
+    userEvent.click(getByRole('checkbox', { name: /use grpc transport/i }))
+
+    userEvent.click(getByRole('button', { name: /submit/i }))
+
+    await waitFor(() =>
+      expect(handleSubmit).toHaveBeenCalledWith(
+        expect.objectContaining({ useConnectionManager: true }),
+        expect.anything(),
+      ),
+    )
+  })
 })

src/components/Form/BridgeForm.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
 
 import { Field, Form, Formik, FormikHelpers } from 'formik'
-import { FormikTextField as TextField } from './FormikFields'
+import {
+  FormikTextField as TextField,
+  FormikCheckboxWithLabel as CheckboxWithLabel,
+} from './FormikFields'
 import * as Yup from 'yup'
 
 import Button from '@mui/material/Button'
@@ -12,6 +15,7 @@ export interface FormValues {
   minimumContractPayment: string
   confirmations: number
   url: string
+  useConnectionManager: boolean
 }
 
 const ValidationSchema = Yup.object().shape({
@@ -105,6 +109,18 @@ export const BridgeForm = ({
                 </Grid>
               </Grid>
 
+              <Grid item xs={12} md={7}>
+                <Field
+                  component={CheckboxWithLabel}
+                  name="useConnectionManager"
+                  type="checkbox"
+                  data-testid="useConnectionManager"
+                  Label={{
+                    label: 'Use gRPC transport',
+                  }}
+                />
+              </Grid>
+
               <Grid item xs={12} md={7}>
                 <Button
                   variant="contained"

src/screens/Bridge/BridgeCard.test.tsx

@@ -37,6 +37,7 @@ describe('BridgeCard', () => {
     expect(queryByText(bridge.outgoingToken)).toBeInTheDocument()
     expect(queryByText(bridge.confirmations)).toBeInTheDocument()
     expect(queryByText(bridge.minimumContractPayment)).toBeInTheDocument()
+    expect(queryByText('Use gRPC transport')).toBeInTheDocument()
   })
 
   it('calls delete', () => {

src/screens/Bridge/BridgeCard.tsx

@@ -91,6 +91,13 @@ export const BridgeCard: React.FC<Props> = ({ bridge, onDelete }) => {
           <DetailsCardItemTitle title="Min. Contract Payment" />
           <DetailsCardItemValue value={bridge.minimumContractPayment} />
         </Grid>
+
+        <Grid item xs={12} sm={4} md={3}>
+          <DetailsCardItemTitle title="Use gRPC transport" />
+          <DetailsCardItemValue
+            value={bridge.useConnectionManager ? 'Yes' : 'No'}
+          />
+        </Grid>
       </Grid>
     </DetailsCard>
   )

src/screens/Bridge/BridgeView.tsx

@@ -17,6 +17,7 @@ export const BRIDGE_PAYLOAD_FIELDS = gql`
     confirmations
     outgoingToken
     minimumContractPayment
+    useConnectionManager
   }
 `
 

src/screens/EditBridge/EditBridgeScreen.test.tsx

@@ -58,6 +58,7 @@ describe('EditBridgeScreen', () => {
               url: 'https://www.test.com',
               minimumContractPayment: '1',
               confirmations: 10,
+              useConnectionManager: false,
             },
           },
         },
@@ -138,6 +139,7 @@ describe('EditBridgeScreen', () => {
               url: bridge.url,
               minimumContractPayment: bridge.minimumContractPayment,
               confirmations: bridge.confirmations,
+              useConnectionManager: bridge.useConnectionManager,
             },
           },
         },
@@ -177,6 +179,7 @@ describe('EditBridgeScreen', () => {
               url: bridge.url,
               minimumContractPayment: bridge.minimumContractPayment,
               confirmations: bridge.confirmations,
+              useConnectionManager: bridge.useConnectionManager,
             },
           },
         },

src/screens/EditBridge/EditBridgeView.test.tsx

@@ -38,6 +38,7 @@ describe('EditBridgeView', () => {
       url: 'http://bridge.com',
       minimumContractPayment: '0',
       confirmations: 1,
+      useConnectionManager: false,
     })
   })
 

src/screens/EditBridge/EditBridgeView.tsx

@@ -20,6 +20,7 @@ export const EditBridgeView: React.FC<Props> = ({ bridge, onSubmit }) => {
     url: bridge.url,
     minimumContractPayment: bridge.minimumContractPayment,
     confirmations: bridge.confirmations,
+    useConnectionManager: bridge.useConnectionManager,
   }
 
   return (

src/screens/NewBridge/NewBridgeScreen.test.tsx

@@ -37,6 +37,7 @@ describe('NewBridgeScreen', () => {
               url: 'https://www.test.com',
               minimumContractPayment: '0',
               confirmations: 0,
+              useConnectionManager: false,
             },
           },
         },
@@ -84,6 +85,7 @@ describe('NewBridgeScreen', () => {
               url: 'https://www.test.com',
               minimumContractPayment: '0',
               confirmations: 0,
+              useConnectionManager: false,
             },
           },
         },

src/screens/NewBridge/NewBridgeView.test.tsx

@@ -18,6 +18,7 @@ describe('NewBridgeView', () => {
       url: '',
       minimumContractPayment: '0',
       confirmations: 0,
+      useConnectionManager: false,
     })
   })
 })

src/screens/NewBridge/NewBridgeView.tsx

@@ -13,6 +13,7 @@ const initialValues = {
   url: '',
   minimumContractPayment: '0',
   confirmations: 0,
+  useConnectionManager: false,
 }
 
 type Props = Pick<FormProps, 'onSubmit'>

support/factories/gql/fetchBridge.ts

@@ -10,6 +10,7 @@ export function buildBridgePayloadFields(
     confirmations: 1,
     minimumContractPayment: '0',
     outgoingToken: 'outgoing1',
+    useConnectionManager: false,
     ...overrides,
   }
 }