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:

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:

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:

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:

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:

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:

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

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

---

Complete Implementation Example

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/