# 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>" %}