From 1e9f7eb9775692a3d3684fc9d17d43945bb80515 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 16 Apr 2024 17:35:40 -0700 Subject: [PATCH] update --- src/app/(sidebar)/account/create/page.tsx | 52 ++++++++++------------- src/app/(sidebar)/account/fund/page.tsx | 49 +++++++++------------ src/components/FriendBot/ErrorMsg.tsx | 22 ++++++++++ src/components/FriendBot/SuccessMsg.tsx | 37 ++++++++++++++++ src/query/useFriendBot.ts | 8 ++-- tests/createAccountPage.test.ts | 2 +- tests/fundAccountPage.test.ts | 3 +- 7 files changed, 109 insertions(+), 64 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 d2728f29..40c54aa1 100644 --- 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() { - {showAlert && isFetchedAfterMount && isSuccess && account.publicKey && ( - { - setShowAlert(false); - }} - title={`Successfully funded ${shortenStellarAddress(account.publicKey)} on - ${network.id}`} - > - {""} - - )} - - {showAlert && isFetchedAfterMount && isError && ( - { - setShowAlert(false); - }} - title={error?.message} - > - {""} - - )} + { + setShowAlert(false); + }} + /> + + { + setShowAlert(false); + }} + /> ); } diff --git a/src/app/(sidebar)/account/fund/page.tsx b/src/app/(sidebar)/account/fund/page.tsx index d34bba69..b4af3eb0 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() { @@ -113,33 +115,22 @@ export default function FundAccount() { - {showAlert && isFetchedAfterMount && isSuccess && account.publicKey && ( - { - setShowAlert(false); - }} - title={`Successfully funded ${shortenStellarAddress(account.publicKey)} on - ${network.id}`} - > - {""} - - )} - {showAlert && isFetchedAfterMount && isError && ( - { - setShowAlert(false); - }} - title={error?.message} - > - {""} - - )} + { + setShowAlert(false); + }} + /> + + { + setShowAlert(false); + }} + /> ); } diff --git a/src/components/FriendBot/ErrorMsg.tsx b/src/components/FriendBot/ErrorMsg.tsx new file mode 100644 index 00000000..da001c97 --- /dev/null +++ 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 ? ( + + {""} + + ) : null; +}; diff --git a/src/components/FriendBot/SuccessMsg.tsx b/src/components/FriendBot/SuccessMsg.tsx new file mode 100644 index 00000000..2e08cdd6 --- /dev/null +++ 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 ? ( + + {""} + + ) : null; +}; diff --git a/src/query/useFriendBot.ts b/src/query/useFriendBot.ts index 66dcf351..c9bf86b5 100644 --- 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 index 72aff5b1..eab5f34a 100644 --- 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 index ff3cdb5f..ae6ae293 100644 --- 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 is visible const alertBox = page.getByText(/Successfully funded/); + console.log("alertBox: ", alertBox); await expect(alertBox).toBeVisible(); });