### Clone Solana App Kit Repository

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/setup.mdx

Clones the Solana App Kit repository from Git and navigates into its root directory to prepare for further setup.

```bash
git clone ...
cd solana-app-kit
```

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

### Install Project Dependencies with Yarn

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/setup.mdx

Installs all required project dependencies using the Yarn package manager, ensuring all necessary libraries and modules are available for the application.

```bash
yarn install
```

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

### Install Solana App Kit

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/introduction.mdx

This command installs the Solana App Kit library using npx, a tool for executing Node.js packages. It's the first step to integrate the kit into your React Native project.

```bash
npx install solana-app-kit
```

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

### Start Metro Bundler

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/setup.mdx

Initiates the Metro bundler, which compiles and serves the JavaScript code for the application. The '--clear' flag can be used to clear caches, but frequent use is discouraged due to potential performance impacts.

```bash
yarn start --clear
```

```bash
yarn start
```

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

### Install iOS Pods

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/setup.mdx

Navigates into the 'ios' directory of the project and installs all CocoaPods dependencies specific to the iOS application. This ensures all native iOS libraries are correctly linked.

```bash
cd ios
pod install
```

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

### Start Production Server

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/README.md

Initiates the production server using the 'pnpm start' command. This command typically serves the pre-built application, optimized for performance and stability.

```bash
pnpm start
```

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

### Install Aura DAS API Backend

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/src/types/aura/README.md

Steps to clone the repository and install project dependencies for the Aura DAS API Backend.

```bash
git clone <repository-url>
cd aura-das-api
```

```bash
npm install
```

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

### Install Solana App Kit CLI

Source: https://github.com/sendarcade/solana-app-kit/blob/main/README.md

Installs the Solana App Kit command-line interface globally, allowing users to scaffold new projects easily.

```sh
npx start-solana-app
```

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

### Start Backend Server in Development Mode

Source: https://github.com/sendarcade/solana-app-kit/blob/main/README.md

Commands to start the backend development server, allowing for local testing and development of the server-side application.

```sh
pnpm dev
# or
yarn dev
```

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

### Solana App Kit: Step-by-Step Module Creation Guide

Source: https://github.com/sendarcade/solana-app-kit/blob/main/CONTRIBUTING.md

This guide provides step-by-step instructions for creating a new self-contained module within the Solana App Kit. It specifies the exact locations for creating module-specific folders for example flows, UI components, client-side business logic, client-side utilities, and, if needed, server-side controllers, routes, business logic, and utilities. It also covers Redux state integration, ensuring new modules are properly integrated into the existing architecture.

```APIDOC
1. In screens/common/, create a folder named after your module (e.g. screens/common/myNewModule) if you need to add example flows.
2. In src/components/, create a folder with the same name (e.g. src/components/myNewModule) and add all related UI components.
3. In src/services/, create a folder (e.g. src/services/myNewModule) for any business logic or API integration.
4. In src/utils/, create a folder (e.g. src/utils/myNewModule) for helper functions.
5. If your module requires server support, add code in:
   - Controllers: server/src/controllers/myNewModuleController.ts
   - Routes: server/src/routes/myNewModule.ts
   - Business Logic: server/src/service/myNewModule
   - Utilities: server/src/utils/myNewModule
6. If your module requires new Redux state, create or update slices in src/state/<feature>.
```

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

### Install Solana App Kit

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/use.mdx

Instructions for installing the `solana-app-kit` library using yarn or npm in a React Native or Expo application.

```bash
yarn add solana-app-kit
# or
npm install solana-app-kit
```

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

### Install and Verify CocoaPods

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/setup.mdx

Installs CocoaPods, a dependency manager for iOS projects, using RubyGems. This step is crucial for managing native iOS dependencies. After installation, the version is verified.

```bash
sudo gem install cocoapods
pod --version
```

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

### Example Environment Variables Configuration (.env.example)

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/README.md

Provides a comprehensive example of the .env file structure, detailing various configuration parameters for general settings, Solana network, TokenMill, Google Cloud Storage, Turnkey Wallet API, Pinata IPFS, and WebSocket functionality. Placeholders indicate where actual values should be inserted.

```env
# ===========================================
# GENERAL CONFIGURATION
# ===========================================
NODE_ENV=development
PORT=8080

# ===========================================
# SOLANA NETWORK CONFIGURATION
# ===========================================
# Mainnet RPC URL (replace with your Helius API key)
RPC_URL=https://staked.helius-rpc.com?api-key=YOUR_HELIUS_API_KEY
# Devnet RPC URL for testing
# RPC_URL=https://devnet.helius-rpc.com/?api-key=YOUR_HELIUS_API_KEY

# Wallet private key for server operations (Base58 encoded)
WALLET_PRIVATE_KEY=YOUR_WALLET_PRIVATE_KEY_HERE
# Alternative wallet for testing
# WALLET_PRIVATE_KEY=YOUR_TEST_WALLET_PRIVATE_KEY

# Swap authority wallet private key
SWAP_AUTHORITY_KEY=YOUR_SWAP_AUTHORITY_PRIVATE_KEY

# Commission wallet address
COMMISSION_WALLET=YOUR_COMMISSION_WALLET_ADDRESS

# ===========================================
# TOKENMILL CONFIGURATION
# ===========================================
# TokenMill program ID on Solana
TOKEN_MILL_PROGRAMID=YOUR_TOKEN_MILL_PROGRAM_ID

# TokenMill configuration PDA
TOKEN_MILL_CONFIG_PDA=YOUR_TOKEN_MILL_CONFIG_PDA
# Alternative config PDA for testing
# TOKEN_MILL_CONFIG_PDA=YOUR_TEST_CONFIG_PDA

# ===========================================
# DATABASE CONFIGURATION
# ===========================================
# PostgreSQL connection string
DATABASE_URL=postgresql://username:password@host:port/database_name

# ===========================================
# GOOGLE CLOUD STORAGE
# ===========================================
# GCS bucket name for file storage
GCS_BUCKET_NAME=your-gcs-bucket-name

# Service account email for GCS access
SERVICE_ACCOUNT_EMAIL=your-service-account@your-project.iam.gserviceaccount.com

# ===========================================
# TURNKEY WALLET API
# ===========================================
# Turnkey API base URL
TURNKEY_API_URL=https://api.turnkey.com

# Your Turnkey organization ID
TURNKEY_ORGANIZATION_ID=your-organization-id

# Turnkey API public key
TURNKEY_API_PUBLIC_KEY=your-turnkey-public-key

# Turnkey API private key
TURNKEY_API_PRIVATE_KEY=your-turnkey-private-key

# ===========================================
# PINATA IPFS CONFIGURATION
# ===========================================
# Pinata gateway domain
PINATA_GATEWAY=your-gateway.mypinata.cloud

# Pinata JWT token
PINATA_JWT=your-pinata-jwt-token

# Pinata API secret
PINATA_API_SECRET=your-pinata-api-secret

# Pinata API key
PINATA_API_KEY=your-pinata-api-key

# ===========================================
# WEBSOCKET CONFIGURATION
# ===========================================
# Enable/disable WebSocket functionality
WEBSOCKET_ENABLED=true
```

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

### Install Solana App Kit Backend Dependencies

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/README.md

Installs all required project dependencies for the Solana App Kit backend server using pnpm, a fast and efficient package manager.

```bash
pnpm install
```

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

### Install Server Dependencies (pnpm)

Source: https://github.com/sendarcade/solana-app-kit/blob/main/README.md

Installs all required Node.js dependencies for the backend server application using the pnpm package manager.

```sh
pnpm install
```

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

### Install Project Dependencies with pnpm

Source: https://github.com/sendarcade/solana-app-kit/blob/main/README.md

Installs all necessary project dependencies for the Solana App Kit using the pnpm package manager, ensuring all required libraries are available for development.

```sh
pnpm install
```

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

### Run Development and Build Commands

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/src/types/aura/README.md

Commands to start the development server and build the project for deployment.

```bash
npm run dev
```

```bash
npm run build
```

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

### Example File Structure for React Components

Source: https://github.com/sendarcade/solana-app-kit/blob/main/CONTRIBUTING.md

Provides a hierarchical example of how to organize React components, their associated styles, and types within a project directory, promoting modularity and maintainability.

```plaintext
src/components/MyModule
 ├─ MyModuleMain.tsx
 ├─ MyModuleMain.style.ts
 └─ MyModuleSubComponent/
     ├─ MyModuleSubComponent.tsx
     ├─ MyModuleSubComponent.style.ts
     └─ MyModuleSubComponent.types.ts
```

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

### Example: Create and Buy Token on Pump.fun with TypeScript

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/services/pumpfun/pumpfunService/functions/createAndBuyTokenViaPumpfun.mdx

Provides a TypeScript example demonstrating how to invoke the `createAndBuyTokenViaPumpfun` function. It shows how to pass the necessary parameters and log the resulting mint public key.

```typescript
const result = await createAndBuyTokenViaPumpfun({
  userPublicKey: wallet.publicKey,
  tokenName: "My Test Token",
  tokenSymbol: "TEST",
  description: "A token for testing",
  imageUri: "file:///data/user/0/com.example/cache/ImagePicker/image.png",
  solAmount: 0.1,
  solanaWallet: wallet
});

console.log(`Created token: ${result.mintPublicKey}`);
```

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

### TokenMillService: Programmatic Solana Token Market & Bonding Curve Setup (TypeScript)

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/modules/token-mill/README.md

This TypeScript example showcases direct interaction with the `TokenMillService` to programmatically create a new token market and configure its bonding curve. It demonstrates importing key functions like `createMarket` and `setBondingCurve`, passing essential parameters such as token details, user public key, connection, and wallet for on-chain operations.

```typescript
import { 
  createMarket,
  fundUserWithWSOL,
  stakeTokens,
  swapTokens,
  setBondingCurve
} from '@/modules/token-mill';

// Create a new market
const market = await createMarket({
  tokenName: 'My Token',
  tokenSymbol: 'MTK',
  metadataUri: 'https://...',
  totalSupply: 1_000_000,
  creatorFee: 2.5,
  stakingFee: 1.0,
  userPublicKey: publicKey,
  connection,
  solanaWallet: wallet
});

// Configure bonding curve
await setBondingCurve({
  marketAddress: market.address,
  askPrices: [...],
  bidPrices: [...],
  userPublicKey: publicKey,
  connection,
  solanaWallet: wallet
});
```

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

### TypeScript Example: Defining Constants and Main Configuration

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/shared/config/README.md

Provides a TypeScript example demonstrating the definition of application constants in `constants.ts` (e.g., `API_TIMEOUT`, `FEATURES`). It then shows how `index.ts` aggregates these and environment variables into a central `CONFIG` object, allowing for overrides and structured settings.

```typescript
// constants.ts
export const API_TIMEOUT = 30000; // 30 seconds
export const MAX_RECONNECT_ATTEMPTS = 5;
export const DEFAULT_AVATAR = '/assets/default-avatar.png';

// Feature flags
export const FEATURES = {
  SOCIAL_FEED: true,
  NFT_GALLERY: true,
  CHAT: process.env.NODE_ENV === 'development',
};

// index.ts
export const CONFIG = {
  // API configuration
  API_URL: process.env.REACT_APP_API_URL || 'https://api.example.com',
  SOLANA_RPC_URL: process.env.REACT_APP_SOLANA_RPC_URL || 'https://api.mainnet-beta.solana.com',
  
  // Feature toggles
  FEATURES: {
    ...FEATURES,
    // Override from environment if provided
    ...(process.env.REACT_APP_FEATURES ? JSON.parse(process.env.REACT_APP_FEATURES) : {}),
  },
  
  // Connection settings
  CONNECTION: {
    TIMEOUT: API_TIMEOUT,
    MAX_RETRIES: 3,
  },
};
```

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

### React Native Solana NFT Listing Component Example

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/modules/nft/README.md

Illustrates a simplified React Native component (`SellSection`) demonstrating the process of fetching and displaying a user's NFTs. It outlines the typical application flow, from screen activation and wallet integration to data fetching via an NFT service (e.g., Tensor API) and preparing NFTs for sale. The example uses `useFetchNFTs` and `FlatList` for rendering.

```typescript
// Simplified example within SellSection.tsx
import React, { useState, useEffect, useCallback } from 'react';
import { View, Text, FlatList, Button } from 'react-native';
import { useFetchNFTs } from '@/modules/nft'; // Assuming index exports this
import { NftItem } from '@/modules/nft/types';

interface SellSectionProps {
  userPublicKey: string;
  // ... other props like userWallet
}

const SellSection: React.FC<SellSectionProps> = ({ userPublicKey }) => {
  const { nfts, loading, error } = useFetchNFTs(userPublicKey);
  const [selectedNft, setSelectedNft] = useState<NftItem | null>(null);

  // ... (logic for listing modal and handleSellNftOnTensor)

  if (loading) return <Text>Loading your NFTs...</Text>;
  if (error) return <Text>Error: {error}</Text>;

  return (
    <View>
      <FlatList
        data={nfts}
        keyExtractor={(item) => item.mint}
        renderItem={({ item }) => (
          <View>
            <Text>{item.name}</Text>
            {item.image && <Image source={{ uri: item.image }} style={{ width: 50, height: 50}} />}
            <Button title="List for Sale" onPress={() => setSelectedNft(item)} />
          </View>
        )}
      />
      {/* Modal for listing selectedNft would be here */}
    </View>
  );
};

```

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

### TypeScript Example: Accessing Centralized Application Configuration

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/shared/config/README.md

Illustrates how to import and utilize the `CONFIG` object, which centralizes application settings. This example demonstrates accessing `API_URL` for network requests and checking `FEATURES.SOCIAL_FEED` to conditionally render UI components, promoting consistent access to global settings.

```typescript
import { CONFIG } from '../shared/config';

// In a component or service
function apiCall() {
  return fetch(`${CONFIG.API_URL}/endpoint`, {
    timeout: CONFIG.CONNECTION.TIMEOUT,
  });
}

// Feature flag check
function renderFeature() {
  if (CONFIG.FEATURES.SOCIAL_FEED) {
    return <SocialFeed />;
  }
  return null;
}
```

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

### Example: Uploading IPFS Metadata

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/src/utils/README.md

This example showcases the typical usage of the `uploadMetadata` utility for uploading JSON metadata to IPFS. It demonstrates how to structure a metadata object, including name, symbol, description, image, and attributes, and then use the utility to obtain the resulting IPFS URL.

```typescript
import { uploadMetadata } from '../utils/ipfs';

// In a controller function
const metadata = {
  name: "Token Name",
  symbol: "TKN",
  description: "Token description",
  image: imageUrl,
  attributes: [
    { trait_type: "Category", value: "Social" }
  ]
};

const ipfsUrl = await uploadMetadata(metadata);
return ipfsUrl;
```

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

### Document React Components with TSDoc/JSDoc

Source: https://github.com/sendarcade/solana-app-kit/blob/main/CONTRIBUTING.md

Shows an example of TSDoc/JSDoc comments for documenting a reusable React component, including usage examples, component tags, and clear descriptions for better code understanding.

```ts
/**
 * A reusable button component that supports custom styling.
 * @component
 * @example
 * <MyButton onPress={handlePress} label="Click Me" styleOverrides={myStyles} />
 */
```

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

### MoonPay Service API Usage Example

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/modules/moonpay/README.md

Demonstrates how to use the `createMoonPayService` to interact with MoonPay at a lower level. It includes examples of generating a widget URL and validating a Solana wallet address using the service methods.

```typescript
import { createMoonPayService } from '@/modules/moonpay';

const moonPayService = createMoonPayService({
  apiKey: 'pk_test_your_api_key',
  environment: 'sandbox',
  // No defaultParameters needed - automatically uses Solana defaults
});

// Generate URL for Solana purchase
const widgetUrl = moonPayService.getWidgetUrl({
  walletAddress: 'your_solana_wallet_address',
  baseCurrencyAmount: '100',
});

// Validate Solana wallet address
const isValid = moonPayService.validateWalletAddress(
  'your_solana_wallet_address',
  'sol'
);
```

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

### Detailed Example: `uploadToGCS` Utility Function Implementation

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/src/utils/README.md

This comprehensive example provides the full implementation of the `uploadToGCS` function. It demonstrates robust error handling, interaction with the Google Cloud Storage API to save a file buffer, setting content types, making the uploaded file publicly accessible, and constructing the public URL. This function serves as a model for developing other utilities.

```typescript
/**
 * Uploads a file buffer to Google Cloud Storage and returns the public URL
 * @param fileBuffer - The buffer containing file data
 * @param fileName - The desired file name (including extension)
 * @param contentType - The MIME type of the file
 * @returns A Promise resolving to the public URL of the uploaded file
 * @throws Error if the upload fails
 */
export async function uploadToGCS(
  fileBuffer: Buffer,
  fileName: string,
  contentType: string
): Promise<string> {
  try {
    const bucket = getGCSBucket();
    const file = bucket.file(fileName);
    
    // Upload file
    await file.save(fileBuffer, {
      metadata: {
        contentType,
      },
    });
    
    // Make file publicly accessible
    await file.makePublic();
    
    // Return public URL
    return `https://storage.googleapis.com/${process.env.GCS_BUCKET_NAME}/${fileName}`;
  } catch (error) {
    console.error('Error uploading to GCS:', error);
    throw new Error(`Failed to upload file to Google Cloud Storage: ${error instanceof Error ? error.message : 'Unknown error'}`);
  }
}
```

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

### TypeScript: Fetch and Filter CoinGecko List Example

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/services/coingeckoService/functions/getCoinList.mdx

An asynchronous TypeScript example demonstrating how to call `getCoinList`, log the number of fetched coins, and filter the results to find Solana-related cryptocurrencies, with robust error handling.

```typescript
import { getCoinList } from 'services/coingeckoService';

async function fetchCoins() {
  try {
    const coins = await getCoinList();
    console.log(`Loaded ${coins.length} coins`);
    
    // Example of filtering coins
    const solanaRelated = coins.filter(coin => 
      coin.name.toLowerCase().includes('solana') ||
      coin.symbol.toLowerCase().includes('sol')
    );
  } catch (error) {
    console.error('Failed to fetch coin list:', error);
  }
}
```

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

### Example: Displaying User Token List with useFetchTokens

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/modules/data-module/README.md

Demonstrates how to integrate the `useFetchTokens` hook with `@solana/wallet-adapter-react` and React Native components to fetch and display a user's fungible tokens. This example includes handling loading, error states, and refreshing the token list.

```typescript
import { useFetchTokens, TokenInfo } from '@/modules/data-module'; // Assuming @ is an alias for src
import { useWallet } from '@solana/wallet-adapter-react';
import React from 'react';
import { View, Text, FlatList, Image } from 'react-native';

function UserTokenList() {
  const { publicKey } = useWallet();
  const walletAddress = publicKey?.toBase58();
  const { tokens, loading, error, refetch } = useFetchTokens(walletAddress);

  if (loading) return <Text>Loading tokens...</Text>;
  if (error) return <Text>Error: {error}</Text>;

  return (
    <View>
      <Button title="Refresh Tokens" onPress={refetch} />
      <FlatList
        data={tokens}
        keyExtractor={(item: TokenInfo) => item.address}
        renderItem={({ item }) => (
          <View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
            {item.logoURI && <Image source={{ uri: item.logoURI }} style={{ width: 30, height: 30, marginRight: 10 }} />}
            <Text>{item.name} ({item.symbol})</Text>
            {/* You would typically fetch and display balance separately or enhance TokenInfo */}
          </View>
        )}
      />
    </View>
  );
}

export default UserTokenList;
```

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

### Configure Environment Variables

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/src/types/aura/README.md

Example .env file configuration for setting the server port and the Solana RPC URL.

```env
PORT=3000
RPC_URL=https://api.mainnet-beta.solana.com
```

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

### Example Usage of getMergedWalletTheme() in TypeScript

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/wallet/wallet.styles/functions/getMergedWalletTheme.mdx

This TypeScript example demonstrates how to use the `getMergedWalletTheme` function. It shows how to define a `customTheme` object with specific overrides for wallet background and text colors, and then how to apply these overrides to get a `mergedTheme`.

```typescript
const customTheme = {
  '--wallet-bg-primary': '#000000',
  '--wallet-text-primary': '#ffffff'
};
const mergedTheme = getMergedWalletTheme(customTheme);
```

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

### Example Usage of ProfileView Component

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/Profile/ProfileView/functions/default.mdx

Demonstrates how to instantiate and use the `ProfileView` component with various required and optional properties, showcasing a typical setup for displaying a user's profile.

```tsx
<ProfileView
  isOwnProfile={true}
  user={{
    address: '0x1234...',
    profilePicUrl: 'https://example.com/avatar.png',
    username: 'Alice'
  }}
  myPosts={allPosts}
  myNFTs={allNfts}
  loadingNfts={false}
  fetchNftsError={null}
/>
```

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

### Utilize Solana App Kit Services and Pre-built Screens

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/use.mdx

Demonstrates how to use `solana-app-kit` services for on-chain operations, such as `pumpfunService.buyTokenViaPumpfun`, and how to integrate pre-built screens like `PumpfunScreen` and `NftScreen` into a navigation stack for common functionalities.

```javascript
import { pumpfunService, PumpfunScreen, NftScreen } from 'solana-app-kit';

// Using services directly
async function buyToken() {
  try {
    const result = await pumpfunService.buyTokenViaPumpfun({
      // transaction parameters...
    });
    // Handle result
  } catch (error) {
    // Handle error
  }
}

// Or use pre-built screens
function MyApp() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="PumpFun" component={PumpfunScreen} />
        <Stack.Screen name="NFTs" component={NftScreen} />
        {/* Other screens */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

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

### Example Usage of SelectTokenModal Component in TSX

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/thread/trade/SelectTokenModal/functions/default.mdx

This code snippet demonstrates how to integrate and use the `SelectTokenModal` component within a React/TypeScript application. It illustrates the typical setup for controlling modal visibility, handling closure events, and processing the selected token.

```tsx
<SelectTokenModal
  visible={showTokenModal}
  onClose={() => setShowTokenModal(false)}
  onTokenSelected={(token) => {
    setSelectedToken(token);
    updateTradeAmount(token);
  }}
/>
```

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

### Alternative Commands for Development Mode

Source: https://github.com/sendarcade/solana-app-kit/blob/main/README.md

Provides alternative command-line options to run the Solana App Kit in development mode, demonstrating flexibility in execution via npm scripts or direct start flags.

```sh
npm run dev
```

```sh
npm start --dev
```

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

### Integrate Solana App Kit Settings with Redux (TypeScript)

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/shared/services/transactions/README.md

Illustrates how to retrieve current transaction settings from a Redux state. It shows examples of getting the transaction mode ('jito' | 'priority'), fee tier, and micro-lamports fee amount, indicating Redux as the state management solution.

```typescript
// Get current settings from Redux state
const transactionMode = getCurrentTransactionMode(); // 'jito' | 'priority'
const feeTier = getCurrentFeeTier(); // 'low' | 'medium' | 'high' | 'very-high'
const feeAmount = getCurrentFeeMicroLamports();
```

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

### Using the BuyCard Component in TypeScript

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/core/profile/components/buy-card/README.md

This snippet demonstrates how to import and integrate the `BuyCard` component into a React functional component. It illustrates the configuration of the component using props such as `defaultToken`, `availableTokens`, an `onPurchaseComplete` callback for handling transaction results, and `theme` for visual styling. This example showcases a typical setup for enabling token purchase functionality.

```typescript
import { BuyCard } from '@core/profile';

function TokenPurchaseScreen() {
  return (
    <BuyCard 
      defaultToken="SOL"
      availableTokens={['SOL', 'USDC', 'BONK']}
      onPurchaseComplete={(transaction) => {
        // Handle purchase completion
      }}
      theme="light"
    />
  );
}
```

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

### Express.js Route for Jupiter Swap Quote

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/src/routes/swap/README.md

An example Express.js route demonstrating how to handle a POST request for a Jupiter swap quote. It validates input parameters (inputMint, outputMint, amount), calls a controller function to get the quote, and handles both successful responses and errors, returning appropriate HTTP status codes and messages.

```typescript
import express, { Request, Response } from 'express';
import { jupiterController } from '../../controllers/jupiterSwapController';

const router = express.Router();

router.post('/quote', async (req: Request, res: Response) => {
  try {
    const { inputMint, outputMint, amount } = req.body;
    
    // Validate required parameters
    if (!inputMint || !outputMint || !amount) {
      return res.status(400).json({
        success: false,
        error: 'Missing required parameters'
      });
    }
    
    const quoteResult = await jupiterController.getQuote(inputMint, outputMint, amount);
    
    return res.status(200).json({
      success: true,
      data: quoteResult
    });
  } catch (error) {
    console.error('Error getting swap quote:', error);
    return res.status(500).json({
      success: false,
      error: error instanceof Error ? error.message : 'Failed to get swap quote'
    });
  }
});

export default router;
```

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

### Create Local Environment File

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/README.md

Copies the example environment file (.env.example) to create a new .env file, which is used for local configuration and should not be committed to version control.

```bash
cp .env.example .env
```

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

### Configure Google Cloud Build Deployment Files

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/README.md

Copies example configuration files for Google Cloud Platform deployment, including 'cloudbuild.yaml' for Cloud Build and 'deploy.sh' for a custom deployment script. It also makes the deployment script executable.

```bash
cp cloudbuild.yaml.example cloudbuild.yaml
cp deploy.sh.example deploy.sh
chmod +x deploy.sh
```

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

### Example Usage of CoinDetailLatestSection Component

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/CoinDetails/CoinDetailLatestSection/functions/default.mdx

A simple example demonstrating how to render the `CoinDetailLatestSection` component in a TSX/React application.

```tsx
<CoinDetailLatestSection />
```

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

### Render Prebuilt Components with Solana App Kit

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/use.mdx

Shows how to use a prebuilt component like `Thread` from `solana-app-kit`, passing necessary props such as `rootPosts` and `currentUser` to display content.

```javascript
import { Thread } from 'solana-app-kit';

function MyFeedScreen() {
  // Get user data from Redux or your application state
  const currentUser = { /* ...user data... */ };
  
  return (
    <Thread 
      rootPosts={myPosts} 
      currentUser={currentUser} 
    />
  );
}
```

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

### Example Usage of CoinDetailPhotosSection Component

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/CoinDetails/CoinDetailPhotosSection/functions/default.mdx

A simple TypeScript JSX example demonstrating how to render the `CoinDetailPhotosSection` component in a React application.

```tsx
<CoinDetailPhotosSection />
```

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

### TypeScript Profile Service Usage Examples

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/core/profile/services/README.md

Demonstrates how to import and utilize functions from the `@core/profile` module for fetching user profile data, updating profile information, recording profile-related actions, and retrieving action history.

```typescript
import { fetchUserProfile, updateProfileInfo } from '@core/profile';
import { recordProfileAction, getActionHistory } from '@core/profile';

// Example: Fetch user profile
const userProfile = await fetchUserProfile(userId);

// Example: Update profile info
await updateProfileInfo({
  displayName: 'New Name',
  bio: 'Updated bio information'
});
```

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

### Example Usage of PumpfunSellSection Component

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/pumpfun/PumpfunSellSection/functions/PumpfunSellSection.mdx

Illustrates how to use the `PumpfunSellSection` component in a React application, showing examples for both manual token input and scenarios with pre-selected tokens.

```tsx
// With manual token input
<PumpfunSellSection
  containerStyle={styles.customContainer}
  sellButtonLabel="Sell Now"
/>

// With pre-selected token
<PumpfunSellSection
  selectedToken={{
    mintPubkey: "5tMi...",
    uiAmount: 1000
  }}
  sellButtonLabel="Sell Token"
/>
```

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

### Clone Solana App Kit Backend Repository and Navigate

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/README.md

Clones the Solana App Kit backend server repository from GitHub and changes the current directory to the server folder, preparing for dependency installation.

```bash
git clone https://github.com/SendArcade/solana-app-kit.git
cd solana-app-kit/server
```

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

### Raydium Service: createAndLaunchToken API

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/modules/raydium/README.md

Describes the `createAndLaunchToken` function in `raydiumService.ts`, responsible for communicating with a backend service to initiate token creation and launch on Raydium Launchpad, supporting both simple and advanced configurations.

```APIDOC
raydiumService.ts:
  createAndLaunchToken(tokenData: LaunchpadTokenData, configData: LaunchpadConfigData, initialBuy?: object): Promise<any>
    Description: Communicates with a backend service to create and launch a token on Raydium Launchpad.
    Parameters:
      tokenData: LaunchpadTokenData - Basic token details (name, symbol, description, etc.).
      configData: LaunchpadConfigData - Configuration for the token launch (supply, bonding curve, vesting, etc.).
      initialBuy: object (optional) - Details for an initial token purchase if specified.
    Modes Supported:
      - "JustSendIt": Simple mode with pre-defined defaults.
      - "LaunchLab": Advanced mode with custom configuration.
```

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

### Install Mobile App Dependencies (pnpm)

Source: https://github.com/sendarcade/solana-app-kit/blob/main/README.md

Installs all required Node.js dependencies for the React Native mobile application using the pnpm package manager.

```sh
pnpm install
```

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

### Example Usage of SuggestionsCard Component

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/CoinDetails/suggestionsCard/suggestionsCard/functions/default.mdx

A simple example demonstrating how to render the `SuggestionsCard` component in a TSX/React application. Note that it currently uses hardcoded values for user information.

```tsx
<SuggestionsCard />
```

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

### Migrate to New TransactionService API

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/modules/wallet-providers/services/transaction/README.md

This example showcases the recommended approach for new code development, directly using the `TransactionService.signAndSendTransaction` static method. It illustrates how to structure the transaction and provider parameters for the new API, promoting a cleaner and more consistent transaction handling pattern.

```typescript
import { TransactionService } from '../../services/transaction/transactionService';

// New approach
const signature = await TransactionService.signAndSendTransaction(
  { type: 'transaction', transaction },
  { type: 'autodetect', provider, currentProvider: provider.type || 'privy' },
  { connection }
);
```

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

### Example Usage of CoinDetailTopSection React Component

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/CoinDetails/CoinDetailTopSection/functions/default.mdx

Demonstrates how to use the `CoinDetailTopSection` component with example `tweetData` passed as props, showcasing its integration in a React application.

```tsx
<CoinDetailTopSection
  tweetData={[
    {
      username: 'Alice',
      handle: '@alice',
      time: '2h',
      tweetContent: 'Check out $SEND!',
      quoteCount: 5,
      retweetCount: 10,
      reactionCount: 100,
      avatar: {uri: 'https://example.com/avatar.png'},
    },
  ]}
/>
```

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

### Build Application for Production

Source: https://github.com/sendarcade/solana-app-kit/blob/main/server/README.md

Runs the 'pnpm build' command to compile and optimize the application for production deployment. This process prepares the code for efficient execution in a production environment.

```bash
pnpm build
```

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

### TypeScript React Example for CoinDetailSearchBar Usage

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/CoinDetails/CoinDetailSearchBar/functions/default.mdx

A practical TypeScript React example demonstrating how to instantiate the `CoinDetailSearchBar` component and implement a simple callback function to log the `coinId` when a coin is selected.

```tsx
<CoinDetailSearchBar onSelectCoinId={(coinId) => console.log(coinId)} />
```

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

### Copy Server Environment Variable Template

Source: https://github.com/sendarcade/solana-app-kit/blob/main/README.md

Copies the `.env.example` file to `.env` to create a new environment configuration file for the server.

```sh
cp .env.example .env
```

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

### Configure Server Environment Variables (.env)

Source: https://github.com/sendarcade/solana-app-kit/blob/main/README.md

Example configuration for the server's `.env` file, including wallet keys, RPC URLs, program IDs, Pinata IPFS credentials, database connection strings, Google Cloud Storage details, and Supabase API keys.

```plaintext
WALLET_PRIVATE_KEY=your_wallet_private_key
RPC_URL=your_helius_rpc_url
TOKEN_MILL_PROGRAMID=your_token_mill_program_id
TOKEN_MILL_CONFIG_PDA=your_token_mill_config_pda
SWAP_AUTHORITY_KEY=your_swap_authority_key
COMMISSION_WALLET=your_commission_wallet_address

# Pinata for IPFS
PINATA_JWT=your_pinata_jwt
PINATA_GATEWAY=your_pinata_gateway
PINATA_SECRET=your_pinata_secret
PINATA_API_KEY=your_pinata_api_key

# Database and Storage
DATABASE_URL=your_postgresql_url
GCS_BUCKET_NAME=your_gcs_bucket_name
SERVICE_ACCOUNT_EMAIL=your_service_account_email

# Turnkey
TURNKEY_API_URL=https://api.turnkey.com
TURNKEY_ORGANIZATION_ID=your_turnkey_organization_id
TURNKEY_API_PUBLIC_KEY=your_turnkey_api_public_key
TURNKEY_API_PRIVATE_KEY=your_turnkey_api_private_key

# Supabase
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key
```

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

### TSX: PostHeader Component Usage Example

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/thread/post/PostHeader/functions/default.mdx

Example usage of the `PostHeader` component in TSX, demonstrating how to pass `postData`, handle menu press and post deletion events, and apply theme overrides.

```tsx
<PostHeader
  post={postData}
  onPressMenu={(post) => handleMenuPress(post)}
  onDeletePost={(post) => handleDelete(post)}
  themeOverrides={{ '--primary-color': '#1D9BF0' }}
/>
```

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

### LineGraph React Component Usage Example

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/references/components/CoinDetails/LineGraph/functions/default.mdx

An example demonstrating how to use the LineGraph component with various data points, timestamps, and optional execution markers, including a user avatar.

```tsx
<LineGraph
  data={[1.01, 1.02, 0.99, 1.05]}
  timestamps={[1692300000000, 1692303000000, 1692306000000, 1692309000000]}
  executionPrice={1.0}
  executionTimestamp={1692305000000}
  userAvatar={{ uri: 'https://example.com/avatar.png' }}
/>
```

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

### Solana Swap Module Usage Examples

Source: https://github.com/sendarcade/solana-app-kit/blob/main/src/modules/swap/README.md

This snippet demonstrates various ways to integrate and use the Swap Module within a Solana application. It shows how to render the default SwapScreen component, build custom user interfaces using the useSwapLogic hook for fine-grained control, and directly interact with the TradeService for executing swaps programmatically.

```typescript
import { SwapScreen, useSwapLogic, TradeService } from '@/modules/swap';

// Basic screen implementation
export default function CustomSwapScreen() {
  return <SwapScreen />;
}

// Custom implementation using hook
function CustomSwapImplementation() {
  const {
    inputToken,
    outputToken,
    handleSwap,
    // ... other swap logic
  } = useSwapLogic(routeParams, publicKey, connected, sendTransaction);
  
  // Custom UI implementation
}

// Direct service usage
const swapResult = await TradeService.executeSwap(
  inputToken,
  outputToken,
  amount,
  walletPublicKey,
  sendTransaction
);
```

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

### Pump.fun Token Creation and Purchase Example

Source: https://github.com/sendarcade/solana-app-kit/blob/main/docs/functions/pump.mdx

Demonstrates how to use the `pumpfunService` from `solana-app-kit` to create and initially buy a new token, and also how to purchase an existing token on Pump.fun. It shows asynchronous calls and basic error handling for both operations.

```javascript
import { pumpfunService } from 'solana-app-kit';

// Create and buy a new token
async function launchToken() {
  try {
    const result = await pumpfunService.createAndBuyTokenViaPumpfun({
      name: 'My Token',
      symbol: 'MTK',
      description: 'My first token on Pump.fun',
      amountInSol: 0.1
    });
    console.log('Token created:', result);
  } catch (error) {
    console.error('Error creating token:', error);
  }
}

// Buy an existing token
async function purchaseToken(tokenAddress) {
  try {
    const result = await pumpfunService.buyTokenViaPumpfun({
      tokenAddress,
      amountInSol: 0.5
    });
    console.log('Purchase successful:', result);
  } catch (error) {
    console.error('Error purchasing token:', error);
  }
}
```