Added a link to local lab instance (#94)

* feat: added link to lab

* fix: modified access to props

* feat: switch lab url depending on network & replace button with link

* fix: create a switch for lab prefix

* fix: switched default to testnet

* fix: adapted url params

* fix: removed semi colons in url

Author: hugo-heer

src/contracts/util.ts

@@ -32,6 +32,25 @@ export const stellarNetwork =
     : env.PUBLIC_STELLAR_NETWORK;
 export const networkPassphrase = env.PUBLIC_STELLAR_NETWORK_PASSPHRASE;
 
+const stellarEncode = (str: string) => {
+  return str.replace(/\//g, "//").replace(/;/g, "/;");
+};
+
+export const labPrefix = () => {
+  switch (stellarNetwork) {
+    case "LOCAL":
+      return `http://localhost:8000/lab/transaction-dashboard?$=network$id=custom&label=Custom&horizonUrl=${stellarEncode(horizonUrl)}&rpcUrl=${stellarEncode(rpcUrl)}&passphrase=${stellarEncode(networkPassphrase)};`;
+    case "PUBLIC":
+      return `https://lab.stellar.org/transaction-dashboard?$=network$id=mainnet&label=Mainnet&horizonUrl=${stellarEncode(horizonUrl)}&rpcUrl=${stellarEncode(rpcUrl)}&passphrase=${stellarEncode(networkPassphrase)};`;
+    case "TESTNET":
+      return `https://lab.stellar.org/transaction-dashboard?$=network$id=testnet&label=Testnet&horizonUrl=${stellarEncode(horizonUrl)}&rpcUrl=${stellarEncode(rpcUrl)}&passphrase=${stellarEncode(networkPassphrase)};`;
+    case "FUTURENET":
+      return `https://lab.stellar.org/transaction-dashboard?$=network$id=futurenet&label=Futurenet&horizonUrl=${stellarEncode(horizonUrl)}&rpcUrl=${stellarEncode(rpcUrl)}&passphrase=${stellarEncode(networkPassphrase)};`;
+    default:
+      return `https://lab.stellar.org/transaction-dashboard?$=network$id=testnet&label=Testnet&horizonUrl=${stellarEncode(horizonUrl)}&rpcUrl=${stellarEncode(rpcUrl)}&passphrase=${stellarEncode(networkPassphrase)};`;
+  }
+};
+
 // NOTE: needs to be exported for contract files in this directory
 export const rpcUrl = env.PUBLIC_STELLAR_RPC_URL;
 

src/debug/components/ValidationResponseCard.tsx

@@ -1,6 +1,7 @@
-import { Button, Card, Text } from "@stellar/design-system";
+import { Button, Card, Link, Text } from "@stellar/design-system";
 import { Box } from "../../components/layout/Box";
 import { useState } from "react";
+import { labPrefix } from "../../contracts/util";
 
 type ValidationResponseCard = {
   variant: "primary" | "success" | "error";
@@ -68,6 +69,15 @@ export const ValidationResponseCard = ({
 }: ValidationResponseCard) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
+  const txHash =
+    typeof summary === "object" && summary !== null && "_owner" in summary
+      ? ((
+          summary as {
+            _owner?: { memoizedProps?: { response?: { hash?: string } } };
+          }
+        )._owner?.memoizedProps?.response?.hash ?? "")
+      : "";
+
   const renderSummary = () => {
     if (summary) {
       return (
@@ -109,22 +119,30 @@ export const ValidationResponseCard = ({
             style={{ display: "flex", flexDirection: "column", gap: "2 rem" }}
           >
             {renderSummary()}
-
-            <Button
-              title="Expand"
-              variant="tertiary"
-              size="sm"
-              onClick={() => setIsExpanded(!isExpanded)}
-              style={
-                {
-                  // ...styles.responsiveButtons,
-                  alignSelf: "flex-end",
-                  marginBottom: "1rem",
-                } as React.CSSProperties
-              }
+            <Box
+              gap="xs"
+              direction="row"
+              style={{ alignSelf: "flex-end", marginBottom: "1rem" }}
             >
-              {isExpanded ? "Hide " : "Show "} Details
-            </Button>
+              <Button
+                title="Expand"
+                variant="tertiary"
+                size="sm"
+                onClick={() => setIsExpanded(!isExpanded)}
+              >
+                {isExpanded ? "Hide " : "Show "} Details
+              </Button>
+              {txHash ? (
+                <Link
+                  href={`${labPrefix()}&txDashboard$transactionHash=${txHash}`}
+                  size="xs"
+                >
+                  See on lab
+                </Link>
+              ) : (
+                <></>
+              )}
+            </Box>
             {isExpanded && (
               <Card variant="secondary" noPadding>
                 <div style={styles.content}>