inapp move (#540)

* inapp move

* lint

src/app/connect/in-app-wallet/how-to/get-in-app-wallet-details-on-server/page.mdx

@@ -1,4 +1,4 @@
-# Getting User Details on the server
+# Fetch User Details on the server
 
 If you want to get the user details for a given thirdweb In-App Wallet on the server, you can make a `GET` request on `https://embedded-wallet.thirdweb.com/api/2023-11-30/embedded-wallet/user-details`
 

src/app/connect/in-app-wallet/overview/page.mdx

@@ -1,5 +1,6 @@
+import { CatIcon } from "lucide-react";
 import EmbedOverview from "./embed-overview.svg";
-import { Callout, DocImage, createMetadata, FeatureCard } from "@doc";
+import { Callout, DocImage, createMetadata, FeatureCard, ArticleIconCard } from "@doc";
 
 export const metadata = createMetadata({
 	image: {
@@ -19,6 +20,17 @@ Users can login using their email address, social logins (twitter, apple, discor
 
 <DocImage src={EmbedOverview} />
 
+## Try the demo
+
+See In-App Wallets in action with our demo app:
+
+<ArticleIconCard
+	title="CatAttack"
+	icon={CatIcon}
+	description="Onchain game with In-App Wallets and Account Abstraction"
+	href="https://catattack.thirdweb.com"
+/>
+
 ## Features
 
 <div

src/app/connect/sidebar.tsx

@@ -177,38 +177,32 @@ export const sidebar: SideBar = {
 						},
 						{
 							name: "Get Started",
-							href: `${inAppSlug}/get-started`,
-						},
-						{
-							name: "How to",
 							links: [
 								{
-									name: "Connect Users",
-									href: `${inAppSlug}/how-to/connect-users`,
-								},
-								{
-									name: "Build your own UI",
-									href: `${inAppSlug}/how-to/build-your-own-ui`,
-								},
-								{
-									name: "Interact with wallets",
-									href: `${inAppSlug}/how-to/interact-with-wallets`,
+									name: "TypeScript",
+									href: "/typescript/v5/inAppWallet",
+									icon: <TypeScriptIcon />,
 								},
 								{
-									name: "Interact with the blockchain",
-									href: `${inAppSlug}/how-to/interact-blockchain`,
+									name: "React",
+									href: "/react/v5/in-app-wallet/get-started",
+									icon: <ReactIcon />,
 								},
 								{
-									name: "Sponsor Transactions",
-									href: `${inAppSlug}/how-to/enable-gasless`,
+									name: "React Native",
+									// TODO - add react-native dedicated page
+									href: "/react/v5",
+									icon: <ReactIcon />,
 								},
 								{
-									name: "Getting User Details (Server)",
-									href: `${inAppSlug}/how-to/get-in-app-wallet-details-on-server`,
+									name: "Dotnet",
+									href: "/dotnet/wallets/providers/in-app-wallet",
+									icon: <DotNetIcon />,
 								},
 								{
-									name: "Export private key",
-									href: `${inAppSlug}/how-to/export-private-key`,
+									name: "Unity",
+									href: "/unity/wallets/providers/in-app-wallet",
+									icon: <UnityIcon />,
 								},
 							],
 						},
@@ -243,21 +237,8 @@ export const sidebar: SideBar = {
 							],
 						},
 						{
-							name: "References",
-							links: [
-								{
-									name: "React",
-									href: "/references/typescript/v5/inAppWallet",
-								},
-								{
-									name: "React Native",
-									href: "/references/typescript/v5/inAppWallet",
-								},
-								{
-									name: "Unity",
-									href: "/unity/wallets/providers/in-app-wallet",
-								},
-							],
+							name: "Backend APIs",
+							href: `${inAppSlug}/how-to/get-in-app-wallet-details-on-server`,
 						},
 						{
 							name: "FAQs",

src/app/react/v5/in-app-wallet/build-your-own-ui/page.mdx

@@ -0,0 +1,146 @@
+import {
+	Tabs,
+	TabsList,
+	TabsTrigger,
+	TabsContent,
+	GithubTemplateCard,
+	Stack,
+	createMetadata,
+} from "@doc";
+
+export const metadata = createMetadata({
+	image: {
+		title: "Build a custom UI for connecting in-app wallets",
+		icon: "wallets",
+	},
+	title: "Build a custom UI for in-app wallets",
+	description:
+		"You have full control with the connection hooks and functions to build your own UI",
+});
+
+# Build your own UI
+
+## Low level control to authenticate and connect wallets
+
+You have full control with the connection hooks and functions to build your own UI. To use in-app wallets, you first choose a authentication strategy and then connect.
+
+## Setup the ThirdwebProvider
+
+This will ensure that the wallet is available to all components in your app, handle connection states and auto-connection on page load.
+
+```jsx
+import { ThirdwebProvider } from "thirdweb/react";
+
+<ThirdwebProvider>
+	<YourApp />
+</ThirdwebProvider>;
+```
+
+## Authenticate via Google
+
+Note that for Apple and Facebook, you just need to update the strategy to "facebook" or "apple".
+
+In React and React Native, the `useConnect()` hook handles authentication and connection states.
+
+```tsx
+import { inAppWallet } from "thirdweb/wallets";
+import { useConnect } from "thirdweb/react";
+
+const { connect } = useConnect();
+
+const handleLogin = async () => {
+	await connect(() => {
+		const wallet = inAppWallet();
+		await wallet.connect({
+			client,
+			strategy: "google",
+		});
+		return wallet;
+	});
+};
+```
+
+Other social options include Apple, Facebook, Discord, Farcaster and more.
+
+## Authenticate via Email verification
+
+```typescript
+import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
+
+const { connect } = useConnect();
+
+const preLogin = async (email: string) => {
+	// send email verification code
+	await preAuthenticate({
+		client,
+		strategy: "email",
+		email, // ex: [email protected]
+	});
+};
+
+const handleLogin = async (email: string, verificationCode: string) => {
+	// verify email and connect
+	await connect(() => {
+		const wallet = inAppWallet();
+		await wallet.connect({
+			client,
+			strategy: "email",
+			email,
+			verificationCode,
+		});
+		return wallet;
+	});
+};
+```
+
+## Authenticate via Phone number verification
+
+```typescript
+import { inAppWallet, preAuthenticate } from "thirdweb/wallets/in-app";
+
+const { connect } = useConnect();
+
+const preLogin = async (phonNumber: string) => {
+	// send phone number verification code
+	await preAuthenticate({
+		client,
+		strategy: "phone",
+		phonNumber, // ex: +1234567890
+	});
+};
+
+const handleLogin = async (phonNumber: string, verificationCode: string) => {
+	// verify phone number and connect
+	await connect(() => {
+		const wallet = inAppWallet();
+		await wallet.connect({
+			client,
+			strategy: "email",
+			email,
+			verificationCode,
+		});
+		return wallet;
+	});
+};
+```
+
+## Authenticate via Passkey
+
+```typescript
+import { inAppWallet, hasStoredPasskey } from "thirdweb/wallets/in-app";
+
+const { connect } = useConnect();
+
+const handleLogin = async () => {
+	await connect(() => {
+		const wallet = inAppWallet();
+		const hasPasskey = await hasStoredPasskey(client);
+		await wallet.connect({
+			client,
+			strategy: "passkey",
+			type: hasPasskey ? "sign-in" : "sign-up",
+		});
+		return wallet;
+	});
+};
+```

src/app/react/v5/in-app-wallet/enable-gasless/page.mdx

@@ -0,0 +1,57 @@
+import {
+	OpenSourceCard,
+	DocImage,
+	ArticleIconCard,
+	Stack,
+	createMetadata,
+} from "@doc";
+import { Layers2Icon } from "lucide-react";
+
+export const metadata = createMetadata({
+	image: {
+		title: "Enable Gasless Transactions with In-App Wallet",
+		icon: "wallets",
+	},
+	title: "Enable Gasless Transactions | thirdweb In-App Wallet",
+	description:
+		"By using account abstraction you can create a truly seamless user experience with gasless transactions, batched transactions, and full account recovery.",
+});
+
+# Sponsor Transactions
+
+By combining [Account abstraction](/connect/account-abstraction) and [In-App Wallet](/connect/in-app-wallet/overview), you can create a truly seamless user experience:
+
+- Gasless transactions sponsored by your application
+- Batched transactions
+- Full account recovery the user "account"
+
+## Configure in-app wallet for sponsored transactions
+
+To enable account abstraction in your app, you need to add the `smartAccount` prop with the `inAppWallet` creation.
+
+```jsx
+import { ConnectButton } from "thirdweb/react";
+import { inAppWallet } from "thirdweb/wallets";
+
+const wallets = [inAppWallet({
+	smartAccount: {
+		chain: "sepolia",
+		sponsorGas: true,
+	},
+})];
+
+export default function App() {
+	return (
+		<ThirdwebProvider>
+			<ConnectButton
+				client={client}
+				wallets={wallets}
+			/>
+		</ThirdwebProvider>
+	);
+}
+```
+
+This will create an in-app wallet and a smart account for the user. The smart account will be initialized with the in-app wallet as the owner.
+
+You can sponsor transactions simply by passing `sponsrGas: true` to the `smartAccount` prop. This will allow the smart account to send transactions without the user needing to hold any ETH.

src/app/react/v5/in-app-wallet/export-private-key/page.mdx

@@ -0,0 +1,55 @@
+import { Callout, DocImage, createMetadata, Step, Steps } from "@doc";
+import ManageWallet from './manage-wallet.png'
+import ExportKey from './export-key.png'
+import ConfirmReveal from './confirm-reveal.png'
+import ExportedKey from './exported-key.png'
+
+export const metadata = createMetadata({
+	image: {
+		title: "Export private key of In-App Wallet",
+		icon: "wallets",
+	},
+	title: "Export private key | thirdweb In-App Wallet",
+	description:
+		"Learn how to export private keys for thirdweb in-app wallets",
+});
+
+# Export Private Key
+
+Learn how to export the private key for a thirdweb in-app wallet using the Connect modal. 
+
+<Steps>
+
+  <Step title="Login">
+    Login to your in-app wallet on the application using the [ConnectButton](/react/v5/connect-button) component.
+  </Step>
+
+  <Step title="Manage">
+    Select "Manage Wallet".
+    <DocImage src={ManageWallet} />
+  </Step>
+
+  <Step title="Export">
+    Choose "Export Private Key" and confirm the action to reveal the private key.
+    <DocImage src={ExportKey} />
+  </Step>
+
+  <Step title="Confirm">
+	Confirm you want to reveal your private key.
+    <Callout variant="warning" title="Secure Private Keys">
+      Revealing private keys can compromise your assets and security. Keep them safe and confidential at all times.
+    </Callout>
+    <DocImage src={ConfirmReveal} />
+  </Step>
+
+  <Step title="Reveal">
+    Copy the exported private key directly from the modal.
+    <DocImage src={ExportedKey} />
+  </Step>
+
+</Steps>
+
+
+<Callout variant="info" title="Advanced Configuration">
+As an advanced option, to hide the export private key option from the modal, set the `hidePrivateKeyOption` to `true`
+</Callout>