Network & Infrastructure

Network management and Web3 infrastructure components for seamless multi-chain experiences.

The Network & Infrastructure category provides essential components for managing blockchain networks, transactions, and Web3 infrastructure. From network switching to transaction monitoring and cross-chain bridges.

Components Overview

ChainSelector - Seamless multi-chain network selection and switching
TransactionStatus - Real-time transaction monitoring and status updates
Web3Gate - Token-gated access control and verification
BlockExplorer - Embedded blockchain exploration and transaction lookup
NetworkStatus - Network health monitoring and congestion tracking
BridgeInterface - Cross-chain bridge integration and asset transfers

Key Features

Multi-Chain Support: Ethereum, Polygon, Arbitrum, Optimism, BSC, Solana, and more
Real-time Monitoring: Live network status, gas prices, and transaction tracking
Cross-Chain Bridges: Integrated support for major bridge protocols
Network Health: Congestion monitoring, block time tracking, and validator status
Token Gating: Built-in access control based on token holdings
Developer Tools: Embedded block explorers and transaction debugging

Quick Start

Set up network management and monitoring:

<template>
  <div class="space-y-6">
    <!-- Network Selection -->
    <div class="flex justify-between items-center">
      <ChainSelector
        :selected-chain="currentChain"
        :supported-chains="supportedChains"
        @chain-change="handleChainChange"
      />

      <NetworkStatus
        :chain="currentChain"
        :show-gas-price="true"
        :show-block-time="true"
      />
    </div>

    <!-- Transaction Monitoring -->
    <TransactionStatus
      v-if="pendingTransactions.length"
      :transactions="pendingTransactions"
      :auto-refresh="true"
      @transaction-confirmed="handleTransactionConfirmed"
    />

    <!-- Cross-Chain Bridge -->
    <BridgeInterface
      v-if="showBridge"
      :from-chain="bridgeFrom"
      :to-chain="bridgeTo"
      :supported-tokens="bridgeTokens"
      @bridge-initiated="handleBridgeInitiated"
    />

    <!-- Block Explorer -->
    <BlockExplorer
      :chain="currentChain"
      :default-view="'transactions'"
      :wallet-address="userAddress"
      embedded
    />

    <!-- Token Gated Content -->
    <Web3Gate
      :required-tokens="gateRequirements"
      :user-address="userAddress"
      @access-granted="handleAccessGranted"
      @access-denied="handleAccessDenied"
    >
      <template #locked>
        <div class="text-center p-8">
          <h3 class="text-lg font-semibold mb-2">Premium Content</h3>
          <p class="text-gray-600 mb-4">Hold 10+ SUPA tokens to access</p>
          <UButton variant="outline">View Requirements</UButton>
        </div>
      </template>

      <template #unlocked>
        <div class="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg">
          <h3 class="text-lg font-semibold text-green-700">Welcome Premium Member!</h3>
          <p class="text-green-600">You have access to exclusive features.</p>
        </div>
      </template>
    </Web3Gate>
  </div>
</template>

<script setup>
const currentChain = ref('ethereum')
const supportedChains = ref([
  'ethereum', 'polygon', 'arbitrum', 'optimism', 'bsc'
])

const pendingTransactions = ref([
  {
    hash: '0x123...',
    type: 'swap',
    status: 'pending',
    confirmations: 2
  }
])

const showBridge = ref(false)
const bridgeFrom = ref('ethereum')
const bridgeTo = ref('polygon')

const gateRequirements = ref([
  {
    token: 'SUPA',
    amount: 10,
    chain: 'ethereum'
  }
])

const handleChainChange = (newChain) => {
  currentChain.value = newChain
  console.log('Switched to:', newChain)
}

const handleTransactionConfirmed = (tx) => {
  console.log('Transaction confirmed:', tx)
  // Remove from pending list
}

const handleBridgeInitiated = (bridgeData) => {
  console.log('Bridge initiated:', bridgeData)
  // Track bridge transaction
}
</script>

Common Patterns

Network Switching

<ChainSelector
  :current-chain="activeChain"
  :supported-chains="supportedNetworks"
  show-testnet
  @switch-network="handleNetworkSwitch"
/>

Transaction Tracking

<TransactionStatus
  :transaction-hash="txHash"
  :show-receipt="true"
  :auto-refresh="5000"
/>

Network Health Dashboard

<NetworkStatus
  :chains="monitoredChains"
  :show-validators="true"
  :alert-threshold="alertThresholds"
/>

Advanced Features

Multi-Chain Network Dashboard

<template>
  <div class="space-y-6">
    <!-- Network Overview -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div
        v-for="chain in networkData"
        :key="chain.id"
        class="bg-white dark:bg-gray-800 p-4 rounded-lg border"
      >
        <div class="flex items-center justify-between mb-2">
          <div class="flex items-center gap-2">
            <img :src="chain.logo" class="w-6 h-6" />
            <span class="font-semibold">{{ chain.name }}</span>
          </div>
          <div
            :class="[
              'w-3 h-3 rounded-full',
              chain.status === 'healthy' ? 'bg-green-500' :
              chain.status === 'slow' ? 'bg-yellow-500' :
              'bg-red-500'
            ]"
          />
        </div>

        <div class="space-y-1 text-sm">
          <div class="flex justify-between">
            <span class="text-gray-600">Gas Price:</span>
            <span class="font-mono">{{ chain.gasPrice }} gwei</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Block Time:</span>
            <span class="font-mono">{{ chain.blockTime }}s</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">TPS:</span>
            <span class="font-mono">{{ chain.tps }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Detailed Network Status -->
    <NetworkStatus
      :chains="selectedChains"
      :detailed-view="true"
      :historical-data="true"
      @alert="handleNetworkAlert"
    />
  </div>
</template>

<script setup>
const networkData = ref([
  {
    id: 'ethereum',
    name: 'Ethereum',
    logo: '/chains/ethereum.png',
    status: 'healthy',
    gasPrice: 25,
    blockTime: 12,
    tps: 15
  },
  {
    id: 'polygon',
    name: 'Polygon',
    logo: '/chains/polygon.png',
    status: 'healthy',
    gasPrice: 30,
    blockTime: 2,
    tps: 65
  }
  // ... more chains
])

const handleNetworkAlert = (alert) => {
  console.log('Network alert:', alert)
  // Handle network issues
}
</script>

Cross-Chain Bridge Interface

<template>
  <BridgeInterface
    :from-chain="fromChain"
    :to-chain="toChain"
    :supported-tokens="bridgeableTokens"
    :bridge-providers="bridgeProviders"
    @bridge-quote="handleBridgeQuote"
    @bridge-execute="handleBridgeExecute"
  >
    <template #bridge-selector>
      <div class="grid grid-cols-2 gap-4 mb-4">
        <!-- From Chain -->
        <div class="space-y-2">
          <label class="text-sm font-medium">From</label>
          <USelectMenu
            v-model="fromChain"
            :options="supportedChains"
            option-attribute="name"
            value-attribute="id"
          >
            <template #option="{ option }">
              <div class="flex items-center gap-2">
                <img :src="option.logo" class="w-5 h-5" />
                <span>{{ option.name }}</span>
              </div>
            </template>
          </USelectMenu>
        </div>

        <!-- To Chain -->
        <div class="space-y-2">
          <label class="text-sm font-medium">To</label>
          <USelectMenu
            v-model="toChain"
            :options="supportedChains"
            option-attribute="name"
            value-attribute="id"
          >
            <template #option="{ option }">
              <div class="flex items-center gap-2">
                <img :src="option.logo" class="w-5 h-5" />
                <span>{{ option.name }}</span>
              </div>
            </template>
          </USelectMenu>
        </div>
      </div>
    </template>

    <template #bridge-info="{ quote }">
      <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
        <h4 class="font-semibold mb-2">Bridge Information</h4>
        <div class="space-y-1 text-sm">
          <div class="flex justify-between">
            <span>Estimated Time:</span>
            <span>{{ quote.estimatedTime }}</span>
          </div>
          <div class="flex justify-between">
            <span>Bridge Fee:</span>
            <span>{{ quote.fee }} {{ quote.feeToken }}</span>
          </div>
          <div class="flex justify-between">
            <span>You'll Receive:</span>
            <span class="font-semibold">{{ quote.outputAmount }} {{ quote.outputToken }}</span>
          </div>
        </div>
      </div>
    </template>
  </BridgeInterface>
</template>

<script setup>
const fromChain = ref('ethereum')
const toChain = ref('polygon')

const bridgeProviders = ref([
  'polygon-bridge',
  'arbitrum-bridge',
  'hop-protocol',
  'multichain'
])

const handleBridgeQuote = (quote) => {
  console.log('Bridge quote:', quote)
}

const handleBridgeExecute = (bridgeData) => {
  console.log('Executing bridge:', bridgeData)
}
</script>

Token-Gated Access Control

Connect Your Wallet

Please connect your wallet to access this content

<template>
  <div class="space-y-6">
    <!-- Multiple Gate Requirements -->
    <Web3Gate
      :requirements="premiumGateRequirements"
      :user-address="userAddress"
      :operator="'AND'"
      @verification-complete="handleVerification"
    >
      <template #checking>
        <div class="flex items-center justify-center p-8">
          <UIcon name="i-lucide-loader-2" class="w-8 h-8 animate-spin" />
          <span class="ml-2">Verifying access...</span>
        </div>
      </template>

      <template #denied="{ missing }">
        <div class="text-center p-8 bg-red-50 dark:bg-red-900/20 rounded-lg">
          <UIcon name="i-lucide-lock" class="w-12 h-12 mx-auto mb-4 text-red-500" />
          <h3 class="text-lg font-semibold text-red-700 dark:text-red-300 mb-2">Access Denied</h3>
          <p class="text-red-600 dark:text-red-400 mb-4">You don't meet the requirements:</p>
          <ul class="text-sm text-red-600 dark:text-red-400 space-y-1">
            <li v-for="req in missing" :key="req.id">
              • {{ req.description }}
            </li>
          </ul>
          <UButton variant="outline" class="mt-4" @click="checkRequirements">
            Refresh Check
          </UButton>
        </div>
      </template>

      <template #granted>
        <div class="bg-green-50 dark:bg-green-900/20 p-6 rounded-lg">
          <div class="flex items-center mb-4">
            <UIcon name="i-lucide-check-circle" class="w-6 h-6 text-green-500 mr-2" />
            <h3 class="text-lg font-semibold text-green-700 dark:text-green-300">Access Granted</h3>
          </div>

          <!-- Premium Content -->
          <div class="space-y-4">
            <h4 class="font-semibold">Premium Features</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="border border-green-200 dark:border-green-800 p-4 rounded">
                <h5 class="font-medium mb-2">Advanced Analytics</h5>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                  Detailed portfolio analytics and insights
                </p>
              </div>
              <div class="border border-green-200 dark:border-green-800 p-4 rounded">
                <h5 class="font-medium mb-2">Priority Support</h5>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                  Direct access to our support team
                </p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Web3Gate>

    <!-- NFT-Based Access -->
    <Web3Gate
      :requirements="nftGateRequirements"
      :verification-method="'nft-ownership'"
      class="mt-6"
    >
      <template #granted>
        <div class="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-4">
            NFT Holder Exclusive
          </h3>
          <p class="text-purple-600 dark:text-purple-400">
            Welcome to the exclusive NFT holders area!
          </p>
        </div>
      </template>
    </Web3Gate>
  </div>
</template>

<script setup>
const premiumGateRequirements = ref([
  {
    type: 'token',
    token: 'SUPA',
    amount: 100,
    chain: 'ethereum',
    description: 'Hold 100+ SUPA tokens'
  },
  {
    type: 'staking',
    protocol: 'supaweb3-staking',
    amount: 50,
    description: 'Stake 50+ SUPA tokens'
  }
])

const nftGateRequirements = ref([
  {
    type: 'nft',
    collection: '0x123...',
    amount: 1,
    description: 'Own at least 1 NFT from collection'
  }
])

const handleVerification = (result) => {
  console.log('Access verification:', result)
}
</script>

Transaction Monitoring

Real-time Transaction Dashboard

<TransactionStatus
  :transactions="allTransactions"
  :group-by="'status'"
  :auto-refresh="true"
  show-gas-tracker
/>

Transaction Debugging

<BlockExplorer
  :chain="selectedChain"
  :transaction-hash="debugTxHash"
  :debug-mode="true"
  show-trace
/>

Network Performance Monitoring

Gas Price Tracking

<NetworkStatus
  :chains="monitoredChains"
  :gas-alerts="gasAlertSettings"
  historical-gas-data
/>

Validator Monitoring

<NetworkStatus
  :show-validators="true"
  :validator-alerts="validatorSettings"
  :uptime-tracking="true"
/>

Cross-Chain Infrastructure

Multi-Chain Wallet Balance

<ChainSelector
  :show-balances="true"
  :balance-threshold="minBalance"
  @insufficient-balance="handleInsufficientBalance"
/>

Bridge Status Monitoring

<BridgeInterface
  :active-bridges="userBridges"
  :status-tracking="true"
  @bridge-completed="handleBridgeComplete"
/>

Integration Examples

Complete Infrastructure Dashboard

<template>
  <div class="infrastructure-dashboard space-y-8">
    <!-- Network Health Overview -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
      <div class="lg:col-span-3">
        <NetworkStatus
          :chains="allChains"
          :detailed-view="true"
          :real-time="true"
        />
      </div>
      <div>
        <ChainSelector
          :current-chain="activeChain"
          :supported-chains="supportedChains"
          show-balances
        />
      </div>
    </div>

    <!-- Transaction Monitoring -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <TransactionStatus
        :transactions="pendingTxs"
        title="Pending Transactions"
        :auto-refresh="true"
      />

      <BlockExplorer
        :chain="activeChain"
        :default-view="'recent'"
        embedded
        compact
      />
    </div>

    <!-- Bridge Interface -->
    <BridgeInterface
      v-if="showBridge"
      :from-chain="bridgeFrom"
      :to-chain="bridgeTo"
      :supported-bridges="availableBridges"
    />

    <!-- Access Control Gates -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <Web3Gate
        :requirements="memberGate"
        title="Member Area"
      >
        <template #granted>
          <MemberDashboard />
        </template>
      </Web3Gate>

      <Web3Gate
        :requirements="premiumGate"
        title="Premium Features"
      >
        <template #granted>
          <PremiumFeatures />
        </template>
      </Web3Gate>
    </div>
  </div>
</template>

ChainSelector - Network selection and switching
TransactionStatus - Transaction monitoring
Web3Gate - Token-gated access control

Airdrops & Rewards

Complete airdrop lifecycle management from eligibility checking to reward distribution and vesting.