> For the complete documentation index, see [llms.txt](https://wiki.gen6.life/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.gen6.life/technology-core/developer-resources/sdk-and-tooling/gen6-mw-and-chain-api-guide/05.-parking.md).

# 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/