feat!: Friendbot integration (#25)

* Start fund button

* Add a notification provider system

* Add fade out animations

* Funding takes a little to create the account, add a starter notification

* Disable the button once clicked

* Use Stellar button

* Use local faucet instead of remote web url

* Add helper text

* Update vite config to be network aware

* Layout and typo fix

* Leverage useTransition and be aware of account funding status

* Integrate tooltip

* Show and hide tooltip on hover

* Modify CSS for transitions, and for tooltip to stay same size regardless of inner content

* Update Context.Provider references to simply Context according to https://react.dev/blog/2024/12/05/react-19\#context-as-a-provider

* add local env var to build environment

* Incorporate zod for types

* Fix complaint about break statement

* Some refactors of the provider and moving hook to its own file

* Update vite.config.ts

Co-authored-by: Chad Ostrowski <221614+chadoh@users.noreply.github.com>

* Change notification hook filename

* Add comment on Stellar networks

* Validate body without zod

* Fix linting error

* Rename function to make clearer

---------

Co-authored-by: Chad Ostrowski <221614+chadoh@users.noreply.github.com>

Author: pselle

.env.example

@@ -1,3 +1,8 @@
-# Prefix with "PUBLIC_" to make available in Astro frontend files
+# Prefix with "PUBLIC_" to make available in frontend files
+# Which Stellar network to use in the frontend: local, testnet, futurenet, or mainnet
+# More on Stellar networks: https://developers.stellar.org/docs/networks
+PUBLIC_STELLAR_NETWORK="local"
+# The Stellar network passphrase, this is local
 PUBLIC_STELLAR_NETWORK_PASSPHRASE="Standalone Network ; February 2017"
-PUBLIC_STELLAR_RPC_URL="http://localhost:8000/rpc"
+# The Stellar network RPC URL. this is local
+PUBLIC_STELLAR_RPC_URL="http://localhost:8000/rpc"

.github/workflows/node.yml

@@ -8,6 +8,7 @@ on:
 env:
   CARGO_TERM_COLOR: always
   PKG_CONFIG_PATH: /usr/lib/pkgconfig
+  PUBLIC_STELLAR_NETWORK: local
 
 jobs:
   build:

src/App.tsx

@@ -1,13 +1,14 @@
 import { Layout } from "@stellar/design-system";
 import "./App.module.css"
+import ConnectAccount from "./components/ConnectAccount.tsx";
 
 function App() {
   return (
     <main>
       <Layout.Header
         projectId="My App"
         projectTitle="My App"
-        contentRight={<>Connect wallet component</>}
+        contentRight={<ConnectAccount />}
       />
       <Layout.Content>
         <Layout.Inset>

src/components/.gitkeep

@@ -0,0 +1,14 @@
+import React from 'react';
+import { stellarNetwork } from '../contracts/util';
+import FundAccountButton from './FundAccountButton';
+
+const ConnectAccount: React.FC = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '10px', verticalAlign: 'middle' }}>
+        <div>Wallet Button here</div>
+        {stellarNetwork !== "mainnet" && <FundAccountButton />}
+    </div>
+  );
+};
+
+export default ConnectAccount;

src/components/ConnectAccount.tsx

@@ -0,0 +1,75 @@
+import React, { useState, useTransition } from 'react';
+import { useNotification } from '../hooks/useNotification.ts';
+import { Button, Tooltip } from '@stellar/design-system';
+
+
+const FundAccountButton: React.FC = () => {
+  const { addNotification } = useNotification();
+  const [isPending, startTransition] = useTransition();
+  const [isFunded, setIsFunded] = useState(false);
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  // TODO: replace with account from wallet
+  const account = "GDVWY6R4RP37DQPAWBNQKQIZAGDVHUAYMYXKUDSY2O7PJWZNSIZIJNHQ";
+
+  const handleFundAccount = (account: string) => {
+    startTransition(async () => {
+      try {
+        const response = await fetch(`/friendbot?addr=${account}`, {
+          method: 'GET',
+        });
+
+        if (response.ok) {
+          addNotification('Account funded successfully!', 'success');
+          setIsFunded(true);
+        } else {
+          const body: unknown = await response.json();
+          if (
+            body !== null &&
+            typeof body === 'object' &&
+            'detail' in body &&
+            typeof body.detail === 'string'
+          ) {
+            if (body.detail === "account already funded to starting balance") {
+              setIsFunded(true);
+            }
+            addNotification(`Error funding account: ${body.detail}`, 'error');
+          } else {
+            addNotification('Error funding account: Unknown error', 'error');
+          }
+        }
+      } catch {
+        addNotification('Error funding account. Please try again.', 'error');
+      }
+    });
+  };
+
+  return (
+    <div
+      onMouseEnter={() => setIsTooltipVisible(true)}
+      onMouseLeave={() => setIsTooltipVisible(false)}
+    >
+      <Tooltip
+        isVisible={isTooltipVisible}
+        isContrast
+        title="Fund Account"
+        placement="bottom"
+        triggerEl={
+          <Button
+            disabled={isPending || isFunded}
+            onClick={handleFundAccount.bind(this, account)}
+            variant="primary"
+            size="md"
+          >
+            Fund Account
+          </Button>
+        }
+      >
+        <div style={{ width: '13em' }} >
+          {isFunded ? "Account is already funded" : "Fund your account using the Stellar Friendbot"}
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default FundAccountButton;

src/components/FundAccountButton.tsx

@@ -1,4 +1,9 @@
-const envRPC = import.meta.env.PUBLIC_STELLAR_RPC_URL;
+const envStellarNetwork = import.meta.env.PUBLIC_STELLAR_NETWORK;
+export const stellarNetwork =
+  envStellarNetwork && typeof envStellarNetwork === "string"
+    ? envStellarNetwork : "local";
+
+    const envRPC = import.meta.env.PUBLIC_STELLAR_RPC_URL;
 export const rpcUrl =
   envRPC && typeof envRPC === "string"
     ? envRPC : "http://localhost:8000/rpc";

src/contracts/util.ts

@@ -0,0 +1,11 @@
+import { use } from 'react';
+import { NotificationContext, NotificationContextType } from '../providers/NotificationProvider';
+
+export const useNotification = (): NotificationContextType => {
+  const context = use(NotificationContext);
+  if (!context) {
+    throw new Error('useNotification must be used within a NotificationProvider');
+  }
+  return context;
+};
+

src/hooks/useNotification.ts

@@ -3,9 +3,12 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 import "@stellar/design-system/build/styles.min.css";
+import { NotificationProvider } from "./providers/NotificationProvider.tsx"
 
-createRoot(document.getElementById("root")!).render(
+createRoot(document.getElementById('root') as HTMLElement).render(
   <StrictMode>
-    <App />
+    <NotificationProvider>
+      <App />
+    </NotificationProvider>
   </StrictMode>
 );

src/main.tsx

@@ -0,0 +1,24 @@
+.notification-container {
+  position: fixed;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 1000;
+}
+
+.notification {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  opacity: 1;
+}
+
+.notification.slide-in {
+  transform: translateY(0);
+}
+
+.notification.slide-out {
+  transform: translateY(-20px);
+  opacity: 0;
+}