### Install UIGC Web Components (npm)

Source: https://github.com/galacticcouncil/apps/blob/master/packages/ui/README.md

Installs the UIGC Web Components package using npm. This is the first step to using the components in your project.

```sh
npm install @galacticcouncil/ui
```

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

### Run Development Server (Shell)

Source: https://github.com/galacticcouncil/apps/blob/master/packages/ui/README.md

Starts the development server for previewing and testing UIGC Web Components. This command is typically run from the project's root directory.

```sh
npm run dev
```

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

### Transaction Center Setup and Event Handling (HTML, JavaScript)

Source: https://context7.com/galacticcouncil/apps/llms.txt

Sets up the Transaction Center component for processing blockchain transactions and listening for transaction status updates. Requires 'apiAddress' and 'indexerUrl' for initialization. Dispatches custom events for transaction status changes.

```html
<gc-transaction-center
  apiAddress="wss://rpc.hydradx.cloud"
  indexerUrl="https://indexer.hydradx.io">

  <!-- Slot in your apps -->
  <gc-trade
    apiAddress="wss://rpc.hydradx.cloud"
    stableCoinAssetId="2"
    accountAddress="7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW"
    accountProvider="polkadot-js">
  </gc-trade>
</gc-transaction-center>

<script>
  // Transaction center automatically processes events from slotted components
  const txCenter = document.querySelector('gc-transaction-center');

  // Listen for transaction status updates
  txCenter.addEventListener('gc:tx:status', (e) => {
    console.log('Transaction status:', {
      hash: e.detail.hash,
      status: e.detail.status, // 'pending', 'success', 'error'
      blockHash: e.detail.blockHash
    });
  });
</script>
```

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

### Notification Center Setup and Manual Dispatch (HTML, JavaScript)

Source: https://context7.com/galacticcouncil/apps/llms.txt

Configures the Notification Center to display toast notifications and manage notification history. Allows for manual dispatching of new notifications via a custom event. Accepts 'maxToasts' and 'toastDuration' as configuration options.

```html
<gc-notification-center maxToasts="3" toastDuration="5000">
  <gc-trade
    apiAddress="wss://rpc.hydradx.cloud"
    stableCoinAssetId="2"
    accountAddress="7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW"
    accountProvider="polkadot-js">
  </gc-trade>
</gc-notification-center>

<script>
  // Manually dispatch notifications
  const notificationCenter = document.querySelector('gc-notification-center');

  function showNotification(message, type = 'default') {
    const notification = {
      id: crypto.randomUUID(),
      timestamp: Date.now(),
      message: message,
      type: type, // 'success', 'error', 'progress', 'default'
      toast: true,
      meta: { source: 'app' }
    };

    notificationCenter.dispatchEvent(
      new CustomEvent('gc:notification:new', {
        detail: notification,
        bubbles: true,
        composed: true
      })
    );
  }

  // Usage
  showNotification('Swap successful: 100 HDX → 5 DOT', 'success');
  showNotification('Transaction failed', 'error');
</script>
```

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

### Manage Assets and Balances (TypeScript)

Source: https://context7.com/galacticcouncil/apps/llms.txt

Illustrates how to interact with blockchain assets and user balances within a component. It shows how to retrieve asset information from the registry, check user balances, get USD prices, list tradeable assets, and calculate spot prices. Dependencies include '@galacticcouncil/sdk'.

```typescript
import { Asset, Amount } from '@galacticcouncil/sdk';

// Access asset registry in component
class MyComponent extends PoolApp {
  async onInit() {
    // Get asset by ID
    const hdx = this.assets.registry.get('0');
    console.log('Asset:', hdx.symbol, hdx.decimals);

    // Get user balance
    const balance = this.assets.balance.get('0');
    console.log('Balance:', {
      amount: balance.amount.toString(),
      decimals: balance.decimals,
      formatted: balance.toDecimal(balance.decimals)
    });

    // Get USD price
    const usdPrice = this.assets.usdPrice.get('0');
    console.log('Price: $', usdPrice);

    // Get all tradeable assets
    const tradeable = this.assets.tradeable;
    console.log('Tradeable assets:', tradeable.length);

    // Get spot price between assets
    const spotPrice = await this.getSpotPrice(
      this.assets.registry.get('0'),
      this.assets.registry.get('5')
    );
    console.log('Spot price:', spotPrice.toDecimal(spotPrice.decimals));
  }
}
```

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

### Integrating Trade App via HTML Custom Element

Source: https://github.com/galacticcouncil/apps/blob/master/packages/apps/README.md

This example shows how to embed the Trade App directly into an HTML page using the `gc-trade` custom element. It requires essential properties like `apiAddress` and `stableCoinAssetId`, and optionally accepts `accountAddress`, `accountProvider`, `accountName`, `pools`, and `assetIn`/`assetOut` for configuring trading behavior and user accounts.

```html
<gc-trade
  apiAddress="wss://rococo-basilisk-rpc.hydration.dev"
  accountAddress="your_account_address"
  accountProvider="polkadot-js"
  accountName="your_account_name"
  pools="XYK,LBP"></gc-trade>
```

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

### Build and Publish Packages with npm

Source: https://github.com/galacticcouncil/apps/blob/master/CONTRIBUTING.md

Builds all packages, publishes them to NPM, and pushes references to the origin. This is the final step in the release process.

```sh
npm run release
```

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

### TradeApi Class Initialization and Usage (TypeScript)

Source: https://context7.com/galacticcouncil/apps/llms.txt

Demonstrates the initialization and usage of the TradeApi class from '@galacticcouncil/apps' for trade operations. Includes utility functions for converting time periods to blocks and calculating optimal trades for TWAP orders. Requires Polkadot API and SdkCtx initialization.

```typescript
import { TradeApi } from '@galacticcouncil/apps';
import { ApiPromise } from '@polkadot/api';
import { SdkCtx } from '@galacticcouncil/sdk';

// Initialize API connection
const api = await ApiPromise.create({
  provider: new WsProvider('wss://rpc.hydradx.cloud')
});

const sdk = await SdkCtx.create({ api });

// Create trade API instance with config
const config = {
  slippage: '1',
  slippageTwap: '5',
  maxRetries: 3
};

const tradeApi = new TradeApi(api, sdk, config);

// Convert time period to blocks
const periodMs = 3600000; // 1 hour
const blockTime = 12000; // 12 seconds
const blockPeriod = tradeApi.toBlockPeriod(periodMs, blockTime);
console.log('Blocks:', blockPeriod); // 300

// Calculate optimal number of trades for TWAP
const priceDifference = 0.05; // 5% price impact
const optimalTrades = tradeApi.getOptimizedTradesNo(priceDifference);
console.log('Optimal trades:', optimalTrades); // 3 minimum

// Use in TWAP order
const twapOrder = await sdk.api.scheduler.getTwapSellOrder(
  '0', // assetIn
  '5', // assetOut
  '1000000000000', // amount
  optimalTrades
);
```

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

### Manage State with Reactive Database Controllers (TypeScript)

Source: https://context7.com/galacticcouncil/apps/llms.txt

Demonstrates state management using reactive database controllers with cursor-based subscriptions in a Lit component. It allows for watching account and configuration changes and accessing the current state. Dependencies include '@galacticcouncil/apps'.

```typescript
import {
  DatabaseController,
  Account,
  AccountCursor,
  TradeConfig,
  TradeConfigCursor
} from '@galacticcouncil/apps';

// In a Lit component
class MyTradeComponent extends LitElement {
  // Reactive account state
  protected account = new DatabaseController<Account>(this, AccountCursor);

  // Reactive config state
  protected config = new DatabaseController<TradeConfig>(
    this,
    TradeConfigCursor
  );

  // Watch for changes
  connectedCallback() {
    super.connectedCallback();

    const watchId = 'my-watch-' + Math.random();

    AccountCursor.addWatch(watchId, (_id, prev, curr) => {
      if (prev?.address !== curr?.address) {
        console.log('Account changed:', curr);
        this.onAccountChange(prev, curr);
      }
    });
  }

  // Access state
  render() {
    const account = this.account.state;
    const config = this.config.state;

    return html`
      <div>
        Account: ${account?.address}
        Slippage: ${config?.slippage}%
      </div>
    `;
  }
}

// Update state globally
AccountCursor.reset({
  address: '7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW',
  provider: 'polkadot-js',
  name: 'Alice'
});

TradeConfigCursor.reset({
  slippage: '2',
  slippageTwap: '5',
  maxRetries: 3
});
```

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

### Initiate Changeset for Releasing with npm

Source: https://github.com/galacticcouncil/apps/blob/master/CONTRIBUTING.md

Runs the changeset command to prepare for package releases. This step involves specifying new package versions and change summaries.

```sh
npm run changeset
```

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

### BondsApp Component Integration and Event Listening (HTML, JavaScript)

Source: https://context7.com/galacticcouncil/apps/llms.txt

Sets up the BondsApp component for trading bonds, managing protocol-owned liquidity, and purchasing bonds. It listens for 'gc:tx:new' events to track bond purchase activities.

```html
<gc-bonds
  apiAddress="wss://rpc.hydradx.cloud"
  stableCoinAssetId="2"
  accountAddress="7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW"
  accountProvider="polkadot-js"
  accountName="Eve"
  indexerUrl="https://indexer.hydradx.io"
  grafanaUrl="https://grafana.hydradx.io"
  grafanaDsn="1"
  chart="true">
</gc-bonds>

<script>
  const bondsApp = document.querySelector('gc-bonds');

  // Track bond purchases
  bondsApp.addEventListener('gc:tx:new', (e) => {
    console.log('Bond purchase:', e.detail);
  });
</script>
```

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

### Build Packages with npm

Source: https://github.com/galacticcouncil/apps/blob/master/CONTRIBUTING.md

Builds project packages using npm. This includes building distribution files with type definitions.

```sh
npm run build
```

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

### Build and Watch Packages with npm

Source: https://github.com/galacticcouncil/apps/blob/master/CONTRIBUTING.md

Builds packages and enables watch mode for JavaScript files with hot reloading. This is useful for rapid development cycles.

```sh
npm run build:watch
```

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

### YieldApp Component Integration and Event Listening (HTML, JavaScript)

Source: https://context7.com/galacticcouncil/apps/llms.txt

Integrates the YieldApp component for yield farming, liquidity provision, and reward claiming. Listens for 'gc:tx:new' events to log details about liquidity provision actions.

```html
<gc-yield
  apiAddress="wss://rpc.hydradx.cloud"
  stableCoinAssetId="2"
  accountAddress="7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW"
  accountProvider="polkadot-js"
  accountName="Dave"
  indexerUrl="https://indexer.hydradx.io"
  squidUrl="https://squid.hydradx.io">
</gc-yield>

<script>
  const yieldApp = document.querySelector('gc-yield');

  // Listen for liquidity provision
  yieldApp.addEventListener('gc:tx:new', (e) => {
    const { meta } = e.detail;
    console.log('Liquidity provision:', {
      amountIn: meta.amountIn,
      assetIn: meta.assetIn.symbol,
      amountYield: meta.amountInYield
    });
  });
</script>
```

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

### Trade App Component Integration

Source: https://context7.com/galacticcouncil/apps/llms.txt

Integrates the `gc-trade` Web Component for spot trading. It supports automatic routing and TWAP orders. Configuration is done via HTML attributes, and events like new transactions and scheduled TWAP orders can be listened to.

```html
<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import '@galacticcouncil/apps';
  </script>
</head>
<body>
  <gc-trade
    apiAddress="wss://rpc.hydradx.cloud"
    stableCoinAssetId="2"
    accountAddress="7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW"
    accountProvider="polkadot-js"
    accountName="Alice"
    pools="XYK,LBP,Omnipool"
    assetIn="0"
    assetOut="5"
    chart="true"
    twapOn="true">
  </gc-trade>

  <script>
    // Listen for transaction events
    document.querySelector('gc-trade').addEventListener('gc:tx:new', (e) => {
      const { account, transaction, notification, meta } = e.detail;
      console.log('Swap initiated:', {
        from: meta.assetIn.symbol,
        to: meta.assetOut.symbol,
        amountIn: meta.amountIn,
        amountOut: meta.amountOut
      });
    });

    // Listen for TWAP orders
    document.querySelector('gc-trade').addEventListener('gc:tx:scheduleDca', (e) => {
      console.log('TWAP order scheduled:', e.detail);
    });
  </script>
</body>
</html>
```

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

### Execute Swap with Slippage Protection (TypeScript)

Source: https://context7.com/galacticcouncil/apps/llms.txt

Integrates the SDK to calculate and execute token swaps with built-in slippage protection. It calculates the best trade route, builds the transaction with specified slippage, performs a dry run, estimates fees, and sends the transaction. Dependencies include '@galacticcouncil/sdk' and a blockchain API provider.

```typescript
import { SdkCtx } from '@galacticcouncil/sdk';

async function executeSwap() {
  const api = await ApiPromise.create({
    provider: new WsProvider('wss://rpc.hydradx.cloud')
  });

  const sdk = await SdkCtx.create({ api });

  // Calculate best sell route
  const trade = await sdk.api.router.getBestSell(
    '0', // HDX
    '5', // DOT
    '1000000000000' // 1 HDX (12 decimals)
  );

  console.log('Trade route:', trade.toHuman());

  // Build transaction with slippage
  const tx = await sdk.tx
    .trade(trade)
    .withSlippage(2) // 2% slippage
    .withBeneficiary('7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW')
    .build();

  // Dry run to validate
  const dryRun = await tx.dryRun('7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW');
  console.log('Dry run result:', dryRun.executionResult.toHuman());

  // Get payment info
  const paymentInfo = await tx.paymentInfo('7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW');
  console.log('Fee:', paymentInfo.partialFee.toString());

  // Sign and send
  const hash = await tx.signAndSend(signer);
  console.log('Transaction hash:', hash);
}
```

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

### Version, Lockfile, and Commit with Changeset

Source: https://github.com/galacticcouncil/apps/blob/master/CONTRIBUTING.md

Bumps package versions, updates the lockfile, and creates a commit message using the changeset tool. This prepares the project for publishing.

```sh
npm run changeset:version
```

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

### Communicate with Custom Events (TypeScript)

Source: https://context7.com/galacticcouncil/apps/llms.txt

Explains how to use custom events for component communication with typed payloads. It covers dispatching and listening for transaction events, query parameter updates, and wallet change requests. Dependencies include custom interfaces like 'TxInfo'.

```typescript
// Transaction events
interface TxInfo<T = any> {
  account: Account;
  transaction: SubstrateTransaction | Transaction;
  notification: TxNotification;
  meta?: T;
}

// Dispatch transaction
function dispatchSwapTx(
  element: HTMLElement,
  account: Account,
  transaction: SubstrateTransaction,
  meta: TradeMetadata
) {
  const event = new CustomEvent('gc:tx:new', {
    bubbles: true,
    composed: true,
    detail: {
      account,
      transaction,
      notification: {
        processing: { message: 'Swapping...', rawHtml: 'Swapping...' },
        success: { message: 'Swap successful', rawHtml: 'Swap successful' },
        failure: { message: 'Swap failed', rawHtml: 'Swap failed' }
      },
      meta
    } as TxInfo<TradeMetadata>
  });

  element.dispatchEvent(event);
}

// Listen for events
document.addEventListener('gc:tx:new', (e: CustomEvent<TxInfo>) => {
  const { account, transaction, notification, meta } = e.detail;

  // Process transaction
  submitTransaction(transaction, account);
});

// Query parameter updates
document.addEventListener('gc:query:update', (e: CustomEvent) => {
  const { assetIn, assetOut } = e.detail;
  console.log('URL params updated:', assetIn, assetOut);
});

// Wallet change requests
document.addEventListener('gc:wallet:change', (e: CustomEvent) => {
  const { srcChain } = e.detail;
  console.log('Wallet change requested for:', srcChain);
});
```

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

### Schedule TWAP Order Configuration (TypeScript)

Source: https://context7.com/galacticcouncil/apps/llms.txt

Configures and schedules Time-Weighted Average Price (TWAP) orders using the SDK. It retrieves TWAP order parameters, builds the transaction with specified slippage and retries, calculates execution time, and submits the TWAP order. Dependencies include '@galacticcouncil/sdk'.

```typescript
async function scheduleTwapOrder() {
  const sdk = await SdkCtx.create({ api });

  // Get TWAP order parameters
  const order = await sdk.api.scheduler.getTwapSellOrder(
    '0', // HDX
    '5', // DOT
    '10000000000000', // 10 HDX total
  );

  console.log('Order details:', {
    tradeCount: order.tradeCount,
    tradeAmountIn: order.toHuman().tradeAmountIn,
    frequency: order.frequency,
    frequencyMin: order.frequencyMin,
    frequencyOpt: order.frequencyOpt
  });

  // Build TWAP transaction
  const tx = await sdk.tx
    .order(order)
    .withBeneficiary('7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW')
    .withMaxRetries(3)
    .withSlippage(5) // 5% slippage for TWAP
    .build();

  // Calculate duration
  const duration = sdk.api.scheduler.getTwapExecutionTime(order.tradeCount);
  console.log('Execution time:', duration, 'ms');

  // Submit
  const hash = await tx.signAndSend(signer);
  console.log('TWAP scheduled:', hash);
}
```

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

### Link Local Modules with npm

Source: https://github.com/galacticcouncil/apps/blob/master/CONTRIBUTING.md

Links local modules using npm. This command is typically used during local development to ensure that local packages are correctly linked.

```sh
npm run link
```

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

### Load API Viewer Manifest Dynamically with JavaScript

Source: https://github.com/galacticcouncil/apps/blob/master/pages/api-viewer/public/index.html

This JavaScript code fetches the 'custom-elements.json' manifest and applies it to the 'api-viewer' component. It utilizes the EventSource API to reload the page upon changes detected by esbuild, ensuring the UI reflects the latest manifest data. No external libraries are required.

```javascript
new EventSource('/esbuild').addEventListener('change', () => location.reload());
fetch('./custom-elements.json')
  .then((res) => res.json())
  .then(({ schema, schemaVersion, modules }) => {
    document.querySelector('api-viewer').manifest = {
      schema: schema,
      schemaVersion: schemaVersion,
      modules: modules,
    };
  });
```

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

### Use UIGC Alert Component (HTML)

Source: https://github.com/galacticcouncil/apps/blob/master/packages/ui/README.md

Demonstrates how to use the UIGC alert web component in HTML. The 'variant' attribute controls the appearance of the alert.

```html
<uigc-alert variant="success"></uigc-alert>
```

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

### Style API Viewer with CSS Themes

Source: https://github.com/galacticcouncil/apps/blob/master/pages/api-viewer/public/index.html

This CSS snippet defines theming for the API Viewer component based on HTML attributes. It sets primary colors for 'bsx' and 'hdx' themes, ensuring visual consistency. It also sets the maximum width for the viewer.

```css
html[theme='bsx'] api-viewer { --ave-primary-color: rgb(4, 176, 135); }
html[theme='hdx'] api-viewer { --ave-primary-color: #01579b; }
api-viewer { max-width: 100%; }
```

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

### XCM App Component Integration

Source: https://context7.com/galacticcouncil/apps/llms.txt

Integrates the `gc-xcm` Web Component for cross-chain transfers across various blockchain ecosystems. It allows configuration of source and destination chains, assets, and account details. Event listeners handle transfer confirmations and wallet change requests, and the destination address can be set programmatically.

```html
<gc-xcm
  srcChain="hydration"
  destChain="polkadot"
  asset="dot"
  accountAddress="7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW"
  accountProvider="polkadot-js"
  accountName="Charlie"
  apiAddress="wss://rpc.hydradx.cloud"
  stableCoinAssetId="2"
  ss58Prefix="0"
  ecosystem="polkadot"
  addressBookEnabled="true">
</gc-xcm>

<script>
  const xcmApp = document.querySelector('gc-xcm');

  // Listen for cross-chain transfers
  xcmApp.addEventListener('gc:xcm:new', (e) => {
    const { account, transaction, notification, meta } = e.detail;
    console.log('XCM Transfer:', {
      from: meta.srcChain,
      to: meta.dstChain,
      srcFee: meta.srcChainFee + ' ' + meta.srcChainFeeSymbol,
      dstFee: meta.dstChainFee + ' ' + meta.dstChainFeeSymbol,
      tags: meta.tags
    });
  });

  // Handle wallet change requests
  xcmApp.addEventListener('gc:wallet:change', (e) => {
    console.log('Wallet change needed for:', e.detail.srcChain);
    // Prompt user to switch wallet
  });

  // Programmatically set destination address
  xcmApp.destAddress = '15oF4uVJwmo4TdGW7VfQxNLavjCXviqxT9S1MgbjMNHr6Sp5';
</script>
```

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

### Integrating XCM App via HTML Custom Element

Source: https://github.com/galacticcouncil/apps/blob/master/packages/apps/README.md

This snippet demonstrates the integration of the Xcm App using the `gc-xcm` custom element in HTML. It requires chain-related properties such as `chains`, `srcChain`, and `destChain`, along with optional account details like `accountAddress`, `accountProvider`, and `accountName`. The `asset` property specifies the asset for the cross-chain transaction.

```html
<gc-xcm
  srcChain="polkadot"
  destChain="hydration"
  asset="dot"
  accountAddress="your_account_address"
  accountProvider="polkadot-js"
  accountName="your_account_name"></gc-xcm>
```

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

### Dispatching New Transactions via JavaScript

Source: https://github.com/galacticcouncil/apps/blob/master/packages/apps/README.md

This code illustrates how to dispatch custom events for new on-chain or cross-chain transactions. It uses the `TxInfo` type for the message payload and dispatches events for 'gc:tx:new' (on-chain) and 'gc:xcm:new' (cross-chain). The `TxInfo` type includes details like the user's account, transaction specifics, notification metadata, and other transaction-related metadata.

```javascript
this.dispatchEvent(new CustomEvent() < TxInfo > ('gc:tx:new', message)); // on chain tx
this.dispatchEvent(new CustomEvent() < TxInfo > ('gc:xcm:new', message)); // cross chain tx
```

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

### JavaScript for Live Reloading on File Changes

Source: https://github.com/galacticcouncil/apps/blob/master/pages/apps-web/public/index.html

Implements a JavaScript EventSource to listen for 'change' events from the '/esbuild' endpoint. Upon receiving a 'change' event, it triggers a page reload to reflect the latest updates, commonly used in development environments.

```javascript
new EventSource('/esbuild').addEventListener('change', () => location.reload());
```

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

### DCA App Component Integration

Source: https://context7.com/galacticcouncil/apps/llms.txt

Integrates the `gc-dca` Web Component for Dollar Cost Averaging. This component enables automated recurring trades with customizable frequency and duration. It listens for schedule events and handles errors through notification events.

```html
<gc-dca
  apiAddress="wss://rpc.hydradx.cloud"
  stableCoinAssetId="2"
  accountAddress="7L53bUTBbfuj14oDr6pMKvv72YwNUZJNjZPE3z5cpCPbqEDW"
  accountProvider="polkadot-js"
  accountName="Bob"
  assetIn="2"
  assetOut="0"
  chart="true"
  indexerUrl="https://indexer.hydradx.io"
  grafanaUrl="https://grafana.hydradx.io"
  grafanaDsn="1">
</gc-dca>

<script>
  const dcaApp = document.querySelector('gc-dca');

  // Listen for DCA schedule events
  dcaApp.addEventListener('gc:tx:scheduleDca', (e) => {
    const { transaction, notification, meta } = e.detail;
    console.log('DCA Order:', {
      budget: meta.amountIn,
      asset: meta.assetIn.symbol,
      target: meta.assetOut.symbol,
      notification: notification.processing.rawHtml
    });
  });

  // Error handling
  dcaApp.addEventListener('gc:notification:new', (e) => {
    if (e.detail.type === 'error') {
      console.error('DCA Error:', e.detail.message);
    }
  });
</script>
```

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

### Import UIGC Web Components (JavaScript)

Source: https://github.com/galacticcouncil/apps/blob/master/packages/ui/README.md

Imports the UIGC Web Components into your JavaScript application. This makes the custom elements available for use.

```js
import '@galacticcouncil/ui';
```

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

### Xcm App Component

Source: https://github.com/galacticcouncil/apps/blob/master/packages/apps/README.md

Bare cross-chain transaction app component for XCM transfers without integrated tx and notification centers.

```APIDOC
## Xcm App Component

### Description
Bare cross chain transaction app without tx & notification center. Use this component for direct XCM transfers.

### Method
Custom Element

### Endpoint
`<gc-xcm>`

### Parameters
#### Properties
- **accountAddress** (string) - account address. Optional.
- **accountProvider** (string) - account provider. Optional.
- **accountName** (string) - account name. Optional.
- **chains** (string) - listed chains. Required.
- **srcChain** (string) - source chain. Required.
- **destChain** (string) - destination chain. Required.
- **asset** (string) - asset to transfer. Required.

### Request Example
```html
<gc-xcm
  srcChain="polkadot"
  destChain="hydration"
  asset="dot"
  accountAddress="your_account_address"
  accountProvider="polkadot-js"
  accountName="your_account_name"></gc-xcm>
```

### Response
N/A (This is a UI component)
```

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

### Trade App Component

Source: https://github.com/galacticcouncil/apps/blob/master/packages/apps/README.md

Bare trade app component for performing trades without integrated tx and notification centers.

```APIDOC
## Trade App Component

### Description
Bare trade app without tx & notification center. Use this component for direct trade interactions.

### Method
Custom Element

### Endpoint
`<gc-trade>`

### Parameters
#### Properties
- **apiAddress** (string) - chain ws address. Required.
- **stableCoinAssetId** (string) - stablecoin id. Required.
- **accountAddress** (string) - account address. Optional.
- **accountProvider** (string) - account provider. Optional.
- **accountName** (string) - account name. Optional.
- **pools** (string) - list of pools. Optional.
- **assetIn** (string) - asset in id. Optional.
- **assetOut** (string) - asset out id. Optional.

### Request Example
```html
<gc-trade
  apiAddress="wss://rococo-basilisk-rpc.hydration.dev"
  accountAddress="your_account_address"
  accountProvider="polkadot-js"
  accountName="your_account_name"
  pools="XYK,LBP"></gc-trade>
```

### Response
N/A (This is a UI component)
```

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

### Main Content Area Styling for Galactic Apps

Source: https://github.com/galacticcouncil/apps/blob/master/pages/apps-web/public/index.html

Styles the main content area, adjusting margins based on the toolbar height and defining padding and height for the '#app' div within 'main' based on screen size using media queries.

```css
main {
  width: 100%;
  margin-top: var(--toolbar-height);
  min-height: calc(100vh - var(--toolbar-height));
}

@media (min-width: 768px) {
  main > div#app {
    padding: 44px 0px;
  }
}

@media (max-width: 480px) {
  main > div#app {
    height: 100%;
  }
}
```

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

### Dispatching New Notifications via JavaScript

Source: https://github.com/galacticcouncil/apps/blob/master/packages/apps/README.md

This snippet demonstrates how to dispatch a custom event to notify the Notification Center about a new notification. It requires a `Notification` type for the message payload and specifies that the event should be displayed as a toast. The `id`, `timestamp`, `message`, `type`, and `toast` attributes are crucial for proper notification handling.

```javascript
this.dispatchEvent(
  new CustomEvent() < Notification > ('gc:notification:new', message)
);
```

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

### Header and Navigation Styling for Galactic Apps

Source: https://github.com/galacticcouncil/apps/blob/master/pages/apps-web/public/index.html

Styles the header for fixed positioning and backdrop filter effects, adapting background colors based on themes ('bsx', 'hdx'). It also styles navigation links and their text, including hover effects and theme-specific font properties.

```css
body {
  margin: 0;
}

header {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 5;
  height: var(--toolbar-height);
  width: 100%;
  backdrop-filter: blur(16px);
  background: rgba(0, 0, 0, 0.2);
  -webkit-box-align: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

html[theme='bsx'] header {
  background: rgba(28, 26, 31, 0.2);
}

html[theme='hdx'] header {
  background: rgba(0, 0, 0, 0.2);
}

nav a {
  text-decoration: none;
}

nav a span {
  font-family: var(--uigc-app-font);
  font-size: 16px;
  line-height: 18px;
  margin-right: 32px;
}

html nav a span:hover {
  color: rgb(255, 255, 255);
}

html[theme='bsx'] nav span {
  font-family: var(--uigc-app-font);
  font-weight: 600;
  color: rgb(158, 169, 177);
}

html[theme='hdx'] nav span {
  font-family: var(--uigc-app-font);
  text-transform: uppercase;
  color: rgb(189, 204, 212);
}
```

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

### Notification Center API

Source: https://github.com/galacticcouncil/apps/blob/master/packages/apps/README.md

API for the Notification Center component, used to display app notifications and history.

```APIDOC
## Notification Center API

### Description
Display app notifications (toast) and related history (drawer) based on slotted component event.

### Method
`dispatchEvent`

### Endpoint
`gc:notification:new`

### Parameters
#### Event Payload
- **message** (Notification) - The notification object to be dispatched.

### Request Example
```javascript
this.dispatchEvent(
  new CustomEvent('gc:notification:new', message)
);
```

### Response
N/A (This is an event-driven API)

### Types
#### Notification Type
- **id** (string) - unique notification id
- **timestamp** (number) - unix timestamp
- **message** (string | HTMLElement) - string or html template
- **type** (string) - notification type
- **toast** (boolean) - whether to display toast
```

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

### Global CSS Variables and Scrollbar Styling for Galactic Apps

Source: https://github.com/galacticcouncil/apps/blob/master/pages/apps-web/public/index.html

Defines global CSS variables for toolbar and footer heights, and customizes the appearance of scrollbars for vertical and horizontal scrolling. It also sets a default background for HTML elements and specific background properties for the 'hdx' theme.

```css
:root {
  --toolbar-height: 65px;
  --footer-height: 60px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar:horizontal {
  width: 0px;
  height: 0px;
}

::-webkit-scrollbar-thumb:vertical {
  background: #676c80;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: rgb(28, 32, 56);
  border-radius: 3px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  background: var(--uigc-app-background);
}

html[theme='hdx'] {
  height: 474px;
  background-repeat: no-repeat;
  background-color: var(--uigc-app-background-color);
}
```

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

### Transaction Center API

Source: https://github.com/galacticcouncil/apps/blob/master/packages/apps/README.md

API for the Transaction Center component, handling transaction processing and status display.

```APIDOC
## Transaction Center API

### Description
Process transaction & display status based on slotted component event. Dispatch result to Notification center.

### Method
`dispatchEvent`

### Endpoint
`gc:tx:new` (on chain tx), `gc:xcm:new` (cross chain tx)

### Parameters
#### Event Payload
- **message** (TxInfo) - The transaction information object to be dispatched.

### Request Example
```javascript
// On chain transaction
this.dispatchEvent(new CustomEvent('gc:tx:new', message));

// Cross chain transaction
this.dispatchEvent(new CustomEvent('gc:xcm:new', message));
```

### Response
N/A (This is an event-driven API)

### Types
#### TxInfo Type
- **account** (string) - User account (wallet)
- **transaction** (object) - Transaction info (extrinsic, hex)
- **notification** (object) - Notification center metadata
- **meta** (object) - Transaction metadata
```

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

### HTML: Define Font Face with uigc-font-face

Source: https://github.com/galacticcouncil/apps/blob/master/packages/ui/doc/font.md

This HTML snippet demonstrates how to define a custom font using the `@font-face` CSS rule within a `<style>` tag. The `uigc-font-face` attribute is crucial for the UIGC Web Components framework to identify and utilize this custom font definition, overriding its default font loading mechanism.

```html
<style type="text/css" uigc-font-face="">
  @font-face {
    font-family: 'SatoshiVariable';
    src: url('assets/font/Satoshi-Variable.ttf') format('truetype');
    font-display: auto;
    font-weight: 100 900;
  }
</style>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.