PLT-7616 set api call for config json needed for dynamic setting of m… (

#10)

Co-authored-by: Björn Kihlberg <bjorn.wilhelm.kihlberg@gmail.com>

src/components/App.tsx

@@ -7,7 +7,11 @@ import ToastMessage from './ToastMessage';
 import MarloweSDK from '../services/MarloweSDK';
 
 
-const App: React.FC = () => {
+type AppProps = {
+  runtimeURL: string;
+}
+
+const App: React.FC<AppProps> = ({runtimeURL}) => {
   const [sdk, setSdk] = useState(new MarloweSDK());
   const [toasts, setToasts] = useState<any[]>([]);
 
@@ -24,7 +28,7 @@ const App: React.FC = () => {
     <Router>
       <Routes>
         <Route path="/" element={<Landing sdk={sdk} setAndShowToast={setAndShowToast} />} />
-        <Route path="/vesting-schedules" element={<VestingSchedule sdk={sdk} setAndShowToast={setAndShowToast} />} />
+        <Route path="/vesting-schedules" element={<VestingSchedule sdk={sdk} setAndShowToast={setAndShowToast} runtimeURL={runtimeURL} />} />
       </Routes>
     <div className="toast-container position-fixed bottom-0 end-0 p-3">
       {toasts.map(toast => (

src/components/VestingSchedule.tsx

@@ -16,11 +16,10 @@ import CancelVestingScheduleModal from './modals/CancelVestingScheduleModal';
 import ClaimsModal from './modals/ClaimsModal';
 import ProgressMeter from './widgets/ProgressMeter';
 
-const runtimeURL = `${process.env.MARLOWE_RUNTIME_WEB_URL}`;
-
 type VestingScheduleProps = {
   sdk: MarloweSDK,
-  setAndShowToast: (title:string, message:any, isDanger: boolean) => void
+  setAndShowToast: (title:string, message:any, isDanger: boolean) => void,
+  runtimeURL: string
 };
 
 enum VestingScheduleModal {
@@ -30,7 +29,7 @@ enum VestingScheduleModal {
   DEPOSIT = 'deposit',
 }
 
-const VestingSchedule: React.FC<VestingScheduleProps> = ({sdk, setAndShowToast}) => {
+const VestingSchedule: React.FC<VestingScheduleProps> = ({sdk, setAndShowToast, runtimeURL}) => {
   const navigate = useNavigate();
   const selectedAWalletExtension = localStorage.getItem('walletProvider');
   if (!selectedAWalletExtension) { navigate('/'); }

src/index.tsx

@@ -7,16 +7,38 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 import './styles/main.scss';
 
+import { mkRestClient } from "@marlowe.io/runtime-rest-client";
 
-//  2) Get a reference to the div with ID root
-const el = document.getElementById('root');
+let runtimeURL = process.env.MARLOWE_RUNTIME_WEB_URL;
+await fetch('/config.json').then(async (res) => {
+  if (res.status === 200) {
+    const { marloweWebServerUrl } = await res.json();
+    if (!!marloweWebServerUrl) {
+      runtimeURL = marloweWebServerUrl;
+    }
+  }
+});
 
-if (!el) {
-  throw new Error('Root element not found');
-}
+if (runtimeURL === undefined || runtimeURL === null) {
+  alert("Missing valid config.json file with marloweWebServerUrl OR env keys are not set!")
+} else {
+  const restClient = mkRestClient(runtimeURL)
+  const hasValidRuntimeInstance = await restClient.healthcheck()()
+
+  if (!hasValidRuntimeInstance) {
+    alert("Invalid runtime instance set!")
+  } else {
+    //  2) Get a reference to the div with ID root
+    const el = document.getElementById('root');
 
-//  3) Tell React to take control of that element
-const root = ReactDOM.createRoot(el);
+    if (!el) {
+      throw new Error('Root element not found');
+    }
 
-// 4) Show the component on the screen
-root.render(<App />);
+    //  3) Tell React to take control of that element
+    const root = ReactDOM.createRoot(el);
+
+    // 4) Show the component on the screen
+    root.render(<App runtimeURL={runtimeURL} />);
+  }
+}