diff --git a/packages/demo-wallet-client/src/components/LogItem/index.tsx b/packages/demo-wallet-client/src/components/LogItem/index.tsx index 23b8ce19..de47e323 100644 --- a/packages/demo-wallet-client/src/components/LogItem/index.tsx +++ b/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) => {
{LogItemIcon[variant]}
{sanitizeHtml(marked(title))}
+ {link ? ( +
+ + {link} + +
+ ) : null} {bodyParsed && (
{typeof bodyParsed === "object" ? ( diff --git a/packages/demo-wallet-client/src/components/LogItem/styles.scss b/packages/demo-wallet-client/src/components/LogItem/styles.scss index 9d38f639..4093d7f8 100644 --- a/packages/demo-wallet-client/src/components/LogItem/styles.scss +++ b/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); diff --git a/packages/demo-wallet-client/src/components/Logs.tsx b/packages/demo-wallet-client/src/components/Logs.tsx index 099deff9..c8ae4316 100644 --- a/packages/demo-wallet-client/src/components/Logs.tsx +++ b/packages/demo-wallet-client/src/components/Logs.tsx @@ -15,7 +15,7 @@ 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({ @@ -23,6 +23,7 @@ export const Logs = () => { 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} /> )) ) : ( diff --git a/packages/demo-wallet-client/src/types/types.ts b/packages/demo-wallet-client/src/types/types.ts index 9995cec3..ed4ce913 100644 --- a/packages/demo-wallet-client/src/types/types.ts +++ b/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 { diff --git a/packages/demo-wallet-shared/helpers/log.ts b/packages/demo-wallet-shared/helpers/log.ts index c01af57a..56f8d221 100644 --- a/packages/demo-wallet-shared/helpers/log.ts +++ b/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, }); }, diff --git a/packages/demo-wallet-shared/methods/sep24/pollDepositUntilComplete.ts b/packages/demo-wallet-shared/methods/sep24/pollDepositUntilComplete.ts index 697242f4..48cfa697 100644 --- a/packages/demo-wallet-shared/methods/sep24/pollDepositUntilComplete.ts +++ b/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({ diff --git a/packages/demo-wallet-shared/types/types.ts b/packages/demo-wallet-shared/types/types.ts index 94a4142c..d7463df8 100644 --- a/packages/demo-wallet-shared/types/types.ts +++ b/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 {