Fixes & chain improvements

.tool-versions

@@ -1 +1 @@
-nodejs 18.19.0
+nodejs 20.13.1

README.md

@@ -32,7 +32,7 @@ CHAINLINK_BASEURL=http://localhost:6688 yarn start
 
 Now navigate to http://localhost:3000.
 
-If sign-in doesn't work, check your network console, it's probably a CORS issue. You may need to run your chainlink node with `ALLOW_ORIGINS=http://localhost:3000` set.
+If sign-in doesn't work, check your network console, it's probably a CORS issue. You may need to run your chainlink node with `[WebServer] AllowOrigins=http://localhost:3000` set in TOML config.
 
 ## Running Tests
 

package.json

@@ -8,7 +8,7 @@
     "artifacts"
   ],
   "engines": {
-    "node": "^18.0.0"
+    "node": "^20.0.0"
   },
   "scripts": {
     "lint": "eslint --ext js,jsx,ts,tsx .",

src/Private.tsx

@@ -62,7 +62,7 @@ const Private = ({ classes }: { classes: { content: string } }) => {
                 <ChainsScreen />
               </PrivateRoute>
 
-              <PrivateRoute path="/chains/:chainId">
+              <PrivateRoute path="/chains/:network/:chainId">
                 <ChainShow />
               </PrivateRoute>
 

src/actionCreators.ts

@@ -333,45 +333,13 @@ const RECEIVE_CREATE_SUCCESS_ACTION = {
   type: ResourceActionType.RECEIVE_CREATE_SUCCESS,
 }
 
-const receiveDeleteSuccess = (id: string) =>
-  ({
-    type: ResourceActionType.RECEIVE_DELETE_SUCCESS,
-    id,
-  } as const)
-
 export const submitSignIn = (data: Parameter<Sessions['createSession']>) =>
   sendSignIn(data)
 
 export const submitSignOut = () => sendSignOut
 
 export const beginRegistration = () => sendBeginRegistration()
 
-export const deleteChain = (
-  id: string,
-  successCallback: React.ReactNode,
-  errorCallback: React.ReactNode,
-) => {
-  return (dispatch: Dispatch) => {
-    dispatch({ type: ResourceActionType.REQUEST_DELETE })
-
-    const endpoint = api.v2.chains
-
-    return endpoint
-      .destroyChain(id)
-      .then((doc) => {
-        dispatch(receiveDeleteSuccess(id))
-        dispatch(notifySuccess(successCallback, doc))
-      })
-      .catch((error: Errors) => {
-        curryErrorHandler(
-          dispatch,
-          ResourceActionType.RECEIVE_DELETE_ERROR,
-        )(error)
-        dispatch(notifyError(errorCallback, error))
-      })
-  }
-}
-
 export const createJobRunV2 = (
   id: string,
   pipelineInput: string,

src/api/v2/chains.ts

@@ -1,52 +1,20 @@
 import * as jsonapi from 'utils/json-api-client'
 import * as models from 'core/store/models'
 
-export const ENDPOINT = '/v2/chains/evm'
-const UPDATE_ENDPOINT = `${ENDPOINT}/:id`
+export const ENDPOINT = '/v2/chains/:network'
+
 export class Chains {
   constructor(private api: jsonapi.Api) {}
 
-  public getChains = (): Promise<jsonapi.ApiResponse<models.Chain[]>> => {
-    return this.index()
-  }
-
-  public createChain = (
-    request: models.CreateChainRequest,
-  ): Promise<jsonapi.ApiResponse<models.Chain>> => {
-    return this.create(request)
-  }
-
-  public destroyChain = (id: string): Promise<jsonapi.ApiResponse<null>> => {
-    return this.destroy(undefined, { id })
+  public getChains = (
+    network: string,
+  ): Promise<jsonapi.ApiResponse<models.Chain[]>> => {
+    return this.index(undefined, { network })
   }
 
-  public updateChain = (
-    id: string,
-    req: models.UpdateChainRequest,
-  ): Promise<jsonapi.ApiResponse<models.Chain>> => {
-    return this.update(req, { id })
-  }
-
-  private index = this.api.fetchResource<object, models.Chain[]>(ENDPOINT)
-
-  private create = this.api.createResource<
-    models.CreateChainRequest,
-    models.Chain
+  private index = this.api.fetchResource<
+    object,
+    models.Chain[],
+    { network: string }
   >(ENDPOINT)
-
-  private destroy = this.api.deleteResource<
-    undefined,
-    null,
-    {
-      id: string
-    }
-  >(UPDATE_ENDPOINT)
-
-  private update = this.api.updateResource<
-    models.UpdateChainRequest,
-    models.Chain,
-    {
-      id: string
-    }
-  >(UPDATE_ENDPOINT)
 }

src/components/Form/ChainConfigurationForm.test.tsx

@@ -232,6 +232,9 @@ describe('ChainConfigurationForm', () => {
       solanaKeys: {
         results: [],
       },
+      starknetKeys: {
+        results: [],
+      },
     })
 
     const chainType = getByRole('button', { name: 'EVM' })
@@ -350,6 +353,9 @@ test('should be able to select OCR2 Job Type with Key Bundle ID', async () => {
       solanaKeys: {
         results: [],
       },
+      starknetKeys: {
+        results: [],
+      },
     },
   )
 
@@ -418,6 +424,9 @@ function renderChainConfigurationForm(
     solanaKeys: {
       results: [{ id: 'solana_xxxx' }],
     },
+    starknetKeys: {
+      results: [{ id: 'starknet_xxxx' }],
+    },
   },
 ) {
   return render(

src/components/Form/ChainConfigurationForm.tsx

@@ -48,8 +48,8 @@ export type FormValues = {
   ocr2RebalancerPluginEnabled: boolean
 }
 
-const isStarknet = (chainID: string): boolean => {
-  return chainID === 'SN_MAIN' || chainID === 'SN_SEPOLIA'
+const isStarknet = (chainType: string): boolean => {
+  return chainType === 'STARKNET'
 }
 
 const ValidationSchema = Yup.object().shape({
@@ -117,7 +117,7 @@ interface AccountAddrFieldProps extends FieldAttributes<any> {
 
 const AccountAddrField = ({ addresses, ...props }: AccountAddrFieldProps) => {
   const {
-    values: { chainID, accountAddr },
+    values: { chainID, chainType, accountAddr },
     setFieldValue,
   } = useFormikContext<FormValues>()
 
@@ -148,7 +148,7 @@ const AccountAddrField = ({ addresses, ...props }: AccountAddrFieldProps) => {
 
   return (
     <>
-      {!isStarknet(chainID) && (
+      {!isStarknet(chainType) && (
         <Field
           {...props}
           select
@@ -162,7 +162,7 @@ const AccountAddrField = ({ addresses, ...props }: AccountAddrFieldProps) => {
           ))}
         </Field>
       )}
-      {isStarknet(chainID) && (
+      {isStarknet(chainType) && (
         <Field
           component={TextField}
           id="accountAddr"
@@ -174,7 +174,7 @@ const AccountAddrField = ({ addresses, ...props }: AccountAddrFieldProps) => {
           fullWidth
         />
       )}
-      {isStarknet(chainID) && (
+      {isStarknet(chainType) && (
         <div>
           <Field
             component={TextField}

src/hooks/queries/useNonEvmAccountsQuery.ts

@@ -13,9 +13,16 @@ export const SOLANA_KEYS_PAYLOAD__RESULTS_FIELDS = gql`
   }
 `
 
+export const STARKNET_KEYS_PAYLOAD__RESULTS_FIELDS = gql`
+  fragment StarknetKeysPayload_ResultsFields on StarkNetKey {
+    id
+  }
+`
+
 export const NON_EVM_KEYS_QUERY = gql`
   ${APTOS_KEYS_PAYLOAD__RESULTS_FIELDS}
   ${SOLANA_KEYS_PAYLOAD__RESULTS_FIELDS}
+  ${STARKNET_KEYS_PAYLOAD__RESULTS_FIELDS}
   query FetchNonEvmKeys {
     aptosKeys {
       results {
@@ -27,6 +34,11 @@ export const NON_EVM_KEYS_QUERY = gql`
         ...SolanaKeysPayload_ResultsFields
       }
     }
+    starknetKeys {
+      results {
+        ...StarknetKeysPayload_ResultsFields
+      }
+    }
   }
 `
 

src/pages/Chains/RegionalNav.tsx

@@ -1,11 +1,8 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { connect } from 'react-redux'
 import { Chain, Resource } from 'core/store/models'
 import { localizedTimestamp, TimeAgo } from 'components/TimeAgo'
-import { Redirect, useLocation } from 'react-router-dom'
-import Button from 'components/Button'
-import Close from 'components/Icons/Close'
-import Dialog from '@material-ui/core/Dialog'
+import { useLocation } from 'react-router-dom'
 import Card from '@material-ui/core/Card'
 import Grid from '@material-ui/core/Grid'
 import List from '@material-ui/core/List'
@@ -19,8 +16,6 @@ import {
 import Typography from '@material-ui/core/Typography'
 import classNames from 'classnames'
 import Link from 'components/Link'
-import ErrorMessage from 'components/Notifications/DefaultError'
-import { deleteChain } from 'actionCreators'
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -101,9 +96,6 @@ const styles = (theme: Theme) =>
     modalContent: {
       width: 'inherit',
     },
-    deleteButton: {
-      marginTop: theme.spacing.unit * 4,
-    },
     runJobButton: {
       marginBottom: theme.spacing.unit * 3,
     },
@@ -116,100 +108,18 @@ export type ChainResource = Resource<Chain>
 
 interface Props extends WithStyles<typeof styles> {
   chainId: string
+  network: string
   chain?: ChainResource
-  deleteChain: (...args: any[]) => any
 }
 
-const DeleteSuccessNotification = ({ id }: any) => (
-  <React.Fragment>Successfully deleted chain {id}</React.Fragment>
-)
-
-const RegionalNavComponent = ({
-  classes,
-  chainId,
-  chain,
-  deleteChain,
-}: Props) => {
-  const [modalOpen, setModalOpen] = useState(false)
-  const [deleted, setDeleted] = useState(false)
+const RegionalNavComponent = ({ classes, chainId, network, chain }: Props) => {
   const location = useLocation()
   const navOverridesActive = location.pathname.endsWith('/config-overrides')
   const editActive = location.pathname.endsWith('/edit')
   const navNodesActive = !navOverridesActive && !editActive
 
-  const handleDelete = (id: string) => {
-    deleteChain(id, () => DeleteSuccessNotification({ id }), ErrorMessage)
-    setDeleted(true)
-  }
-
   return (
     <>
-      <Dialog
-        open={modalOpen}
-        classes={{ paper: classes.dialogPaper }}
-        onClose={() => setModalOpen(false)}
-      >
-        <Grid container spacing={0}>
-          <Grid item className={classes.modalContent}>
-            <Grid container alignItems="baseline" justify="space-between">
-              <Grid item>
-                <Typography
-                  variant="h5"
-                  color="secondary"
-                  className={classes.warningText}
-                >
-                  Warning: This Action Cannot Be Undone
-                </Typography>
-              </Grid>
-              <Grid item>
-                <Close
-                  className={classes.closeButton}
-                  onClick={() => setModalOpen(false)}
-                />
-              </Grid>
-            </Grid>
-            <Grid container direction="column">
-              <Grid item>
-                <Grid item>
-                  <Typography
-                    className={classes.infoText}
-                    variant="h5"
-                    color="secondary"
-                  >
-                    - Disabling the chain may be a safer option
-                  </Typography>
-                  <Typography
-                    className={classes.infoText}
-                    variant="h5"
-                    color="secondary"
-                  >
-                    - All associated RPC Nodes will be permanently deleted
-                  </Typography>
-                  <Typography
-                    className={classes.infoText}
-                    variant="h5"
-                    color="secondary"
-                  >
-                    - Access to this page will be lost
-                  </Typography>
-                </Grid>
-              </Grid>
-              <Grid container spacing={0} alignItems="center" justify="center">
-                <Grid item className={classes.deleteButton}>
-                  <Button
-                    variant="danger"
-                    onClick={() => handleDelete(chainId)}
-                  >
-                    Delete {chainId}
-                    {deleted && <Redirect to="/" />}
-                  </Button>
-                </Grid>
-              </Grid>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Dialog>
-
       <Card className={classes.container}>
         <Grid container spacing={0}>
           <Grid item xs={12}>
@@ -245,7 +155,7 @@ const RegionalNavComponent = ({
             <List className={classes.horizontalNav}>
               <ListItem className={classes.horizontalNavItem}>
                 <Link
-                  href={`/chains/${chainId}`}
+                  href={`/chains/${network}/${chainId}`}
                   className={classNames(
                     classes.horizontalNavLink,
                     navNodesActive && classes.activeNavLink,
@@ -262,8 +172,6 @@ const RegionalNavComponent = ({
   )
 }
 
-export const ConnectedRegionalNav = connect(null, {
-  deleteChain,
-})(RegionalNavComponent)
+export const ConnectedRegionalNav = connect(null, {})(RegionalNavComponent)
 
 export default withStyles(styles)(ConnectedRegionalNav)