add 'Fund account with Friendbot'

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>

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;

src/components/GenerateKeypair.tsx

@@ -36,6 +36,7 @@ export const GenerateKeypair = () => {
           }
         />
       )}
+
       {account.keypair.secretKey && (
         <Input
           readOnly