# Wagmi Connector

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

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

### 연결 옵션 정의

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

#### WepinConnectorOptions : *Object*

* **appId**: <*String>*\
  앱 등록 시 할당 받은 ID
* **appKey**: <*String>*\
  앱 등록 시 할당 받은 키 값
* **defaultChainId:** *Number*
  * 지갑을  연결하기 위한 기본 Chain ID.
  * 값을 지정하지 않으면 앱에 등록된 첫 번째 네트워크로 자동 연결됩니다.&#x20;
* **attributes**: *<*&#x49;Attributes> *(optional)*\
  [@wepin/types](https://github.com/WepinWallet/wepin-js-sdk-types)에 선언된 위핀 연결 속성 값&#x20;
  * **type**: *String*\
    `show` 값을 넣으면 위젯 initialize 과정에서 위젯 화면을 볼 수 있습니다.&#x20;
  * **defaultLanguage**: *String*\
    위젯 기본 언어 설정, 기본 값은 `ko`입니다. 현재 지원하는 언어는 `en`, `ko` 2가지 입니다.
  * **defaultCurrency:** *String*\
    위젯 기본 통화 설정, 기본 값은 `KRW`입니다. 현재 지원하는 통화는 `USD`, `KRW` 2가지 입니다.

```javascript
const connectorOptions: WepinConnectorOptions = {
  appId: 'YOUR_APP_ID',
  appKey: 'YOUR_APP_KEY',
  defaultChainId: 1, // optional
  attributes: {  // optional
    type: 'show',
    defaultLanguage: 'ko',
    defaultCurrency: 'krw'
  }
}
```

### wagmi config에 WepinConnector 추가

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

### \`WagmiConfig\`로 app 래핑

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

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

## 확인하기

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

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

### 예제

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

{% embed url="<https://github.com/WepinWallet/wepin-wagmi-connector/tree/main/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/deprecated/web-javascript-sdk/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.