Merge branch 'laboratory-v2' of https://github.com/stellar/laboratory …

…into txn-build-params-xdr
stellar · Apr 25, 2024 · 2595f93 · 2595f93
2 parents 7bfc822 + b7af0b1
commit 2595f93
Show file tree

Hide file tree

Showing 24 changed files with 737 additions and 174 deletions.
diff --git 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)/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
@@ -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
@@ -16,7 +16,7 @@ export default function AccountTemplate({
         navItems: [
           {
             route: Routes.ACCOUNT_CREATE,
-            label: "Create Account",
+            label: "Create Account Keypair",
           },
           {
             route: Routes.ACCOUNT_FUND,