SEP-24: show more_info_url for incomplete transactions

packages/demo-wallet-client/src/components/LogItem/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { marked } from "marked";
-import { Icon } from "@stellar/design-system";
+import { Icon, TextLink } from "@stellar/design-system";
 import { Json } from "components/Json";
 import { sanitizeHtml } from "demo-wallet-shared/build/helpers/sanitizeHtml";
 import { LogType, AnyObject } from "types/types";
@@ -22,6 +22,7 @@ interface LogItemProps {
   title: string;
   variant: LogType;
   body?: string | AnyObject;
+  link?: string;
 }
 
 const theme = {
@@ -63,7 +64,7 @@ const theme = {
   },
 };
 
-export const LogItem = ({ title, variant, body }: LogItemProps) => {
+export const LogItem = ({ title, variant, body, link }: LogItemProps) => {
   const [isFadeReady, setIsFadeReady] = useState(false);
 
   useEffect(() => {
@@ -85,6 +86,13 @@ export const LogItem = ({ title, variant, body }: LogItemProps) => {
         <div className="LogItem__icon">{LogItemIcon[variant]}</div>
         <div className="LogItem__title">{sanitizeHtml(marked(title))}</div>
       </div>
+      {link ? (
+        <div className="LogItem__link">
+          <TextLink href={link} variant={TextLink.variant.secondary}>
+            {link}
+          </TextLink>
+        </div>
+      ) : null}
       {bodyParsed && (
         <div className="LogItem__body">
           {typeof bodyParsed === "object" ? (

packages/demo-wallet-client/src/components/LogItem/styles.scss

@@ -28,12 +28,19 @@
     }
   }
 
-  &__title {
+  &__title,
+  &__link {
     font-size: 1rem;
     line-height: 1.25rem;
     word-break: break-word;
   }
 
+  &__link {
+    padding: 1rem;
+    padding-top: 0;
+    margin-top: -0.8rem;
+  }
+
   &__body {
     padding: 1rem;
     font-weight: var(--font-weight-normal);

packages/demo-wallet-client/src/components/Logs.tsx

@@ -15,14 +15,15 @@ export const Logs = () => {
 
   useEffect(() => {
     const onLogEventMessage = (e: any) => {
-      const { timestamp, type, title, body } = e.detail;
+      const { timestamp, type, title, body, link } = e.detail;
 
       dispatch(
         addLogAction({
           timestamp,
           type,
           title,
           body: JSON.stringify(body),
+          link,
         }),
       );
     };
@@ -105,6 +106,7 @@ export const Logs = () => {
                     variant={log.type}
                     title={log.title}
                     body={log.body}
+                    link={log.link}
                   />
                 ))
               ) : (

packages/demo-wallet-client/src/types/types.ts

@@ -372,6 +372,7 @@ export interface LogItemProps {
   type: LogType;
   title: string;
   body?: string | AnyObject;
+  link?: string;
 }
 
 export interface Store {

packages/demo-wallet-shared/helpers/log.ts

@@ -46,16 +46,19 @@ export const log = {
   instruction: ({
     title,
     body = "",
+    link,
   }: {
     title: string;
     body?: string | AnyObject;
+    link?: string;
   }) => {
-    console.info("💬", title, body);
+    console.info("💬", title, body, link || "");
     dispatchLog({
       timestamp: new Date().getTime(),
       type: LogType.INSTRUCTION,
       title,
       body,
+      link,
     });
   },
 

packages/demo-wallet-shared/methods/sep24/pollDepositUntilComplete.ts

@@ -33,6 +33,19 @@ export const pollDepositUntilComplete = async ({
     TransactionStatus.ERROR,
   ];
 
+  const initResponse = await fetch(transactionUrl.toString(), {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+
+  const initTransactionJson = await initResponse.json();
+
+  if (initTransactionJson?.transaction?.more_info_url) {
+    log.instruction({
+      title: "Transaction MORE INFO URL:",
+      link: initTransactionJson.transaction.more_info_url,
+    });
+  }
+
   while (!popup.closed && !endStatuses.includes(currentStatus)) {
     // eslint-disable-next-line no-await-in-loop
     const response = await fetch(transactionUrl.toString(), {
@@ -46,7 +59,8 @@ export const pollDepositUntilComplete = async ({
       currentStatus = transactionJson.transaction.status;
 
       log.instruction({
-        title: `Transaction MORE INFO URL: \`${transactionJson.transaction.more_info_url}\``,
+        title: "Transaction MORE INFO URL:",
+        link: initTransactionJson.transaction.more_info_url,
       });
 
       log.response({

packages/demo-wallet-shared/types/types.ts

@@ -355,6 +355,7 @@ export interface LogItemProps {
   type: LogType;
   title: string;
   body?: string | AnyObject;
+  link?: string;
 }
 
 export interface Store {