# Wagmi Connector

위핀에서는 wagmi를 이용한 지갑 연결을 지원하고 있습니다. <mark style="color:blue;">`@wepin/wagmi-connector`</mark>로 wagmi interface를 통한 위핀 지갑 연동을 손쉽게 할 수 있습니다. 이에 대한 자세한 내용은 아래 wagmi 공식 사이트에서 확인 가능합니다.

{% embed url="<https://wagmi.sh/>" %}

## 지원 네트워크 <a href="#supported-networks" id="supported-networks"></a>

{% hint style="info" %}
목록에 필요한 블록체인이 없나요? [위핀 팀에 요청](https://wepinwallet.typeform.com/WEPIN-Wallet)하여 별도의 비용 없이 블록체인을 추가할 수 있습니다.
{% endhint %}

<table><thead><tr><th width="172.33333333333331">Chain ID</th><th>Network Name</th><th>Network Variable</th></tr></thead><tbody><tr><td>1</td><td>Ethereum Mainnet</td><td>ethereum</td></tr><tr><td>5</td><td>Ethereum Goerli Testnet</td><td>evmeth-goerli</td></tr><tr><td>8217</td><td>Kaia Mainnet</td><td>klaytn</td></tr><tr><td>1001</td><td>Kaia Kairos Testnet</td><td>klaytn-testnet</td></tr><tr><td>19</td><td>Songbird Canary Network</td><td>evmsongbird</td></tr><tr><td>137</td><td>Polygon Mainnet</td><td>evmpolygon</td></tr><tr><td>2731</td><td>TimeNetwork Testnet</td><td>evmtime-elizabeth</td></tr><tr><td>11155111</td><td>Ethereum Sepolia Testnet</td><td>evmeth-sepolia</td></tr><tr><td>80002</td><td>Polygon Amoy Testnet</td><td>evmpolygon-amoy</td></tr></tbody></table>

## 설치(Install)

{% tabs %}
{% tab title="npm" %}

```bash
npm install wagmi viem @wepin/wagmi-connector
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add wagmi viem @wepin/wagmi-connector
```

{% endtab %}
{% endtabs %}

<mark style="color:blue;">`@wepin/wagmi-connector`</mark> 는 <mark style="color:blue;">`wagmi`</mark> <mark style="color:blue;">`viem`</mark> 과 함께 설치해서 사용합니다.&#x20;

{% hint style="warning" %}
`@wepin/wagmi-connector`는 `@wepin/sdk-js 와 함께 사용하지 않습니다.`
{% endhint %}

## 시작하기 <a href="#getting-started" id="getting-started"></a>

### 패키지 import  <a href="#import-packages" id="import-packages"></a>

```javascript
import { WepinConnector } from '@wepin/wagmi-connector'
import type { WepinConnectorOptions } from '@wepin/wagmi-connector' 
```

### 연결 옵션 정의 <a href="#define-connection-options" id="define-connection-options"></a>

<mark style="color:blue;">`WepinConnectorOptions`</mark>는 wagmi와 위핀 지갑의 연동을 위해 필요한 속성 값입니다.&#x20;

#### WepinConnectorOptions \<objec&#x74;*>*

* `appId`: \<strin&#x67;*>*\
  앱 등록 시 할당 받은 ID
* `appKey`: \<strin&#x67;*>*\
  앱 등록 시 할당 받은 키 값
* `defaultChainId`**:<**&#x4E;umbe&#x72;*>* **optional**
  * 지갑을  연결하기 위한 기본 Chain ID.
  * 값을 지정하지 않으면 앱에 등록된 첫 번째 네트워크로 자동 연결됩니다.&#x20;
* **attributes**: *<*&#x49;WepinSDKAttributes> **optional**[\
  @wepin/sdk-js](https://github.com/WepinWallet/wepin-web-sdk-v1/tree/main/packages/sdk) 에 선언된 위핀 연결 속성 값&#x20;
  * type: \<strin&#x67;*>*\
    위젯이 초기화될때의 Display 타입 설정, 현재 지원하는 타입은  `hide`  입니다.
  * defaultLanguage: \<strin&#x67;*>*\
    위젯 기본 언어 설정, 기본 값은 `ko`입니다. 현재 지원하는 언어는 `en`, `ko` 2가지 입니다.
  * defaultCurrenc&#x79;**:** \<strin&#x67;*>*\
    위젯 기본 통화 설정, 기본 값은 `KRW`입니다. 현재 지원하는 통화는 `USD`, `KRW` 2가지 입니다.
  * loginProvider&#x73;**:** \<string\[]*>* **optional**

    로그인 프로바이더 리스트 입니다.   현재 지원하는 프로바이더는 `google`, `apple` , `naver`, `discord` 이렇게 4가지 입니다.  필요한 로그인 프로바이더만 정의해서 사용하세요. &#x20;

    * 이 값을 지정하지 않으면  제공하는 모든 프로바이더를 이용할 수 있습니다.
    * 빈 배열이 제공된 경우, 이메일 로그인 기능만 사용 가능합니다. ([@wepin/sdk-js](https://github.com/WepinWallet/wepin-web-sdk-v1/tree/main/packages/sdk) v0.0.3 버전 이상부터  지원)

```javascript
const connectorOptions: WepinConnectorOptions = {
  appId: 'YOUR_APP_ID',
  appKey: 'YOUR_APP_KEY',
  defaultChainId: 1, // optional
  attributes: {  // optional
    type: 'hide',
    defaultLanguage: 'ko',
    defaultCurrency: 'krw',
    loginProviders: ['google', 'apple'] //optional
  }
}
```

### wagmi config에 WepinConnector 추가 <a href="#add-wepinconnector-to-wagmi-config" id="add-wepinconnector-to-wagmi-config"></a>

```javascript
const config = createConfig({
  connectors: [
    // ... Other connectors,
    new WepinConnector({
      chains,
      options: connectorOptions,
    }),
  ],
  publicClient,
})
```

### \`WagmiConfig\`로 app 래핑 <a href="#wrap-app-with-wagmiconfig" id="wrap-app-with-wagmiconfig"></a>

```javascript
import { WagmiConfig } from 'wagmi'

function App() {
  return (
    <WagmiConfig config={config}>
      <YourRoutes />
    </WagmiConfig>
  )
}
```

## 확인하기 <a href="#verification" id="verification"></a>

이후 `wagmi`와의 자세한 연동 방법은 아래 wagmi 가이드에서 확인하세요.&#x20;

{% embed url="<https://wagmi.sh/react/getting-started>" %}

### 예제 <a href="#examples" id="examples"></a>

<mark style="color:blue;">`wepin-wagmi-connector`</mark>를 사용한 예제는 아래 깃허브에서 확인 가능합니다.

{% embed url="<https://github.com/WepinWallet/wepin-wagmi-connector/tree/main_v1/example>" %}


---

# 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.wepin.io/widget-integration/web-javascript-sdk/provider/wagmi-connector.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.