feat: add TON operator UI support

.changeset/heavy-lobsters-walk.md

@@ -0,0 +1,5 @@
+---
+'@smartcontractkit/operator-ui': minor
+---
+
+feat: add TON operator UI support

src/components/Form/ChainConfigurationForm.test.tsx

@@ -238,6 +238,9 @@ describe('ChainConfigurationForm', () => {
       tronKeys: {
         results: [],
       },
+      tonKeys: {
+        results: [],
+      },
     })
 
     const chainType = getByRole('button', { name: 'EVM' })
@@ -395,6 +398,61 @@ test('should able to create Tron chain config', async () => {
   })
 })
 
+test('should able to create TON 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: 'TON' }))
+  await screen.findByRole('button', { name: 'TON' })
+
+  await selectChainIdOnUI(container, '5555')
+
+  const address = container.querySelector('#select-accountAddr')
+  expect(address).toBeInTheDocument()
+  address && userEvent.click(address)
+  userEvent.click(getByRole('option', { name: 'ton_xxxx' }))
+  await screen.findByRole('button', { name: 'ton_xxxx' })
+
+  await userEvent.click(getByRole('button', { name: /submit/i }))
+
+  await waitFor(() => {
+    expect(handleSubmit).toHaveBeenCalledWith({
+      accountAddr: 'ton_xxxx',
+      accountAddrPubKey: '',
+      adminAddr: '0x1234567',
+      chainID: '5555',
+      chainType: 'TON',
+      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()
@@ -417,6 +475,9 @@ test('should be able to select OCR2 Job Type with Key Bundle ID', async () => {
       tronKeys: {
         results: [],
       },
+      tonKeys: {
+        results: [],
+      },
     },
   )
 
@@ -482,6 +543,11 @@ function renderChainConfigurationForm(
       enabled: true,
       network: 'tron',
     },
+    {
+      id: '5555',
+      enabled: true,
+      network: 'ton',
+    },
   ],
   accountsNonEvm: FetchNonEvmKeys | undefined = {
     aptosKeys: {
@@ -496,6 +562,9 @@ function renderChainConfigurationForm(
     tronKeys: {
       results: [{ id: 'tron_xxxx' }],
     },
+    tonKeys: {
+      results: [{ addressBase64: '123', rawAddress: '0:456', id: 'ton_xxxx' }],
+    },
   },
 ) {
   return render(

src/components/Form/ChainConfigurationForm.tsx

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

src/components/Form/ChainTypes.ts

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

src/hooks/queries/useNonEvmAccountsQuery.test.tsx

@@ -23,6 +23,10 @@ const mockData = {
       __typename: 'TronKeys',
       results: [{ __typename: 'TronKey', id: '4' }],
     },
+    tonKeys: {
+      __typename: 'TONKeys',
+      results: [{ __typename: 'TONKey', id: '5' }],
+    },
   },
 }
 
@@ -61,6 +65,12 @@ const TestComponent: React.FC = () => {
           <p>Tron ID: {key.id}</p>
         </div>
       ))}
+
+      {data?.tonKeys.results.map((key, i) => (
+        <div key={i}>
+          <p>TON ID: {key.id}</p>
+        </div>
+      ))}
     </div>
   )
 }
@@ -81,6 +91,7 @@ describe('useNonEvmAccountsQuery', () => {
 
       expect(screen.getByText('Solana ID: 3')).toBeInTheDocument()
       expect(screen.getByText('Tron ID: 4')).toBeInTheDocument()
+      expect(screen.getByText('TON ID: 5')).toBeInTheDocument()
     })
   })
 })

src/hooks/queries/useNonEvmAccountsQuery.ts

@@ -25,11 +25,20 @@ export const TRON_KEYS_PAYLOAD__RESULTS_FIELDS = gql`
   }
 `
 
+export const TON_KEYS_PAYLOAD__RESULTS_FIELDS = gql`
+  fragment TONKeysPayload_ResultsFields on TONKey {
+    addressBase64
+    rawAddress
+    id
+  }
+`
+
 export const NON_EVM_KEYS_QUERY = gql`
   ${APTOS_KEYS_PAYLOAD__RESULTS_FIELDS}
   ${SOLANA_KEYS_PAYLOAD__RESULTS_FIELDS}
   ${STARKNET_KEYS_PAYLOAD__RESULTS_FIELDS}
   ${TRON_KEYS_PAYLOAD__RESULTS_FIELDS}
+  ${TON_KEYS_PAYLOAD__RESULTS_FIELDS}
   query FetchNonEvmKeys {
     aptosKeys {
       results {
@@ -51,6 +60,11 @@ export const NON_EVM_KEYS_QUERY = gql`
         ...TronKeysPayload_ResultsFields
       }
     }
+    tonKeys {
+      results {
+        ...TONKeysPayload_ResultsFields
+      }
+    }
   }
 `
 

src/screens/KeyManagement/NonEVMKeys.tsx

@@ -26,6 +26,14 @@ const SCHEMAS = {
     title: 'TRON',
     fields: [{ label: 'Public Key', key: 'id', copy: true }],
   },
+  tonKeys: {
+    title: 'TON',
+    fields: [
+      { label: 'Public Key', key: 'id', copy: true },
+      { label: 'Base64 Address', key: 'addressBase64', copy: true },
+      { label: 'Raw Address', key: 'rawAddress', copy: true },
+    ],
+  },
 }
 
 export const NonEVMKeys = () => {