# Wagmi Connector

Wepin supports wallet connection using Wagmi. You can easily integrate the Wepin wallet through the Wagmi interface using <mark style="color:blue;">`@wepin/wagmi-connector`</mark>. For more details, please refer to the official Wagmi website below.

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

## Supported Networks

{% hint style="info" %}
Is the blockchain you need not listed? Please [contact the Wepin](https://wepinwallet.typeform.com/WEPIN-Wallet-EN) team for blockchain support.
{% 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>Klaytn 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>

## Installation

{% 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> should be installed and used together with <mark style="color:blue;">`wagmi`</mark> <mark style="color:blue;">`viem`</mark>.

{% hint style="warning" %}
`@wepin/wagmi-connector` is not used with `@wepin/sdk-js`.
{% endhint %}

## Getting Started

### Import Packages

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

### Define Connection Options

<mark style="color:blue;">`WepinConnectorOptions`</mark> are the property values required for the integration of wagmi and Wepin wallet.

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

* `appId`: \<strin&#x67;*>*\
  The ID assigned upon app registration
* `appKey`: \<strin&#x67;*>*\
  The key value assigned upon app registration
* `defaultChainId`**:<**&#x4E;umbe&#x72;*>* **optional**
  * Default Chain ID for wallet connection.&#x20;
  * If not specified, it will automatically connect to the first network registered in the app.
* **attributes**: *<*&#x49;WepinSDKAttributes> **optional**[<br>](https://github.com/WepinWallet/wepin-web-sdk-v1/tree/main/packages/sdk)Wepin connection attribute values declared in [@wepin/sdk-js](https://github.com/WepinWallet/wepin-web-sdk-v1/tree/main/packages/sdk)
  * type: \<strin&#x67;*>*\
    Display type setting when the widget is initialized. Currently, only `hide` is supported.
  * defaultLanguage: \<strin&#x67;*>*\
    Default language setting for the widget. The default value is `ko`. Currently, supported languages are `en` and `ko`.
  * defaultCurrenc&#x79;**:** \<strin&#x67;*>*\
    Default currency setting for the widget. The default value is `KRW`. Currently, supported currencies are `USD` and `KRW`.
  * loginProvider&#x73;**:** \<string\[]*>* **optional**  \
    List of login providers. Currently supported providers are `google`, `apple`, `naver`, and `discord`. Define only the necessary login providers.
    * If not specified, all provided providers can be used.
    * If an empty array is provided, only email login functionality is available (supported from <mark style="color:blue;">@wepin/sdk-js</mark> 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
  }
}
```

### Add WepinConnector to wagmi config

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

### Wrap App with WagmiConfig

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

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

## Verification&#x20;

For more detailed integration methods with `wagmi`, please refer to the wagmi guide below.

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

### Examples

Examples using <mark style="color:blue;">`wepin-wagmi-connector`</mark> can be found on GitHub below.

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