Fix: custom network and contract table bugs

src/hooks/useNetworkApi.ts

@@ -4,7 +4,7 @@ import { useApi } from 'useink'
 import { useNetworkAccountsContext } from '@/context/NetworkAccountsContext'
 import { useDelay } from './useDelay'
 import { ChainId } from '@/services/useink/chains'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { getChain } from '@/constants/chains'
 import { ChainExtended } from '@/types'
 
@@ -32,17 +32,17 @@ export function useNetworkApi(): UseNetworkApi {
 
   const fetchApi = useApi(networkConnected)
 
+  const fetchCustomChain = useCallback(async () => {
+    const chain = getChain(networkConnected)
+    const apiInstance = await initializeApi(chain)
+    setApi(apiInstance)
+  }, [networkConnected])
+
   useEffect(() => {
-    if (networkConnected) {
-      if (!fetchApi) {
-        ;(async () => {
-          const chain = getChain(networkConnected)
-          const apiInstance = await initializeApi(chain)
-          setApi(apiInstance)
-        })()
-      }
+    if (!fetchApi) {
+      fetchCustomChain()
     }
-  }, [networkConnected])
+  }, [fetchApi, fetchCustomChain])
 
   const firstLoadCompleted = useDelay(5000)
   return {

src/pages/_app.tsx

@@ -23,7 +23,6 @@ import { UseInkProvider } from 'useink'
 import { CHAINS } from '@/constants/chains'
 import { LocalDbProvider } from '@/context/LocalDbContext'
 import { Inter } from 'next/font/google'
-import { apiVersionService } from '@/services/backendApi/ApiVersionService'
 
 type CustomAppProps = AppProps & {
   emotionCache: EmotionCache

src/utils/inputValidation.ts

@@ -30,3 +30,11 @@ export function maxLength(value: unknown, max = 20): string | void {
     return `The field only accepts 20 letters`
   }
 }
+
+export function validateWsUrl(value: string): string | void {
+  const validation = value.startsWith('wss://')
+
+  if (!validation) {
+    return `This is not a valid websocket url`
+  }
+}

src/view/components/ContractsTable/ContractsTable.tsx

@@ -11,11 +11,7 @@ import {
   Box
 } from '@mui/material'
 
-import {
-  CopyToClipboardButton,
-  StyledTextField,
-  TokenIconSvg
-} from '@/components'
+import { CopyToClipboardButton, TokenIconSvg } from '@/components'
 import {
   isoDate,
   isoToReadableDate,
@@ -47,6 +43,7 @@ import { ROUTES } from '@/constants'
 import { useRef } from 'react'
 import { useFormInput } from '@/hooks'
 import { maxLength, notEmpty } from '@/utils/inputValidation'
+import { MuiTextField } from '../MuiTextField'
 
 export interface TableConfig {
   onlyTable: boolean
@@ -133,19 +130,16 @@ function ContractTableRow({
         <TokenWrapper>
           {editable ? (
             <>
-              <StyledTextField
-                label="Contract Name"
-                placeholder={contract.name}
-                value={formData.contractName.value}
-                onChange={formData.contractName.onChange}
+              <MuiTextField
                 error={Boolean(formData.contractName.error)}
                 helperText={
                   formData.contractName.error ? formData.contractName.error : ''
                 }
-                loading={formData.contractName.loading}
+                value={formData.contractName.value}
+                onChange={formData.contractName.onChange}
                 ref={textRef}
                 autoFocus
-              />
+              ></MuiTextField>
 
               <DefaultToolTipButton
                 id={`save-contract-name${takeLastChars(contract.uuid)}`}

src/view/components/ContractsTable/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import {
   ContractsTable,
   TableConfig

src/view/components/WalletConnectButton/NetworkSelect.tsx

@@ -29,7 +29,7 @@ import AddIcon from '@mui/icons-material/Add'
 import EditIcon from '@mui/icons-material/Edit'
 import ModalView from '../ModalView'
 import { useFormInput } from '@/hooks'
-import { notEmpty } from '@/utils/inputValidation'
+import { notEmpty, validateWsUrl } from '@/utils/inputValidation'
 import { StyledTextField } from '../Input'
 import { RpcUrl } from '@/services/useink/chains/data/types'
 import { ChainExtended } from '@/types'
@@ -122,8 +122,11 @@ export function NetworkSelect({
   }
 
   const formData = {
-    name: useFormInput<string>('test', [notEmpty]),
-    rpc: useFormInput<RpcUrl>('wss://rpc.shibuya.astar.network', [notEmpty])
+    name: useFormInput<string>('Test', [notEmpty]),
+    rpc: useFormInput<RpcUrl>('wss://rpc.shibuya.astar.network', [
+      notEmpty,
+      validateWsUrl
+    ])
   }
 
   const editNetwork =
@@ -242,7 +245,7 @@ export function NetworkSelect({
           <StyledTextField
             sx={{ marginBottom: '2rem' }}
             label="Network Name"
-            placeholder="502d1..."
+            placeholder="Custom name"
             value={formData.name.value}
             onChange={formData.name.onChange}
             error={Boolean(formData.name.error)}