Getting Started

import { useEffect, useState } from 'react'

// Portal imports
import { BackupMethods, Portal, PortalContextProvider } from '@portal-hq/core'
import Keychain from '@portal-hq/keychain'
import GoogleDriveStorage from '@portal-hq/gdrive-storage'
import { PasswordStorage } from '@portal-hq/utils/src/definitions'

const MyAppComponent = () => {
  // Store the Portal instance in the state
  const [portal, setPortal] = useState<Portal>(null)

  useEffect(() => {
    if (!portal) {
      // Initialize backup storage providers.
      const gDriveStorage = new GoogleDriveStorage({
        androidClientId: 'YOUR_ANDROID_CLIENT_ID',
        iosClientId: 'YOUR_IOS_CLIENT_ID',
      })
      const passwordStorage = new PasswordStorage()

      // Create a Portal instance — Portal gateway handles RPC for 10 built-in chains automatically.
      setPortal(
        new Portal({
          autoApprove: true, // If you want to auto-approve transactions
          apiKey: 'YOUR_PORTAL_CLIENT_API_KEY',
          backup: {
            [BackupMethods.GoogleDrive]: gDriveStorage,
            [BackupMethods.Password] : passwordStorage
          },
          // Optional: Override the default gateway for specific chains, or add chains beyond the built-in 10
          // gatewayConfig: { 'eip155:1': 'https://mainnet.infura.io/v3/YOUR_INFURA_API_KEY' },
          // Optional: Enable logging for debugging and monitoring
          // logLevel: 'debug', // 'none' (default), 'error', 'warn', 'info', or 'debug'
        }),
      )
    }
  }, [portal])

  return (
    {/* Expose your Portal instance to your app */}
    <PortalContextProvider value={portal as Portal}>
      {/**
        * Now all children rendered in this scope
        * will have access to the `Portal` instance
        * via the `usePortal` hook
        */}
    </PortalContextProvider>
  )
}

export default MyAppComponent

import { buildDefaultGatewayConfig } from '@portal-hq/utils'

// Option 1: fully custom config (replaces defaults entirely)
new Portal({
  apiKey: 'YOUR_PORTAL_CLIENT_API_KEY',
  backup: { /* ... */ },
  gatewayConfig: {
    'eip155:1': 'https://mainnet.infura.io/v3/YOUR_INFURA_API_KEY',
    'eip155:137': 'https://polygon-mainnet.infura.io/v3/YOUR_INFURA_API_KEY',
  },
})

// Option 2: start from the defaults and add additional chains
new Portal({
  apiKey: 'YOUR_PORTAL_CLIENT_API_KEY',
  backup: { /* ... */ },
  gatewayConfig: {
    ...buildDefaultGatewayConfig('api.portalhq.io'),
    'eip155:42161': 'https://arb-mainnet.g.alchemy.com/v2/YOUR_KEY', // Arbitrum
  },
})