From 5f273b21d889153cd378a80d5e845b7bbab3a2e2 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: Mon, 15 Apr 2024 10:46:10 -0700
Subject: [PATCH 1/3] [Sign TX] Input Overview View (#826)

---
 package.json                                 |   2 +-
 src/app/(sidebar)/transaction/sign/page.tsx  | 198 ++++++++++++++++++-
 src/components/FormElements/PubKeyPicker.tsx |   2 +
 src/components/FormElements/TextPicker.tsx   |  33 ++--
 src/components/FormElements/XdrPicker.tsx    |  42 ++--
 src/components/MuxedAccountResult.tsx        |   6 +-
 src/constants/signTransactionPage.ts         |  62 ++++++
 src/helpers/trim.ts                          |   3 +
 src/styles/globals.scss                      |  61 +++++-
 src/validate/methods/xdr.ts                  |  36 +++-
 yarn.lock                                    |  28 +--
 11 files changed, 406 insertions(+), 67 deletions(-)
 create mode 100644 src/constants/signTransactionPage.ts
 create mode 100644 src/helpers/trim.ts

diff --git a/package.json b/package.json
index 95a6b0bf..a542729d 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts"
   },
   "dependencies": {
-    "@stellar/design-system": "^2.0.0-beta.9",
+    "@stellar/design-system": "^2.0.0-beta.10",
     "@stellar/stellar-sdk": "^11.3.0",
     "@tanstack/react-query": "^5.28.8",
     "@tanstack/react-query-devtools": "^5.28.8",
diff --git a/src/app/(sidebar)/transaction/sign/page.tsx b/src/app/(sidebar)/transaction/sign/page.tsx
index 326001a7..ad69a014 100644
--- a/src/app/(sidebar)/transaction/sign/page.tsx
+++ b/src/app/(sidebar)/transaction/sign/page.tsx
@@ -1,5 +1,201 @@
 "use client";
 
+import { useState } from "react";
+import { Alert, Card, Icon, Text, Button } from "@stellar/design-system";
+import {
+  TransactionBuilder,
+  FeeBumpTransaction,
+  Transaction,
+} from "@stellar/stellar-sdk";
+
+import { useStore } from "@/store/useStore";
+
+import { XdrPicker } from "@/components/FormElements/XdrPicker";
+import { TextPicker } from "@/components/FormElements/TextPicker";
+import { validate } from "@/validate";
+
+import { FEE_BUMP_TX_FIELDS, TX_FIELDS } from "@/constants/signTransactionPage";
+
+const MIN_LENGTH_FOR_FULL_WIDTH_FIELD = 30;
+
 export default function SignTransaction() {
-  return <div>Sign Transaction</div>;
+  const { network } = useStore();
+  const [txEnv, setTxEnv] = useState<string>("");
+  const [isTxValid, setIsTxValid] = useState<boolean | undefined>(undefined);
+  const [txErrMsg, setTxErrMsg] = useState<string>("");
+  const [txSuccessMsg, setTxSuccessMsg] = useState<string>("");
+  const [tx, setTx] = useState<FeeBumpTransaction | Transaction | undefined>(
+    undefined,
+  );
+  const [isTxImported, setIsTxImported] = useState<boolean>(false);
+
+  const onChange = (value: string) => {
+    setTxErrMsg("");
+    setTxSuccessMsg("");
+    setTxEnv(value);
+
+    if (value.length > 0) {
+      const validatedXDR = validate.xdr(value);
+
+      if (validatedXDR.result === "success") {
+        setIsTxValid(true);
+        setTxSuccessMsg(validatedXDR.message);
+      } else {
+        setIsTxValid(false);
+        setTxErrMsg(validatedXDR.message);
+      }
+    }
+  };
+
+  const onImport = () => {
+    try {
+      const transaction = TransactionBuilder.fromXDR(txEnv, network.passphrase);
+      setIsTxImported(true);
+      setTx(transaction);
+    } catch (e) {
+      setIsTxImported(false);
+      setTxErrMsg("Unable to import a transaction envelope");
+    }
+  };
+
+  const rendeImportView = () => {
+    return (
+      <>
+        <Card>
+          <div className="SignTx__xdr">
+            <XdrPicker
+              id="sign-transaction-xdr"
+              label={
+                <Text size="xs" as="span" weight="medium">
+                  Import a transaction envelope in XDR format
+                  <span className="SignTx__icon">
+                    <Icon.AlertCircle />
+                  </span>
+                </Text>
+              }
+              value={txEnv || ""}
+              error={txErrMsg}
+              success={
+                <Text size="xs" as="span" addlClassName="success-message">
+                  {txSuccessMsg}
+                </Text>
+              }
+              onChange={(e) => onChange(e.target.value)}
+            />
+
+            <div className="SignTx__CTA">
+              <Button
+                disabled={!txEnv || !isTxValid}
+                size="md"
+                variant={"secondary"}
+                onClick={onImport}
+              >
+                Import transaction
+              </Button>
+            </div>
+          </div>
+        </Card>
+
+        <Alert
+          placement="inline"
+          variant="primary"
+          actionLink="https://developers.stellar.org/network/horizon/resources"
+          actionLabel="Read more about signatures on the developer's site"
+        >
+          <Text size="sm" as="p">
+            The transaction signer lets you add signatures to a Stellar
+            transaction. Signatures are used in the network to prove that the
+            account is authorized to perform the operations in the transaction.
+          </Text>
+          <Text size="sm" as="p">
+            For simple transactions, you only need one signature from the
+            correct account. Some advanced transactions may require more than
+            one signature if there are multiple source accounts or signing keys.
+          </Text>
+        </Alert>
+      </>
+    );
+  };
+
+  const renderOverviewView = () => {
+    if (!tx) {
+      return null;
+    }
+
+    const REQUIRED_FIELDS = [
+      {
+        label: "Signing for",
+        value: network.passphrase,
+      },
+      {
+        label: "Transaction Envelope XDR",
+        value: txEnv,
+      },
+      {
+        label: "Transaction Hash",
+        value: tx.hash().toString("hex"),
+      },
+    ];
+
+    let mergedFields;
+
+    if (tx instanceof FeeBumpTransaction) {
+      mergedFields = [...REQUIRED_FIELDS, ...FEE_BUMP_TX_FIELDS(tx)];
+    } else {
+      mergedFields = [...REQUIRED_FIELDS, ...TX_FIELDS(tx)];
+    }
+
+    return (
+      <>
+        <Card>
+          <div className="SignTx__FieldViewer">
+            {mergedFields.map((field) => {
+              const className =
+                field.value.toString().length >= MIN_LENGTH_FOR_FULL_WIDTH_FIELD
+                  ? "full-width"
+                  : "half-width";
+
+              if (field.label.includes("XDR")) {
+                return (
+                  <div className={className} key={field.label}>
+                    <XdrPicker
+                      readOnly
+                      id={field.label}
+                      label={field.label}
+                      value={field.value.toString()}
+                    />
+                  </div>
+                );
+              } else {
+                return (
+                  <div className={className} key={field.label}>
+                    <TextPicker
+                      readOnly
+                      id={field.label}
+                      label={field.label}
+                      value={field.value.toString()}
+                      copyButton={{
+                        position: "right",
+                      }}
+                    />
+                  </div>
+                );
+              }
+            })}
+          </div>
+        </Card>
+      </>
+    );
+  };
+
+  return (
+    <div className="SignTx">
+      <div className="PageHeader">
+        <Text size="md" as="h1" weight="medium">
+          {isTxImported ? "Transaction Overview" : "Sign Transaction"}
+        </Text>
+      </div>
+      {isTxValid && tx ? renderOverviewView() : rendeImportView()}
+    </div>
+  );
 }
diff --git a/src/components/FormElements/PubKeyPicker.tsx b/src/components/FormElements/PubKeyPicker.tsx
index becca362..e76c2133 100644
--- a/src/components/FormElements/PubKeyPicker.tsx
+++ b/src/components/FormElements/PubKeyPicker.tsx
@@ -21,6 +21,7 @@ export const PubKeyPicker = ({
   placeholder = "Ex: GCEXAMPLE5HWNK4AYSTEQ4UWDKHTCKADVS2AHF3UI2ZMO3DPUSM6Q4UG",
   value,
   error,
+  readOnly,
   onChange,
   ...props
 }: PubKeyPickerProps) => (
@@ -32,6 +33,7 @@ export const PubKeyPicker = ({
     placeholder={placeholder}
     value={value}
     error={error}
+    readOnly={readOnly}
     onChange={onChange}
     {...props}
   />
diff --git a/src/components/FormElements/TextPicker.tsx b/src/components/FormElements/TextPicker.tsx
index 2adf54f0..7e90cba9 100644
--- a/src/components/FormElements/TextPicker.tsx
+++ b/src/components/FormElements/TextPicker.tsx
@@ -8,8 +8,9 @@ interface TextPickerProps extends Omit<InputProps, "fieldSize"> {
   label: string;
   value: string;
   placeholder?: string;
-  error: string | undefined;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  error?: string | undefined;
+  readOnly?: boolean;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const TextPicker = ({
@@ -20,18 +21,18 @@ export const TextPicker = ({
   value,
   error,
   onChange,
+  readOnly,
   ...props
-}: TextPickerProps) => {
-  return (
-    <Input
-      id={id}
-      fieldSize={fieldSize}
-      label={label}
-      labelSuffix={labelSuffix}
-      value={value}
-      error={error}
-      onChange={onChange}
-      {...props}
-    />
-  );
-};
+}: TextPickerProps) => (
+  <Input
+    id={id}
+    fieldSize={fieldSize}
+    label={label}
+    labelSuffix={labelSuffix}
+    value={value}
+    error={error}
+    onChange={onChange}
+    readOnly={readOnly}
+    {...props}
+  />
+);
diff --git a/src/components/FormElements/XdrPicker.tsx b/src/components/FormElements/XdrPicker.tsx
index a75ee44d..54196830 100644
--- a/src/components/FormElements/XdrPicker.tsx
+++ b/src/components/FormElements/XdrPicker.tsx
@@ -5,11 +5,13 @@ interface XdrPickerProps extends Omit<TextareaProps, "fieldSize"> {
   id: string;
   fieldSize?: "sm" | "md" | "lg";
   labelSuffix?: string | React.ReactNode;
-  label: string;
+  label: string | React.ReactNode;
   value: string;
   placeholder?: string;
-  error: string | undefined;
-  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  error?: string | undefined;
+  success?: string | React.ReactNode;
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  readOnly?: boolean;
 }
 
 export const XdrPicker = ({
@@ -19,21 +21,23 @@ export const XdrPicker = ({
   label,
   value,
   error,
+  success,
   onChange,
+  readOnly,
   ...props
-}: XdrPickerProps) => {
-  return (
-    <Textarea
-      id={id}
-      fieldSize={fieldSize}
-      label={label}
-      labelSuffix={labelSuffix}
-      placeholder="Ex: AAAAABbxCy3mLg3hiTqX4VUEEp60pFOrJNxYM1JtxXTwXhY2AAAAZAAAAAMAAAAGAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAJAAAAAAAAAAHwXhY2AAAAQCPAo8QwsZe9FA0sz/deMdhlu6/zrk7SgkBG22ApvtpETBhnGkX4trSFDz8sVlKqvweqGUVgvjUyM0AcHxyXZQw="
-      value={value}
-      error={error}
-      rows={5}
-      onChange={onChange}
-      {...props}
-    />
-  );
-};
+}: XdrPickerProps) => (
+  <Textarea
+    id={id}
+    fieldSize={fieldSize}
+    label={label}
+    labelSuffix={labelSuffix}
+    placeholder="Ex: AAAAABbxCy3mLg3hiTqX4VUEEp60pFOrJNxYM1JtxXTwXhY2AAAAZAAAAAMAAAAGAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAJAAAAAAAAAAHwXhY2AAAAQCPAo8QwsZe9FA0sz/deMdhlu6/zrk7SgkBG22ApvtpETBhnGkX4trSFDz8sVlKqvweqGUVgvjUyM0AcHxyXZQw="
+    value={value}
+    error={error}
+    success={success}
+    rows={5}
+    onChange={onChange}
+    readOnly={readOnly}
+    {...props}
+  />
+);
diff --git a/src/components/MuxedAccountResult.tsx b/src/components/MuxedAccountResult.tsx
index 96652091..a426e529 100644
--- a/src/components/MuxedAccountResult.tsx
+++ b/src/components/MuxedAccountResult.tsx
@@ -17,7 +17,7 @@ export const MuxedAccountResult = ({
       label="Base Account G Address"
       value={baseAddress || ""}
       error=""
-      readOnly={true}
+      readOnly
       copyButton={{
         position: "right",
       }}
@@ -29,7 +29,7 @@ export const MuxedAccountResult = ({
       label="Muxed Account ID"
       value={muxedId || ""}
       error=""
-      readOnly={true}
+      readOnly
       copyButton={{
         position: "right",
       }}
@@ -41,7 +41,7 @@ export const MuxedAccountResult = ({
       label="Muxed Account M Address"
       value={muxedAddress || ""}
       error=""
-      readOnly={true}
+      readOnly
       copyButton={{
         position: "right",
       }}
diff --git a/src/constants/signTransactionPage.ts b/src/constants/signTransactionPage.ts
new file mode 100644
index 00000000..87407683
--- /dev/null
+++ b/src/constants/signTransactionPage.ts
@@ -0,0 +1,62 @@
+import { FeeBumpTransaction, Transaction } from "@stellar/stellar-sdk";
+
+export const FEE_BUMP_TX_FIELDS = (feeBumpTx: FeeBumpTransaction) => [
+  {
+    label: "Fee source account",
+    value: feeBumpTx.feeSource,
+  },
+  {
+    label: "Transaction Fee (stroops)",
+    value: feeBumpTx.fee,
+  },
+  {
+    label: "Number of existing signatures",
+    value: feeBumpTx.signatures?.length,
+  },
+  {
+    label: "Inner transaction hash",
+    value: feeBumpTx.innerTransaction.hash().toString("hex"),
+  },
+  {
+    label: "Inner transaction source account",
+    value: feeBumpTx.innerTransaction.source,
+  },
+  {
+    label: "Inner transaction sequence number",
+    value: feeBumpTx.innerTransaction.sequence,
+  },
+  {
+    label: "Inner transaction fee (stroops)",
+    value: feeBumpTx.innerTransaction.fee,
+  },
+  {
+    label: "Inner transaction number of operations",
+    value: feeBumpTx.innerTransaction.operations.length,
+  },
+  {
+    label: "Inner transaction number of existing signatures",
+    value: feeBumpTx.innerTransaction.signatures.length,
+  },
+];
+export const TX_FIELDS = (transaction: Transaction) => [
+  {
+    label: "Source account",
+    value: transaction.source,
+  },
+  {
+    label: "Sequence number",
+    value: transaction.sequence,
+  },
+  {
+    label: "Transaction Fee (stroops)",
+    value: transaction.fee,
+  },
+  {
+    label: "Number of operations",
+    value: transaction.operations.length,
+  },
+  {
+    label: "Number of existing signatures",
+    value: transaction.signatures.length,
+  },
+];
diff --git a/src/helpers/trim.ts b/src/helpers/trim.ts
new file mode 100644
index 00000000..6d8f75e4
--- /dev/null
+++ b/src/helpers/trim.ts
@@ -0,0 +1,3 @@
+// Regex explained: https://regexr.com/4v6jg
+export const trim = (str: string, c = "\\s") =>
+  str.replace(new RegExp(`^([${c}]*)(.*?)([${c}]*)$`), "$2");
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 3205da61..0ccfbfb1 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -45,6 +45,10 @@
     color: var(--sds-clr-gray-12);
   }
 
+  .success-message {
+    color: var(--sds-clr-green-11) !important;
+  }
+
   // ===========================================================================
   // Layout
   // ===========================================================================
@@ -328,8 +332,8 @@
 
     &__icon {
       display: block;
-      width: pxToREm(14px);
-      height: pxToREm(14px);
+      width: pxToRem(14px);
+      height: pxToRem(14px);
 
       svg {
         display: block;
@@ -407,3 +411,56 @@
     }
   }
 }
+
+.SignTx {
+  display: flex;
+  flex-direction: column;
+  gap: pxToRem(12px);
+
+  &__xdr {
+    display: flex;
+    flex-direction: column;
+    gap: pxToRem(16px);
+
+    .Text {
+      display: flex;
+      align-items: center;
+      gap: pxToRem(4px);
+      color: var(--sds-clr-gray-12);
+    }
+  }
+
+  &__icon {
+    display: inline-block;
+    width: pxToRem(14px);
+    height: pxToRem(14px);
+
+    svg {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      stroke: var(--sds-clr-gray-08);
+    }
+  }
+
+  &__FieldViewer {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: pxToRem(16px);
+
+    .Textarea textarea,
+    .Input__container,
+    .Input__copyButton button,
+    input {
+      background: var(--sds-clr-gray-03);
+    }
+
+    .half-width {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    .full-width {
+      grid-column: 1 / 3;
+    }
+  }
+}
diff --git a/src/validate/methods/xdr.ts b/src/validate/methods/xdr.ts
index 8391e713..8b5ccd92 100644
--- a/src/validate/methods/xdr.ts
+++ b/src/validate/methods/xdr.ts
@@ -1,7 +1,37 @@
-export const xdr = (value: string) => {
+import { trim } from "@/helpers/trim";
+import { xdr as stellarXDR } from "@stellar/stellar-sdk";
+
+const validateBase64 = (value: string) => {
   if (value.match(/^[-A-Za-z0-9+/=]*$/) === null) {
-    return "Input is not valid base64";
+    return {
+      result: "error",
+      message: "The input is not valid base64 (a-zA-Z0-9+/=).",
+    };
+  }
+
+  return { result: "success", message: "Valid Base64" };
+};
+
+export const xdr = (value: string) => {
+  const sanitizedXdr = trim(value);
+  const base64Validation = validateBase64(sanitizedXdr);
+
+  if (base64Validation.result !== "success") {
+    return base64Validation;
   }
 
-  return false;
+  try {
+    stellarXDR.TransactionEnvelope.fromXDR(sanitizedXdr, "base64");
+
+    return {
+      result: "success",
+      message: "Valid Transaction Envelope XDR",
+    };
+  } catch (e) {
+    return {
+      result: "error",
+      message: "Unable to parse input XDR into Transaction Envelope",
+      originalError: e,
+    };
+  }
 };
diff --git a/yarn.lock b/yarn.lock
index 8c3086cb..3b0daf03 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -192,10 +192,10 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.1.tgz#7ca168b6937818e9a74b47ac4e2112b2e1a024cf"
   integrity sha512-S3Kq8e7LqxkA9s7HKLqXGTGck1uwis5vAXan3FnU5yw1Ec5hsSGnq4s/UCaSqABPOnOTg7zASLyst7+ohgWexg==
 
-"@stellar/design-system@^2.0.0-beta.9":
-  version "2.0.0-beta.9"
-  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.9.tgz#628f90facd625c3918a83eefd0c8f441cba2399d"
-  integrity sha512-0ZGFN42dMZgli61XEwz5vcQYZFSob6DIXt/RWOYi21Rw7oJGujrK2EXTCOBSQlKxNEcv1uywf2yl/Bz1w9xD3g==
+"@stellar/design-system@^2.0.0-beta.10":
+  version "2.0.0-beta.10"
+  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.10.tgz#76b0f9c0cc2ed143ef54a6f8d1287cddfe31ed82"
+  integrity sha512-aD1VFPczqnEnm+6RyPQut+IhYAbNjmXojzyxFqRumGseQZ4eDbdky+P1ljhON3+OPB9MxP6dTXzPDA4uzBVNXQ==
   dependencies:
     "@floating-ui/dom" "^1.6.3"
     bignumber.js "^9.1.2"
@@ -2810,16 +2810,7 @@ string-argv@0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -2892,14 +2883,7 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==

From f39007d64ae0a37a910468520fbebacae64b2936 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:43:12 -0400
Subject: [PATCH 2/3] PrettyJson theme + updated network accent colors (#830)

* Update network accent colors

* PrettyJson theme updated
---
 src/components/NetworkIndicator/styles.scss |  4 ++--
 src/components/PrettyJson/index.tsx         | 17 +++++++++++++++--
 src/components/PrettyJson/styles.scss       | 20 ++++++++++++++++++--
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/NetworkIndicator/styles.scss b/src/components/NetworkIndicator/styles.scss
index 85d9232c..09b9a331 100644
--- a/src/components/NetworkIndicator/styles.scss
+++ b/src/components/NetworkIndicator/styles.scss
@@ -20,11 +20,11 @@
     background-color: var(--NetworkSelector-dot-color);
 
     &[data-network="futurenet"] {
-      --NetworkSelector-dot-color: var(--sds-clr-lilac-09);
+      --NetworkSelector-dot-color: var(--sds-clr-mint-09);
     }
 
     &[data-network="testnet"] {
-      --NetworkSelector-dot-color: var(--sds-clr-sky-09);
+      --NetworkSelector-dot-color: var(--sds-clr-pink-09);
     }
 
     &[data-network="mainnet"] {
diff --git a/src/components/PrettyJson/index.tsx b/src/components/PrettyJson/index.tsx
index cf7c3c07..e9a09941 100644
--- a/src/components/PrettyJson/index.tsx
+++ b/src/components/PrettyJson/index.tsx
@@ -20,6 +20,13 @@ export const PrettyJson = ({ json }: { json: AnyObject }) => {
   const Value = ({ children }: { children: React.ReactNode }) => (
     <div className="PrettyJson__value">{children}</div>
   );
+  const ValueType = ({
+    children,
+    type,
+  }: {
+    children: React.ReactNode;
+    type: string;
+  }) => <span className={`PrettyJson__value--${type}`}>{children}</span>;
   const Quotes = () => <span className="PrettyJson__quotes">{'"'}</span>;
   const Colon = () => <span className="PrettyJson__colon">{":"}</span>;
   const Comma = () => <span className="PrettyJson__comma">{","}</span>;
@@ -147,7 +154,13 @@ export const PrettyJson = ({ json }: { json: AnyObject }) => {
                 <Quotes />
               </>
             ) : (
-              `"${item}"`
+              <>
+                <Quotes />
+                <ValueType type={isNaN(Number(item)) ? "string" : "number"}>
+                  {item}
+                </ValueType>
+                <Quotes />
+              </>
             )}
             <Comma />
           </Value>
@@ -162,7 +175,7 @@ export const PrettyJson = ({ json }: { json: AnyObject }) => {
       default:
         return (
           <Value>
-            {`${item}`}
+            <ValueType type={typeof item}>{`${item}`}</ValueType>
             <Comma />
           </Value>
         );
diff --git a/src/components/PrettyJson/styles.scss b/src/components/PrettyJson/styles.scss
index 8f8d59dc..1d09e72b 100644
--- a/src/components/PrettyJson/styles.scss
+++ b/src/components/PrettyJson/styles.scss
@@ -17,14 +17,30 @@
   }
 
   &__value {
-    color: var(--sds-clr-gray-11);
     white-space: nowrap;
+
+    &--string {
+      color: var(--sds-clr-navy-11);
+    }
+
+    &--number {
+      color: var(--sds-clr-lime-11);
+    }
+
+    &--boolean {
+      color: var(--sds-clr-pink-11);
+    }
   }
 
+  &__value,
   &__comma,
   &__quotes,
   &__bracket,
   &__key {
-    color: var(--sds-clr-gray-11);
+    color: var(--sds-clr-gray-12);
+  }
+
+  .Link {
+    font-family: var(--sds-ff-monospace);
   }
 }

From b7af0b17428e63aeda83fa6f313dc2eaa47e8865 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, 24 Apr 2024 14:08:47 -0700
Subject: [PATCH 3/3] [Create Account] Fund account with Friend button behavior
 (#827)

---
 src/app/(sidebar)/account/create/page.tsx | 115 ++++++++++++++++++----
 src/app/(sidebar)/account/fund/page.tsx   |  86 ++++++++--------
 src/app/(sidebar)/account/layout.tsx      |   2 +-
 src/components/FriendBot/ErrorMsg.tsx     |  21 ++++
 src/components/FriendBot/SuccessMsg.tsx   |  39 ++++++++
 src/components/GenerateKeypair.tsx        |   4 +-
 src/query/useFriendBot.ts                 |  28 ++++--
 src/store/createStore.ts                  |  30 ++++--
 tests/createAccountPage.test.ts           |  41 +++++++-
 tests/fundAccountPage.test.ts             |  31 +++---
 10 files changed, 296 insertions(+), 101 deletions(-)
 create mode 100644 src/components/FriendBot/ErrorMsg.tsx
 create mode 100644 src/components/FriendBot/SuccessMsg.tsx

diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
index f2686ada..802a131c 100644
--- a/src/app/(sidebar)/account/create/page.tsx
+++ b/src/app/(sidebar)/account/create/page.tsx
@@ -1,29 +1,78 @@
 "use client";
 
-import { useState } from "react";
-import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
 import { Card, Text, Button } from "@stellar/design-system";
 import { Keypair } from "@stellar/stellar-sdk";
 
-import { useIsTestingNetwork } from "@/hooks/useIsTestingNetwork";
-import { Routes } from "@/constants/routes";
 import { useStore } from "@/store/useStore";
+import { useFriendBot } from "@/query/useFriendBot";
+import { useQueryClient } from "@tanstack/react-query";
+
+import { useIsTestingNetwork } from "@/hooks/useIsTestingNetwork";
+
 import { GenerateKeypair } from "@/components/GenerateKeypair";
 import { ExpandBox } from "@/components/ExpandBox";
+import { SuccessMsg } from "@/components/FriendBot/SuccessMsg";
+import { ErrorMsg } from "@/components/FriendBot/ErrorMsg";
 
 import "../styles.scss";
 
 export default function CreateAccount() {
-  const { account } = useStore();
-  const router = useRouter();
+  const { account, network } = useStore();
   const [secretKey, setSecretKey] = useState("");
+  const [showAlert, setShowAlert] = useState<boolean>(false);
 
+  const queryClient = useQueryClient();
   const IS_TESTING_NETWORK = useIsTestingNetwork();
+  const IS_CUSTOM_NETWORK_WITH_HORIZON =
+    network.id === "custom" && network.horizonUrl;
+
+  const resetQuery = useCallback(
+    () =>
+      queryClient.resetQueries({
+        queryKey: ["friendBot"],
+      }),
+    [queryClient],
+  );
+
+  const resetStates = useCallback(() => {
+    account.reset();
+    resetQuery();
+  }, [resetQuery]);
+
+  const { error, isError, isFetching, isLoading, isSuccess, refetch } =
+    useFriendBot({
+      network,
+      publicKey: account.publicKey!,
+    });
+
+  useEffect(() => {
+    if (isError || isSuccess) {
+      setShowAlert(true);
+    }
+  }, [isError, isSuccess]);
+
+  useEffect(() => {
+    if (
+      account.registeredNetwork?.id &&
+      account.registeredNetwork.id !== network.id
+    ) {
+      resetStates();
+      setShowAlert(false);
+    }
+  }, [account.registeredNetwork, network.id]);
 
   const generateKeypair = () => {
+    resetStates();
+
     const keypair = Keypair.random();
 
-    account.updatePublicKey(keypair.publicKey());
+    if (IS_TESTING_NETWORK) {
+      account.updateKeypair(keypair.publicKey(), keypair.secret());
+    } else {
+      account.updateKeypair(keypair.publicKey());
+    }
+
     setSecretKey(keypair.secret());
   };
 
@@ -43,30 +92,60 @@ export default function CreateAccount() {
             </Text>
           </div>
           <div className="Account__CTA" data-testid="createAccount-buttons">
-            <Button size="md" variant="secondary" onClick={generateKeypair}>
+            <Button
+              disabled={isLoading || isFetching}
+              size="md"
+              variant="secondary"
+              onClick={generateKeypair}
+            >
               Generate keypair
             </Button>
-            {IS_TESTING_NETWORK ? (
+
+            {IS_TESTING_NETWORK || IS_CUSTOM_NETWORK_WITH_HORIZON ? (
               <Button
                 size="md"
+                disabled={!account.publicKey || isLoading}
                 variant="tertiary"
-                onClick={() => router.push(Routes.ACCOUNT_FUND)}
+                isLoading={isLoading || isFetching}
+                onClick={() => {
+                  resetQuery();
+                  refetch();
+                }}
+                data-testid="fundAccount-button"
               >
                 Fund account with Friendbot
               </Button>
             ) : null}
           </div>
 
-          <ExpandBox isExpanded={Boolean(account.publicKey)} offsetTop="xl">
-            <div className="Account__result">
-              <GenerateKeypair
-                publicKey={account.publicKey}
-                secretKey={secretKey}
-              />
-            </div>
-          </ExpandBox>
+          {Boolean(account.publicKey) && (
+            <ExpandBox isExpanded={Boolean(account.publicKey)} offsetTop="xl">
+              <div className="Account__result">
+                <GenerateKeypair
+                  publicKey={account.publicKey}
+                  secretKey={IS_TESTING_NETWORK ? account.secretKey : secretKey}
+                />
+              </div>
+            </ExpandBox>
+          )}
         </div>
       </Card>
+
+      <SuccessMsg
+        publicKey={account.publicKey!}
+        isVisible={Boolean(showAlert && isSuccess && account.publicKey)}
+        onClose={() => {
+          setShowAlert(false);
+        }}
+      />
+
+      <ErrorMsg
+        isVisible={Boolean(showAlert && isError)}
+        errorMsg={error?.message}
+        onClose={() => {
+          setShowAlert(false);
+        }}
+      />
     </div>
   );
 }
diff --git a/src/app/(sidebar)/account/fund/page.tsx b/src/app/(sidebar)/account/fund/page.tsx
index e2c38715..6e98b26f 100644
--- a/src/app/(sidebar)/account/fund/page.tsx
+++ b/src/app/(sidebar)/account/fund/page.tsx
@@ -1,17 +1,19 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Alert, Card, Input, Text, Button } from "@stellar/design-system";
+import { Card, Input, Text, Button } from "@stellar/design-system";
 import Link from "next/link";
 import { Routes } from "@/constants/routes";
 
-import { shortenStellarAddress } from "@/helpers/shortenStellarAddress";
 import { useIsTestingNetwork } from "@/hooks/useIsTestingNetwork";
 import { useFriendBot } from "@/query/useFriendBot";
 import { useStore } from "@/store/useStore";
 
 import { validate } from "@/validate";
 
+import { SuccessMsg } from "@/components/FriendBot/SuccessMsg";
+import { ErrorMsg } from "@/components/FriendBot/ErrorMsg";
+
 import "../styles.scss";
 
 export default function FundAccount() {
@@ -23,11 +25,28 @@ export default function FundAccount() {
 
   const IS_TESTING_NETWORK = useIsTestingNetwork();
 
-  const { error, isError, isLoading, isSuccess, refetch, isFetchedAfterMount } =
-    useFriendBot({
-      network: network.id,
-      publicKey: generatedPublicKey,
-    });
+  const {
+    error,
+    isError,
+    isFetching,
+    isLoading,
+    isSuccess,
+    refetch,
+    isFetchedAfterMount,
+  } = useFriendBot({
+    network,
+    publicKey: generatedPublicKey,
+  });
+
+  useEffect(() => {
+    if (
+      account.registeredNetwork?.id &&
+      account.registeredNetwork.id !== network.id
+    ) {
+      account.reset();
+      setShowAlert(false);
+    }
+  }, [account.registeredNetwork, network.id]);
 
   useEffect(() => {
     if (isError || isSuccess) {
@@ -60,13 +79,12 @@ export default function FundAccount() {
           </div>
 
           <Input
-            id="generate-keypair-publickey"
+            id="fund-public-key-input"
             fieldSize="md"
             label="Public Key"
             value={generatedPublicKey}
             onChange={(e) => {
               setGeneratedPublicKey(e.target.value);
-
               const error = validate.publicKey(e.target.value);
               setInlineErrorMessage(error || "");
             }}
@@ -78,8 +96,8 @@ export default function FundAccount() {
             <Button
               disabled={!generatedPublicKey || Boolean(inlineErrorMessage)}
               size="md"
-              variant={isFetchedAfterMount && isError ? "error" : "secondary"}
-              isLoading={isLoading}
+              variant="secondary"
+              isLoading={isLoading || isFetching}
               onClick={() => {
                 if (!inlineErrorMessage) {
                   refetch();
@@ -90,12 +108,12 @@ export default function FundAccount() {
             </Button>
 
             <Button
-              disabled={!account.publicKey || isLoading}
+              disabled={!account.publicKey || isLoading || isFetching}
               size="md"
               variant="tertiary"
               onClick={() => {
                 setInlineErrorMessage("");
-                setGeneratedPublicKey(account.publicKey);
+                setGeneratedPublicKey(account.publicKey!);
               }}
             >
               Fill in with generated key
@@ -104,33 +122,21 @@ export default function FundAccount() {
         </div>
       </Card>
 
-      {showAlert && isFetchedAfterMount && isSuccess && (
-        <Alert
-          placement="inline"
-          variant="primary"
-          actionLabel="View on stellar.expert"
-          actionLink={`https://stellar.expert/explorer/${network.id}/account/${account.publicKey}`}
-          onClose={() => {
-            setShowAlert(false);
-          }}
-          title={`Successfully funded ${shortenStellarAddress(account.publicKey)} on 
-          ${network.id}`}
-        >
-          {""}
-        </Alert>
-      )}
-      {showAlert && isFetchedAfterMount && isError && (
-        <Alert
-          placement="inline"
-          variant="error"
-          onClose={() => {
-            setShowAlert(false);
-          }}
-          title={error?.message}
-        >
-          {""}
-        </Alert>
-      )}
+      <SuccessMsg
+        isVisible={Boolean(showAlert && isFetchedAfterMount && isSuccess)}
+        publicKey={generatedPublicKey}
+        onClose={() => {
+          setShowAlert(false);
+        }}
+      />
+
+      <ErrorMsg
+        isVisible={Boolean(showAlert && isFetchedAfterMount && isError)}
+        errorMsg={error?.message}
+        onClose={() => {
+          setShowAlert(false);
+        }}
+      />
     </div>
   );
 }
diff --git a/src/app/(sidebar)/account/layout.tsx b/src/app/(sidebar)/account/layout.tsx
index cb7d5abc..e28d4942 100644
--- a/src/app/(sidebar)/account/layout.tsx
+++ b/src/app/(sidebar)/account/layout.tsx
@@ -16,7 +16,7 @@ export default function AccountTemplate({
         navItems: [
           {
             route: Routes.ACCOUNT_CREATE,
-            label: "Create Account",
+            label: "Create Account Keypair",
           },
           {
             route: Routes.ACCOUNT_FUND,
diff --git a/src/components/FriendBot/ErrorMsg.tsx b/src/components/FriendBot/ErrorMsg.tsx
new file mode 100644
index 00000000..f08d5d31
--- /dev/null
+++ b/src/components/FriendBot/ErrorMsg.tsx
@@ -0,0 +1,21 @@
+import { Alert } from "@stellar/design-system";
+
+export const ErrorMsg = ({
+  onClose,
+  isVisible,
+  errorMsg,
+}: {
+  onClose: () => void | undefined;
+  isVisible: boolean;
+  errorMsg: string | undefined;
+}) =>
+  isVisible ? (
+    <Alert
+      placement="inline"
+      variant="error"
+      onClose={onClose}
+      title={errorMsg}
+    >
+      {""}
+    </Alert>
+  ) : null;
diff --git a/src/components/FriendBot/SuccessMsg.tsx b/src/components/FriendBot/SuccessMsg.tsx
new file mode 100644
index 00000000..6eafc7ae
--- /dev/null
+++ b/src/components/FriendBot/SuccessMsg.tsx
@@ -0,0 +1,39 @@
+import { Alert } from "@stellar/design-system";
+
+import { useStore } from "@/store/useStore";
+
+import { shortenStellarAddress } from "@/helpers/shortenStellarAddress";
+
+export const SuccessMsg = ({
+  onClose,
+  publicKey,
+  isVisible,
+}: {
+  onClose: () => void | undefined;
+  publicKey: string;
+  isVisible: boolean;
+}) => {
+  const { network } = useStore();
+  const IS_STELLAR_EXPERT_ENABLED =
+    network.id === "testnet" || network.id === "mainnet";
+
+  return isVisible ? (
+    <Alert
+      placement="inline"
+      variant="success"
+      actionLabel={
+        IS_STELLAR_EXPERT_ENABLED ? "View on stellar.expert" : undefined
+      }
+      actionLink={
+        IS_STELLAR_EXPERT_ENABLED
+          ? `https://stellar.expert/explorer/${network.id}/account/${publicKey}`
+          : undefined
+      }
+      onClose={onClose}
+      title={`Successfully funded ${shortenStellarAddress(publicKey)} on 
+    ${network.id}`}
+    >
+      {""}
+    </Alert>
+  ) : null;
+};
diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx
index 1ec63ab8..8e4eb28d 100644
--- a/src/components/GenerateKeypair.tsx
+++ b/src/components/GenerateKeypair.tsx
@@ -4,8 +4,8 @@ export const GenerateKeypair = ({
   publicKey,
   secretKey,
 }: {
-  publicKey: string;
-  secretKey: string;
+  publicKey: string | undefined;
+  secretKey: string | undefined;
 }) => {
   return (
     <div className="Account__keypair">
diff --git a/src/query/useFriendBot.ts b/src/query/useFriendBot.ts
index 6f3d6123..cc49c7d4 100644
--- a/src/query/useFriendBot.ts
+++ b/src/query/useFriendBot.ts
@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { EmptyObj, Network } from "@/types/types";
 
 import { shortenStellarAddress } from "@/helpers/shortenStellarAddress";
 
@@ -6,32 +7,45 @@ export const useFriendBot = ({
   network,
   publicKey,
 }: {
-  network: string;
+  network: Network | EmptyObj;
   publicKey: string;
 }) => {
-  const friendbotURL =
-    network === "futurenet"
+  const knownFriendbotURL =
+    network.id === "futurenet"
       ? "https://friendbot-futurenet.stellar.org"
       : "https://friendbot.stellar.org";
 
   const query = useQuery({
     queryKey: ["friendBot"],
     queryFn: async () => {
+      if (!network.horizonUrl) {
+        throw new Error(`Please use a network that supports Horizon`);
+      }
+
       try {
-        const response = await fetch(`${friendbotURL}/?addr=${publicKey}`);
+        const url =
+          network.id === "custom"
+            ? `${network.horizonUrl}/friendbot`
+            : `${knownFriendbotURL}/`;
+        const response = await fetch(`${url}?addr=${publicKey}`);
 
         if (!response.ok) {
           const errorBody = await response.json();
 
-          throw new Error(errorBody.status);
+          throw new Error("there was an error", { cause: errorBody });
         }
         return response;
       } catch (e: any) {
-        if (e.status === 0) {
+        if (e.cause.status === 0) {
           throw new Error(`Unable to reach Friendbot server at ${network}`);
+        } else if (e.cause.detail.includes("createAccountAlreadyExist")) {
+          throw new Error(
+            `This account is already funded. Therefore, we are unable to fund ${shortenStellarAddress(publicKey)} on the test network.`,
+          );
         } else {
           throw new Error(
-            `Unable to fund ${shortenStellarAddress(publicKey)} on the test network`,
+            `Unable to fund ${shortenStellarAddress(publicKey)} on the test network. Details: ${e.cause.detail}`,
+            { cause: e },
           );
         }
       }
diff --git a/src/store/createStore.ts b/src/store/createStore.ts
index 950538df..6d35d495 100644
--- a/src/store/createStore.ts
+++ b/src/store/createStore.ts
@@ -13,12 +13,14 @@ export interface Store {
 
   // Account
   account: {
-    publicKey: string;
+    publicKey: string | undefined;
+    secretKey: string | undefined;
+    registeredNetwork: Network | EmptyObj;
     generatedMuxedAccountInput: Partial<MuxedAccount> | EmptyObj;
     parsedMuxedAccountInput: string | undefined;
     generatedMuxedAccount: MuxedAccount | EmptyObj;
     parsedMuxedAccount: MuxedAccount | EmptyObj;
-    updatePublicKey: (value: string) => void;
+    updateKeypair: (publicKey: string, secretKey?: string) => void;
     updateGeneratedMuxedAccountInput: (value: Partial<MuxedAccount>) => void;
     updateParsedMuxedAccountInput: (value: string) => void;
     updateGeneratedMuxedAccount: (value: MuxedAccount) => void;
@@ -75,6 +77,16 @@ const initTransactionState = {
   },
 };
 
+const initAccountState = {
+  publicKey: undefined,
+  secretKey: undefined,
+  registeredNetwork: {},
+  generatedMuxedAccountInput: {},
+  parsedMuxedAccountInput: undefined,
+  generatedMuxedAccount: {},
+  parsedMuxedAccount: {},
+};
+
 // Store
 export const createStore = (options: CreateStoreOptions) =>
   create<Store>()(
@@ -97,11 +109,7 @@ export const createStore = (options: CreateStoreOptions) =>
           }),
         // Account
         account: {
-          publicKey: "",
-          generatedMuxedAccountInput: {},
-          parsedMuxedAccountInput: undefined,
-          generatedMuxedAccount: {},
-          parsedMuxedAccount: {},
+          ...initAccountState,
           updateGeneratedMuxedAccountInput: (value: Partial<MuxedAccount>) =>
             set((state) => {
               state.account.generatedMuxedAccountInput = {
@@ -127,13 +135,15 @@ export const createStore = (options: CreateStoreOptions) =>
                 ...value,
               };
             }),
-          updatePublicKey: (value: string) =>
+          updateKeypair: (publicKey: string, secretKey?: string) =>
             set((state) => {
-              state.account.publicKey = value;
+              state.account.publicKey = publicKey;
+              state.account.secretKey = secretKey || "";
+              state.account.registeredNetwork = state.network;
             }),
           reset: () =>
             set((state) => {
-              state.account.publicKey = "";
+              state.account = { ...state.account, ...initAccountState };
             }),
         },
         // Endpoints
diff --git a/tests/createAccountPage.test.ts b/tests/createAccountPage.test.ts
index e85ae724..9d4f4877 100644
--- a/tests/createAccountPage.test.ts
+++ b/tests/createAccountPage.test.ts
@@ -29,11 +29,42 @@ test.describe("Create Account Page", () => {
     ).toHaveValue(/^S/);
   });
 
-  test("Test 'Fund account' button", async ({ page }) => {
-    await page
-      .getByRole("button", { name: "Fund account with Friendbot" })
-      .click();
+  test("Successfully funds an account when clicking 'Fund account' with a valid public key", async ({
+    page,
+  }) => {
+    await page.getByRole("button", { name: "Generate keypair" }).click();
+
+    const fundButton = page
+      .getByTestId("fundAccount-button")
+      .getByText("Fund account with Friendbot");
+
+    await expect(fundButton).toBeEnabled();
+
+    // Mock the friendbot api call
+    await page.route(
+      "*/**/?addr=GA4X4QMSTEUKWAXXX3TBFRMGWI3O5X5IUUHPKAIH5XKNQ4IBTQ6YSVV3",
+      async (route) => {
+        await route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({}),
+        });
+      },
+    );
+
+    // Ensure the listener is set up before the action that triggers the request
+    const responsePromise = page.waitForResponse(
+      (response) =>
+        response.url().includes("?addr=") && response.status() === 200,
+    );
+
+    await fundButton.click();
+
+    // Wait for the mocked response
+    await responsePromise;
 
-    await expect(page).toHaveURL(/.*\/account\/fund/);
+    // Success <Alert/> is visible
+    const alertBox = page.getByText(/Successfully funded/);
+    await expect(alertBox).toBeVisible();
   });
 });
diff --git a/tests/fundAccountPage.test.ts b/tests/fundAccountPage.test.ts
index ff3cdb5f..56c16ae8 100644
--- a/tests/fundAccountPage.test.ts
+++ b/tests/fundAccountPage.test.ts
@@ -49,7 +49,7 @@ test.describe("[futurenet/testnet] Fund Account Page", () => {
   test("By default, 'Public Key' input field is empty and buttons are disabled", async ({
     page,
   }) => {
-    await expect(page.locator("#generate-keypair-publickey")).toHaveValue("");
+    await expect(page.locator("#fund-public-key-input")).toHaveValue("");
 
     const getLumenButton = page
       .getByTestId("fundAccount-buttons")
@@ -65,7 +65,7 @@ test.describe("[futurenet/testnet] Fund Account Page", () => {
   test("Gets an error with an invalid public key in 'Public Key' field", async ({
     page,
   }) => {
-    const publicKeyInput = page.locator("#generate-keypair-publickey");
+    const publicKeyInput = page.locator("#fund-public-key-input");
 
     // Type in an invalid string in 'Public Key' input field
     await publicKeyInput.fill("XLKDSFJLSKDJF");
@@ -79,28 +79,25 @@ test.describe("[futurenet/testnet] Fund Account Page", () => {
   test("Successfully funds an account when clicking 'Get lumens' with a valid public key", async ({
     page,
   }) => {
-    // Get a new public key
-    const publicKey =
-      "GDVOT2ALMUF3G54RBHNJUEV6LOAZCQQCARHEVNUPKGMVPWFC4PFN33QR";
-    const publicKeyInput = page.locator("#generate-keypair-publickey");
+    const publicKeyInput = page.locator("#fund-public-key-input");
     const getLumenButton = page
       .getByTestId("fundAccount-buttons")
       .getByText("Get lumens");
 
-    // Type in an invalid string in 'Public Key' input field
-    await publicKeyInput.fill(publicKey);
+    await publicKeyInput.fill(
+      "GB6D5E2HRVBD6QIOXCE6ILMUFQT45LMSZSKRZUCL4ZK6Q6GCNMTJ2E3C",
+    );
 
     await expect(publicKeyInput).toHaveAttribute("aria-invalid", "false");
     await expect(getLumenButton).toBeEnabled();
 
     // Mock the friendbot api call
     await page.route(
-      "*/**/?addr=GDVOT2ALMUF3G54RBHNJUEV6LOAZCQQCARHEVNUPKGMVPWFC4PFN33QR",
+      "*/**/?addr=GB6D5E2HRVBD6QIOXCE6ILMUFQT45LMSZSKRZUCL4ZK6Q6GCNMTJ2E3C",
       async (route) => {
         await route.fulfill({
           status: 200,
-          contentType: "application/json",
-          body: JSON.stringify({}),
+          contentType: "application/hal+json",
         });
       },
     );
@@ -113,10 +110,8 @@ test.describe("[futurenet/testnet] Fund Account Page", () => {
 
     await getLumenButton.click();
 
-    // Wait for the mocked response
     await responsePromise;
 
-    // Success <Alert/> is visible
     const alertBox = page.getByText(/Successfully funded/);
     await expect(alertBox).toBeVisible();
   });
@@ -124,7 +119,7 @@ test.describe("[futurenet/testnet] Fund Account Page", () => {
   test("Gets an error when submitting 'Get lumens' with a public key that's already been funded", async ({
     page,
   }) => {
-    const publicKeyInput = page.locator("#generate-keypair-publickey");
+    const publicKeyInput = page.locator("#fund-public-key-input");
     const getLumenButton = page
       .getByTestId("fundAccount-buttons")
       .getByText("Get lumens");
@@ -139,12 +134,12 @@ test.describe("[futurenet/testnet] Fund Account Page", () => {
 
     // Mock the friendbot api call
     await page.route(
-      "*/**/?addr=GDVOT2ALMUF3G54RBHNJUEV6LOAZCQQCARHEVNUPKGMVPWFC4PFN33QR",
+      "*/**/?addr=GBX6W44ISK6XTBDDJ5ND6KTJHLYEYHMR4SDG635NRARYVJ3G2YXGDT6Y",
       async (route) => {
         await route.fulfill({
           status: 400,
-          contentType: "application/json",
-          body: JSON.stringify({}),
+          contentType: "application/problem+json",
+          body: JSON.stringify({ detail: "createAccountAlreadyExist" }),
         });
       },
     );
@@ -159,7 +154,7 @@ test.describe("[futurenet/testnet] Fund Account Page", () => {
 
     await responsePromise;
 
-    const alertBox = page.getByText(/Unable to fund/);
+    const alertBox = page.getByText(/This account is already funded/);
     await expect(alertBox).toBeVisible();
   });