Skip to content

Commit

Permalink
look for marlowe scan url in config
Browse files Browse the repository at this point in the history
  • Loading branch information
@bjornkihlberg @hrajchert
bjornkihlberg authored and hrajchert committed Oct 24, 2023
1 parent 34cc5e4 commit 33f4a59
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 50 deletions.
5 changes: 3 additions & 2 deletions src/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ import { Navigate } from 'react-router-dom';

interface AppProps extends React.PropsWithChildren<{}> {
runtimeURL: string;
scanURL: string;
}

const App: React.FC<AppProps> = ({runtimeURL}) => {
const App: React.FC<AppProps> = ({ runtimeURL, scanURL }) => {

const hasSelectedAWalletExtension = localStorage.getItem('walletProvider');
const [toasts, setToasts] = useState<any[]>([]);
Expand All @@ -28,7 +29,7 @@ const App: React.FC<AppProps> = ({runtimeURL}) => {
<Router>
<Routes>
<Route path="/" element={hasSelectedAWalletExtension ? <Navigate to="/payouts" /> : <Landing setAndShowToast={setAndShowToast} />} />
<Route path="/payouts" element={hasSelectedAWalletExtension ? <Payouts setAndShowToast={setAndShowToast} runtimeURL={runtimeURL} /> : <Navigate to="/" />} />
<Route path="/payouts" element={hasSelectedAWalletExtension ? <Payouts setAndShowToast={setAndShowToast} runtimeURL={runtimeURL} scanURL={scanURL} /> : <Navigate to="/" />} />
</Routes>
<div className="toast-container position-fixed bottom-0 end-0 p-3">
{toasts.map(toast => (
Expand Down
61 changes: 32 additions & 29 deletions src/components/Payouts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import './Payouts.scss';
import { formatAssets, intersperse, shortViewTxOutRef } from './Format';
import { SupportedWallet } from '@marlowe.io/wallet/browser';

const marloweScanURL = `${process.env.MARLOWE_SCAN_URL}`;
type PayoutsProps = {
setAndShowToast: (title: string, message: any, isDanger: boolean) => void
runtimeURL: string
runtimeURL: string,
scanURL: string
};

const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL, scanURL }) => {
const navigate = useNavigate();
const selectedAWalletExtension = localStorage.getItem('walletProvider');
if (!selectedAWalletExtension) { navigate('/'); }
Expand All @@ -37,7 +37,7 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
const [secondTabContentClassNames, setSecondTabContentClassNames] = useState('tab-pane fade d-none');

const payoutsToBeWithdrawn = availablePayouts.filter(payout => payoutIdsToBeWithdrawn.includes(unPayoutId(payout.payoutId)))

const toggleTabContentClassNames = () => {
setFirstTabContentClassNames(firstTabContentClassNames === 'tab-pane fade show active' ? 'tab-pane fade d-none' : 'tab-pane fade show active');
setSecondTabContentClassNames(secondTabContentClassNames === 'tab-pane fade d-none' ? 'tab-pane fade show active' : 'tab-pane fade d-none');
Expand All @@ -63,7 +63,7 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
setPayoutIdsToBeWithdrawn([]);
setIsLoading(false);
};

useEffect(() => {
const fetchData = async () => {
const runtimeLifecycleParameters: BrowserRuntimeLifecycleOptions = {
Expand All @@ -89,15 +89,15 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
}

fetchData()
.catch(err =>
{ console.log("Error", err);
const error = JSON.parse(err);
const { message } = error;
setAndShowToast(
'Failed Retrieving Payouts Infornation',
<span className='text-color-white'>{message}</span>,
true)
})
.catch(err => {
console.log("Error", err);
const error = JSON.parse(err);
const { message } = error;
setAndShowToast(
'Failed Retrieving Payouts Infornation',
<span className='text-color-white'>{message}</span>,
true)
})

const intervalId = setInterval(() => {
fetchData().catch(err => console.error(err));
Expand Down Expand Up @@ -167,7 +167,7 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {

const handleWithdrawals = async () => {
if (runtimeLifecycle) {
try {
try {
setIsLoading(true)
setAndShowToast(
'Please sign your transaction',
Expand All @@ -176,17 +176,17 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
</div>,
false
)

await runtimeLifecycle.payouts.withdraw(payoutsToBeWithdrawn.map(payout => payout.payoutId))

closeModalAndClearPayouts()
setAndShowToast(
'Payouts withdrawn',
<span className='text-color-white'>Successfully withdrawn payouts.</span>,
false
)
} catch (err : any)
{ console.log("Error", err);
)
} catch (err: any) {
console.log("Error", err);
const error = JSON.parse(err);
const { message } = error;
closeModalAndClearPayouts()
Expand All @@ -198,7 +198,10 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
</div>
,
true
)}}}
)
}
}
}

const payoutSelectedToBeWithdrawn = (payoutId: string) => {
return payoutIdsToBeWithdrawn.includes(payoutId);
Expand Down Expand Up @@ -271,7 +274,7 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
<td className='py-3'>
<a target="_blank"
rel="noopener noreferrer"
href={`${marloweScanURL}/contractView?tab=info&contractId=` + encodeURIComponent(unContractId(payout.contractId))}>
href={`${scanURL}/contractView?tab=info&contractId=` + encodeURIComponent(unContractId(payout.contractId))}>
{truncateString(unContractId(payout.contractId), 5, 60)}
</a>
</td>
Expand All @@ -280,13 +283,13 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
<td className='py-3'>
{isLoading && payoutSelectedToBeWithdrawn(unPayoutId(payout.payoutId))
? <button disabled className='btn btn-primary'>
<span className="pl-2 spinner-border spinner-border-sm text-white " role="status">
<span className="visually-hidden">Loading...</span>
</span>
<span> Processing...</span>
</button>
<span className="pl-2 spinner-border spinner-border-sm text-white " role="status">
<span className="visually-hidden">Loading...</span>
</span>
<span> Processing...</span>
</button>
: <button disabled={isLoading} className='btn btn-primary' onClick={() => toggleBundleWithdrawal(unPayoutId(payout.payoutId))}>
{ isLoading ?
{isLoading ?
<span>
<span className="pl-2 spinner-border spinner-border-sm text-white " role="status">
<span className="visually-hidden">Loading...</span>
Expand Down Expand Up @@ -332,7 +335,7 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
<tr key={index}>
<td className='py-3'><a target="_blank"
rel="noopener noreferrer"
href={`${marloweScanURL}/contractView?tab=info&contractId=` + encodeURIComponent(unContractId(payout.contractId))}>
href={`${scanURL}/contractView?tab=info&contractId=` + encodeURIComponent(unContractId(payout.contractId))}>
{shortViewTxOutRef(unContractId(payout.contractId))} </a>
</td>
<td className='py-3'>{payout.role.assetName}</td>
Expand Down
46 changes: 27 additions & 19 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,35 +10,43 @@ import './styles/main.scss';
import { mkRestClient } from "@marlowe.io/runtime-rest-client";

let runtimeURL = process.env.MARLOWE_RUNTIME_WEB_URL;
let scanURL = process.env.MARLOWE_SCAN_URL;
await fetch(`/config.json`).then(async (res) => {
if (res.status === 200) {
const { marloweWebServerUrl } = await res.json();
const { marloweWebServerUrl, marloweScanURL } = await res.json();
if (!!marloweWebServerUrl) {
runtimeURL = marloweWebServerUrl;
}
if (!!marloweScanURL) {
scanURL = marloweScanURL;
}
}
});

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()
const CONFIGURATION_ERROR = Symbol()

if (!hasValidRuntimeInstance) {
alert("Invalid runtime instance set!")
} else {
// 2) Get a reference to the div with ID root
const el = document.getElementById('root');
try {
if (typeof runtimeURL !== "string")
throw new Error("Missing valid config.json file with marloweWebServerUrl OR env MARLOWE_RUNTIME_WEB_URL is not set!", { cause: CONFIGURATION_ERROR });

if (!el) {
throw new Error('Root element not found');
}
if (typeof scanURL !== "string")
throw new Error("Missing valid config.json file with marloweScanURL OR env MARLOWE_SCAN_URL is not set!", { cause: CONFIGURATION_ERROR });

// 3) Tell React to take control of that element
const root = ReactDOM.createRoot(el);
const restClient = mkRestClient(runtimeURL);
const hasValidRuntimeInstance = await restClient.healthcheck();

// 4) Show the component on the screen
root.render(<App runtimeURL={runtimeURL} />);
}
if (!hasValidRuntimeInstance)
throw new Error("Invalid runtime instance set!", { cause: CONFIGURATION_ERROR });

const el = document.getElementById('root');

if (!el)
throw new Error('Root element not found');

const root = ReactDOM.createRoot(el);
root.render(<App runtimeURL={runtimeURL} scanURL={scanURL} />);
} catch (e) {
if (e instanceof Error && e.cause === CONFIGURATION_ERROR)
alert(e.message);
else throw e
}

0 comments on commit 33f4a59

Please sign in to comment.