# 05. Parking

## Secure Parking

Parking allows users to secure their tokens to keep them immovable even during private key compromise.

### Overview

**Purpose**: Park tokens and secure them.

**Key Features**:

* Park tokens to secure GSX amount
* Unpark tokens (with unfreezing period)
* Withdraw unfrozen tokens
* Query parked amounts and get rewards

**Location**: src/packages/parking/

***

### Blockchain Interactions

Parking uses **Polkadot.js API** to interact with the blockchain through extrinsics and queries.

**API Instance Configuration**:

* Uses Polkadot.js API instance (`api`)
* Requires signer for transactions

#### Park Tokens

Lock tokens by submitting a parking extrinsic.

**Extrinsic**: `api.tx.parking.park(amount)`

**Parameters**:

* `amount`: Amount of tokens to park (in smallest unit, typically 10^decimals)

**Implementation**:

```typescript
import { useGen6 } from '@/contexts/gen6-context'
import { BN } from 'bn.js'

function ParkTokens() {
  const { currentAccount, api } = useGen6()

  const handlePark = async (amount: string) => {
    // Convert to smallest unit
    const decimals = api.registry.chainDecimals[0]
    const amountBN = new BN(amount).mul(new BN(10).pow(new BN(decimals)))

    // Create extrinsic
    const extrinsic = api.tx.parking.park(amountBN)

    // Sign and submit
    await extrinsic.signAndSend(currentAccount.address, ({ status, events }) => {
      if (status.isInBlock) {
        console.log('Park transaction included in block')
      }
    })
  }

  return (
    <button onClick={() => handlePark('1000')}>
      Park 1000 GEN6 Tokens
    </button>
  )
}
```

***

#### Unpark Tokens

Request to unlock parked tokens (starts unfreezing period).

**Extrinsic**: `api.tx.parking.unpark(amount)`

**Parameters**:

* `amount`: Amount of tokens to unpark (in smallest unit)

**Implementation**:

```typescript
const handleUnpark = async (amount: string) => {
  const decimals = api.registry.chainDecimals[0]
  const amountBN = new BN(amount).mul(new BN(10).pow(new BN(decimals)))

  const extrinsic = api.tx.parking.unpark(amountBN)

  await extrinsic.signAndSend(currentAccount.address, ({ status, events }) => {
    if (status.isInBlock) {
      console.log('Unpark transaction included in block')
    }
  })
}
```

***

#### Withdraw Unfrozen Tokens

Withdraw tokens that have completed the unfreezing period.

**Extrinsic**: `api.tx.parking.unfreeze(account)`

**Parameters**:

* `account`: SS58-355 encoded account address

**Implementation**:

```typescript
const handleWithdraw = async () => {
  const extrinsic = api.tx.parking.unfreeze(currentAccount.address)

  await extrinsic.signAndSend(currentAccount.address, ({ status, events }) => {
    if (status.isInBlock) {
      console.log('Withdraw transaction included in block')
    }
  })
}
```

***

#### Query Account Balance

Check account balance for fee estimation and validation.

**Query**: `api.query.system.account(address)`

**Parameters**:

* `address`: SS58-355 encoded account address

**Response**:

```typescript
interface AccountInfo {
  nonce: number
  consumers: number
  providers: number
  sufficients: number
  data: {
    free: BN // Free balance
    reserved: BN // Reserved balance
    miscFrozen: BN // Misc frozen balance
    feeFrozen: BN // Fee frozen balance
  }
}
```

**Implementation**:

```typescript
import { useQuery } from '@tanstack/react-query'

function useTransferableBalance(address: string) {
  return useQuery({
    queryKey: ['balance', address],
    queryFn: async () => {
      const accountInfo = await api.query.system.account(address)
      return accountInfo.data
    },
    enabled: !!address
  })
}
```

**Usage**:

```typescript
const { data: balance } = useTransferableBalance(currentAccount.address)

// Calculate transferable balance (free - miscFrozen)
const transferable = balance.free.sub(balance.miscFrozen)
```

***

### Complete Implementation Example

```typescript
import { useState } from 'react'
import { useGen6 } from '@/contexts/gen6-context'
import { BN } from 'bn.js'
import { useQuery } from '@tanstack/react-query'

function ParkingManager() {
  const { currentAccount, api } = useGen6()
  const [parkAmount, setParkAmount] = useState('')
  const [unparkAmount, setUnparkAmount] = useState('')

  // Query account balance
  const { data: balance } = useQuery({
    queryKey: ['balance', address],
    queryFn: async () => {
      const accountInfo = await api.query.system.account(currentAccount.address)
      return accountInfo.data
    },
    enabled: !!currentAccount
  })

  const handlePark = async () => {
    if (!parkAmount || !currentAccount) return

    const decimals = api.registry.chainDecimals[0]
    const amountBN = new BN(parkAmount).mul(new BN(10).pow(new BN(decimals)))

    const extrinsic = api.tx.parking.park(amountBN)

    await extrinsic.signAndSend(currentAccount.address, ({ status, events }) => {
      if (status.isInBlock) {
        console.log('Parked successfully')
        setParkAmount('')
      }
    })
  }

  const handleUnpark = async () => {
    if (!unparkAmount || !currentAccount) return

    const decimals = api.registry.chainDecimals[0]
    const amountBN = new BN(unparkAmount).mul(new BN(10).pow(new BN(decimals)))

    const extrinsic = api.tx.parking.unpark(amountBN)

    await extrinsic.signAndSend(currentAccount.address, ({ status, events }) => {
      if (status.isInBlock) {
        console.log('Unpark requested successfully')
        setUnparkAmount('')
      }
    })
  }

  const handleWithdraw = async () => {
    if (!currentAccount) return

    const extrinsic = api.tx.parking.unfreeze(currentAccount.address)

    await extrinsic.signAndSend(currentAccount.address, ({ status, events }) => {
      if (status.isInBlock) {
        console.log('Withdrawal successful')
      }
    })
  }

  if (!balance) return <div>Loading...</div>

  const transferable = balance.free.sub(balance.miscFrozen)

  return (
    <div>
      <h3>Parking Manager</h3>
      <p>Transferable Balance: {transferable.toString()} GEN6</p>

      <div>
        <input
          type="number"
          value={parkAmount}
          onChange={(e) => setParkAmount(e.target.value)}
          placeholder="Amount to park"
        />
        <button onClick={handlePark}>Park Tokens</button>
      </div>

      <div>
        <input
          type="number"
          value={unparkAmount}
          onChange={(e) => setUnparkAmount(e.target.value)}
          placeholder="Amount to unpark"
        />
        <button onClick={handleUnpark}>Unpark Tokens</button>
      </div>

      <button onClick={handleWithdraw}>Withdraw Unfrozen Tokens</button>
    </div>
  )
}
```

***

### Integration with UI Components

The parking functionality is integrated into the main application through:

* **Parking Page**: src/routes/gsx-parking.tsx
* **Components**: src/packages/parking/components/
* **Hooks**: src/packages/parking/hooks/


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.gen6.life/developer-resources/sdk-and-tooling/g6-mw-and-chain-api-guide/05.-parking.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.