Resolved merge conflicts

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": ["eslint:recommended", "next/core-web-vitals", "prettier"]
 }

package.json

@@ -29,6 +29,7 @@
     "zustand-querystring": "^0.0.19"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^14.1.3",
     "@playwright/test": "^1.42.0",
     "@types/dompurify": "^3.0.5",
     "@types/node": "^20.11.23",

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

@@ -1,10 +1,29 @@
 "use client";
 
-import { Card, Link, Text, Button, Icon } from "@stellar/design-system";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, Text, Button } from "@stellar/design-system";
+import { Keypair } from "stellar-sdk";
+
+import { Routes } from "@/constants/routes";
+import { useStore } from "@/store/useStore";
+import { GenerateKeypair } from "@/components/GenerateKeypair";
+import { ExpandBox } from "@/components/ExpandBox";
 
 import "../styles.scss";
 
 export default function CreateAccount() {
+  const { account } = useStore();
+  const router = useRouter();
+  const [secretKey, setSecretKey] = useState("");
+
+  const generateKeypair = () => {
+    let keypair = Keypair.random();
+
+    account.update(keypair.publicKey());
+    setSecretKey(keypair.secret());
+  };
+
   return (
     <div className="Account">
       <Card>
@@ -21,11 +40,25 @@ export default function CreateAccount() {
             </Text>
           </div>
           <div className="Account__CTA">
-            <Button size="md" variant="tertiary">
+            <Button size="md" variant="secondary" onClick={generateKeypair}>
               Generate keypair
             </Button>
+
+            <Button
+              size="md"
+              variant="tertiary"
+              onClick={() => router.push(Routes.ACCOUNT_FUND)}
+            >
+              Fund account with Friendbot
+            </Button>
           </div>
         </div>
+        <ExpandBox isExpanded={Boolean(account.publicKey && secretKey)}>
+          <GenerateKeypair
+            publicKey={account.publicKey}
+            secretKey={secretKey}
+          />
+        </ExpandBox>
       </Card>
     </div>
   );

src/app/(sidebar)/account/layout.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 import { Routes } from "@/constants/routes";
 

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

@@ -10,4 +10,20 @@
   .CardText__button {
     align-self: flex-start;
   }
+
+  &__CTA {
+    display: flex;
+    gap: pxToRem(18px) pxToRem(8px);
+  }
+  &__keypair {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    margin-top: pxToRem(24px);
+    gap: pxToRem(16px);
+
+    .Input__side-element--right {
+      cursor: pointer;
+    }
+  }
 }

src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import {
   Alert,

src/app/(sidebar)/explore-endpoints/layout.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 import { EXPLORE_ENDPOINTS_PAGES_HORIZON } from "@/constants/exploreEndpointsPages";
 

src/app/(sidebar)/layout.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { LayoutWithSidebar } from "@/components/layout/LayoutWithSidebar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {

src/app/(sidebar)/soroban/layout.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 
 export default function TransactionTemplate({

src/app/(sidebar)/transaction/layout.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 import { Routes } from "@/constants/routes";
 

src/app/(sidebar)/xdr/layout.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 import { Routes } from "@/constants/routes";
 

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import type { Metadata } from "next";
 
 import { LayoutMain } from "@/components/layout/LayoutMain";

src/components/ExpandBox/index.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState } from "react";
+import React, { useLayoutEffect, useState } from "react";
 import "./styles.scss";
 
 export const ExpandBox = ({

src/components/FormElements/AssetPicker.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Input } from "@stellar/design-system";
 
 import { ExpandBox } from "@/components/ExpandBox";
@@ -12,6 +13,7 @@ type AssetPickerProps = {
   labelSuffix?: string | React.ReactNode;
   value: AssetObjectValue | undefined;
   error: { code: string | undefined; issuer: string | undefined } | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (asset: AssetObjectValue | undefined) => void;
   assetInput: "issued" | "alphanumeric";
   fitContent?: boolean;
@@ -150,11 +152,13 @@ type AssetPickerFieldsProps = {
   code: {
     value: string;
     error: string;
+    // eslint-disable-next-line no-unused-vars
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   };
   issuer: {
     value: string;
     error: string;
+    // eslint-disable-next-line no-unused-vars
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   };
 };

src/components/FormElements/CursorPicker.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Input, InputProps } from "@stellar/design-system";
 
 interface CursorPickerProps extends Omit<InputProps, "fieldSize"> {
@@ -7,6 +8,7 @@ interface CursorPickerProps extends Omit<InputProps, "fieldSize"> {
   placeholder?: string;
   value: string;
   error: string | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 

src/components/FormElements/IncludeFailedPicker.tsx

@@ -1,8 +1,10 @@
+import React from "react";
 import { RadioPicker } from "@/components/RadioPicker";
 
 type IncludeFailedPickerProps = {
   id: string;
   selectedOption: string | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (optionId: string | undefined, optionValue?: boolean) => void;
   labelSuffix?: string | React.ReactNode;
 };

src/components/FormElements/LimitPicker.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Input, InputProps } from "@stellar/design-system";
 
 interface LimitPickerProps extends Omit<InputProps, "fieldSize"> {
@@ -7,6 +8,7 @@ interface LimitPickerProps extends Omit<InputProps, "fieldSize"> {
   placeholder?: string;
   value: string;
   error: string | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 

src/components/FormElements/OrderPicker.tsx

@@ -1,8 +1,10 @@
+import React from "react";
 import { RadioPicker } from "@/components/RadioPicker";
 
 type OrderPickerProps = {
   id: string;
   selectedOption: string | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (optionId: string | undefined, optionValue?: string) => void;
   labelSuffix?: string | React.ReactNode;
 };

src/components/FormElements/PubKeyPicker.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Input, InputProps } from "@stellar/design-system";
 
 interface PubKeyPickerProps extends Omit<InputProps, "fieldSize"> {
@@ -8,6 +9,7 @@ interface PubKeyPickerProps extends Omit<InputProps, "fieldSize"> {
   placeholder?: string;
   value: string;
   error: string | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (e: React.ChangeEvent<any>) => void;
 }
 

src/components/GenerateKeypair.tsx

@@ -0,0 +1,40 @@
+import { Input } from "@stellar/design-system";
+
+export const GenerateKeypair = ({
+  publicKey,
+  secretKey,
+}: {
+  publicKey: string;
+  secretKey: string;
+}) => {
+  return (
+    <div className="Account__keypair">
+      {publicKey && (
+        <Input
+          readOnly
+          id="generate-keypair-publickey"
+          fieldSize="md"
+          label="Public Key"
+          value={publicKey}
+          copyButton={{
+            position: "right",
+          }}
+        />
+      )}
+
+      {secretKey && (
+        <Input
+          readOnly
+          id="generate-keypair-secretkey"
+          fieldSize="md"
+          label="Secret Key"
+          value={secretKey}
+          isPassword
+          copyButton={{
+            position: "right",
+          }}
+        />
+      )}
+    </div>
+  );
+};

src/components/MaintenanceBanner.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Banner, Link } from "@stellar/design-system";
 
 import { getRelevantMaintenanceMsg } from "@/helpers/getRelevantMaintenanceMsg";

src/components/NetworkSelector/index.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   useCallback,
   useEffect,
   useLayoutEffect,

src/components/RadioPicker/index.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 import { Label } from "@stellar/design-system";
 import { AssetType } from "@/types/types";
 import "./styles.scss";
@@ -8,7 +10,9 @@ interface RadioPickerProps<TOptionValue = string> {
   label?: string | React.ReactNode;
   labelSuffix?: string | React.ReactNode;
   onChange: (
+    // eslint-disable-next-line no-unused-vars
     optionId: AssetType | undefined,
+    // eslint-disable-next-line no-unused-vars
     optionValue?: TOptionValue,
   ) => void;
   options: {

src/components/TabView/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Card, Text } from "@stellar/design-system";
 import { WithInfoText } from "@/components/WithInfoText";
 import { Tabs } from "@/components/Tabs";
@@ -17,6 +18,7 @@ type TabViewProps = {
   tab4?: Tab;
   tab5?: Tab;
   tab6?: Tab;
+  // eslint-disable-next-line no-unused-vars
   onTabChange: (id: string) => void;
   activeTabId: string;
   staticTop?: React.ReactNode;

src/components/Tabs/index.tsx

@@ -12,6 +12,7 @@ export const Tabs = ({
 }: {
   tabs: Tab[];
   activeTabId: string;
+  // eslint-disable-next-line no-unused-vars
   onChange: (id: string) => void;
 }) => {
   return (

src/components/WithInfoText/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Icon, Tooltip } from "@stellar/design-system";
 import { NextLink } from "@/components/NextLink";
 import "./styles.scss";

src/components/layout/LayoutContentContainer.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export const LayoutContentContainer = ({
   children,
 }: {

src/constants/formComponentTemplate.tsx

@@ -1,35 +1,42 @@
+import { JSX } from "react";
+
 import { AssetPicker } from "@/components/FormElements/AssetPicker";
 import { PubKeyPicker } from "@/components/FormElements/PubKeyPicker";
+import { OrderPicker } from "@/components/FormElements/OrderPicker";
+import { CursorPicker } from "@/components/FormElements/CursorPicker";
+import { LimitPicker } from "@/components/FormElements/LimitPicker";
 
 import { parseJsonString } from "@/helpers/parseJsonString";
 import { validate } from "@/validate";
 import { AnyObject, AssetObjectValue } from "@/types/types";
-import { OrderPicker } from "@/components/FormElements/OrderPicker";
-import { CursorPicker } from "@/components/FormElements/CursorPicker";
-import { LimitPicker } from "@/components/FormElements/LimitPicker";
 
 type TemplateRenderProps = {
   value: string | undefined;
   error: string | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (val: any) => void;
   isRequired?: boolean;
 };
 
 type TemplateRenderAssetProps = {
   value: AssetObjectValue | undefined;
   error: { code: string | undefined; issuer: string | undefined } | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (asset: AssetObjectValue | undefined) => void;
   isRequired?: boolean;
 };
 
 type TemplateRenderOrderProps = {
   value: string | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (optionId: string | undefined, optionValue?: string) => void;
   isRequired?: boolean;
 };
 
 type FormComponentTemplate = {
+  // eslint-disable-next-line no-unused-vars
   render: (...args: any[]) => JSX.Element;
+  // eslint-disable-next-line no-unused-vars
   validate: ((...args: any[]) => any) | null;
 };
 

src/constants/routes.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-vars */
+
 export enum Routes {
   ROOT = "/",
   // Account