From 20fc7cfc1d6943aec9fafab925bcd0c1387c91cd Mon Sep 17 00:00:00 2001
From: Jeesun Kim <jeesunkim@Jeesuns-MacBook-Pro.local>
Date: Wed, 13 Mar 2024 17:00:24 -0700
Subject: [PATCH] add 'Fund account with Friendbot'

---
 src/app/(sidebar)/account/create/page.tsx | 15 +++++++++++++--
 src/app/(sidebar)/account/styles.scss     |  4 ++++
 src/components/GenerateKeypair.tsx        |  1 +
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx
index ea195bc11..691732df1 100644
--- a/src/app/(sidebar)/account/create/page.tsx
+++ b/src/app/(sidebar)/account/create/page.tsx
@@ -1,12 +1,15 @@
 "use client";
-
-import { Card, Link, Text, Button, Icon } from "@stellar/design-system";
+import { useRouter } from "next/navigation";
+import { Card, Text, Button } from "@stellar/design-system";
 
 import { GenerateKeypair } from "@/components/GenerateKeypair";
+import { Routes } from "@/constants/routes";
 
 import "../styles.scss";
 
 export default function CreateAccount() {
+  const router = useRouter();
+
   return (
     <div className="Account">
       <Card>
@@ -24,6 +27,14 @@ export default function CreateAccount() {
           </div>
           <div className="Account__CTA">
             <GenerateKeypair />
+
+            <Button
+              size="md"
+              variant="tertiary"
+              onClick={() => router.push(Routes.ACCOUNT_FUND)}
+            >
+              Fund account with Friendbot
+            </Button>
           </div>
         </div>
       </Card>
diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss
index 073160c7e..8ddb58249 100644
--- a/src/app/(sidebar)/account/styles.scss
+++ b/src/app/(sidebar)/account/styles.scss
@@ -11,6 +11,10 @@
     align-self: flex-start;
   }
 
+  &__CTA {
+    display: flex;
+    gap: pxToRem(18px);
+  }
   &__keypair {
     display: flex;
     align-items: flex-start;
diff --git a/src/components/GenerateKeypair.tsx b/src/components/GenerateKeypair.tsx
index efe0c4856..cbab67623 100644
--- a/src/components/GenerateKeypair.tsx
+++ b/src/components/GenerateKeypair.tsx
@@ -36,6 +36,7 @@ export const GenerateKeypair = () => {
           }
         />
       )}
+
       {account.keypair.secretKey && (
         <Input
           readOnly