feat: create tron chain config support

Able to create TRON chain config from the job distributor page.

Dependent on [this PR](smartcontractkit/chainlink#14783) to be merged.

JIRA: https://smartcontract-it.atlassian.net/browse/DPA-1333

.changeset/brown-horses-give.md

@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': minor
+---
+
+feat: create tron chain config

src/components/Form/ChainConfigurationForm.test.tsx

@@ -232,6 +232,9 @@ describe('ChainConfigurationForm', () => {
       solanaKeys: {
         results: [],
       },
+      tronKeys: {
+        results: [],
+      },
     })
 
     const chainType = getByRole('button', { name: 'EVM' })
@@ -334,6 +337,61 @@ describe('ChainConfigurationForm', () => {
   })
 })
 
+test('should able to create Tron chain config', async () => {
+  const handleSubmit = jest.fn()
+  const initialValues = emptyFormValues()
+  initialValues.chainType = ChainTypes.EVM
+  initialValues.adminAddr = '0x1234567'
+
+  const { container } = renderChainConfigurationForm(
+    initialValues,
+    handleSubmit,
+  )
+
+  const chainType = getByRole('button', { name: 'EVM' })
+  userEvent.click(chainType)
+  userEvent.click(getByRole('option', { name: 'TRON' }))
+  await screen.findByRole('button', { name: 'TRON' })
+
+  await selectChainIdOnUI(container, '4444')
+
+  const address = container.querySelector('#select-accountAddr')
+  expect(address).toBeInTheDocument()
+  address && userEvent.click(address)
+  userEvent.click(getByRole('option', { name: 'tron_xxxx' }))
+  await screen.findByRole('button', { name: 'tron_xxxx' })
+
+  await userEvent.click(getByRole('button', { name: /submit/i }))
+
+  await waitFor(() => {
+    expect(handleSubmit).toHaveBeenCalledWith({
+      accountAddr: 'tron_xxxx',
+      accountAddrPubKey: '',
+      adminAddr: '0x1234567',
+      chainID: '4444',
+      chainType: 'TRON',
+      fluxMonitorEnabled: false,
+      ocr1Enabled: false,
+      ocr1IsBootstrap: false,
+      ocr1KeyBundleID: '',
+      ocr1Multiaddr: '',
+      ocr1P2PPeerID: '',
+      ocr2CommitPluginEnabled: false,
+      ocr2Enabled: false,
+      ocr2ExecutePluginEnabled: false,
+      ocr2ForwarderAddress: '',
+      ocr2IsBootstrap: false,
+      ocr2KeyBundleID: '',
+      ocr2MedianPluginEnabled: false,
+      ocr2MercuryPluginEnabled: false,
+      ocr2Multiaddr: '',
+      ocr2P2PPeerID: '',
+      ocr2RebalancerPluginEnabled: false,
+    })
+    expect(handleSubmit).toHaveBeenCalledTimes(1)
+  })
+})
+
 test('should be able to select OCR2 Job Type with Key Bundle ID', async () => {
   const handleSubmit = jest.fn()
   const initialValues = emptyFormValues()
@@ -350,6 +408,9 @@ test('should be able to select OCR2 Job Type with Key Bundle ID', async () => {
       solanaKeys: {
         results: [],
       },
+      tronKeys: {
+        results: [],
+      },
     },
   )
 
@@ -410,6 +471,11 @@ function renderChainConfigurationForm(
       enabled: true,
       network: 'solana',
     },
+    {
+      id: '4444',
+      enabled: true,
+      network: 'tron',
+    },
   ],
   accountsNonEvm: FetchNonEvmKeys | undefined = {
     aptosKeys: {
@@ -418,6 +484,9 @@ function renderChainConfigurationForm(
     solanaKeys: {
       results: [{ id: 'solana_xxxx' }],
     },
+    tronKeys: {
+      results: [{ id: 'tron_xxxx' }],
+    },
   },
 ) {
   return render(

src/components/Form/ChainConfigurationForm.tsx

@@ -260,6 +260,10 @@ export const ChainConfigurationForm = withStyles(styles)(
               chainAccountAddresses =
                 accountsNonEvm?.solanaKeys.results.map((acc) => acc.id) ?? []
               break
+            case ChainTypes.TRON:
+              chainAccountAddresses =
+                accountsNonEvm?.tronKeys.results.map((acc) => acc.id) ?? []
+              break
             default:
               chainAccountAddresses = []
           }
@@ -295,6 +299,9 @@ export const ChainConfigurationForm = withStyles(styles)(
                     <MenuItem key={ChainTypes.SOLANA} value={ChainTypes.SOLANA}>
                       SOLANA
                     </MenuItem>
+                    <MenuItem key={ChainTypes.TRON} value={ChainTypes.TRON}>
+                      TRON
+                    </MenuItem>
                   </Field>
                 </Grid>
 

src/components/Form/ChainTypes.ts

@@ -4,4 +4,5 @@ export const ChainTypes = {
   SOLANA: 'SOLANA',
   STARKNET: 'STARKNET',
   COSMOS: 'COSMOS',
+  TRON: 'TRON',
 }

src/hooks/queries/useNonEvmAccountsQuery.test.tsx

@@ -19,6 +19,10 @@ const mockData = {
       __typename: 'SolanaKeys',
       results: [{ __typename: 'SolanaKey', id: '3' }],
     },
+    tronKeys: {
+      __typename: 'TronKeys',
+      results: [{ __typename: 'TronKey', id: '4' }],
+    },
   },
 }
 
@@ -51,6 +55,12 @@ const TestComponent: React.FC = () => {
           <p>Solana ID: {key.id}</p>
         </div>
       ))}
+
+      {data?.tronKeys.results.map((key, i) => (
+        <div key={i}>
+          <p>Tron ID: {key.id}</p>
+        </div>
+      ))}
     </div>
   )
 }
@@ -70,6 +80,7 @@ describe('useNonEvmAccountsQuery', () => {
       expect(screen.getByText('Aptos ID: 2')).toBeInTheDocument()
 
       expect(screen.getByText('Solana ID: 3')).toBeInTheDocument()
+      expect(screen.getByText('Tron ID: 4')).toBeInTheDocument()
     })
   })
 })

src/hooks/queries/useNonEvmAccountsQuery.ts

@@ -13,9 +13,16 @@ export const SOLANA_KEYS_PAYLOAD__RESULTS_FIELDS = gql`
   }
 `
 
+export const TRON_KEYS_PAYLOAD__RESULTS_FIELDS = gql`
+  fragment TronKeysPayload_ResultsFields on TronKey {
+    id
+  }
+`
+
 export const NON_EVM_KEYS_QUERY = gql`
   ${APTOS_KEYS_PAYLOAD__RESULTS_FIELDS}
   ${SOLANA_KEYS_PAYLOAD__RESULTS_FIELDS}
+  ${TRON_KEYS_PAYLOAD__RESULTS_FIELDS}
   query FetchNonEvmKeys {
     aptosKeys {
       results {
@@ -27,6 +34,11 @@ export const NON_EVM_KEYS_QUERY = gql`
         ...SolanaKeysPayload_ResultsFields
       }
     }
+    tronKeys {
+      results {
+        ...TronKeysPayload_ResultsFields
+      }
+    }  
   }
 `