From 46ccc52eb18bcad33a1ad310ddeae0ab6bd96fc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?jeesun=20=EC=A7=80=EC=84=A0?=
 <jeesunikim@users.noreply.github.com>
Date: Wed, 6 Nov 2024 16:36:27 -0800
Subject: [PATCH] Add a muxed account doc to muxed account page (#1137)

---
 src/app/(sidebar)/account/muxed-create/page.tsx | 16 ++++++++++++----
 src/app/(sidebar)/account/muxed-parse/page.tsx  | 16 ++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/app/(sidebar)/account/muxed-create/page.tsx b/src/app/(sidebar)/account/muxed-create/page.tsx
index 4e015c13..550b25cf 100644
--- a/src/app/(sidebar)/account/muxed-create/page.tsx
+++ b/src/app/(sidebar)/account/muxed-create/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Alert, Button, Card, Input, Text } from "@stellar/design-system";
+import { Alert, Button, Card, Input, Link, Text } from "@stellar/design-system";
 
 import { useStore } from "@/store/useStore";
 
@@ -9,6 +9,7 @@ import { ExpandBox } from "@/components/ExpandBox";
 import { MuxedAccountResult } from "@/components/MuxedAccountResult";
 import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
 import { SdsLink } from "@/components/SdsLink";
+import { WithInfoText } from "@/components/WithInfoText";
 
 import { muxedAccount } from "@/helpers/muxedAccount";
 
@@ -68,9 +69,11 @@ export default function CreateMuxedAccount() {
       <Card>
         <div className="Account__card">
           <div className="CardText">
-            <Text size="lg" as="h1" weight="medium">
-              Create Multiplexed Account
-            </Text>
+            <WithInfoText href="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos">
+              <Text size="lg" as="h1" weight="medium">
+                Create Multiplexed Account
+              </Text>
+            </WithInfoText>
 
             <Text size="sm" as="p">
               A muxed (or multiplexed) account (defined in{" "}
@@ -165,6 +168,11 @@ export default function CreateMuxedAccount() {
         title="Muxed accounts are uncommon"
       >
         Don’t use in a production environment unless you know what you’re doing.
+        Read more about Muxed accounts{" "}
+        <Link href="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos#muxed-accounts">
+          here
+        </Link>
+        .
       </Alert>
 
       {Boolean(sdkError) && (
diff --git a/src/app/(sidebar)/account/muxed-parse/page.tsx b/src/app/(sidebar)/account/muxed-parse/page.tsx
index 511eea6a..e9f8784c 100644
--- a/src/app/(sidebar)/account/muxed-parse/page.tsx
+++ b/src/app/(sidebar)/account/muxed-parse/page.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { Alert, Card, Text, Button } from "@stellar/design-system";
+import { Alert, Card, Link, Text, Button } from "@stellar/design-system";
 
 import { useStore } from "@/store/useStore";
 
 import { ExpandBox } from "@/components/ExpandBox";
 import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
 import { MuxedAccountResult } from "@/components/MuxedAccountResult";
+import { WithInfoText } from "@/components/WithInfoText";
 
 import { muxedAccount } from "@/helpers/muxedAccount";
 
@@ -59,9 +60,11 @@ export default function ParseMuxedAccount() {
       <Card>
         <div className="Account__card">
           <div className="CardText">
-            <Text size="lg" as="h1" weight="medium">
-              Get Muxed Account from M address
-            </Text>
+            <WithInfoText href="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos">
+              <Text size="lg" as="h1" weight="medium">
+                Get Muxed Account from M address
+              </Text>
+            </WithInfoText>
           </div>
 
           <PubKeyPicker
@@ -126,6 +129,11 @@ export default function ParseMuxedAccount() {
         title="Muxed accounts are uncommon"
       >
         Don’t use in a production environment unless you know what you’re doing.
+        Read more about Muxed accounts{" "}
+        <Link href="https://developers.stellar.org/docs/learn/encyclopedia/transactions-specialized/pooled-accounts-muxed-accounts-memos#muxed-accounts">
+          here
+        </Link>
+        .
       </Alert>
 
       {Boolean(sdkError) && (