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