update

stellar · Apr 17, 2024 · 1e9f7eb · 1e9f7eb
1 parent 684a80a
commit 1e9f7eb
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 64 deletions.
diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
@@ -1,18 +1,19 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { Alert, Card, Text, Button } from "@stellar/design-system";
+import { Card, Text, Button } from "@stellar/design-system";
 import { Keypair } from "@stellar/stellar-sdk";
 
 import { useStore } from "@/store/useStore";
 import { useFriendBot } from "@/query/useFriendBot";
 import { useQueryClient } from "@tanstack/react-query";
 
-import { shortenStellarAddress } from "@/helpers/shortenStellarAddress";
 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";
 
@@ -62,6 +63,8 @@ export default function CreateAccount() {
   }, [account.registeredNetwork, network.id]);
 
   const generateKeypair = () => {
+    resetStates();
+
     const keypair = Keypair.random();
 
     if (IS_TESTING_NETWORK) {
@@ -98,6 +101,7 @@ export default function CreateAccount() {
                 size="md"
                 disabled={!account.publicKey || isLoading}
                 variant="tertiary"
+                isLoading={isLoading}
                 onClick={() => refetch()}
                 data-testid="fundAccount-button"
               >
@@ -119,34 +123,22 @@ export default function CreateAccount() {
         </div>
       </Card>
 
-      {showAlert && isFetchedAfterMount && isSuccess && account.publicKey && (
-        <Alert
-          placement="inline"
-          variant="success"
-          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 && account.publicKey,
+        )}
+        onClose={() => {
+          setShowAlert(false);
+        }}
+      />
+
+      <ErrorMsg
+        isVisible={Boolean(showAlert && isFetchedAfterMount && 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
@@ -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() {
@@ -113,33 +115,22 @@ export default function FundAccount() {
         </div>
       </Card>
 
-      {showAlert && isFetchedAfterMount && isSuccess && account.publicKey && (
-        <Alert
-          placement="inline"
-          variant="success"
-          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 && account.publicKey,
+        )}
+        onClose={() => {
+          setShowAlert(false);
+        }}
+      />
+
+      <ErrorMsg
+        isVisible={Boolean(showAlert && isFetchedAfterMount && isError)}
+        errorMsg={error?.message}
+        onClose={() => {
+          setShowAlert(false);
+        }}
+      />
     </div>
   );
 }
diff --git a/src/components/FriendBot/ErrorMsg.tsx b/src/components/FriendBot/ErrorMsg.tsx
@@ -0,0 +1,22 @@
+import { Alert } from "@stellar/design-system";
+
+export const ErrorMsg = ({
+  onClose,
+  isVisible,
+  errorMsg,
+}: {
+  onClose: () => void | undefined;
+  isVisible: boolean;
+  errorMsg: string | undefined;
+}) => {
+  return 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
@@ -0,0 +1,37 @@
+import { Alert } from "@stellar/design-system";
+
+import { useStore } from "@/store/useStore";
+
+import { shortenStellarAddress } from "@/helpers/shortenStellarAddress";
+
+export const SuccessMsg = ({
+  onClose,
+  isVisible,
+}: {
+  onClose: () => void | undefined;
+  isVisible: boolean;
+}) => {
+  const { account, 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/${account.publicKey}`
+          : undefined
+      }
+      onClose={onClose}
+      title={`Successfully funded ${shortenStellarAddress(account.publicKey!)} on 
+    ${network.id}`}
+    >
+      {""}
+    </Alert>
+  ) : null;
+};
diff --git a/src/query/useFriendBot.ts b/src/query/useFriendBot.ts
@@ -25,15 +25,17 @@ export const useFriendBot = ({
         if (!response.ok) {
           const errorBody = await response.json();
 
-          throw new Error(errorBody.status);
+          console.log("errorBody: ", errorBody);
+          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 {
           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/tests/createAccountPage.test.ts b/tests/createAccountPage.test.ts
@@ -42,7 +42,7 @@ test.describe("Create Account Page", () => {
 
     // Mock the friendbot api call
     await page.route(
-      "*/**/?addr=GA4X4QMSTEUKWAXXX3TBFRMGWI3O5X5IUUHPKAIH5XKNQ4IBTQ6YSVV3",
+      "*/**/friendbot?addr=GA4X4QMSTEUKWAXXX3TBFRMGWI3O5X5IUUHPKAIH5XKNQ4IBTQ6YSVV3",
       async (route) => {
         await route.fulfill({
           status: 200,

diff --git a/tests/fundAccountPage.test.ts b/tests/fundAccountPage.test.ts
@@ -95,7 +95,7 @@ test.describe("[futurenet/testnet] Fund Account Page", () => {
 
     // Mock the friendbot api call
     await page.route(
-      "*/**/?addr=GDVOT2ALMUF3G54RBHNJUEV6LOAZCQQCARHEVNUPKGMVPWFC4PFN33QR",
+      "*/**/friendbot?addr=GDVOT2ALMUF3G54RBHNJUEV6LOAZCQQCARHEVNUPKGMVPWFC4PFN33QR",
       async (route) => {
         await route.fulfill({
           status: 200,
@@ -118,6 +118,7 @@ test.describe("[futurenet/testnet] Fund Account Page", () => {
 
     // Success <Alert/> is visible
     const alertBox = page.getByText(/Successfully funded/);
+    console.log("alertBox: ", alertBox);
     await expect(alertBox).toBeVisible();
   });