added contract Id + Marlowe Scan Links (#15)

.env

@@ -1,2 +1,3 @@
 MARLOWE_RUNTIME_WEB_URL=https://preprod.runtime.marlowe.palas87.es
+MARLOWE_SCAN_WEB_URL=https://preprod.marlowescan.com/
 DAPP_ID="marlowe.examples.vesting.v0.0.5"

src/components/App.tsx

@@ -10,10 +10,11 @@ import CreatePlans from './vesting/CreatedPlans';
 
 type AppProps = {
   runtimeURL: string;
-  dAppId : string
+  marloweScanURL : string;
+  dAppId : string;
 }
 
-const App: React.FC<AppProps> = ({runtimeURL,dAppId}) => {
+const App: React.FC<AppProps> = ({runtimeURL,marloweScanURL,dAppId}) => {
   const hasSelectedAWalletExtension = localStorage.getItem('walletProvider');
 
   const [toasts, setToasts] = useState<any[]>([]);
@@ -31,8 +32,8 @@ const App: React.FC<AppProps> = ({runtimeURL,dAppId}) => {
     <Router>
       <Routes>
         <Route path="/" element={hasSelectedAWalletExtension ? <Navigate to="/created-plans" /> : <Landing setAndShowToast={setAndShowToast} />} />
-        <Route path="/your-plans" element={hasSelectedAWalletExtension ? <YourTokenPlans runtimeURL={runtimeURL} dAppId={dAppId} setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
-        <Route path="/created-plans" element={hasSelectedAWalletExtension ? <CreatePlans runtimeURL={runtimeURL} dAppId={dAppId} setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
+        <Route path="/your-plans" element={hasSelectedAWalletExtension ? <YourTokenPlans runtimeURL={runtimeURL} marloweScanURL={marloweScanURL} dAppId={dAppId} setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
+        <Route path="/created-plans" element={hasSelectedAWalletExtension ? <CreatePlans runtimeURL={runtimeURL} marloweScanURL={marloweScanURL} dAppId={dAppId} setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
         <Route path="/about" element={hasSelectedAWalletExtension ? <About setAndShowToast={setAndShowToast} /> : <Navigate to="/" />} />
       </Routes>
     <div className="toast-container position-fixed bottom-0 end-0 p-3">

src/components/vesting/CreatedPlans.tsx

@@ -8,21 +8,23 @@ import NewVestingScheduleModal from '../modals/NewVesting';
 import { BrowserRuntimeLifecycleOptions, mkRuntimeLifecycle } from "@marlowe.io/runtime-lifecycle/browser";
 import { Vesting } from "@marlowe.io/language-examples";
 import { mkRestClient } from "@marlowe.io/runtime-rest-client";
-import { AddressBech32, ContractId, Tags, unAddressBech32 } from '@marlowe.io/runtime-core';
+import { AddressBech32, ContractId, Tags, contractId, unAddressBech32, unContractId } from '@marlowe.io/runtime-core';
 import { SupportedWallet } from '@marlowe.io/wallet/browser';
 import { RuntimeLifecycle } from '@marlowe.io/runtime-lifecycle/api';
 import { ContractDetails } from '@marlowe.io/runtime-rest-client/contract/details';
 import HashLoader from 'react-spinners/HashLoader';
 import { Address, Input } from '@marlowe.io/language-core-v1';
 import { Contract } from './Models';
+import { contractIdLink } from './Utils';
 
 type CreatePlansProps = {
   runtimeURL : string,
+  marloweScanURL : string,
   dAppId : string,
   setAndShowToast: (title:string, message:any, isDanger: boolean) => void
 };
 
-const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,dAppId,setAndShowToast}) => {
+const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,marloweScanURL,dAppId,setAndShowToast}) => {
   const navigate = useNavigate();
   const selectedAWalletExtension = localStorage.getItem('walletProvider');
   if (!selectedAWalletExtension) { navigate('/'); }
@@ -239,7 +241,7 @@ const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,dAppId,setAndShowTo
       <div className="header">
         <img src="/images/marlowe-logo-primary.svg" alt="Logo" className="mb-4" />
         <div className='col-5 text-center'>
-          <h2>Token Plan Prototype</h2>
+          <h1>Token Plan Prototype</h1>
         </div>
         <div className="connected-wallet-details">
           <div className="dropdown">
@@ -302,10 +304,10 @@ const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,dAppId,setAndShowTo
         <table className="table">
           <thead>
             <tr>
-              {/* Headers */}
+              <th>Contract Id</th>
               <th>Title</th>
               <th>Claimer</th>
-              <th>Status </th>
+              <th>Status</th>
               <th>Cycle</th>
               <th>Periods</th>
               <th>Total</th>
@@ -318,6 +320,7 @@ const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,dAppId,setAndShowTo
             {contractsWaitingForDeposit
                 .map((contract, index) => (
                 <tr key={index}>
+                  <td>{contractIdLink(marloweScanURL,contract.contractId)}</td>
                   <td>{contract.title}</td>
                   <td>{contract.claimer.firstName + '  ' + contract.claimer.lastName}</td>
                   <td><span className='text-success'>Awaiting Deposit</span></td>
@@ -349,6 +352,7 @@ const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,dAppId,setAndShowTo
             {contractsWithinVestingPeriod
               .map((contract, index) => (
               <tr key={index}>
+                <td>{contractIdLink(marloweScanURL,contract.contractId)}</td>
                 <td>{contract.title}</td>
                 <td>{contract.claimer.firstName + '  ' + contract.claimer.lastName}</td>
                 <td>
@@ -386,6 +390,7 @@ const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,dAppId,setAndShowTo
             {contractsVestingEnded
               .map((contract, index) => (
               <tr key={index}>
+                <td>{contractIdLink(marloweScanURL,contract.contractId)}</td>
                 <td>{contract.title}</td>
                 <td> {contract.claimer.firstName + '  ' + contract.claimer.lastName}</td>
                 <td> <span className='text-primary'>Plan Ended</span></td>
@@ -399,6 +404,7 @@ const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,dAppId,setAndShowTo
             {contractsNoDepositBeforeDeadline
               .map((contract, index) => (
               <tr key={index}>
+                <td>{contractIdLink(marloweScanURL,contract.contractId)}</td>
                 <td>{contract.title}</td>
                 <td>{contract.claimer.firstName + '  ' + contract.claimer.lastName}</td>
                 <td><span className='text-danger'>Deposit Deadline Passed</span></td>
@@ -429,9 +435,10 @@ const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,dAppId,setAndShowTo
             {contractsClosed
                   .map((contract, index) => (
                   <tr key={index}>
+                    <td>{contractIdLink(marloweScanURL,contract.contractId)}</td>
                     <td>{contract.title}</td>
                     <td>{contract.claimer.firstName + '  ' + contract.claimer.lastName}</td>
-                    <td><b className='text-secondary'>Closed</b></td>
+                    <td><b className='text-secondary'>Closed </b></td>
                     <td>{contract.state.scheme.frequency}</td>
                     <td>{contract.state.scheme.numberOfPeriods.toString()}</td>
                     <td>{formatADAs(contract.state.scheme.expectedInitialDeposit.amount)}</td>
@@ -458,6 +465,7 @@ const CreatePlans: React.FC<CreatePlansProps> = ({runtimeURL,dAppId,setAndShowTo
 
 
 
+
 export type CurrencyF = String
 export type WholeNumberF = string
 export type DecimalF = string

src/components/vesting/Models.ts

@@ -15,4 +15,5 @@ export type Contract<State> =
 export type Claimer = 
   { firstName : string
   , lastName : string
-  , id : ClaimerId} 
+  , id : ClaimerId} 
+

src/components/vesting/Utils.tsx

@@ -0,0 +1,15 @@
+import { ContractId, unContractId } from "@marlowe.io/runtime-core"
+import React, { useEffect, useState } from 'react';
+
+export function contractIdLink (marloweScanURL : string , contractId : ContractId) {
+    return <a target="_blank"
+     rel="noopener noreferrer"
+     href={`${marloweScanURL}/contractView?tab=info&contractId=` + encodeURIComponent(unContractId(contractId))}>
+     {truncateString(unContractId(contractId), 5, 60)} </a> 
+   }
+
+const truncateString = (str: string, start: number, end: number) => {
+  const length = str.length;
+  const lastLetterIndex = length ;
+  return str.slice(end, lastLetterIndex)
+}

src/components/vesting/YourPlans.tsx

@@ -13,15 +13,17 @@ import { ContractDetails } from '@marlowe.io/runtime-rest-client/contract/detail
 import HashLoader from 'react-spinners/HashLoader';
 import { Input } from '@marlowe.io/language-core-v1';
 import { Contract } from './Models';
+import { contractIdLink } from './Utils';
 
 
 type YourTokenPlansProps = {
   runtimeURL : string,
+  marloweScanURL : string,
   dAppId : string,
   setAndShowToast: (title:string, message:any, isDanger: boolean) => void
 };
 
-const YourTokenPlans: React.FC<YourTokenPlansProps> = ({runtimeURL,dAppId,setAndShowToast}) => {
+const YourTokenPlans: React.FC<YourTokenPlansProps> = ({runtimeURL,marloweScanURL,dAppId,setAndShowToast}) => {
   const navigate = useNavigate();
   const selectedAWalletExtension = localStorage.getItem('walletProvider');
   if (!selectedAWalletExtension) { navigate('/'); }
@@ -170,7 +172,7 @@ const YourTokenPlans: React.FC<YourTokenPlansProps> = ({runtimeURL,dAppId,setAnd
       <div className="header">
         <img src="/images/marlowe-logo-primary.svg" alt="Logo" className="mb-4" />
         <div className='col-5 text-center'>
-          <h2>Token Plan Prototype</h2>
+          <h1>Token Plan Prototype</h1>
         </div>
         <div className="connected-wallet-details">
           <div className="dropdown">
@@ -216,6 +218,7 @@ const YourTokenPlans: React.FC<YourTokenPlansProps> = ({runtimeURL,dAppId,setAnd
           <thead>
             <tr>
               {/* Headers */}
+              <th>Contract Id</th>
               <th>Title</th>
               <th>Status </th>
               <th>Cycle</th>
@@ -229,8 +232,9 @@ const YourTokenPlans: React.FC<YourTokenPlansProps> = ({runtimeURL,dAppId,setAnd
           {contractsVestingEnded
               .map((contract, index) => (
               <tr key={index}>
+                <td>{contractIdLink(marloweScanURL,contract.contractId)}</td>
                 <td>{contract.title}</td>
-                <td> <span className='text-primary'>Plan Ended</span> </td>
+                <td> <span className='text-primary'>Plan Ended</span></td>
                 <td>{contract.state.scheme.frequency}</td>
                 <td>{contract.state.scheme.numberOfPeriods.toString()}</td>
                 <td>{formatADAs(contract.state.quantities.total)}</td>
@@ -258,6 +262,7 @@ const YourTokenPlans: React.FC<YourTokenPlansProps> = ({runtimeURL,dAppId,setAnd
             {contractsWithinVestingPeriod
               .map((contract, index) => (
               <tr key={index}>
+                <td>{contractIdLink(marloweScanURL,contract.contractId)}</td>
                 <td>{contract.title}</td>
                 <td>
                     {contract.state.currentPeriod === contract.state.scheme.numberOfPeriods 
@@ -293,6 +298,7 @@ const YourTokenPlans: React.FC<YourTokenPlansProps> = ({runtimeURL,dAppId,setAnd
             {contractsClosed
               .map((contract, index) => (
               <tr key={index}>
+                <td>{contractIdLink(marloweScanURL,contract.contractId)}</td>
                 <td>{contract.title}</td>
                 <td> <b className='text-secondary'>Closed</b> </td>
                 <td>{contract.state.scheme.frequency}</td>

src/index.tsx

@@ -8,8 +8,10 @@ import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 import './styles/main.scss';
 
 import { mkRestClient } from "@marlowe.io/runtime-rest-client";
-const dAppId = `${process.env.DAPP_ID}`;
+const dAppId = process.env.DAPP_ID;
+const marloweScanURL = process.env.MARLOWE_SCAN_WEB_URL;
 let runtimeURL = process.env.MARLOWE_RUNTIME_WEB_URL;
+
 await fetch('/config.json').then(async (res) => {
   if (res.status === 200) {
     const { marloweWebServerUrl } = await res.json();
@@ -18,8 +20,13 @@ await fetch('/config.json').then(async (res) => {
     }
   }
 });
-
-if (runtimeURL === undefined || runtimeURL === null) {
+if(marloweScanURL === undefined  ) {
+  alert("Missing valid config.json file with marloweScanURL OR env keys are not set!")
+}
+else if(dAppId === undefined  ) {
+  alert("Missing valid config.json file with dAppId OR env keys are not set!")
+}
+else if (runtimeURL === undefined || runtimeURL === null) {
   alert("Missing valid config.json file with marloweWebServerUrl OR env keys are not set!")
 } else {
   const restClient = mkRestClient(runtimeURL)
@@ -39,6 +46,6 @@ if (runtimeURL === undefined || runtimeURL === null) {
     const root = ReactDOM.createRoot(el);
 
     // 4) Show the component on the screen
-    root.render(<App runtimeURL={runtimeURL} dAppId={dAppId} />);
+    root.render(<App runtimeURL={runtimeURL} marloweScanURL={marloweScanURL} dAppId={dAppId} />);
   }
 }