#564 start on restoring the custom network selector and add soroban R…

…PC address
chatch · Dec 20, 2023 · 5fd988d · 5fd988d
1 parent d0153a2
commit 5fd988d
Show file tree

Hide file tree

Showing 15 changed files with 204 additions and 281 deletions.
diff --git a/app/components/layout/NetworkSelector.tsx b/app/components/layout/NetworkSelector.tsx
@@ -54,9 +54,9 @@ const NetworkButton = ({
 interface NetworkSelectorProps {
   networkType: NetworkKey
   networkIsLocal: boolean
-  // networkAddress: string
+  networkAddress: string
   // selectedNetworkType?: string
-  // setNetworkAddress: Function
+  setNetworkAddress: Function
 }
 
 const NetworkSelector = (props: NetworkSelectorProps) => (
@@ -69,12 +69,12 @@ const NetworkSelector = (props: NetworkSelectorProps) => (
         networkIsLocal={props.networkIsLocal}
       />
     ))}
-    {/* <CustomNetworkButton
+    <CustomNetworkButton
       key="custom-network"
       networkAddress={props.networkAddress}
       networkType={props.networkType}
       setNetworkAddress={props.setNetworkAddress}
-    /> */}
+    />
   </div>
 )
 

diff --git a/app/components/shared/CustomNetworkButton.tsx b/app/components/shared/CustomNetworkButton.tsx
@@ -1,14 +1,8 @@
-import type { ChangeEventHandler, FormEvent, FormEventHandler } from 'react'
+import type { ChangeEventHandler, FormEvent, MouseEventHandler } from 'react'
 import React, { useState } from 'react'
 import Modal from 'react-bootstrap/Modal'
 import { FormattedMessage } from 'react-intl'
 
-const networkAddresses = [
-  'https://horizon.stellar.org',
-  'https://stellar-api.wancloud.io',
-  'https://api.chinastellar.com',
-]
-
 /**
  * Button that reveals modal window where the Horizon server address can
  * be configured.
@@ -24,73 +18,44 @@ const CustomNetworkButton = ({
 )
 
 interface ResourceModalBodyProps {
-  networkAddress: string
-  inputValue: string
-  dropdownValue: string
-  networkType: string
-  handleSubmitFn: FormEventHandler<HTMLFormElement>
-  handleInputChangeFn: ChangeEventHandler<HTMLInputElement>
-  handleDropdownChangeFn: ChangeEventHandler<HTMLSelectElement>
+  horizonAddress: string
+  sorobanRPCAddress: string
+  setHorizonAddress: React.Dispatch<React.SetStateAction<string>>
+  setSorobanRPCAddress: React.Dispatch<React.SetStateAction<string>>
+  handleSubmitFn: MouseEventHandler<HTMLElement>
 }
 
 const ResourceModalBody = ({
-  networkAddress,
-  networkType,
-  inputValue,
-  dropdownValue,
+  horizonAddress,
+  sorobanRPCAddress,
+  setSorobanRPCAddress,
+  setHorizonAddress,
   handleSubmitFn,
-  handleInputChangeFn,
-  handleDropdownChangeFn,
 }: ResourceModalBodyProps) => {
   return (
-    <form onSubmit={handleSubmitFn}>
-      <div>
-        <h4>
-          <FormattedMessage id="network.current" />
-        </h4>
-        <FormattedMessage id={'network.' + networkType} />
-        <br />
-        <pre style={{ marginTop: 5 }}>{networkAddress}</pre>
-        <br />
-      </div>
-
-      <div>
-        <h4>
-          <FormattedMessage id="network.change-here" />
-        </h4>
-        <FormattedMessage id="network.choose" />
-        <br />
-        <select
-          id="networkDropdown"
-          onChange={handleDropdownChangeFn}
-          value={dropdownValue}
-        >
-          <option></option>
-          {networkAddresses.map(
-            (address) =>
-              address !== networkAddress && (
-                <option key={address}>{address}</option>
-              ),
-          )}
-        </select>
-        <br />
-        <br />
-
-        <FormattedMessage id="network.or-custom" />
-        <br />
-        <input
-          style={{ marginTop: 5 }}
-          type="text"
-          onChange={handleInputChangeFn}
-          value={inputValue}
-        />
-        <br />
-
+    <div>
+      <FormattedMessage id="network.custom.horizon" />
+      <input
+        style={{ marginTop: 5 }}
+        type="text"
+        placeholder="http://localhost:8000"
+        value={horizonAddress}
+        onChange={(e) => setHorizonAddress(e.target.value)}
+      />
+
+      <FormattedMessage id="network.custom.soroban" />
+      <input
+        style={{ marginTop: 5 }}
+        type="text"
+        placeholder="http://localhost:8000/soroban/rpc"
+        value={sorobanRPCAddress}
+        onChange={(e) => setSorobanRPCAddress(e.target.value)}
+      />
+
+      <button id="btn-set-custom-network" onClick={handleSubmitFn}>
         <FormattedMessage id="save" />
-        {/* {(msg) => <input type="submit" value={msg} />}
-        </FormattedMessage> */}
-      </div>
-    </form>
+      </button>
+    </div>
   )
 }
 
@@ -107,7 +72,7 @@ const ResourceModal = (props: ResourceModalProps) => (
   >
     <Modal.Header closeButton>
       <Modal.Title id="contained-modal-title-lg" style={{ color: '#dce2ec' }}>
-        <FormattedMessage id="network.address" />
+        <FormattedMessage id="network.set-custom" />
       </Modal.Title>
     </Modal.Header>
     <Modal.Body>
@@ -126,33 +91,14 @@ function CustomNetworkButtonWithResourceModal({
   networkAddress,
   setNetworkAddress,
   networkType,
-}: CustomNetworkButtonWithResourceModalProps) {
+}: Readonly<CustomNetworkButtonWithResourceModalProps>) {
   const [show, setShow] = useState(false)
-  const [dropdownValue, setDropdownValue] = useState('')
-  const [inputValue, setInputValue] = useState(networkType)
+  const [horizonAddress, setHorizonAddress] = useState('')
+  const [sorobanRPCAddress, setSorobanRPCAddress] = useState('')
 
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (
-    event: FormEvent,
-  ) => {
+  const handleSubmit: MouseEventHandler<HTMLElement> = (event: FormEvent) => {
     event.preventDefault()
-
-    const input = inputValue
-    const dropdown = dropdownValue
-    const newNetworkAddress = dropdown !== '' ? dropdown : input
-    if (newNetworkAddress !== networkAddress) {
-      setNetworkAddress(newNetworkAddress)
-    }
-  }
-
-  const handleDropdownChange = (event: any) => {
-    const newNetworkAddress = event.target.value
-    setDropdownValue(newNetworkAddress)
-    setNetworkAddress(newNetworkAddress)
-  }
-
-  const handleInputChange = (event: any) => {
-    const newNetworkAddress = event.target.value
-    setInputValue(newNetworkAddress)
+    console.log(`handleSubmit: ${horizonAddress} + ${sorobanRPCAddress}`)
   }
 
   const handleClose = () => setShow(false)
@@ -168,14 +114,11 @@ function CustomNetworkButtonWithResourceModal({
       {show && (
         <ResourceModal
           handleSubmitFn={handleSubmit}
-          handleDropdownChangeFn={handleDropdownChange}
-          handleInputChangeFn={handleInputChange}
-          dropdownValue={dropdownValue}
-          inputValue={inputValue}
+          horizonAddress={horizonAddress}
+          sorobanRPCAddress={sorobanRPCAddress}
+          setHorizonAddress={setHorizonAddress}
+          setSorobanRPCAddress={setSorobanRPCAddress}
           handleCloseFn={handleClose}
-          // setNetworkAddress={setNetworkAddress}
-          networkAddress={networkAddress}
-          networkType={networkType}
           show={show}
         />
       )}

diff --git a/app/lib/languages/en.json b/app/lib/languages/en.json
@@ -90,12 +90,10 @@
     "more": "More",
     "name": "Name",
     "network": "Network",
-    "network.current": "Current Network",
     "network.set-custom": "Set Custom Network",
     "network.address": "Network Address",
-    "network.choose": "Choose from the list:",
-    "network.or-custom": "…or enter a custom address:",
-    "network.change-here": "Set a different Network",
+    "network.custom.horizon": "Horizon address:",
+    "network.custom.soroban": "Soroban RPC address:",
     "network.public": "You are currently using this Public Horizon Instance:",
     "network.test": "You are currently using this Testnet Horizon Instance:",
     "network.future": "You are currently using this Futurenet Horizon Instance:",

diff --git a/app/lib/languages/fr.json b/app/lib/languages/fr.json
@@ -79,12 +79,8 @@
     "more": "Plus",
     "name": "Nom",
     "network": "Network",
-    "network.current": "Current Network",
     "network.set-custom": "Set Custom Network",
     "network.address": "Network Address",
-    "network.choose": "Choisir dans la liste :",
-    "network.or-custom": "…ou entrer une adresse personnalisée :",
-    "network.change-here": "Set a different Network",
     "network.public": "You are currently using this Public Horizon Instance:",
     "network.test": "You are currently using this Testnet Horizon Instance:",
     "network.local": "You are currently using this Local Horizon Instance:",

diff --git a/app/lib/languages/hi.json b/app/lib/languages/hi.json
@@ -79,12 +79,8 @@
     "more": "अधिक",
     "name": "नाम",
     "network": "नेटवर्क",
-    "network.current": "वर्तमान नेटवर्क",
     "network.set-custom": "कस्टम नेटवर्क सेट करें",
     "network.address": "नेटवर्क पता",
-    "network.choose": "सूची में से चुनें:",
-    "network.or-custom": "…या एक कस्टम पता दर्ज करें:",
-    "network.change-here": "एक अलग नेटवर्क सेट करें",
     "network.public": "आप वर्तमान में इस सार्वजनिक क्षितिज इंस्टेंस का उपयोग कर रहे हैं:",
     "network.test": "आप वर्तमान में इस टेस्टनेट क्षितिज इंस्टेंस का उपयोग कर रहे हैं:",
     "network.local": "आप वर्तमान में इस स्थानीय क्षितिज इंस्टेंस का उपयोग कर रहे हैं:",

diff --git a/app/lib/languages/id.json b/app/lib/languages/id.json
@@ -79,12 +79,8 @@
     "more": "Lebih banyak",
     "name": "Nama",
     "network": "Jaringan",
-    "network.current": "Jaringan Sekarang",
     "network.set-custom": "Set Custom Network",
     "network.address": "Alamat Jaringan",
-    "network.choose": "Pilih dari lis:",
-    "network.or-custom": "…atau masukkan alamat khusus:",
-    "network.change-here": "Set jaringan yang berbeda",
     "network.public": "Anda sedang menggunakan Instans Horizon Publik ini:",
     "network.test": "Anda sedang menggunakan Instans Testnet Horizon:",
     "network.local": "Anda sedang menggunakan Instans Lokal Horizon:",

diff --git a/app/lib/languages/ja.json b/app/lib/languages/ja.json
@@ -83,12 +83,8 @@
     "more": "詳細",
     "name": "名前",
     "network": "ネットワーク",
-    "network.current": "現在のネットワーク",
     "network.set-custom": "カスタムネットワークを設定",
     "network.address": "ネットワークアドレス",
-    "network.choose": "リストから選ぶ:",
-    "network.or-custom": "...またはカスタムアドレスを入力:",
-    "network.change-here": "別のネットワークを設定する",
     "network.public": "現在このPublic Horizonインスタンスを使用しています:",
     "network.test": "現在このTestnet Horizonインスタンスを使用しています:",
     "network.local": "現在このローカル Horizonインスタンスを使用しています:",

diff --git a/app/lib/languages/ur.json b/app/lib/languages/ur.json
@@ -79,12 +79,8 @@
     "more": "مزید",
     "name": "نام",
     "network": "نیٹ ورک",
-    "network.current": "موجودہ نیٹ ورک",
     "network.set-custom": "اپنی مرضی کے مطابق نیٹ ورک رکھيں",
     "network.address": "نیٹ ورک کا پتہ",
-    "network.choose": ":فہرست میں سے انتخاب کریں",
-    "network.or-custom": " :…اپنی مرضی کے مطابق پتہ لکھيں",
-    "network.change-here": "مختلف نیٹ ورک انتخاب کریں",
     "network.public": ":آپ فی الحال یہ عوامی افق استعمال کر رہے ہیں",
     "network.test": ":افق استعمال کر رہے ہیں Testnet آپ فی الحال یہ",
     "network.local": ":آپ فی الحال يہ مقامی افق استعمال کر رہے ہیں",

diff --git a/app/lib/languages/zh-Hans.json b/app/lib/languages/zh-Hans.json
@@ -75,12 +75,8 @@
     "more": "更多",
     "name": "名称",
     "network": "网络",
-    "network.current": "当前网络",
     "network.set-custom": "设置自定义网络",
     "network.address": "网络地址",
-    "network.choose": "从列表中选择:",
-    "network.or-custom": "...或输入自定义地址:",
-    "network.change-here": "设置不同的网络",
     "network.public": "您目前正在使用Public Horizon实例:",
     "network.test": "您目前正在使用Testnet Horizon实例:",
     "network.local": "您目前正在使用本地实例:",

diff --git a/app/lib/languages/zh-Hant.json b/app/lib/languages/zh-Hant.json
@@ -75,12 +75,8 @@
     "more": "更多",
     "name": "名稱",
     "network": "網絡",
-    "network.current": "當前網絡",
     "network.set-custom": "設置自定義網絡",
     "network.address": "網絡地址",
-    "network.choose": "從列表中選擇:",
-    "network.or-custom": "...或輸入自定義地址:",
-    "network.change-here": "設置不同的網絡",
     "network.public": "您目前正在使用Public Horizon實例:",
     "network.test": "您目前正在使用Testnet Horizon實例:",
     "network.local": "您目前正在使用本地實例:",