Rewamp (#26)

.env

@@ -1,2 +1,3 @@
-MARLOWE_RUNTIME_WEB_URL=<Your-Runtime-Instance>
-MARLOWE_SCAN_URL=<Your-Scan-Instance>
+MARLOWE_RUNTIME_WEB_URL=https://marlowe-runtime-preprod-web.demo.scdev.aws.iohkdev.io
+MARLOWE_SCAN_URL=https://preprod.marlowescan.com
+CARDANO_SCAN_URL=https://preprod.cardanoscan.io

deploy/templates/marlowe-payouts.yaml

@@ -46,7 +46,8 @@ spec:
                   cat > /share/marlowe-payouts/static/config.json <<EOF
                   {
                     "marloweWebServerUrl": "https://marlowe-runtime-{{ $network }}-web.demo.scdev.aws.iohkdev.io",
-                    "marloweScanURL": "https://{{ $network }}.marlowescan.com"
+                    "marloweScanURL": "https://{{ $network }}.marlowescan.com",
+                    "cardanoScanURL": "https://{{ $network }}.cardanoscan.io"
                   }
                   EOF
             mountName: client-www
@@ -111,7 +112,8 @@ spec:
                         cat > /share/marlowe-payouts/static/config.json <<EOF
                         {
                           "marloweWebServerUrl": "https://marlowe-runtime-{{ $network }}-web.demo.scdev.aws.iohkdev.io",
-                          "marloweScanURL": "https://{{ $network }}.marlowescan.com"
+                          "marloweScanURL": "https://{{ $network }}.marlowescan.com",
+                          "cardanoScanURL": "https://{{ $network }}.cardanoscan.io"
                         }
                         EOF
                   mountName: client-www

package.json

@@ -3,16 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@marlowe.io/adapter": "0.2.0-alpha-3",
-    "@marlowe.io/language-core-v1": "0.2.0-alpha-3",
-    "@marlowe.io/runtime-core": "0.2.0-alpha-3",
-    "@marlowe.io/runtime-lifecycle": "0.2.0-alpha-3",
-    "@marlowe.io/runtime-rest-client": "0.2.0-alpha-3",
-    "@marlowe.io/wallet": "0.2.0-alpha-3",
+    "@marlowe.io/runtime-lifecycle": "0.2.0-alpha-19",
+    "@marlowe.io/runtime-rest-client": "0.2.0-alpha-19",
+    "@marlowe.io/runtime-core": "0.2.0-alpha-19",
+    "@marlowe.io/adapter": "0.2.0-alpha-19",
+    "@marlowe.io/language-core-v1": "0.2.0-alpha-19",
+    "@marlowe.io/language-examples": "0.2.0-alpha-19",
+    "semantic-ui-css": "2.5.0",
+    "semantic-ui-react": "2.1.4",
+    "@marlowe.io/wallet": "0.2.0-alpha-19",
     "@types/node": "^16.18.40",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
+    "react-datepicker": "^4.17.0",
     "bootstrap": "^5.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Adapters/Format.tsx

@@ -0,0 +1,70 @@
+import { AssetId, Assets, PayoutId, Token, payoutIdToTxId, unPayoutId, unPolicyId } from "@marlowe.io/runtime-core";
+import React, {  } from 'react';
+import { ContractId, unContractId } from "@marlowe.io/runtime-core"
+
+
+export function* intersperse(a: string[], delim: string) {
+  let first = true;
+  for (const x of a) {
+    if (!first) yield delim;
+    first = false;
+    yield x;
+  }
+}
+
+export function contractIdLink (marloweScanURL : string , contractId : ContractId) {
+  return <a target="_blank"
+   rel="noopener noreferrer"
+   href={`${marloweScanURL}/contractView?tab=info&contractId=` + encodeURIComponent(unContractId(contractId))}>
+   {truncateAddress(unContractId(contractId))}<span style={{fontSize:"small"}}>#</span> </a> 
+ }
+
+ export function payoutTxLink (cardanoScanURL : string , payoutId : PayoutId) {
+  return <a target="_blank"
+   rel="noopener noreferrer"
+   href={`${cardanoScanURL}/transaction/` + encodeURIComponent(payoutIdToTxId(payoutId))}>
+   {truncateId(payoutIdToTxId(payoutId))}<span style={{fontSize:"small"}}>#</span> </a> 
+ }
+
+ export function roleTokenLink (cardanoScanURL : string , roleToken : AssetId) {
+  return <a target="_blank"
+   rel="noopener noreferrer"
+   href={`${cardanoScanURL}/tokenPolicy/` + encodeURIComponent(unPolicyId(roleToken.policyId))}>
+   {roleToken.assetName}</a> 
+ }
+
+const truncateId = (str: string) => {
+  const length = str.length;
+  return str.slice(length-64, length-59)
+}
+
+const truncateAddress = (str: string) => {
+  const length = str.length;
+  return str.slice(length-66, length-61)
+}
+
+export const formatAssets = (assets: Assets, isMainnnet: Boolean): string[] => {
+  const [adas, lovelaces, currency] = formatADAs(assets.lovelaces, isMainnnet)
+  const formattedADA = lovelaces === '000000' ? adas + ' ' + currency : adas + '.' + lovelaces + ' ' + currency
+  return [formattedADA].concat(assets.tokens.map((tk: Token) => `${tk.quantity} ${tk.assetId.assetName}`))
+}
+
+export type CurrencyF = String
+export type WholeNumberF = string
+export type DecimalF = string
+const formatADAs = (lovelaces: bigint, isMainnet: Boolean = false, currencyName: string = "₳"): [WholeNumberF, DecimalF, CurrencyF] => {
+  const adas = (Math.trunc(Number(lovelaces).valueOf() / 1_000_000))
+  const decimalADAs = (lovelaces % 1_000_000n)
+  const currency = isMainnet ? currencyName : "t" + currencyName
+  return [adas.toString(), decimalADAs.toString().padStart(6, '0'), currency]
+}
+
+export const shortViewTxOutRef = (txOutRef: string) => txOutRef.substring(txOutRef.length - 6);
+
+export const cssOverrideSpinnerCentered 
+  = ({display: "block",
+      marginLeft: "10px",
+      marginRight:"auto",
+      height: "auto",
+      witdth : "20px",
+      paddingTop: "10px"})

src/components/Adapters/Icon.ts

@@ -0,0 +1,9 @@
+export const ICON_SIZES = {
+    XS: 15,
+    S: 20,
+    M: 25,
+    L: 30,
+    XL: 40,
+    XXL: 64,
+    XXXL: 192,
+  };