@teleport-wallet/connector

Teleport Connector for Wagmi

A wagmi connector for Teleport Wallet.

Installation

# npm
npm install teleport-wagmi-connector wagmi viem

# yarn
yarn add teleport-wagmi-connector wagmi viem

# pnpm
pnpm add teleport-wagmi-connector wagmi viem

Usage

import { createConfig, http } from 'wagmi'
import { silicon } from 'wagmi/chains'
import { teleportConnector } from 'teleport-wagmi-connector'

const config = createConfig({
    chains: [silicon],
    transports: {
        [silicon.id]: http()
    },
    connectors: [
        teleportConnector({
            projectId: 'YOUR_PROJECT_ID',
            // Required: metadata about your dApp
            metadata: {
                name: 'Your App',
                description: 'Your app description',
                url: 'https://yourdapp.com',
                icons: ['https://yourdapp.com/icon.png']
            },
            // Optional: customize the QR code modal
            qrModalOptions: {
                title: 'Connect with Teleport Wallet',
                theme: {
                    modalBackgroundColor: '#ffffff',
                    titleColor: '#1a1a1a',
                    textColor: '#555555',
                }
            }
        })
    ]
})

React Integration

import {WagmiProvider} from 'wagmi'
import {useConnect, useAccount, useDisconnect} from 'wagmi/react'
import {teleportConnector} from "./teleportConnector";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";

// First, set up the wagmi config as shown above

const queryClient = new QueryClient()

function App() {
    return (
        <WagmiProvider config={config}>
            <QueryClientProvider client={queryClient}>
                <YourConnectButton/>
            </QueryClientProvider>
        </WagmiProvider>
    )
}

function YourConnectButton() {
    const {connect, connectors} = useConnect()
    const {address, isConnected} = useAccount()
    const {disconnect} = useDisconnect()

    // Find the Teleport connector
    const teleportConnector = connectors.find(c => c.id === 'teleport')

    if (isConnected) {
        return (
            <div>
                <p>Connected to {address}</p>
                <button onClick={() => disconnect()}>Disconnect</button>
            </div>
        )
    }

    if (typeof teleportConnector === 'undefined') {
        return null
    }

    return (
        <button onClick={() => connect({connector: teleportConnector})}>
            Connect with Teleport
        </button>
    )
}

How It Works

• On desktop: Displays a QR code in a modal that can be scanned with the Teleport website.
• On mobile: Opens the Teleport wallet in a new tab directly through link
• Supports Silicon Network chain

Configuration Options

Option	Required	Description
projectId	Yes	Your WalletConnect project ID
metadata	Yes	Information about your dApp (name, description, url, icons)
qrModalOptions	No	Custom options for the QR code modal (title, colors, size, etc.)

Implementation Note

This connector extends WalletConnect connector from @wagmi/connectors to provide a seamless integration with Teleport wallet. It handles QR code display on desktop and deep linking on mobile devices.

License

MIT