DApp에 텔레포트 연결 추가

코드 한 줄만으로 DApp에 텔레포트 지갑 연결 기능 추가하기

텔레포트 지갑 커넥터

@teleport-wallet/connector는 Wagmi 라이브러리와 함께 사용할 수 있는 커넥터 패키지로, 코드 한 줄만으로 DApp에 텔레포트 지갑 연결 기능을 손쉽게 추가할 수 있습니다.

지갑 연결 방식

모바일

• 텔레포트 지갑의 인앱 연결 페이지로 자동 리디렉션되어 지갑 연결을 진행합니다.

데스크탑

• QR 코드를 생성하여 모바일 지갑을 통해 연결하거나

• 동일 디바이스에 텔레포트 지갑 데이터가 저장된 경우, 인앱 연결 페이지로 자동 이동합니다.

설치하기

@teleport-wallet/connector 패키지를 설치하려면 아래 명령어를 사용하면 됩니다:

npm install @teleport-wallet/connector

또는 Yarn을 사용하는 경우:

yarn add @teleport-wallet/connector

자세한 사항은 아래 링크를 참조하세요.

npm: @teleport-wallet/connectornpm

Code Overview

import { teleportConnector } from 'teleport-wagmi-connector'
import { useConnect, useAccount, useDisconnect } from 'wagmi/react'

const connector = 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 custom QR modal styling and options
  qrModalOptions: {
    title: 'Connect with Teleport Wallet',
    theme: {
      modalBackgroundColor: '#ffffff',
      modalBorderRadius: '12px',
      titleColor: '#1a1a1a',
      textColor: '#555555',
      primaryColor: '#3396FF',
      closeButtonColor: '#999999'
    }
  }
})

function ConnectButton() {
  const { connect, connectors } = useConnect()
  const { address, isConnected } = useAccount()
  const { disconnect } = useDisconnect()
  
  // Find the Teleport connector
  const teleportConnectorInstance = connectors.find(c => c.id === 'teleport')

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

  return (
    <button 
      onClick={() => connect({ connector: teleportConnectorInstance })}
      disabled={!teleportConnectorInstance?.ready}
    >
      Connect with Teleport
    </button>
  )
}

const queryClient = new QueryClient();

// Main App
export function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <div className="app">
          <header>
            <h1>Teleport Wallet Demo</h1>
          </header>
          <main>
            <div className="wallet-container">
              <h2>Connect Your Wallet</h2>
              <ConnectButton />
            </div>

            {/* Additional app content would go here */}

          </main>
          <footer>
            <p>Built with Teleport Wagmi Connector</p>
          </footer>
        </div>
      </QueryClientProvider>
    </WagmiProvider>
  );
}