From c1494aa7f0dda03b002a849634549a8e08f041c3 Mon Sep 17 00:00:00 2001 From: Larry Adames Date: Wed, 11 Oct 2023 12:42:03 -0400 Subject: [PATCH 1/3] PLT-7225 set api call for config json needed for dynamic setting of marlowe runtime web url --- src/components/Payouts.tsx | 36 ++++++++++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/src/components/Payouts.tsx b/src/components/Payouts.tsx index 0d3dca8..fd1f40d 100644 --- a/src/components/Payouts.tsx +++ b/src/components/Payouts.tsx @@ -13,7 +13,7 @@ import './Payouts.scss'; import { formatAssets, intersperse, shortViewTxOutRef } from './Format'; import { SupportedWallet } from '@marlowe.io/wallet/browser'; -const runtimeURL = `${process.env.MARLOWE_RUNTIME_WEB_URL}`; +let runtimeURL = `${process.env.MARLOWE_RUNTIME_WEB_URL}`; const marloweScanURL = `${process.env.MARLOWE_SCAN_URL}`; type PayoutsProps = { setAndShowToast: (title: string, message: any, isDanger: boolean) => void @@ -66,11 +66,35 @@ const Payouts: React.FC = ({ 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) + await fetch(`/config.json`).then(async (res) => { + if (res.status === 200) { + const { marloweWebServerUrl } = await res.json(); + if (!!marloweWebServerUrl) { + runtimeURL = marloweWebServerUrl; + } + } + }); + + 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() From 9ea55c129e2d50ec3d2a65795bcf3f109265a21c Mon Sep 17 00:00:00 2001 From: Larry Adames Date: Thu, 12 Oct 2023 03:37:00 -0400 Subject: [PATCH 2/3] PLT-7225 set api call for config json needed for dynamic setting of marlowe runtime web url --- src/components/App.tsx | 9 +++++++-- src/components/Payouts.tsx | 13 ++----------- src/index.tsx | 18 +++++++++++++++++- 3 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 66b4c74..b9af1fa 100644 --- a/src/components/App.tsx +++ b/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 = ({runtimeURL}) => { + const hasSelectedAWalletExtension = localStorage.getItem('walletProvider'); const [toasts, setToasts] = useState([]); @@ -23,7 +28,7 @@ const App: React.FC = () => { : } /> - : } /> + : } />
{toasts.map(toast => ( diff --git a/src/components/Payouts.tsx b/src/components/Payouts.tsx index fd1f40d..78276b0 100644 --- a/src/components/Payouts.tsx +++ b/src/components/Payouts.tsx @@ -13,13 +13,13 @@ import './Payouts.scss'; import { formatAssets, intersperse, shortViewTxOutRef } from './Format'; import { SupportedWallet } from '@marlowe.io/wallet/browser'; -let 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 = ({ setAndShowToast }) => { +const Payouts: React.FC = ({ setAndShowToast, runtimeURL }) => { const navigate = useNavigate(); const selectedAWalletExtension = localStorage.getItem('walletProvider'); if (!selectedAWalletExtension) { navigate('/'); } @@ -66,15 +66,6 @@ const Payouts: React.FC = ({ setAndShowToast }) => { useEffect(() => { const fetchData = async () => { - await fetch(`/config.json`).then(async (res) => { - if (res.status === 200) { - const { marloweWebServerUrl } = await res.json(); - if (!!marloweWebServerUrl) { - runtimeURL = marloweWebServerUrl; - } - } - }); - const runtimeLifecycleParameters: BrowserRuntimeLifecycleOptions = { runtimeURL: runtimeURL, walletName: selectedAWalletExtension as SupportedWallet, diff --git a/src/index.tsx b/src/index.tsx index 6e9fc09..dc2b246 100644 --- a/src/index.tsx +++ b/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(); +if (hasValidRuntimeInstance) { + root.render(); +} else { + alert("Missing valid config.json file with marloweWebServerUrl OR env keys are not set") +} From 56880ecf4398430a7a219f9d29a2fa764b90e549 Mon Sep 17 00:00:00 2001 From: Larry Adames Date: Thu, 12 Oct 2023 03:43:34 -0400 Subject: [PATCH 3/3] PLT-7225 clean up check for runtime url --- src/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index dc2b246..e7792cd 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -31,8 +31,8 @@ if (!el) { const root = ReactDOM.createRoot(el); // 4) Show the component on the screen -if (hasValidRuntimeInstance) { - root.render(); +if (hasValidRuntimeInstance && runtimeURL) { + root.render(); } else { alert("Missing valid config.json file with marloweWebServerUrl OR env keys are not set") }