Creat and Fund Account Page

.nvmrc

@@ -1 +1 @@
-v18
+v18

src/app/(sidebar)/account/create/page.tsx

@@ -53,7 +53,7 @@ export default function CreateAccount() {
             </Button>
           </div>
         </div>
-        <ExpandBox isExpanded={Boolean(account.publicKey && secretKey)}>
+        <ExpandBox isExpanded={Boolean(account.publicKey)}>
           <GenerateKeypair
             publicKey={account.publicKey}
             secretKey={secretKey}

src/app/(sidebar)/account/fund/page.tsx

@@ -1,5 +1,123 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import { Alert, Card, Input, Text, Button } from "@stellar/design-system";
+
+import { shortenStellarAddress } from "@/helpers/shortenStellarAddress";
+import { validatePublicKey } from "@/helpers/validatePublicKey";
+import { useFriendBot } from "@/query/useFriendBot";
+import { useStore } from "@/store/useStore";
+
+import "../styles.scss";
+
 export default function FundAccount() {
-  return <div>Fund Account</div>;
+  const { account, network } = useStore();
+
+  const [showAlert, setShowAlert] = useState<boolean>(false);
+  const [generatedPublicKey, setGeneratedPublicKey] = useState<string>("");
+  const [inlineErrorMessage, setInlineErrorMessage] = useState<string>("");
+
+  const { error, isError, isLoading, isSuccess, refetch, isFetchedAfterMount } =
+    useFriendBot({
+      network: network.id,
+      publicKey: generatedPublicKey,
+    });
+
+  useEffect(() => {
+    if (isError || isSuccess) {
+      setShowAlert(true);
+    }
+  }, [isError, isSuccess]);
+
+  return (
+    <div className="Account">
+      <Card>
+        <div className="Account__card">
+          <div className="CardText">
+            <Text size="lg" as="h1" weight="medium">
+              Friendbot: fund a {network.id} network account
+            </Text>
+
+            <Text size="sm" as="p">
+              The friendbot is a horizon API endpoint that will fund an account
+              with 10,000 lumens on the {network.id} network.
+            </Text>
+          </div>
+
+          <Input
+            id="generate-keypair-publickey"
+            fieldSize="md"
+            label="Public Key"
+            value={generatedPublicKey}
+            onChange={(e) => {
+              setGeneratedPublicKey(e.target.value);
+
+              const error = validatePublicKey(e.target.value);
+              setInlineErrorMessage(error);
+            }}
+            placeholder="Ex: GCEXAMPLE5HWNK4AYSTEQ4UWDKHTCKADVS2AHF3UI2ZMO3DPUSM6Q4UG"
+            error={inlineErrorMessage}
+          />
+
+          <div className="Account__CTA">
+            <Button
+              disabled={!generatedPublicKey || Boolean(inlineErrorMessage)}
+              size="md"
+              variant={isFetchedAfterMount && isError ? "error" : "secondary"}
+              isLoading={isLoading}
+              onClick={() => {
+                if (!inlineErrorMessage) {
+                  refetch();
+                }
+              }}
+            >
+              Get lumens
+            </Button>
+
+            <Button
+              disabled={!account.publicKey}
+              size="md"
+              variant="tertiary"
+              onClick={() => {
+                setInlineErrorMessage("");
+                setGeneratedPublicKey(account.publicKey);
+              }}
+            >
+              Fill in with generated key
+            </Button>
+          </div>
+        </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);
+          }}
+        >
+          <Text size="md" as="span" weight="medium">
+            Successfully funded {shortenStellarAddress(account.publicKey)} on{" "}
+            {network.id}
+          </Text>
+        </Alert>
+      )}
+      {showAlert && isFetchedAfterMount && isError && (
+        <Alert
+          placement="inline"
+          variant="error"
+          onClose={() => {
+            setShowAlert(false);
+          }}
+        >
+          <Text size="md" as="span" weight="medium">
+            {error.message}
+          </Text>
+        </Alert>
+      )}
+    </div>
+  );
 }

src/app/(sidebar)/account/styles.scss

@@ -1,6 +1,10 @@
 @use "../../../styles/utils.scss" as *;
 
 .Account {
+  display: flex;
+  flex-direction: column;
+  gap: pxToRem(12px);
+
   &__card {
     display: flex;
     flex-direction: column;
@@ -11,6 +15,10 @@
     align-self: flex-start;
   }
 
+  .Text--purple {
+    color: var(--sds-clr-lilac-11);
+  }
+
   &__CTA {
     display: flex;
     gap: pxToRem(18px) pxToRem(8px);
@@ -26,4 +34,33 @@
       cursor: pointer;
     }
   }
+
+  &__alertbox {
+    display: flex;
+    padding: pxToRem(12px);
+    gap: pxToRem(12px);
+
+    .Text {
+      margin-bottom: 0;
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: pxToRem(12px);
+    }
+
+    &__icon {
+      padding: pxToRem(9.5px);
+      background-color: var(--sds-clr-gray-02);
+      border: 1px solid var(--sds-clr-gray-06);
+      border-radius: 6px;
+      align-self: flex-start;
+    }
+
+    &__CTA {
+      display: flex;
+      gap: pxToRem(12px);
+    }
+  }
 }

src/components/FormElements/PubKeyPicker.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { StrKey } from "stellar-sdk";
 import { Input, InputProps } from "@stellar/design-system";
+import { validatePublicKey } from "@/helpers/validatePublicKey";
 
 interface PubKeyPickerProps extends Omit<InputProps, "fieldSize"> {
   id: string;
@@ -27,41 +27,23 @@ export const PubKeyPicker = ({
   onChange,
   onBlur,
   ...props
-}: PubKeyPickerProps) => {
-  const validatePublicKey = (issuer: string) => {
-    if (!issuer) {
-      return "Asset issuer is required.";
-    }
-
-    if (issuer.startsWith("M")) {
-      if (!StrKey.isValidMed25519PublicKey(issuer)) {
-        return "Muxed account address is invalid.";
-      }
-    } else if (!StrKey.isValidEd25519PublicKey(issuer)) {
-      return "Public key is invalid.";
-    }
-
-    return "";
-  };
-
-  return (
-    <Input
-      id={id}
-      fieldSize={fieldSize}
-      label={label}
-      labelSuffix={labelSuffix}
-      placeholder={placeholder}
-      value={value}
-      onChange={(e) => {
-        const error = validatePublicKey(e.target.value);
-        onChange(e.target.value, error);
-      }}
-      onBlur={(e) => {
-        const error = validatePublicKey(e.target.value);
-        onBlur(e.target.value, error);
-      }}
-      error={error}
-      {...props}
-    />
-  );
-};
+}: PubKeyPickerProps) => (
+  <Input
+    id={id}
+    fieldSize={fieldSize}
+    label={label}
+    labelSuffix={labelSuffix}
+    placeholder={placeholder}
+    value={value}
+    onChange={(e) => {
+      const error = validatePublicKey(e.target.value);
+      onChange(e.target.value, error);
+    }}
+    onBlur={(e) => {
+      const error = validatePublicKey(e.target.value);
+      onBlur(e.target.value, error);
+    }}
+    error={error}
+    {...props}
+  />
+);

src/components/NetworkSelector/index.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from "react";
 import { Button, Icon, Input, Notification } from "@stellar/design-system";
+import { Networks } from "stellar-sdk";
 
 import { NetworkIndicator } from "@/components/NetworkIndicator";
 import { localStorageSavedNetwork } from "@/helpers/localStorageSavedNetwork";
@@ -20,21 +21,21 @@ const NetworkOptions: Network[] = [
     label: "Futurenet",
     horizonUrl: "https://horizon-futurenet.stellar.org",
     rpcUrl: "https://rpc-futurenet.stellar.org",
-    passphrase: "Test SDF Future Network ; October 2022",
+    passphrase: Networks.FUTURENET,
   },
   {
     id: "testnet",
     label: "Testnet",
     horizonUrl: "https://horizon-testnet.stellar.org",
     rpcUrl: "https://soroban-testnet.stellar.org",
-    passphrase: "Test SDF Network ; September 2015",
+    passphrase: Networks.TESTNET,
   },
   {
     id: "mainnet",
     label: "Mainnet",
     horizonUrl: "https://horizon.stellar.org",
     rpcUrl: "",
-    passphrase: "Public Global Stellar Network ; September 2015",
+    passphrase: Networks.PUBLIC,
   },
   {
     id: "custom",

src/helpers/shortenStellarAddress.ts

@@ -0,0 +1,7 @@
+export const shortenStellarAddress = (address: string, size: number = 8) => {
+  const slice = Math.ceil(size / 2);
+
+  return `${address.substring(0, slice)}…${address.substring(
+    address.length - slice,
+  )}`;
+};

src/helpers/validatePublicKey.ts

@@ -0,0 +1,17 @@
+import { StrKey } from "stellar-sdk";
+
+export const validatePublicKey = (issuer: string) => {
+  if (!issuer) {
+    return "Asset issuer is required.";
+  }
+
+  if (issuer.startsWith("M")) {
+    if (!StrKey.isValidMed25519PublicKey(issuer)) {
+      return "Muxed account address is invalid.";
+    }
+  } else if (!StrKey.isValidEd25519PublicKey(issuer)) {
+    return "Public key is invalid.";
+  }
+
+  return "";
+};

src/query/useFriendBot.ts

@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { shortenStellarAddress } from "@/helpers/shortenStellarAddress";
+
+export const useFriendBot = ({
+  network,
+  publicKey,
+}: {
+  network: string;
+  publicKey: string;
+}) => {
+  const friendbotURL =
+    network === "futurenet"
+      ? "https://friendbot-futurenet.stellar.org"
+      : "https://friendbot.stellar.org";
+
+  const query = useQuery({
+    queryKey: ["friendBot"],
+    queryFn: async () => {
+      try {
+        const response = await fetch(`${friendbotURL}/?addr=${publicKey}`);
+
+        if (!response.ok) {
+          const errorBody = await response.json();
+
+          throw new Error(errorBody.status);
+        }
+        return response;
+      } catch (e: any) {
+        if (e.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`,
+          );
+        }
+      }
+    },
+    enabled: false,
+  });
+
+  return query;
+};