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

src/components/App.tsx

@@ -6,7 +6,12 @@ import Payouts from './Payouts';
 import ToastMessage from './ToastMessage';
 import { Navigate } from 'react-router-dom';
 
-const App: React.FC = () => {
+interface AppProps extends React.PropsWithChildren<{}> {
+  runtimeURL: string;
+}
+
+const App: React.FC<AppProps> = ({runtimeURL}) => {
+
   const hasSelectedAWalletExtension = localStorage.getItem('walletProvider');
   const [toasts, setToasts] = useState<any[]>([]);
 
@@ -23,7 +28,7 @@ const App: React.FC = () => {
     <Router>
       <Routes>
         <Route path="/" element={hasSelectedAWalletExtension ? <Navigate to="/payouts" /> : <Landing setAndShowToast={setAndShowToast} />} />
-        <Route path="/payouts" element={hasSelectedAWalletExtension ? <Payouts setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
+        <Route path="/payouts" element={hasSelectedAWalletExtension ? <Payouts setAndShowToast={setAndShowToast} runtimeURL={runtimeURL} /> : <Navigate to="/" />} />
       </Routes>
       <div className="toast-container position-fixed bottom-0 end-0 p-3">
         {toasts.map(toast => (

src/components/Payouts.tsx

@@ -13,13 +13,13 @@ import './Payouts.scss';
 import { formatAssets, intersperse, shortViewTxOutRef } from './Format';
 import { SupportedWallet } from '@marlowe.io/wallet/browser';
 
-const runtimeURL = `${process.env.MARLOWE_RUNTIME_WEB_URL}`;
 const marloweScanURL = `${process.env.MARLOWE_SCAN_URL}`;
 type PayoutsProps = {
   setAndShowToast: (title: string, message: any, isDanger: boolean) => void
+  runtimeURL: string
 };
 
-const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast }) => {
+const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
   const navigate = useNavigate();
   const selectedAWalletExtension = localStorage.getItem('walletProvider');
   if (!selectedAWalletExtension) { navigate('/'); }
@@ -66,11 +66,26 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast }) => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const runtimeLifecycleParameters : BrowserRuntimeLifecycleOptions = { runtimeURL:runtimeURL, walletName:selectedAWalletExtension as SupportedWallet}
-      const runtimeLifecycle = await mkRuntimeLifecycle(runtimeLifecycleParameters).then((a) => {setRuntimeLifecycle(a);return a})
-      await runtimeLifecycle.wallet.getChangeAddress().then((changeAddress : AddressBech32) => setChangeAddress(unAddressBech32(changeAddress) ))
-      await runtimeLifecycle.payouts.available().then(setAvailablePayouts)
-      await runtimeLifecycle.payouts.withdrawn().then(setWithdrawnPayouts)
+      const runtimeLifecycleParameters: BrowserRuntimeLifecycleOptions = {
+        runtimeURL: runtimeURL,
+        walletName: selectedAWalletExtension as SupportedWallet,
+      };
+      const runtimeLifecycle = await mkRuntimeLifecycle(runtimeLifecycleParameters).then(
+        (a) => {
+          setRuntimeLifecycle(a);
+          return a;
+        }
+      );
+      await runtimeLifecycle.wallet
+        .getChangeAddress()
+        .then((changeAddress: AddressBech32) =>
+          setChangeAddress(unAddressBech32(changeAddress))
+        );
+      await runtimeLifecycle.payouts
+        .available()
+        .then(setAvailablePayouts);
+      await runtimeLifecycle.payouts.withdrawn().then(setWithdrawnPayouts);
+
     }
 
     fetchData()

src/index.tsx

@@ -8,6 +8,18 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 import './styles/main.scss';
 
+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;
+    }
+  }
+});
+
+const hasValidRuntimeInstance = runtimeURL !== undefined && runtimeURL !== null && runtimeURL !== '' && runtimeURL.startsWith('http');
+
 //  2) Get a reference to the div with ID root
 const el = document.getElementById('root');
 
@@ -19,4 +31,8 @@ if (!el) {
 const root = ReactDOM.createRoot(el);
 
 // 4) Show the component on the screen
-root.render(<App />);
+if (hasValidRuntimeInstance && runtimeURL) {
+  root.render(<App runtimeURL={runtimeURL} />);
+} else {
+  alert("Missing valid config.json file with marloweWebServerUrl OR env keys are not set")
+}