Remove Rococco from RPC list, fix UX when trying to connect to unavai…

…lable chain, simplified docker upload modal
Cyborg-Network · Sep 16, 2024 · 074a881 · 074a881
1 parent a9e69b4
commit 074a881
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/src/cyborg/components/accessCompute/modals/UploadDockerImgURL.js b/src/cyborg/components/accessCompute/modals/UploadDockerImgURL.js
@@ -90,16 +90,11 @@ function UploadDockerImgURL({ setService }) {
       <form onSubmit={handleSubmit}>
         <h5 className="flex">Upload Docker Image</h5>
         <div className="mb-4">
-          <label
-            htmlFor="url"
-            className="flex text-white text-sm font-bold py-4 mb-2"
-          >
-            Docker image URL
-          </label>
           <input
             type="text"
             id="url"
             name="url"
+            placeholder='Insert Docker Image URL'
             onChange={handleUrlChange}
             className="focus:border-cb-green text-cb-gray-600 border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
           />

diff --git a/src/cyborg/components/general/RpcSelector.js b/src/cyborg/components/general/RpcSelector.js
@@ -6,13 +6,13 @@ import {
 import { SlArrowUp } from 'react-icons/sl'
 
 function RpcSelector() {
-  const { setRelaychainProvider, setCyborgProvider, setLocalProvider } =
+  const { setCyborgProvider, setLocalProvider } =
     useSubstrate()
   const { chain } = useSubstrateState()
 
   const [dropdownIsOpen, setDropdownIsOpen] = useState(false)
 
-  const rpcItems = ['Roccoco', 'Cyborg Hosted', 'Local Chain']
+  const rpcItems = ['Cyborg Hosted', 'Local Chain']
 
   const handleMenuItemClick = item => {
     if (item === chain) return
@@ -25,7 +25,7 @@ function RpcSelector() {
         setLocalProvider()
         break
       default:
-        setRelaychainProvider()
+        setCyborgProvider()
     }
 
     setDropdownIsOpen(false)
@@ -63,7 +63,7 @@ function RpcSelector() {
   return (
     <>
       {window.innerWidth < 768 ? (
-        <div className="flex flex-col rounded-lg p-1 bg-cb-gray-600">
+        <div className="hover:cursor-pointer flex flex-col rounded-lg p-1 bg-cb-gray-600">
           {dropdownIsOpen ? (
             rpcItems
               .filter(item => item !== chain)
@@ -81,7 +81,7 @@ function RpcSelector() {
           <DropdownButton name={chain} onClick={handleDropdownClick} />
         </div>
       ) : (
-        <div className="flex rounded-lg p-1 bg-cb-gray-600">
+        <div className="hover:cursor-pointer flex rounded-lg p-1 bg-cb-gray-600">
           {rpcItems.map((item, index) => (
             <MenuItem
               additionalStyles={

diff --git a/src/substrate-lib/SubstrateContext.js b/src/substrate-lib/SubstrateContext.js
@@ -8,13 +8,14 @@ import { isTestChain } from '@polkadot/util'
 import { TypeRegistry } from '@polkadot/types/create'
 
 import config from '../config'
+import { toast } from 'react-hot-toast'
 const SOCKETS = {
-  RELAY_DEV: 'wss://rococo-rpc.polkadot.io',
+  //RELAY_DEV: 'wss://rococo-rpc.polkadot.io',
   CYBORG: 'wss://fraa-flashbox-3239-rpc.a.stagenet.tanssi.network',
   LOCAL: 'ws://127.0.0.1:9988' //change to 'ws://127.0.0.1:9944' if using solochain
 }
 const CHAIN = {
-  RELAY_DEV: 'Roccoco',
+  //RELAY_DEV: 'Roccoco',
   CYBORG: 'Cyborg Hosted',
   LOCAL: 'Local Chain'
 }
@@ -93,7 +94,16 @@ const connect = (state, dispatch) => {
     _api.isReady.then(_api => dispatch({ type: 'CONNECT_SUCCESS' }))
   })
   _api.on('ready', () => dispatch({ type: 'CONNECT_SUCCESS' }))
-  _api.on('error', err => dispatch({ type: 'CONNECT_ERROR', payload: err }))
+  _api.on('error', err => {
+    toast(`Error connecting to socket ${socket}, switching back to default socket.`)
+    dispatch({ type: 'CONNECT_ERROR', payload: err })
+    if(socket !== SOCKETS.CYBORG)
+    setTimeout(() => {
+      dispatch({ type: 'SWITCH_PROVIDER', payload: { socket: SOCKETS.CYBORG, chain: CHAIN.CYBORG } })
+      sessionStorage.setItem('CHAIN', CHAIN.CYBORG);
+      window.location.reload(true)
+    }, 1500)
+  })
 }
 
 const retrieveChainInfo = async api => {
@@ -163,9 +173,11 @@ const SubstrateContextProvider = props => {
   // check if existing session
   if (SelectedChain && SelectedChain !== state.chain) {
     switch(SelectedChain) {
+      /*
       case CHAIN.RELAY_DEV:
         dispatch({ type: 'SWITCH_PROVIDER', payload: { socket: SOCKETS.RELAY_DEV, chain: CHAIN.RELAY_DEV } })
       break;
+      */
       case CHAIN.CYBORG:
         dispatch({ type: 'SWITCH_PROVIDER', payload: { socket: SOCKETS.CYBORG, chain: CHAIN.CYBORG } })
       break;
@@ -191,11 +203,13 @@ const SubstrateContextProvider = props => {
     dispatch({ type: 'SET_CURRENT_ACCOUNT', payload: acct })
   }
 
+  /*
   function setRelaychainProvider() {
     dispatch({ type: 'SWITCH_PROVIDER', payload: { socket: SOCKETS.RELAY_DEV, chain: CHAIN.RELAY_DEV } })
     sessionStorage.setItem('CHAIN', CHAIN.RELAY_DEV);
     window.location.reload(true)
   }
+  */
 
   function setCyborgProvider() {
     dispatch({ type: 'SWITCH_PROVIDER', payload: { socket: SOCKETS.CYBORG, chain: CHAIN.CYBORG } })
@@ -210,7 +224,7 @@ const SubstrateContextProvider = props => {
   }
 
   return (
-    <SubstrateContext.Provider value={{ state, setCurrentAccount, setRelaychainProvider, setCyborgProvider, setLocalProvider }}>
+    <SubstrateContext.Provider value={{ state, setCurrentAccount, /*setRelaychainProvider,*/ setCyborgProvider, setLocalProvider }}>
       {props.children}
     </SubstrateContext.Provider>
   )