# DApp에 텔레포트 연결 추가

## 텔레포트 지갑 커넥터

<figure><img src="/files/gwA5ku2ogVxPI57TULDX" alt=""><figcaption></figcaption></figure>

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

### 지갑 연결 방식

#### 모바일

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

#### 데스크탑

* QR 코드를 생성하여 모바일 지갑을 통해 연결하거나
* 동일 디바이스에 텔레포트 지갑 데이터가 저장된 경우, **인앱 연결 페이지**로 자동 이동합니다.

### 설치하기

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

```bash
npm install @teleport-wallet/connector
```

또는 Yarn을 사용하는 경우:

```bash
yarn add @teleport-wallet/connector
```

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

{% embed url="<https://www.npmjs.com/package/@teleport-wallet/connector>" %}

### Code Overview

```typescript
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>
  );
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.teleportwallet.net/developer/connect.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.