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