### Example Project Setup

Source: https://docs.getpara.com/llms-full.txt

Instructions to set up and run the typed SDK example project. This involves copying environment variables, installing dependencies, and starting the development server.

```bash
cd examples-hub/server/rest-with-typed-sdk
cp .env.example .env
yarn install
yarn dev
```

--------------------------------

### Para CLI Installation & Setup

Source: https://docs.getpara.com/v3/general/developer-portal-setup

Instructions on how to install the Para CLI and authenticate with your developer account to manage API keys, organizations, and projects.

```APIDOC
## Para CLI Installation & Setup

### Description
Install the Para CLI and authenticate with your developer account. This allows you to manage API keys, organizations, projects, and configuration from your terminal.

### Method
Not Applicable (CLI Installation)

### Endpoint
Not Applicable (CLI Installation)

### Parameters
Not Applicable (CLI Installation)

### Request Example
Not Applicable (CLI Installation)

### Response
Not Applicable (CLI Installation)
```

--------------------------------

### Configuration Output Example

Source: https://docs.getpara.com/v3/cli/commands

Example output from the 'para config get' command, showing resolved configuration values and their sources.

```shell
defaultEnvironment (global): beta
 environment (.pararc): beta
 organizationId
```

--------------------------------

### Complete Security and Configuration Example

Source: https://docs.getpara.com/llms-full.txt

A comprehensive example demonstrating the setup of Para Modal security features and initial step override within the ParaProvider.

```tsx
<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  paraModalConfig={{
    // Security features
    twoFactorAuthEnabled: true,
    recoverySecretStepEnabled: true,

    // Start at specific step
    currentStepOverride: "AUTH_MAIN"
  }}
>
  {children}
</ParaProvider>
```

--------------------------------

### Bun Setup

Source: https://docs.getpara.com/v3/rest/setup

Install and configure the Para Server SDK for Bun applications.

```APIDOC
## Bun Setup

### Description
Install and configure the Para Server SDK for Bun applications.

### Installation

Use Bun's package manager to install the SDK:

```bash
bun add para-sdk
```

### Configuration

Initialize the SDK with your API key and desired environment.

```javascript
import { ParaSDK } from 'para-sdk';

const sdk = new ParaSDK({
  apiKey: 'YOUR_API_KEY',
  environment: 'production' // or 'staging'
});

// Now you can use the sdk instance to interact with Para services.
```

### Usage Examples

Refer to the Server Examples page for detailed integration examples.
```

--------------------------------

### Server Setup

Source: https://docs.getpara.com/v3/react/guides/customization/configuration

Install and configure the Para Server SDK across Node.js, Bun, and Deno environments.

```APIDOC
## Server Setup

### Description
Install and configure the Para Server SDK across Node.js, Bun, and Deno environments.

### Endpoint
/v2/server/setup
```

--------------------------------

### Deno Setup

Source: https://docs.getpara.com/v3/rest/setup

Install and configure the Para Server SDK for Deno applications.

```APIDOC
## Deno Setup

### Description
Install and configure the Para Server SDK for Deno applications.

### Installation

Import the SDK directly in your Deno project.

```typescript
import { ParaSDK } from 'https://deno.land/x/para_sdk/mod.ts';
```

### Configuration

Initialize the SDK with your API key and desired environment.

```typescript
const sdk = new ParaSDK({
  apiKey: 'YOUR_API_KEY',
  environment: 'production' // or 'staging'
});

// Now you can use the sdk instance to interact with Para services.
```

### Usage Examples

Refer to the Server Examples page for detailed integration examples.
```

--------------------------------

### Setup Solana Libraries

Source: https://docs.getpara.com/v3/react-native/guides/web3-operations/solana/setup-libraries

This section details the process of installing and configuring essential libraries for Solana development.

```APIDOC
## Setup Solana Libraries

### Description
This guide covers the installation and setup of necessary libraries for performing Web3 operations on the Solana blockchain. It ensures your development environment is correctly configured to interact with Solana.

### Installation

To begin, you need to install the following libraries:

```bash
npm install @solana/web3.js @solana/spl-token
```

### Configuration

Once installed, you can import and configure these libraries in your project.

```javascript
import { Connection, Keypair } from '@solana/web3.js';
import { Token, TOKEN_PROGRAM_ID } from '@solana/spl-token';

// Example configuration for a connection to Solana Devnet
const connection = new Connection('https://api.devnet.solana.com');

// Example of creating a new Keypair (for demonstration purposes)
const keypair = Keypair.generate();

console.log('Solana connection established:', connection.rpcEndpoint);
console.log('Generated new keypair:', keypair.publicKey.toBase58());
```

### Usage

These libraries provide functionalities for:

- **Creating and managing wallets:** Generating keypairs, managing private keys.
- **Interacting with the Solana network:** Connecting to clusters (devnet, mainnet), sending transactions.
- **Working with SPL Tokens:** Creating, transferring, and managing SPL tokens.

Refer to the specific library documentation for detailed usage of their respective functions and methods.
```

--------------------------------

### Solana Web3.js Usage Example

Source: https://docs.getpara.com/v3/react-native/guides/web3-operations/solana/setup-libraries

Example demonstrating how to use the Solana Web3.js library, including console logging of a signer's address. This snippet is part of the setup guide for the library.

```typescript
console.log("Address: ", signer.address);
```

--------------------------------

### Initialize SDK with Configuration

Source: https://docs.getpara.com/v3/react/guides/custom-ui-web-sdk

Example of initializing the SDK with necessary configuration parameters. Ensure all required fields are provided.

```javascript
const sdk = new ParaSDK({
  // ... SDK configuration options
});
```

--------------------------------

### Project Configuration Example

Source: https://docs.getpara.com/v3/cli/commands

This snippet shows how to configure project-specific information, including framework, SDK type, and version.

```json
{
  "projectInfo": {
    "framework": "nextjs",
    "sdkType": "@getpara/react-sdk",
    "sdkVersion": "2.1.0",
    "packageManager": "npm"
  }
}
```

--------------------------------

### React Native Web3 Setup with web3-react

Source: https://docs.getpara.com/v3/react-native/guides/web3-operations/evm/setup-libraries

Illustrates how to set up web3-react for managing wallet connections and interactions in React Native. This example assumes you have installed web3-react and its dependencies.

```javascript
import React from 'react';
import { Web3ReactProvider } from '@web3-react/core';
import { ethers } from 'ethers';
import YourApp from './YourApp'; // Your main application component

function getLibrary(provider) {
  return new ethers.providers.Web3Provider(provider);
}

function App() {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <YourApp />
    </Web3ReactProvider>
  );
}

export default App;
```

--------------------------------

### Setup Stellar Libraries First

Source: https://docs.getpara.com/v3/react-native/guides/web3-operations/stellar/execute-transactions

Ensure you have completed the Stellar library setup before proceeding with transaction execution. This card links to the setup guide.

```react
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"
const { useMDXComponents: _provideComponents } = arguments[0]
function _createMdxContent(props) {
 const _components = {
 code: "code",
 p: "p",
 pre: "pre",
 span: "span",
 ..._provideComponents(),
 ...props.components
 }, {Card, CardGroup, CodeBlock, Heading, Note, Tab, Tabs} = _components
 if (!Card) _missingMdxReference("Card", true)
 if (!CardGroup) _missingMdxReference("CardGroup", true)
 if (!CodeBlock) _missingMdxReference("CodeBlock", true)
 if (!Heading) _missingMdxReference("Heading", true)
 if (!Note) _missingMdxReference("Note", true)
 if (!Tab) _missingMdxReference("Tab", true)
 if (!Tabs) _missingMdxReference("Tabs", true)
 return _jsxs(_Fragment, {
 children: [_jsx(_components.p, {
 children: "Build and sign complex Stellar transactions using Para’s integrated signers. This includes multi-operation transactions, fee bumps, XDR signing, and Soroban smart contract authorization."
 }), "\n", _jsx(Card, {
 title: "Setup Stellar Libraries First",
 description: "You must complete the Stellar library setup before executing transactions",
 href: "/v3/react-native/guides/web3-operations/stellar/setup-libraries",
 horizontal: true
 }), "\n", _jsxs(Tabs, {
 children: [_jsxs(Tab, {
 title: "Multi-Operation",
 id: "multi-operation",
 children: [_jsx(_components.p, {
 children: "Combine multiple operations into a single atomic transaction:"
 }), _jsx(CodeBlock, {
 filename: "",
 numberOfLines: "44",
 language: "typescript",
 children: _jsx(_components.pre, {
 className: "shiki shiki-themes github-light-default dark-plus",
 style: {
 backgroundColor: "#ffffff",
 "--shiki-dark-bg": "#0B0C0E",
 color: "#1f2328",
 "--shiki-dark": "#D4D4D4"
 },
 language: "typescript",
 children: _jsxs(_components.code, {
 language: "typescript",
 numberOfLines: "44",
 children: [_jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#CF222E",
 "--shiki-dark": "#C586C0"
 },
 children: "import"
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: " { "
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#9CDCFE"
 },
 children: "useParaStellarSigner"
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: " } "
 }), _jsx(_components.span, {
 style: {
 color: "#CF222E",
 "--shiki-dark": "#C586C0"
 },
 children: "from"
 }), _jsx(_components.span, {
 style: {
 color: "#0A3069",
 "--shiki-dark": "#CE9178"
 },
 children: " \"@getpara/react-native-wallet/stellar\""
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ";"
 })],
 }), "\n", _jsxs(_components.span, {
 className: "line",
 children: [_jsx(_components.span, {
 style: {
 color: "#CF222E",
 "--shiki-dark": "#C586C0"
 },
 children: "import"
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: " { "
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#9CDCFE"
 },
 children: "TransactionBuilder"
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: ", "
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#9CDCFE"
 },
 children: "Operation"
 }), _jsx(_components.span, {
 style: {
 color: "#1F2328",
 "--shiki-dark": "#D4D4D4"
 },
 children: " "
 })],
 })]
 })
 })
 })
 })
 })
 })
 }
 return {
 default: _createMdxContent
 }

```

--------------------------------

### SDK Configuration Example

Source: https://docs.getpara.com/v3/react/guides/customization/configuration

A comprehensive example demonstrating how to configure various aspects of the SDK, including OAuth methods and children components. This is useful for setting up the initial state of the application's authentication flow.

```javascript
<ParaProvider configOverrides={{
  oAuthMethods: ["GOOGLE", "APPLE"],
}}>
  <div />
</ParaProvider>
```

--------------------------------

### Complete Theming Example

Source: https://docs.getpara.com/v3/react/guides/customization/modal-theming

This example demonstrates how to configure various theme options, including logo, colors, mode, border radius, font, and foreground mix ratio, using the ParaProvider component.

```javascript
<ParaProvider
  paraClientConfig={{
    apiKey: process.env.REACT_APP_PARA_API_KEY || "",
  }}
  config={{
    appName: "Your App Name"
  }}
  configOverrides={{
    modalConfig: {{
      logo: "https://yourdomain.com/logo.png"
    }},
    themeConfig: {{
      foregroundColor: "#007AFF",
      backgroundColor: "#FFFFFF",
      mode: "light",
      borderRadius: "md",
      font: "Inter, sans-serif",
      foregroundMixRatio: 0.04
    }}
  }}
>
  {children}
</ParaProvider>
```

--------------------------------

### React Native Setup Card

Source: https://docs.getpara.com/v3/react-native/guides/add-email-phone

Links to the React Native and Expo setup guides for Para.

```typescript
import { useState } from "react";
import { Text, View, Button } from "react-native";
import { Para } from "@para/sdk-react-native";

export default function App() {
  const [authPhase, setAuthPhase] = useState<string>("idle");

  const handleAuth = async () => {
    setAuthPhase("authenticating");
    try {
      await Para.authenticateWithEmailOrPhone({
        onStatePhaseChange: (phase) => {
          setAuthPhase(phase);
          if (phase === "awaiting_account_verification") {
            // TODO: Open portal URL
          }
        },
      });
      setAuthPhase("authenticated");
    } catch (error) {
      console.error(error);
      setAuthPhase("error");
    }
  };

  return (
    <View>
      <Text>Authentication Phase: {authPhase}</Text>
      <Button title="Authenticate" onPress={handleAuth} />
    </View>
  );
}
```

--------------------------------

### Swift SDK Setup

Source: https://docs.getpara.com/v3/swift/setup

Instructions for setting up the Para SDK in a Swift project. This includes adding the SDK as a dependency and initializing it with your API key.

```APIDOC
## Swift SDK Setup

### Description

This section details the steps required to integrate the Para SDK into your Swift application. It covers dependency management and initial configuration to ensure seamless communication with the Para services.

### Method

Not applicable (SDK integration)

### Endpoint

Not applicable (SDK integration)

### Parameters

No direct parameters for setup, but requires API key for initialization.

### Request Example

```swift
import ParaSDK

// Initialize the SDK with your API key
Para.initialize(apiKey: "YOUR_API_KEY")
```

### Response

Successful initialization returns no explicit response, but subsequent SDK calls will function correctly.
```

--------------------------------

### Project List Output Example

Source: https://docs.getpara.com/v3/cli/commands

Example output format for listing projects, showing Name, ID, and Framework.

```shell
Name ID Framework
my-app proj_def456 nextjs (active)
backend proj_ghi789 vite
```

--------------------------------

### Get Key with Environment

Source: https://docs.getpara.com/v3/cli/commands

Retrieves keys for specific environments. The first example gets the beta key (default), while the second explicitly gets the production key using the -e flag.

```shellscript
para keys get # Get the beta key (default)
para keys get -e prod # Get the prod key
```

--------------------------------

### Start Development Server

Source: https://docs.getpara.com/llms-full.txt

Run this command to start your local development server.

```bash
yarn dev

```

--------------------------------

### Add Para Setup Script to package.json

Source: https://docs.getpara.com/llms-full.txt

Add the 'postinstall' script to your package.json to automatically run the Para setup script after installation.

```json
{
  "scripts": {
    "postinstall": "npx setup-para"
  }
}
```

--------------------------------

### Server Setup (Node.js, Bun, Deno)

Source: https://docs.getpara.com/v3/react/guides/pregen

Install and configure the Para Server SDK across Node.js, Bun, and Deno environments for seamless backend integration.

```APIDOC
## Server Setup

### Description
Install and configure the Para Server SDK across Node.js, Bun, and Deno environments.

### Sidebar Title
Node.js Setup

### Keywords
server setup, nodejs setup, bun setup, deno setup, server sdk setup, backend setup, server integration setup, nodejs installation, server configuration, para server setup

### Link
/v2/server/setup
```

--------------------------------

### Check and Open Wallet Installation

Source: https://docs.getpara.com/llms-full.txt

Provides functions to check if a wallet app is installed using its custom URL scheme and to open the wallet's installation page in the app store. Essential for guiding users to install necessary wallet applications.

```dart
Future<bool> isWalletInstalled(String walletScheme) async {
  try {
    return await canLaunchUrl(Uri.parse('$walletScheme://'));
  } catch (e) {
    return false;
  }
}

Future<void> openWalletInstallPage(String storeUrl) async {
  if (await canLaunchUrl(Uri.parse(storeUrl))) {
    await launchUrl(Uri.parse(storeUrl));
  }
}
```

--------------------------------

### Basic Setup for React Application

Source: https://docs.getpara.com/v3/react/quickstart

This code demonstrates the basic setup for the Para React SDK, including necessary imports and provider configurations. It utilizes React Query for state management and the ParaProvider for SDK context.

```typescript
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ParaProvider, useModal, useAccount, useWallet } from "@getpara/react-sdk";
import "@getpara/react-sdk/styles.css";

// Example for EVM network
import { sepolia } from "wagmi/chains";

const queryClient = new QueryClient();

const App = () => {
  const { openModal } = useModal();
  const { address, chainId } = useAccount();
  const { wallet, disconnect } = useWallet();

  return (
    <ParaProvider
      config={{
        chains: [sepolia],
        // ... other wagmi configurations
      }}
    >
      <QueryClientProvider client={queryClient}>
        {/* Your app components */}
        <div>
          {address ? (
            <button onClick={() => disconnect()}>
              Disconnect {address.slice(0, 6)}...{address.slice(-4)}
            </button>
          ) : (
            <button onClick={() => openModal()}>
              Connect Wallet
            </button>
          )}
        </div>
      </QueryClientProvider>
    </ParaProvider>
  );
};

export default App;

```

--------------------------------

### React Native Web3 Setup with ethers.js

Source: https://docs.getpara.com/v3/react-native/guides/web3-operations/evm/setup-libraries

Demonstrates the basic setup for using ethers.js in a React Native environment. Ensure you have installed the necessary packages.

```javascript
import { ethers } from "ethers";

// Initialize a provider (e.g., Infura, Alchemy, or a local node)
const provider = new ethers.providers.JsonRpcProvider("YOUR_RPC_URL");

// Create a wallet instance (e.g., from a private key or mnemonic)
const privateKey = "YOUR_PRIVATE_KEY";
const wallet = new ethers.Wallet(privateKey, provider);

// Now you can use the wallet to interact with the blockchain
console.log("Wallet Address:", wallet.address);

// Example: Get the current block number
async function getBlockNumber() {
  try {
    const blockNumber = await provider.getBlockNumber();
    console.log("Current Block Number:", blockNumber);
  } catch (error) {
    console.error("Error fetching block number:", error);
  }
}

getBlockNumber();
```

--------------------------------

### Basic Vite React App Setup

Source: https://docs.getpara.com/v3/react/setup/vite

This snippet shows the initial setup for a Vite-based React application. It includes the necessary dependencies and basic structure.

```bash
npm create vite@latest my-para-app --template react
cd my-para-app
npm install
npm install para-sdk
npm run dev
```

--------------------------------

### Output of 'para config get'

Source: https://docs.getpara.com/v3/cli/commands

This is an example output of the 'para config get' command when no specific key is provided, showing configuration values and their origins.

```shellscript
defaultEnvironment
project
organization

```

--------------------------------

### Create a New Project with CLI

Source: https://docs.getpara.com/v3/react/quickstart

Use the Para CLI to scaffold a new project with the SDK, authentication, and network settings pre-configured. This command simplifies the initial setup process.

```bash
npx @getpara/cli create
```

--------------------------------

### Use Setup 2FA Hook

Source: https://docs.getpara.com/llms-full.txt

This hook facilitates the setup of two-factor authentication (2FA) for user accounts. It guides the user through the 2FA configuration process.

```javascript
import {MethodDocs} from '/snippets/v3/components/method-doc.mdx';
import UseSetup2fa from '/snippets/v3/definitions/hooks/useSetup2fa.mdx';

<UseSetup2fa />
```

--------------------------------

### Usage Example for useParaCosmjsSignAndBroadcast

Source: https://docs.getpara.com/v3/react/guides/hooks/use-para-cosmjs-sign-and-broadcast

This example demonstrates how to import and use the useParaCosmjsSignAndBroadcast hook along with SigningStargateClient and coins from CosmJS. Ensure you have the necessary setup for CosmJS and your wallet.

```tsx
import {
  useParaCosmjsProtoSigner,
  useParaCosmjsSignAndBroadcast,
} from "@getpara/react-sdk";
import {
  SigningStargateClient,
  coins,
} from "@cosmjs/stargate";

function MyComponent() {
  const { signAndBroadcast } = useParaCosmjsSignAndBroadcast();

  const handleSendTokens = async () => {
    // Replace with actual signer and recipient address
    const signerAddress = "YOUR_SIGNER_ADDRESS";
    const recipientAddress = "YOUR_RECIPIENT_ADDRESS";
    const amountToSend = coins(1000, "token_denom"); // Example: 1000 units of token_denom

    try {
      // You would typically get the client from useParaCosmjsProtoSigner or similar
      // For demonstration, assuming client is available
      const client: SigningStargateClient = {} as SigningStargateClient; // Placeholder

      const txHash = await signAndBroadcast(signerAddress, recipientAddress, amountToSend, client);
      console.log("Transaction broadcasted successfully. Tx Hash:", txHash);
    } catch (error) {
      console.error("Failed to broadcast transaction:", error);
    }
  };

  return (
    <button onClick={handleSendTokens}>
      Send Tokens
    </button>
  );
}
```

--------------------------------

### TanStack Start Configuration

Source: https://docs.getpara.com/v3/react/setup/tanstack-start

Configure TanStack Start with Vite, including tsconfig paths and client-side node polyfills. This setup is applied to both client and server environments.

```typescript
import { defineConfig } from "@tanstack/react-start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  tsr: { appDirectory: "src" },

  // Base configuration (applied to both client and server)
  vite: {
    plugins: [tsConfigPaths({ projects: ["./tsconfig.json"] })],
    define: {
      // This helps modules determine the execution environment
      "process.browser": true,
    },
  },

  // Client-specific configuration
  routers: {
    client: {
      vite: {
        // Apply node polyfills only on the client side
        plugins: [nodePolyfills()],
      },
    },
  },
});

```